@thecb/components 10.6.1-beta.0 → 10.6.2-beta.0

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.
Files changed (49) hide show
  1. package/dist/index.cjs.js +1055 -304
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +42 -18
  4. package/dist/index.esm.js +1051 -304
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/atoms/icons/DisabledAccountsAddIcon.js +200 -0
  8. package/src/components/atoms/icons/DisabledPaymentMethodsAddIcon.js +62 -0
  9. package/src/components/atoms/icons/DisabledPropertiesAddIcon.js +54 -0
  10. package/src/components/atoms/icons/PropertiesAddIcon.js +1 -0
  11. package/src/components/atoms/icons/WalletIconSmall.js +3 -7
  12. package/src/components/atoms/icons/icons.stories.js +11 -1
  13. package/src/components/atoms/icons/index.js +7 -1
  14. package/src/components/atoms/index.js +1 -0
  15. package/src/components/atoms/placeholder/Placeholder.js +150 -108
  16. package/src/components/atoms/placeholder/Placeholder.stories.js +2 -0
  17. package/src/components/atoms/placeholder/Placeholder.theme.js +8 -2
  18. package/src/components/atoms/spinner/Spinner.js +13 -5
  19. package/src/components/atoms/spinner/index.d.ts +4 -0
  20. package/src/components/atoms/toggle-switch/ToggleSwitch.js +33 -61
  21. package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js +2 -3
  22. package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js +5 -5
  23. package/src/components/atoms/wallet-name/WalletName.js +102 -0
  24. package/src/components/atoms/wallet-name/WalletName.stories.js +24 -0
  25. package/src/components/atoms/wallet-name/index.d.ts +15 -0
  26. package/src/components/atoms/wallet-name/index.js +3 -0
  27. package/src/components/molecules/editable-list/EditableList.js +3 -1
  28. package/src/components/molecules/editable-list/EditableList.stories.js +1 -3
  29. package/src/components/molecules/link-card/LinkCard.theme.js +7 -21
  30. package/src/components/molecules/modal/Modal.js +6 -217
  31. package/src/components/molecules/modal/Modal.stories.js +57 -13
  32. package/src/components/molecules/modal/ModalControlV1.js +234 -0
  33. package/src/components/molecules/modal/ModalControlV2.js +218 -0
  34. package/src/components/molecules/modal/__private__/ButtonLayoutWrapper.js +24 -0
  35. package/src/components/molecules/modal/__private__/CancelButton.js +36 -0
  36. package/src/components/molecules/modal/__private__/CloseButton.js +34 -0
  37. package/src/components/molecules/modal/__private__/CloseIconButton.js +39 -0
  38. package/src/components/molecules/modal/__private__/ContinueButton.js +45 -0
  39. package/src/components/molecules/modal/__private__/index.d.ts +59 -0
  40. package/src/components/molecules/modal/__private__/index.js +5 -0
  41. package/src/components/molecules/partial-amount-form/PartialAmountField.js +49 -0
  42. package/src/components/molecules/partial-amount-form/PartialAmountForm.js +8 -22
  43. package/src/components/molecules/radio-section/InnerRadioSection.js +7 -2
  44. package/src/components/molecules/registration-form/RegistrationForm.js +6 -3
  45. package/src/components/molecules/registration-form/RegistrationForm.state.js +4 -3
  46. package/src/constants/style_constants.d.ts +18 -6
  47. package/src/constants/style_constants.js +23 -20
  48. package/src/components/atoms/.DS_Store +0 -0
  49. package/src/components/atoms/icons/.DS_Store +0 -0
package/dist/index.cjs.js CHANGED
@@ -4908,27 +4908,51 @@ var themeUtils = /*#__PURE__*/Object.freeze({
4908
4908
 
4909
4909
  /* These are constants used by nav frontend components */
4910
4910
 
4911
- var HEADER_HEIGHT = "104px";
4912
- var FOOTER_HEIGHT = "100px";
4913
- var SPACER_HEIGHT = "65px";
4914
- var JUMBO_HEIGHT = "300px";
4915
- var COMPACT_JUMBO_HEIGHT = "65px";
4911
+ var BORDER_RADIUS = {
4912
+ MD: "4px" // Figma: Corners/Standard Corner
4913
+ };
4914
+ var BORDER_THIN = "1px";
4915
+ var FONT_SIZE = {
4916
+ XS: "0.750rem",
4917
+ // 12px
4918
+ SM: "0.875rem",
4919
+ // 14px
4920
+ MD: "1.000rem",
4921
+ // 16px
4922
+ LG: "1.125rem",
4923
+ // 18px
4924
+ XL: "1.250rem" //20px
4925
+ };
4916
4926
  var FONT_WEIGHT_REGULAR = "400";
4917
- var FONT_WEIGHT_BOLD = "700";
4918
4927
  var FONT_WEIGHT_SEMIBOLD = "600";
4928
+ var FONT_WEIGHT_BOLD = "700";
4929
+ var FOOTER_HEIGHT = "100px";
4930
+ var HEADER_HEIGHT = "104px";
4931
+ var COMPACT_JUMBO_HEIGHT = "65px";
4932
+ var JUMBO_HEIGHT = "300px";
4933
+ var SPACER_HEIGHT = "65px";
4919
4934
  var LINK_TEXT_DECORATION = "underline solid 1px";
4935
+ var SPACING = {
4936
+ XS: "1.0rem",
4937
+ // Figma: Spacing/XS
4938
+ MD: "1.5rem" // Figma: Spacing/Normal
4939
+ };
4920
4940
 
4921
4941
  var style_constants = /*#__PURE__*/Object.freeze({
4922
4942
  __proto__: null,
4923
- HEADER_HEIGHT: HEADER_HEIGHT,
4924
- FOOTER_HEIGHT: FOOTER_HEIGHT,
4925
- SPACER_HEIGHT: SPACER_HEIGHT,
4926
- JUMBO_HEIGHT: JUMBO_HEIGHT,
4927
- COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
4943
+ BORDER_RADIUS: BORDER_RADIUS,
4944
+ BORDER_THIN: BORDER_THIN,
4945
+ FONT_SIZE: FONT_SIZE,
4928
4946
  FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
4929
- FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
4930
4947
  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
4931
- LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
4948
+ FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
4949
+ FOOTER_HEIGHT: FOOTER_HEIGHT,
4950
+ HEADER_HEIGHT: HEADER_HEIGHT,
4951
+ COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
4952
+ JUMBO_HEIGHT: JUMBO_HEIGHT,
4953
+ SPACER_HEIGHT: SPACER_HEIGHT,
4954
+ LINK_TEXT_DECORATION: LINK_TEXT_DECORATION,
4955
+ SPACING: SPACING
4932
4956
  });
4933
4957
 
4934
4958
  /*
@@ -13561,8 +13585,7 @@ var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackVal
13561
13585
  var WalletIconSmall = function WalletIconSmall(_ref) {
13562
13586
  var themeValues = _ref.themeValues,
13563
13587
  _ref$iconIndex = _ref.iconIndex,
13564
- iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
13565
- colorOverride = _ref.colorOverride;
13588
+ iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
13566
13589
  return /*#__PURE__*/React__default.createElement("svg", {
13567
13590
  width: "20",
13568
13591
  height: "20",
@@ -13573,7 +13596,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
13573
13596
  fillRule: "evenodd",
13574
13597
  clipRule: "evenodd",
13575
13598
  d: "M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z",
13576
- fill: colorOverride || themeValues.singleIconColor
13599
+ fill: themeValues.singleIconColor
13577
13600
  }), /*#__PURE__*/React__default.createElement("mask", {
13578
13601
  id: "mask0_503_574-".concat(iconIndex),
13579
13602
  style: {
@@ -13594,7 +13617,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
13594
13617
  }, /*#__PURE__*/React__default.createElement("rect", {
13595
13618
  width: "20",
13596
13619
  height: "20",
13597
- fill: colorOverride || themeValues.singleIconColor
13620
+ fill: themeValues.singleIconColor
13598
13621
  })));
13599
13622
  };
13600
13623
  var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$2, "primary");
@@ -18438,6 +18461,285 @@ var TrashIconV2 = function TrashIconV2(_ref) {
18438
18461
  };
18439
18462
  var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$2, "primary");
18440
18463
 
18464
+ var DisabledAccountsAddIcon = function DisabledAccountsAddIcon() {
18465
+ return /*#__PURE__*/React__default.createElement("svg", {
18466
+ width: "100",
18467
+ height: "100",
18468
+ viewBox: "0 0 100 100",
18469
+ fill: "none",
18470
+ xmlns: "http://www.w3.org/2000/svg"
18471
+ }, /*#__PURE__*/React__default.createElement("path", {
18472
+ fillRule: "evenodd",
18473
+ clipRule: "evenodd",
18474
+ d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V84.5326C31.2213 84.5326 55.7247 98.7028 77.0408 78.1002Z",
18475
+ fill: "white"
18476
+ }), /*#__PURE__*/React__default.createElement("path", {
18477
+ fillRule: "evenodd",
18478
+ clipRule: "evenodd",
18479
+ d: "M88.0002 51.4983C88.0002 72.4847 70.9876 89.4983 50.0002 89.4983C29.0128 89.4983 12.0002 72.4847 12.0002 51.4983C12.0002 30.5109 29.0128 13.4983 50.0002 13.4983C59.0261 13.4983 67.3177 16.6447 73.8366 21.902C82.475 28.8674 88.0002 39.5368 88.0002 51.4983Z",
18480
+ stroke: "#878E9B",
18481
+ strokeWidth: "2.59255",
18482
+ strokeLinejoin: "round"
18483
+ }), /*#__PURE__*/React__default.createElement("path", {
18484
+ d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V81.3853",
18485
+ stroke: "#878E9B",
18486
+ strokeWidth: "2.0653",
18487
+ strokeLinecap: "round",
18488
+ strokeLinejoin: "round"
18489
+ }), /*#__PURE__*/React__default.createElement("path", {
18490
+ fillRule: "evenodd",
18491
+ clipRule: "evenodd",
18492
+ d: "M23.3362 78.1002V11.6448C23.3362 11.0302 23.8264 10.5324 24.4306 10.5324H68.0622C68.6664 10.5324 69.1556 11.0302 69.1556 11.6448V84.1973C69.1556 84.1973 58.4947 90.719 43.9673 88.1179C32.3336 86.0346 23.3362 78.1002 23.3362 78.1002Z",
18493
+ fill: "white"
18494
+ }), /*#__PURE__*/React__default.createElement("path", {
18495
+ d: "M69.156 84.1973V11.6448C69.156 11.0302 68.6658 10.5324 68.0625 10.5324H24.43C23.8258 10.5324 23.3365 11.0302 23.3365 11.6448V78.1002",
18496
+ stroke: "#878E9B",
18497
+ strokeWidth: "2.0653",
18498
+ strokeLinecap: "round",
18499
+ strokeLinejoin: "round"
18500
+ }), /*#__PURE__*/React__default.createElement("path", {
18501
+ d: "M23.3362 19.3115H69.1556",
18502
+ stroke: "#878E9B",
18503
+ strokeWidth: "1.9285",
18504
+ strokeLinecap: "round",
18505
+ strokeLinejoin: "round"
18506
+ }), /*#__PURE__*/React__default.createElement("path", {
18507
+ d: "M69.156 40.1818H77.041",
18508
+ stroke: "#878E9B",
18509
+ strokeWidth: "1.9285",
18510
+ strokeLinecap: "round",
18511
+ strokeLinejoin: "round"
18512
+ }), /*#__PURE__*/React__default.createElement("path", {
18513
+ fillRule: "evenodd",
18514
+ clipRule: "evenodd",
18515
+ d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
18516
+ fill: "white"
18517
+ }), /*#__PURE__*/React__default.createElement("path", {
18518
+ fillRule: "evenodd",
18519
+ clipRule: "evenodd",
18520
+ d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
18521
+ stroke: "#878E9B",
18522
+ strokeWidth: "2.0653",
18523
+ strokeLinecap: "round",
18524
+ strokeLinejoin: "round"
18525
+ }), /*#__PURE__*/React__default.createElement("path", {
18526
+ fillRule: "evenodd",
18527
+ clipRule: "evenodd",
18528
+ d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
18529
+ fill: "white"
18530
+ }), /*#__PURE__*/React__default.createElement("path", {
18531
+ fillRule: "evenodd",
18532
+ clipRule: "evenodd",
18533
+ d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
18534
+ stroke: "#878E9B",
18535
+ strokeWidth: "2.0653",
18536
+ strokeLinecap: "round",
18537
+ strokeLinejoin: "round"
18538
+ }), /*#__PURE__*/React__default.createElement("path", {
18539
+ d: "M29.8201 26.2602H46.2466",
18540
+ stroke: "#878E9B",
18541
+ strokeWidth: "2.0653",
18542
+ strokeLinecap: "round",
18543
+ strokeLinejoin: "round"
18544
+ }), /*#__PURE__*/React__default.createElement("path", {
18545
+ fillRule: "evenodd",
18546
+ clipRule: "evenodd",
18547
+ d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
18548
+ fill: "white"
18549
+ }), /*#__PURE__*/React__default.createElement("path", {
18550
+ fillRule: "evenodd",
18551
+ clipRule: "evenodd",
18552
+ d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
18553
+ stroke: "#878E9B",
18554
+ strokeWidth: "2.0653",
18555
+ strokeLinecap: "round",
18556
+ strokeLinejoin: "round"
18557
+ }), /*#__PURE__*/React__default.createElement("path", {
18558
+ fillRule: "evenodd",
18559
+ clipRule: "evenodd",
18560
+ d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
18561
+ fill: "white"
18562
+ }), /*#__PURE__*/React__default.createElement("path", {
18563
+ fillRule: "evenodd",
18564
+ clipRule: "evenodd",
18565
+ d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
18566
+ stroke: "#878E9B",
18567
+ strokeWidth: "2.0653",
18568
+ strokeLinecap: "round",
18569
+ strokeLinejoin: "round"
18570
+ }), /*#__PURE__*/React__default.createElement("path", {
18571
+ fillRule: "evenodd",
18572
+ clipRule: "evenodd",
18573
+ d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
18574
+ fill: "#878E9B"
18575
+ }), /*#__PURE__*/React__default.createElement("path", {
18576
+ fillRule: "evenodd",
18577
+ clipRule: "evenodd",
18578
+ d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
18579
+ stroke: "#878E9B",
18580
+ strokeWidth: "2.0653",
18581
+ strokeLinecap: "round",
18582
+ strokeLinejoin: "round"
18583
+ }), /*#__PURE__*/React__default.createElement("path", {
18584
+ d: "M29.8201 52.7535H46.2466",
18585
+ stroke: "#878E9B",
18586
+ strokeWidth: "2.0653",
18587
+ strokeLinecap: "round",
18588
+ strokeLinejoin: "round"
18589
+ }), /*#__PURE__*/React__default.createElement("path", {
18590
+ d: "M73.8364 21.9017C82.4748 28.8671 88 39.5365 88 51.498C88 72.4844 70.9874 89.498 50 89.498C29.0126 89.498 12 72.4844 12 51.498",
18591
+ stroke: "#878E9B",
18592
+ strokeWidth: "2.59255",
18593
+ strokeLinejoin: "round"
18594
+ }), /*#__PURE__*/React__default.createElement("path", {
18595
+ fillRule: "evenodd",
18596
+ clipRule: "evenodd",
18597
+ d: "M69.1557 40.1818H77.0407V31.4038H69.1557V40.1818Z",
18598
+ fill: "#878E9B"
18599
+ }), /*#__PURE__*/React__default.createElement("path", {
18600
+ fillRule: "evenodd",
18601
+ clipRule: "evenodd",
18602
+ d: "M23.3363 19.3112H69.1557V10.5323H23.3363V19.3112Z",
18603
+ fill: "#878E9B"
18604
+ }), /*#__PURE__*/React__default.createElement("path", {
18605
+ d: "M72.0041 90.1C79.3495 90.1 85.3041 84.1454 85.3041 76.8C85.3041 69.4546 79.3495 63.5 72.0041 63.5C64.6587 63.5 58.7041 69.4546 58.7041 76.8C58.7041 84.1454 64.6587 90.1 72.0041 90.1Z",
18606
+ fill: "#878E9B"
18607
+ }), /*#__PURE__*/React__default.createElement("path", {
18608
+ fillRule: "evenodd",
18609
+ clipRule: "evenodd",
18610
+ d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
18611
+ fill: "white"
18612
+ }), /*#__PURE__*/React__default.createElement("mask", {
18613
+ id: "mask0_7610_37196",
18614
+ style: {
18615
+ maskType: "luminance"
18616
+ },
18617
+ maskUnits: "userSpaceOnUse",
18618
+ x: "65",
18619
+ y: "69",
18620
+ width: "15",
18621
+ height: "15"
18622
+ }, /*#__PURE__*/React__default.createElement("path", {
18623
+ fillRule: "evenodd",
18624
+ clipRule: "evenodd",
18625
+ d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
18626
+ fill: "white"
18627
+ })), /*#__PURE__*/React__default.createElement("g", {
18628
+ mask: "url(#mask0_7610_37196)"
18629
+ }, /*#__PURE__*/React__default.createElement("rect", {
18630
+ x: "60.2041",
18631
+ y: "64.5",
18632
+ width: "24",
18633
+ height: "24",
18634
+ fill: "white"
18635
+ })));
18636
+ };
18637
+
18638
+ var DisabledPropertiesAddIcon = function DisabledPropertiesAddIcon() {
18639
+ return /*#__PURE__*/React__default.createElement("svg", {
18640
+ width: "100",
18641
+ height: "100",
18642
+ viewBox: "0 0 100 100",
18643
+ fill: "none",
18644
+ xmlns: "http://www.w3.org/2000/svg"
18645
+ }, /*#__PURE__*/React__default.createElement("path", {
18646
+ fillRule: "evenodd",
18647
+ clipRule: "evenodd",
18648
+ d: "M81.2621 37.7524C81.2621 38.0343 81.0333 38.2631 80.7514 38.2631H61.1325C60.8505 38.2631 60.6227 38.0343 60.6227 37.7524V36.6749C60.6227 36.393 60.8505 36.1641 61.1325 36.1641H80.7514C81.0333 36.1641 81.2621 36.393 81.2621 36.6749V37.7524ZM72.0783 49.0989V40.0831C72.0783 39.5434 72.5147 39.107 73.0544 39.107H79.2877C79.8274 39.107 80.2638 39.5434 80.2638 40.0831V48.2087C80.2638 48.7485 79.8274 49.1858 79.2877 49.1858H72.1643C72.116 49.1858 72.0783 49.1462 72.0783 49.0989ZM79.4277 51.0531C79.8892 51.0531 80.2638 51.4277 80.2638 51.8902V60.2948C80.2638 60.7564 79.8892 61.131 79.4277 61.131H72.9144C72.4529 61.131 72.0783 60.7564 72.0783 60.2948V51.0531H79.4277ZM61.6519 48.2898V40.003C61.6519 39.5077 62.0526 39.107 62.5479 39.107H68.9414C69.4367 39.107 69.8374 39.5077 69.8374 40.003V49.1791C69.8374 49.1829 69.8345 49.1858 69.8316 49.1858H62.5479C62.0526 49.1858 61.6519 48.7842 61.6519 48.2898ZM62.6444 51.0531H69.7351C69.7911 51.0531 69.8374 51.0994 69.8374 51.1564V60.1394C69.8374 60.6868 69.3933 61.131 68.8458 61.131H62.6444C62.096 61.131 61.6519 60.6868 61.6519 60.1394V52.0456C61.6519 51.4972 62.096 51.0531 62.6444 51.0531ZM81.2621 63.845C81.2621 64.1269 81.0333 64.3567 80.7514 64.3567H61.1325C60.8505 64.3567 60.6227 64.1269 60.6227 63.845V62.7675C60.6227 62.4856 60.8505 62.2577 61.1325 62.2577H80.7514C81.0333 62.2577 81.2621 62.4856 81.2621 62.7675V63.845ZM63.917 17.6758L62.0526 16.4226L40.6542 30.8134V73.442H44.0422V36.7994C44.0422 36.448 44.327 36.1641 44.6775 36.1641H57.367C57.7175 36.1641 58.0023 36.448 58.0023 36.7994V73.442H73.8365H78.2199C79.7917 71.6057 81.8328 68.8076 83.4635 65.1571V65.1474V30.8085L63.917 17.6758ZM46.1624 12.7267V18.6152L50.7881 15.4735V12.5857V9.95762V8.28345H46.1624V10.0986V12.7267ZM88.2929 28.3726L63.216 11.5227C62.8617 11.2871 62.4571 11.1693 62.0526 11.1693C61.648 11.1693 61.2425 11.2871 60.8882 11.5237L40.8 25.0204L35.8403 28.3533C35.6385 28.4875 35.5844 28.7607 35.7196 28.9625L36.5586 30.2254C36.6436 30.3528 36.7845 30.4223 36.9265 30.4223C37.0114 30.4223 37.0974 30.3982 37.1727 30.347L38.2521 29.6219L62.0526 13.6313L86.9615 30.3673C87.032 30.4136 87.1102 30.4358 87.1884 30.4358C87.3187 30.4358 87.4481 30.3721 87.5263 30.2543L88.4049 28.9335C88.5285 28.7482 88.4792 28.4971 88.2929 28.3726ZM38.2525 59.7028V73.4418H28.7249C28.6313 73.382 28.5454 73.3096 28.4565 73.2439C28.3185 73.1406 28.1852 73.0305 28.0578 72.9147C27.9757 72.8394 27.8917 72.765 27.8145 72.6849C27.6407 72.5024 27.4804 72.3093 27.3356 72.1046C27.2825 72.0293 27.2361 71.9501 27.1869 71.8729C27.0681 71.6846 26.96 71.4886 26.8673 71.284C26.8403 71.226 26.8094 71.171 26.7852 71.1131C26.6771 70.8533 26.595 70.5811 26.5323 70.302C26.5168 70.2325 26.5043 70.162 26.4908 70.0916C26.4367 69.7961 26.399 69.4939 26.399 69.183C26.4 66.0104 29.339 63.4876 32.6159 64.23C33.034 64.3304 33.4617 64.1354 33.6712 63.7647C33.8575 63.4345 34.069 63.1236 34.2901 62.8223C34.3383 62.7576 34.3857 62.692 34.4349 62.6292C34.6579 62.3415 34.8935 62.0673 35.1465 61.8086C35.188 61.767 35.2314 61.7284 35.2739 61.6879C35.5085 61.4571 35.7547 61.2389 36.0096 61.0352L36.1593 60.9145C36.4431 60.6982 36.7395 60.4993 37.0466 60.3159C37.1132 60.2753 37.1808 60.2387 37.2484 60.2C37.5554 60.0272 37.8692 59.866 38.1945 59.7269C38.209 59.7211 38.2225 59.7134 38.238 59.7067C38.2428 59.7057 38.2476 59.7047 38.2525 59.7028ZM48.0673 55.2366C48.8272 55.2366 49.4441 55.8536 49.4441 56.6134C49.4441 57.3732 48.8272 57.9892 48.0673 57.9892C47.3075 57.9892 46.6915 57.3732 46.6915 56.6134C46.6915 55.8536 47.3075 55.2366 48.0673 55.2366Z",
18649
+ fill: "#FEFEFE"
18650
+ }), /*#__PURE__*/React__default.createElement("path", {
18651
+ fillRule: "evenodd",
18652
+ clipRule: "evenodd",
18653
+ d: "M43.8455 10.3697V13.0248C26.1702 15.8566 12.6213 31.209 12.6213 49.6694C12.6213 53.4068 13.1823 57.0139 14.2144 60.4192C14.4606 61.2331 14.7358 62.0326 15.036 62.8214C16.5171 66.7152 18.6316 70.2992 21.2596 73.4419C21.9558 74.2732 22.6847 75.0765 23.4494 75.844C30.1741 82.5987 39.4767 86.787 49.7399 86.787C60.0032 86.787 69.3048 82.5987 76.0304 75.844C76.7951 75.0765 77.5231 74.2732 78.2192 73.4419C80.3143 70.9354 82.0802 68.149 83.4638 65.1473C84.4863 62.9276 85.2944 60.5911 85.866 58.1628C86.508 55.4334 86.8575 52.5919 86.8575 49.6694C86.8575 46.7603 86.5225 43.9005 85.8746 41.1373L85.8669 36.1379L85.866 35.6252V33.2269C85.8998 33.3013 86.4395 34.3807 86.4559 34.4232C88.4323 39.186 89.4789 44.3504 89.4789 49.6694C89.4789 55.5637 88.1793 61.1578 85.866 66.1939C85.1582 67.7367 84.3569 69.2275 83.4638 70.6554C82.8671 71.6113 82.2376 72.543 81.5656 73.4419C80.9448 74.2703 80.2854 75.0678 79.6037 75.844C72.3142 84.1502 61.6329 89.4083 49.7399 89.4083C27.827 89.4083 10 71.5813 10 49.6694C10 29.7598 24.7181 13.2266 43.8455 10.3697ZM80.751 62.2576C81.033 62.2576 81.2618 62.4855 81.2618 62.7674V63.8459C81.2618 64.1278 81.033 64.3566 80.751 64.3566H61.1331C60.8512 64.3566 60.6223 64.1278 60.6223 63.8459V62.7674C60.6223 62.4855 60.8512 62.2576 61.1331 62.2576H80.751ZM53.1047 10.0859C54.6948 10.223 56.2744 10.4421 57.8308 10.7665L56.7041 11.5573L54.7219 12.8897C54.6456 12.879 54.5684 12.8694 54.4921 12.8588C54.0315 12.7989 53.5681 12.7661 53.1047 12.7236V10.0859ZM80.751 36.165H61.1331C60.8512 36.165 60.6223 36.3929 60.6223 36.6748V37.7523C60.6223 38.0342 60.8512 38.2631 61.1331 38.2631H80.751C81.033 38.2631 81.2618 38.0342 81.2618 37.7523V36.6748C81.2618 36.3929 81.033 36.165 80.751 36.165ZM61.6525 60.1393C61.6525 60.6868 62.0966 61.1309 62.6441 61.1309H68.8455C69.3929 61.1309 69.837 60.6868 69.837 60.1393V51.1563C69.837 51.0994 69.7907 51.054 69.7347 51.054H62.6441C62.0966 51.054 61.6525 51.4971 61.6525 52.0456V60.1393ZM72.0789 60.2948C72.0789 60.7563 72.4526 61.1309 72.9151 61.1309H79.4273C79.8889 61.1309 80.2635 60.7563 80.2635 60.2948V51.8901C80.2635 51.4276 79.8889 51.054 79.4273 51.054H72.0789V60.2948ZM69.8313 49.1857C69.8342 49.1857 69.837 49.1828 69.837 49.179V40.0029C69.837 39.5086 69.4364 39.1069 68.942 39.1069H62.5475C62.0532 39.1069 61.6525 39.5086 61.6525 40.0029V48.2898C61.6525 48.7841 62.0532 49.1857 62.5475 49.1857H69.8313ZM79.2873 49.1857C79.8271 49.1857 80.2635 48.7484 80.2635 48.2087V40.083C80.2635 39.5443 79.8271 39.1069 79.2873 39.1069H73.0541C72.5153 39.1069 72.0789 39.5443 72.0789 40.083V49.0989C72.0789 49.1462 72.1166 49.1857 72.1639 49.1857H79.2873ZM88.2935 28.3725L63.2157 11.5226C62.8623 11.287 62.4577 11.1692 62.0532 11.1692C61.6477 11.1692 61.2422 11.287 60.8888 11.5236L40.7997 25.0213L35.8399 28.3532C35.6381 28.4874 35.585 28.7616 35.7192 28.9634L36.5592 30.2253C36.6432 30.3527 36.7842 30.4222 36.9261 30.4222C37.0111 30.4222 37.097 30.3981 37.1723 30.3469L38.2517 29.6219L62.0522 13.6313L86.9621 30.3672C87.0316 30.4145 87.1098 30.4358 87.188 30.4358C87.3193 30.4358 87.4487 30.373 87.5269 30.2552L88.4055 28.9335C88.5291 28.7481 88.4789 28.497 88.2935 28.3725ZM46.1621 8.28337V10.0995V12.7266L46.163 18.6152L50.7878 15.4734V12.5856V9.95755V8.28337H46.1621ZM46.6921 56.6133C46.6921 57.3732 47.3071 57.9892 48.067 57.9892C48.8278 57.9892 49.4438 57.3732 49.4438 56.6133C49.4438 55.8535 48.8278 55.2375 48.067 55.2375C47.3071 55.2375 46.6921 55.8535 46.6921 56.6133ZM38.2517 40.9027L18.3499 40.8689L18.405 64.5555L26.2419 64.5372C26.4282 64.3267 26.6242 64.1249 26.8347 63.9376V60.3488C26.8347 60.2059 26.9506 60.0901 27.0944 60.0901H33.5131C33.6569 60.0901 33.7728 60.2059 33.7728 60.3488V60.4541C34.5848 59.6266 35.5223 58.9489 36.5351 58.4063V55.6768C36.5351 55.5339 36.6509 55.418 36.7948 55.418H38.2517V54.5867H36.7948C36.6509 54.5867 36.5351 54.4709 36.5351 54.327V51.1669C36.5351 51.0241 36.6509 50.9082 36.7948 50.9082H38.2517V50.0769H36.7948C36.6509 50.0769 36.5351 49.961 36.5351 49.8172V46.6571C36.5351 46.5132 36.6509 46.3974 36.7948 46.3974H38.2517V45.5671H36.7948C36.6509 45.5671 36.5351 45.4512 36.5351 45.3073V42.1473C36.5351 42.0034 36.6509 41.8875 36.7948 41.8875H38.2517V40.9027ZM38.2517 73.442V59.701C36.3487 60.4966 34.7199 61.91 33.6704 63.7648C33.4619 64.1355 33.0342 64.3296 32.6161 64.2301C29.3392 63.4867 26.4002 66.0105 26.3993 69.1831C26.3993 70.9674 27.3291 72.5354 28.7242 73.442H38.2517ZM90.3346 30.2166L89.456 31.5393C88.9491 32.2992 88.1014 32.753 87.188 32.753C86.7198 32.753 86.2679 32.6284 85.8624 32.4006L85.866 35.6252V58.1628C85.2944 60.5911 84.4863 62.9276 83.4638 65.1473L83.4641 30.8084L62.0522 16.4225L41.4765 30.2475L40.6549 30.8142V73.442H44.0418V36.7994C44.0418 36.4489 44.3267 36.165 44.6781 36.165H57.3667C57.7181 36.165 58.002 36.4489 58.002 36.7994V73.442H73.8361L78.2192 73.4419C77.5231 74.2732 76.7951 75.0765 76.0304 75.844L73.8361 75.8441H40.4975L23.4494 75.844C22.6847 75.0765 21.9558 74.2732 21.2596 73.4419L25.9281 73.442C25.0177 72.2583 24.4683 70.7868 24.4683 69.1831C24.4683 68.0168 24.7657 66.9181 25.2735 65.9478H18.349C17.5814 65.9478 16.9567 65.3231 16.9567 64.5555V62.8215L15.036 62.8214C14.7358 62.0326 14.4606 61.2331 14.2144 60.4192L16.9567 60.4193V40.8689H16.4662V38.3596H18.768L18.767 35.9266C18.767 35.7267 18.8491 35.5365 18.9929 35.4004L22.0545 32.5039C22.266 32.304 22.5749 32.2499 22.8395 32.3648C23.104 32.4788 23.2769 32.7404 23.2769 33.0301L23.2778 38.3596H24.4017L24.4007 35.9266C24.4007 35.7267 24.4828 35.5365 24.6266 35.4004L27.6882 32.5039C27.8997 32.304 28.2077 32.2499 28.4732 32.3648C28.7377 32.4788 28.9105 32.7404 28.9105 33.0301L28.9115 38.3596H30.0344L30.0334 35.9266C30.0334 35.7267 30.1155 35.5365 30.2593 35.4004L33.3209 32.5039C33.4233 32.4063 33.5507 32.3446 33.684 32.3195C33.8172 32.2943 33.9601 32.2866 34.2053 32.4566C34.4438 32.6207 34.5037 32.8273 34.5182 32.8679C34.5336 32.9084 34.5433 32.9741 34.5433 33.0301L34.5442 38.3596H35.6681L35.6671 35.9266C35.6671 35.7267 35.7492 35.5365 35.893 35.4004L38.2517 33.1681V32.3919C37.8462 32.6159 37.3944 32.7394 36.9261 32.7394C36.0002 32.7394 35.1419 32.2789 34.6292 31.5084L33.7892 30.2465C32.9512 28.9856 33.292 27.2738 34.5481 26.4299L43.8458 20.1822L43.8455 13.0248V10.3697L43.8439 7.88655C43.8439 6.8274 44.7061 5.96521 45.7652 5.96521H51.1846C52.2437 5.96521 53.105 6.8274 53.105 7.88655L53.1047 10.0859V12.7236L53.105 13.9624L59.6018 9.59741C60.3317 9.10984 61.1794 8.85302 62.0532 8.85302C62.926 8.85302 63.7728 9.10887 64.5075 9.60031L89.5854 26.4483C90.827 27.2815 91.162 28.9721 90.3346 30.2166ZM19.7499 45.5671H23.8127C23.9566 45.5671 24.0724 45.4512 24.0724 45.3073V42.1473C24.0724 42.0034 23.9566 41.8875 23.8127 41.8875H19.7499C19.608 41.8875 19.4911 42.0034 19.4911 42.1473V45.3073C19.4911 45.4512 19.608 45.5671 19.7499 45.5671ZM25.4319 45.5671H29.4947C29.6385 45.5671 29.7544 45.4512 29.7544 45.3073V42.1473C29.7544 42.0034 29.6385 41.8875 29.4947 41.8875H25.4319C25.289 41.8875 25.1731 42.0034 25.1731 42.1473V45.3073C25.1731 45.4512 25.289 45.5671 25.4319 45.5671ZM31.1128 45.5671H35.1757C35.3186 45.5671 35.4344 45.4512 35.4344 45.3073V42.1473C35.4344 42.0034 35.3186 41.8875 35.1757 41.8875H31.1128C30.969 41.8875 30.8531 42.0034 30.8531 42.1473V45.3073C30.8531 45.4512 30.969 45.5671 31.1128 45.5671ZM19.7499 59.0966H23.8127C23.9566 59.0966 24.0724 58.9798 24.0724 58.8369V55.6768C24.0724 55.5339 23.9566 55.418 23.8127 55.418H19.7499C19.608 55.418 19.4911 55.5339 19.4911 55.6768V58.8369C19.4911 58.9798 19.608 59.0966 19.7499 59.0966ZM25.4319 59.0966H29.4947C29.6385 59.0966 29.7544 58.9798 29.7544 58.8369V55.6768C29.7544 55.5339 29.6385 55.418 29.4947 55.418H25.4319C25.289 55.418 25.1731 55.5339 25.1731 55.6768V58.8369C25.1731 58.9798 25.289 59.0966 25.4319 59.0966ZM31.1128 59.0966H35.1757C35.3186 59.0966 35.4344 58.9798 35.4344 58.8369V55.6768C35.4344 55.5339 35.3186 55.418 35.1757 55.418H31.1128C30.969 55.418 30.8531 55.5339 30.8531 55.6768V58.8369C30.8531 58.9798 30.969 59.0966 31.1128 59.0966ZM19.7499 54.5867H23.8127C23.9566 54.5867 24.0724 54.4709 24.0724 54.327V51.1669C24.0724 51.0241 23.9566 50.9082 23.8127 50.9082H19.7499C19.608 50.9082 19.4911 51.0241 19.4911 51.1669V54.327C19.4911 54.4709 19.608 54.5867 19.7499 54.5867ZM25.4319 54.5867H29.4947C29.6385 54.5867 29.7544 54.4709 29.7544 54.327V51.1669C29.7544 51.0241 29.6385 50.9082 29.4947 50.9082H25.4319C25.289 50.9082 25.1731 51.0241 25.1731 51.1669V54.327C25.1731 54.4709 25.289 54.5867 25.4319 54.5867ZM31.1128 54.5867H35.1757C35.3186 54.5867 35.4344 54.4709 35.4344 54.327V51.1669C35.4344 51.0241 35.3186 50.9082 35.1757 50.9082H31.1128C30.969 50.9082 30.8531 51.0241 30.8531 51.1669V54.327C30.8531 54.4709 30.969 54.5867 31.1128 54.5867ZM19.7499 50.0769H23.8127C23.9566 50.0769 24.0724 49.961 24.0724 49.8172V46.6571C24.0724 46.5132 23.9566 46.3974 23.8127 46.3974H19.7499C19.608 46.3974 19.4911 46.5132 19.4911 46.6571V49.8172C19.4911 49.961 19.608 50.0769 19.7499 50.0769ZM25.4319 50.0769H29.4947C29.6385 50.0769 29.7544 49.961 29.7544 49.8172V46.6571C29.7544 46.5132 29.6385 46.3974 29.4947 46.3974H25.4319C25.289 46.3974 25.1731 46.5132 25.1731 46.6571V49.8172C25.1731 49.961 25.289 50.0769 25.4319 50.0769ZM30.8531 49.8172V46.6571C30.8531 46.5132 30.969 46.3974 31.1128 46.3974H35.1757C35.3186 46.3974 35.4344 46.5132 35.4344 46.6571V49.8172C35.4344 49.961 35.3186 50.0769 35.1757 50.0769H31.1128C30.969 50.0769 30.8531 49.961 30.8531 49.8172Z",
18654
+ fill: "#878E9B"
18655
+ }), /*#__PURE__*/React__default.createElement("circle", {
18656
+ cx: "71.9999",
18657
+ cy: "74",
18658
+ r: "12",
18659
+ fill: "#878E9B"
18660
+ }), /*#__PURE__*/React__default.createElement("path", {
18661
+ fillRule: "evenodd",
18662
+ clipRule: "evenodd",
18663
+ d: "M65.9391 74.5102C65.9391 74.7863 66.1629 75.0102 66.4391 75.0102L70.9898 75.0102L70.9898 79.5609C70.9898 79.8371 71.2137 80.0609 71.4898 80.0609L72.5101 80.0609C72.7863 80.0609 73.0101 79.8371 73.0101 79.5609L73.0101 75.0102L77.5609 75.0102C77.837 75.0102 78.0609 74.7863 78.0609 74.5102L78.0609 73.4898C78.0609 73.2137 77.837 72.9898 77.5609 72.9898H73.0101L73.0101 68.4391C73.0101 68.1629 72.7863 67.9391 72.5101 67.9391L71.4898 67.9391C71.2137 67.9391 70.9898 68.1629 70.9898 68.4391L70.9898 72.9898L66.4391 72.9898C66.1629 72.9898 65.9391 73.2137 65.9391 73.4898L65.9391 74.5102Z",
18664
+ fill: "#FEFEFE"
18665
+ }), /*#__PURE__*/React__default.createElement("mask", {
18666
+ id: "mask0_2013_203",
18667
+ style: {
18668
+ maskType: "luminance"
18669
+ },
18670
+ maskUnits: "userSpaceOnUse",
18671
+ x: "65",
18672
+ y: "67",
18673
+ width: "14",
18674
+ height: "14"
18675
+ }, /*#__PURE__*/React__default.createElement("path", {
18676
+ fillRule: "evenodd",
18677
+ clipRule: "evenodd",
18678
+ d: "M65.9391 74.5102C65.9391 74.7863 66.1629 75.0102 66.4391 75.0102L70.9898 75.0102L70.9898 79.5609C70.9898 79.8371 71.2137 80.0609 71.4898 80.0609L72.5101 80.0609C72.7863 80.0609 73.0101 79.8371 73.0101 79.5609L73.0101 75.0102L77.5609 75.0102C77.837 75.0102 78.0609 74.7863 78.0609 74.5102L78.0609 73.4898C78.0609 73.2137 77.837 72.9898 77.5609 72.9898H73.0101L73.0101 68.4391C73.0101 68.1629 72.7863 67.9391 72.5101 67.9391L71.4898 67.9391C71.2137 67.9391 70.9898 68.1629 70.9898 68.4391L70.9898 72.9898L66.4391 72.9898C66.1629 72.9898 65.9391 73.2137 65.9391 73.4898L65.9391 74.5102Z",
18679
+ fill: "white"
18680
+ })), /*#__PURE__*/React__default.createElement("g", {
18681
+ mask: "url(#mask0_2013_203)"
18682
+ }, /*#__PURE__*/React__default.createElement("path", {
18683
+ d: "M62 64H82V84H62V64Z",
18684
+ fill: "#FEFEFE"
18685
+ })));
18686
+ };
18687
+
18688
+ var DisabledPaymentMethodsAddIcon = function DisabledPaymentMethodsAddIcon() {
18689
+ return /*#__PURE__*/React__default.createElement("svg", {
18690
+ xmlns: "http://www.w3.org/2000/svg",
18691
+ width: "100",
18692
+ height: "100",
18693
+ viewBox: "0 0 100 100",
18694
+ fill: "none"
18695
+ }, /*#__PURE__*/React__default.createElement("mask", {
18696
+ id: "a",
18697
+ x: "-1",
18698
+ y: "0",
18699
+ maskUnits: "userSpaceOnUse",
18700
+ style: {
18701
+ maskType: "luminance"
18702
+ }
18703
+ }, /*#__PURE__*/React__default.createElement("path", {
18704
+ fill: "#fff",
18705
+ d: "M97.88 0H-1v96h98.88V0Z"
18706
+ })), /*#__PURE__*/React__default.createElement("g", {
18707
+ mask: "url(#a)"
18708
+ }, /*#__PURE__*/React__default.createElement("path", {
18709
+ fill: "#FEFEFE",
18710
+ fillRule: "evenodd",
18711
+ d: "M91.947 19.2v36.48H48.44v15.6c0 .881-.697 1.603-1.584 1.673l-.141.006H20.402c-1.888-2.755-3.416-5.315-4.649-7.68H40.53v-3.84H14.82v1.972c-6.089-12.75-3.332-19.251-3.332-19.251h13.22V19.2h67.24Z",
18712
+ clipRule: "evenodd"
18713
+ }), /*#__PURE__*/React__default.createElement("path", {
18714
+ fill: "#878E9B",
18715
+ d: "M48.24 10.56c8.325 0 16.249 2.587 22.793 7.298l.442.323h20.472c.525 0 .958.397 1.013.908l.006.111v36.48c0 .525-.397.958-.908 1.013l-.11.006h-6.48l-.01.039c-4.176 16.497-19.471 28.315-37.217 28.315-21.16 0-38.328-16.668-38.328-37.246 0-11.497 5.358-21.772 13.776-28.603V19.2c0-.525.398-.958.909-1.013l.11-.006h.298c6.447-4.782 14.501-7.621 23.235-7.621Zm34.688 46.139H48.47V71.28c0 1.44-1.138 2.608-2.565 2.693l-.166.005h-21.13c6.31 5.364 14.578 8.617 23.632 8.617 16.42 0 30.585-10.788 34.687-25.897Zm-60.52 15.243h23.331a.683.683 0 0 0 .687-.572l.006-.089V56.64H13.537c1.577 5.84 4.68 11.083 8.87 15.302Zm68.52-51.723-64.542-.001c-.222.165-.442.333-.66.504l.001 22.42H45.74c1.448 0 2.64 1.116 2.726 2.533l.005.165v8.821h42.458V20.217ZM66.324 44.784l.217.134.32.208.834.562 1.937 1.34c.583.396 1.101.73 1.59 1.023 1.5.896 2.662 1.348 3.404 1.298.678-.044 1.166-.132 1.655-.293l.247-.088 2.087-.915.92-.39.337-.138.307-.12c1.758-.675 3.308.021 4.548 1.49.513.608.867 1.21 1.061 1.633a.84.84 0 0 1-1.475.795l-.146-.28-.107-.19a6.45 6.45 0 0 0-.616-.875c-.83-.982-1.703-1.374-2.664-1.005l-.437.174-.766.322-2.46 1.071-.044.018c-.72.265-1.405.406-2.337.467-1.184.079-2.6-.471-4.375-1.533a31.938 31.938 0 0 1-1.315-.834l-2.312-1.594-.823-.554-.362-.233a2.115 2.115 0 0 0-.055-.033c-1.924-1.094-4.566 1.331-6.416 5.012a.84.84 0 0 1-1.5-.754c.083-.166.168-.33.255-.493l.263-.48c.446-.788.925-1.518 1.429-2.168l.305-.38c1.954-2.344 4.255-3.47 6.494-2.197Zm-53.847.326-.03.41a34.227 34.227 0 0 0-.011 4.4l33.996-.001v-4.08c0-.33-.257-.61-.598-.655l-.095-.006H12.843c-.129 0-.252-.024-.366-.068Zm.212-1.957.043-.007.111-.006H23.69V22.442c-5.868 5.346-9.88 12.586-11 20.712ZM84.135 24v1.629c1.346.237 2.494.713 3.488 1.42l-1.884 2.36c-1.243-.793-2.603-1.189-3.806-1.189-.913 0-1.36.327-1.36.775v.034c0 .551.467.792 2.37 1.171 3.106.602 5.049 1.498 5.049 3.753v.034c0 2.027-1.49 3.375-3.858 3.79v1.583h-3.587v-1.605c-1.665-.266-3.197-.879-4.42-1.839l2.096-2.22c1.36.945 2.835 1.446 4.408 1.446 1.03 0 1.573-.312 1.573-.828v-.034c0-.516-.446-.775-2.31-1.17-2.894-.585-5.128-1.31-5.128-3.771v-.034c0-1.875 1.408-3.311 3.781-3.73V24h3.588ZM57.339 36.12a.84.84 0 0 1 .105 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007h28.675Zm-11.865-5.76a.84.84 0 0 1 .105 1.673l-.105.007h-16.81a.84.84 0 0 1-.105-1.673l.105-.007h16.81ZM56.35 24.6a.84.84 0 0 1 .106 1.673l-.106.007H43.496a.84.84 0 0 1-.105-1.673l.105-.007H56.35Zm-16.81 0a.84.84 0 0 1 .106 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007H39.54Zm8.7-11.583c-6.9 0-13.345 1.89-18.814 5.164h37.63c-5.592-3.349-12.06-5.164-18.815-5.164Z"
18716
+ })), /*#__PURE__*/React__default.createElement("path", {
18717
+ fill: "#878E9B",
18718
+ d: "M73.768 86.536c7.052 0 12.768-5.716 12.768-12.768C86.536 66.716 80.82 61 73.768 61 66.716 61 61 66.716 61 73.768c0 7.052 5.716 12.768 12.768 12.768Z"
18719
+ }), /*#__PURE__*/React__default.createElement("path", {
18720
+ fill: "#FEFEFE",
18721
+ d: "M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
18722
+ }), /*#__PURE__*/React__default.createElement("mask", {
18723
+ id: "b",
18724
+ width: "13",
18725
+ height: "13",
18726
+ x: "67",
18727
+ y: "67",
18728
+ maskUnits: "userSpaceOnUse",
18729
+ style: {
18730
+ maskType: "luminance"
18731
+ }
18732
+ }, /*#__PURE__*/React__default.createElement("path", {
18733
+ fill: "#fff",
18734
+ d: "M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
18735
+ })), /*#__PURE__*/React__default.createElement("g", {
18736
+ mask: "url(#b)"
18737
+ }, /*#__PURE__*/React__default.createElement("path", {
18738
+ fill: "#FEFEFE",
18739
+ d: "M83.848 63.688h-20.16v20.16h20.16v-20.16Z"
18740
+ })));
18741
+ };
18742
+
18441
18743
  var color$2 = "#15749D";
18442
18744
  var hoverColor$1 = "#116285";
18443
18745
  var activeColor$1 = "#0E506D";
@@ -27480,7 +27782,15 @@ var Spinner$1 = function Spinner(_ref6) {
27480
27782
  size = _ref6$size === void 0 ? "24" : _ref6$size,
27481
27783
  _ref6$centerSpinner = _ref6.centerSpinner,
27482
27784
  centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
27483
- themeValues = _ref6.themeValues;
27785
+ themeValues = _ref6.themeValues,
27786
+ _ref6$cx = _ref6.cx,
27787
+ cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
27788
+ _ref6$cy = _ref6.cy,
27789
+ cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
27790
+ _ref6$radius = _ref6.radius,
27791
+ radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
27792
+ _ref6$strokeWidth = _ref6.strokeWidth,
27793
+ strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
27484
27794
  return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
27485
27795
  centerSpinner: centerSpinner,
27486
27796
  size: size
@@ -27490,11 +27800,11 @@ var Spinner$1 = function Spinner(_ref6) {
27490
27800
  centerSpinner: centerSpinner
27491
27801
  }, /*#__PURE__*/React__default.createElement("circle", {
27492
27802
  className: "path",
27493
- cx: "50",
27494
- cy: "50",
27495
- r: "25",
27803
+ cx: cx,
27804
+ cy: cy,
27805
+ r: radius,
27496
27806
  fill: "none",
27497
- strokeWidth: "6"
27807
+ strokeWidth: strokeWidth
27498
27808
  })));
27499
27809
  };
27500
27810
  var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
@@ -27762,24 +28072,33 @@ var fallbackValues$s = {
27762
28072
  height: height$1
27763
28073
  };
27764
28074
 
27765
- var getLargeIcon = function getLargeIcon(iconName) {
28075
+ var getLargeIcon = function getLargeIcon(iconName, isDisabled) {
27766
28076
  switch (iconName) {
27767
28077
  case "accounts":
27768
- return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
28078
+ return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
27769
28079
  case "properties":
27770
- return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
28080
+ return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledPropertiesAddIcon, null) : /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
27771
28081
  case "payments":
27772
- return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
28082
+ return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledPaymentMethodsAddIcon, null) : /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
27773
28083
  default:
27774
- return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
28084
+ return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
27775
28085
  }
27776
28086
  };
27777
- var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
27778
- var isLink = _ref.isLink,
27779
- action = _ref.action,
27780
- destination = _ref.destination,
27781
- children = _ref.children,
27782
- dataQa = _ref.dataQa;
28087
+ var renderDisabledContent = function renderDisabledContent(_ref) {
28088
+ var children = _ref.children;
28089
+ return /*#__PURE__*/React__default.createElement(Box, {
28090
+ padding: "0",
28091
+ minHeight: "100%",
28092
+ extraStyles: "cursor: default;",
28093
+ "aria-disabled": true
28094
+ }, children);
28095
+ };
28096
+ var renderContent = function renderContent(_ref2) {
28097
+ var isLink = _ref2.isLink,
28098
+ destination = _ref2.destination,
28099
+ dataQa = _ref2.dataQa,
28100
+ children = _ref2.children,
28101
+ action = _ref2.action;
27783
28102
  return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
27784
28103
  to: destination,
27785
28104
  "data-qa": dataQa,
@@ -27798,38 +28117,61 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
27798
28117
  dataQa: dataQa
27799
28118
  }, children);
27800
28119
  };
27801
- var Placeholder = function Placeholder(_ref2) {
27802
- var text = _ref2.text,
27803
- action = _ref2.action,
27804
- _ref2$visible = _ref2.visible,
27805
- visible = _ref2$visible === void 0 ? true : _ref2$visible,
27806
- _ref2$isLink = _ref2.isLink,
27807
- isLink = _ref2$isLink === void 0 ? false : _ref2$isLink,
27808
- destination = _ref2.destination,
27809
- variant = _ref2.variant,
27810
- largeIcon = _ref2.largeIcon,
27811
- themeValues = _ref2.themeValues,
27812
- dataQa = _ref2.dataQa;
28120
+ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref3) {
28121
+ var isLink = _ref3.isLink,
28122
+ action = _ref3.action,
28123
+ destination = _ref3.destination,
28124
+ children = _ref3.children,
28125
+ _ref3$isDisabled = _ref3.isDisabled,
28126
+ isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
28127
+ dataQa = _ref3.dataQa;
28128
+ return isDisabled ? renderDisabledContent({
28129
+ children: children
28130
+ }) : renderContent({
28131
+ children: children,
28132
+ action: action,
28133
+ isLink: isLink,
28134
+ destination: destination,
28135
+ dataQa: dataQa
28136
+ });
28137
+ };
28138
+ var Placeholder = function Placeholder(_ref4) {
28139
+ var text = _ref4.text,
28140
+ action = _ref4.action,
28141
+ _ref4$visible = _ref4.visible,
28142
+ visible = _ref4$visible === void 0 ? true : _ref4$visible,
28143
+ _ref4$isLink = _ref4.isLink,
28144
+ isLink = _ref4$isLink === void 0 ? false : _ref4$isLink,
28145
+ destination = _ref4.destination,
28146
+ variant = _ref4.variant,
28147
+ largeIcon = _ref4.largeIcon,
28148
+ themeValues = _ref4.themeValues,
28149
+ _ref4$isDisabled = _ref4.isDisabled,
28150
+ isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
28151
+ dataQa = _ref4.dataQa;
28152
+ var borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
27813
28153
  return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
27814
28154
  isLink: isLink,
27815
28155
  action: action,
27816
28156
  destination: destination,
27817
- dataQa: dataQa
28157
+ dataQa: dataQa,
28158
+ isDisabled: isDisabled
27818
28159
  }, /*#__PURE__*/React__default.createElement(Box, {
27819
28160
  padding: "0",
27820
28161
  borderRadius: "4px",
27821
28162
  border: "none",
27822
28163
  minHeight: themeValues.height,
27823
28164
  hiddenStyles: !visible,
27824
- extraStyles: "\n background: linear-gradient(\n to right,\n ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n rgba(255, 255, 255, 0) 0%\n ),\n linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: 5px 1px, 1px 5px;\n display: flex;\n justify-content: center;\n align-items:center;"),
27825
- hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
28165
+ extraStyles: "\n display: flex;\n justify-content: center;\n align-items:center;\n background-image: repeating-linear-gradient(0deg, ".concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(90deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(180deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(270deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px);\n background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;\n background-position: 0 0, 0 0, 100% 0, 0 100%;\n background-repeat: no-repeat;\n "),
28166
+ hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.9, themeValues.color), ";"),
28167
+ activeStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.8, themeValues.color), ";")
27826
28168
  }, /*#__PURE__*/React__default.createElement(Center, {
27827
28169
  maxWidth: "300px"
27828
28170
  }, /*#__PURE__*/React__default.createElement(Box, {
27829
28171
  padding: "0",
27830
28172
  tabIndex: "0",
27831
28173
  onKeyPress: function onKeyPress(e) {
27832
- return e.key === "Enter" && action();
28174
+ return isDisabled ? noop : e.key === "Enter" && action();
27833
28175
  }
27834
28176
  }, /*#__PURE__*/React__default.createElement(Cluster, {
27835
28177
  justify: "center",
@@ -27840,12 +28182,13 @@ var Placeholder = function Placeholder(_ref2) {
27840
28182
  childGap: "0"
27841
28183
  }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
27842
28184
  padding: "0",
27843
- extraStyles: ".fill { \n fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n } .stroke { \n stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n } ")
28185
+ "aria-disabled": isDisabled,
28186
+ extraStyles: ".fill { \n fill: ".concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n } .stroke { \n stroke: ").concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n } ")
27844
28187
  }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
27845
28188
  intrinsic: true
27846
- }, getLargeIcon(largeIcon), /*#__PURE__*/React__default.createElement(Text$1, {
28189
+ }, getLargeIcon(largeIcon, isDisabled), /*#__PURE__*/React__default.createElement(Text$1, {
27847
28190
  variant: "pS",
27848
- color: themeValues.color,
28191
+ color: isDisabled ? MANATEE_GREY : themeValues.color,
27849
28192
  weight: FONT_WEIGHT_SEMIBOLD,
27850
28193
  extraStyles: "text-align: center;"
27851
28194
  }, text)) : /*#__PURE__*/React__default.createElement(Cover, {
@@ -27854,13 +28197,13 @@ var Placeholder = function Placeholder(_ref2) {
27854
28197
  }, /*#__PURE__*/React__default.createElement(Cluster, {
27855
28198
  justify: "center",
27856
28199
  align: "center"
27857
- }, /*#__PURE__*/React__default.createElement(IconAdd, {
27858
- strokeWidth: "2"
28200
+ }, /*#__PURE__*/React__default.createElement(PlusCircleIcon, {
28201
+ color: isDisabled ? MANATEE_GREY : themeValues.color
27859
28202
  }), /*#__PURE__*/React__default.createElement(Center, {
27860
28203
  intrinsic: true
27861
28204
  }, /*#__PURE__*/React__default.createElement(Text$1, {
27862
28205
  variant: "pS",
27863
- color: themeValues.color,
28206
+ color: isDisabled ? MANATEE_GREY : themeValues.color,
27864
28207
  weight: FONT_WEIGHT_SEMIBOLD,
27865
28208
  extraStyles: "padding: 0 0 0 8px; text-align: center;"
27866
28209
  }, text)))))))))));
@@ -38777,17 +39120,17 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
38777
39120
  };
38778
39121
 
38779
39122
  var onBackground = "".concat(MATISSE_BLUE);
38780
- var disabledBackground = "".concat(IRON_GREY);
39123
+ var disabledBackground = "".concat(MANATEE_GREY);
39124
+ var disabledBackgroundLight = "".concat(ATHENS_GREY);
38781
39125
  var white = "".concat(WHITE);
38782
- var offBackground = "".concat(REGENT_GREY);
38783
39126
  var labelStyles = "\n display: flex;\n justify-content: flex-start;\n align-items: center;\n";
38784
39127
  var rightLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row;\n");
38785
39128
  var leftLabelStyles = "\n ".concat(labelStyles, "\n flex-direction: row-reverse;\n");
38786
39129
  var fallbackValues$y = {
38787
39130
  onBackground: onBackground,
38788
39131
  disabledBackground: disabledBackground,
39132
+ disabledBackgroundLight: disabledBackgroundLight,
38789
39133
  white: white,
38790
- offBackground: offBackground,
38791
39134
  rightLabelStyles: rightLabelStyles,
38792
39135
  leftLabelStyles: leftLabelStyles
38793
39136
  };
@@ -38805,7 +39148,7 @@ var HiddenToggleSwitchBox = styled__default.input.withConfig({
38805
39148
  var VisibleSwitchComponent = styled__default.label.withConfig({
38806
39149
  displayName: "ToggleSwitch__VisibleSwitchComponent",
38807
39150
  componentId: "sc-1t51u6v-1"
38808
- })(["width:48px;height:24px;border-radius:48px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
39151
+ })(["width:44px;height:24px;border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
38809
39152
  var disabled = _ref3.disabled;
38810
39153
  return disabled ? "auto" : "pointer";
38811
39154
  }, function (_ref4) {
@@ -38815,14 +39158,10 @@ var VisibleSwitchComponent = styled__default.label.withConfig({
38815
39158
  var isMobile = _ref5.isMobile;
38816
39159
  return isMobile ? "transform: scale(0.75)" : "";
38817
39160
  });
38818
- var ToggleSwitchMiddleRingComponent = styled__default.div.withConfig({
38819
- displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
39161
+ var ToggleSwitchRingComponent = styled__default.div.withConfig({
39162
+ displayName: "ToggleSwitch__ToggleSwitchRingComponent",
38820
39163
  componentId: "sc-1t51u6v-2"
38821
- })(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
38822
- var ToggleSwitchInnerRingComponent = styled__default.div.withConfig({
38823
- displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
38824
- componentId: "sc-1t51u6v-3"
38825
- })(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;border-radius:50%;box-sizing:border-box;"]);
39164
+ })(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
38826
39165
  var ToggleSwitch = function ToggleSwitch(_ref6) {
38827
39166
  var _ref6$isOn = _ref6.isOn,
38828
39167
  isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
@@ -38839,50 +39178,26 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
38839
39178
  themeValues = _ref6.themeValues,
38840
39179
  isMobile = _ref6.isMobile,
38841
39180
  dataQa = _ref6.dataQa;
38842
- var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
38843
- off: {
38844
- backgroundColor: themeValues.offBackground,
38845
- transition: {
38846
- ease: "easeOut"
38847
- }
38848
- },
38849
- on: {
38850
- backgroundColor: themeValues.onBackground,
38851
- transition: {
38852
- ease: "easeIn"
38853
- }
38854
- },
38855
- disabled: {
38856
- backgroundColor: themeValues.disabledBackground
38857
- }
38858
- });
38859
- var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
39181
+ var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
38860
39182
  off: {
38861
- backgroundColor: themeValues.white,
38862
- left: "2px",
38863
- top: "2px",
38864
- bottom: "2px",
38865
- right: "24px",
39183
+ backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
39184
+ left: "4px",
39185
+ top: "3px",
39186
+ bottom: "3px",
39187
+ right: "20px",
38866
39188
  transition: {
38867
39189
  ease: "backIn"
38868
39190
  }
38869
39191
  },
38870
39192
  on: {
38871
39193
  backgroundColor: themeValues.white,
38872
- right: "1px",
38873
- top: "2px",
38874
- bottom: "2px",
38875
- left: "25px",
39194
+ right: "8px",
39195
+ top: "3px",
39196
+ bottom: "3px",
39197
+ left: "22px",
38876
39198
  transition: {
38877
39199
  ease: "backIn"
38878
39200
  }
38879
- },
38880
- disabled: {
38881
- backgroundColor: themeValues.white,
38882
- left: "2px",
38883
- top: "2px",
38884
- bottom: "2px",
38885
- right: "24px"
38886
39201
  }
38887
39202
  });
38888
39203
  var VisibleSwitch = posed(VisibleSwitchComponent)({
@@ -38897,19 +39212,20 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
38897
39212
  boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
38898
39213
  },
38899
39214
  off: {
38900
- backgroundColor: themeValues.offBackground,
39215
+ border: "1px solid",
39216
+ backgroundColor: disabled ? themeValues.disabledBackgroundLight : themeValues.white,
39217
+ borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
38901
39218
  transition: {
38902
39219
  ease: "easeOut"
38903
39220
  }
38904
39221
  },
38905
39222
  on: {
38906
- backgroundColor: themeValues.onBackground,
39223
+ border: "1px solid",
39224
+ backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
39225
+ borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
38907
39226
  transition: {
38908
39227
  ease: "easeIn"
38909
39228
  }
38910
- },
38911
- disabled: {
38912
- backgroundColor: themeValues.disabledBackground
38913
39229
  }
38914
39230
  });
38915
39231
  var handleKeyDown = function handleKeyDown(e) {
@@ -38944,11 +39260,11 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
38944
39260
  htmlFor: "#toggle-".concat(name),
38945
39261
  onClick: disabled ? noop : onToggle,
38946
39262
  onKeyDown: disabled ? noop : handleKeyDown,
38947
- pose: disabled ? "disabled" : isOn ? "on" : "off",
39263
+ pose: isOn ? "on" : "off",
38948
39264
  tabIndex: disabled ? -1 : 0,
38949
39265
  disabled: disabled,
38950
39266
  isMobile: isMobile
38951
- }, /*#__PURE__*/React__default.createElement(ToggleSwitchMiddleRing, null, /*#__PURE__*/React__default.createElement(ToggleSwitchInnerRing, null))))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
39267
+ }, /*#__PURE__*/React__default.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
38952
39268
  variant: "h4",
38953
39269
  weight: FONT_WEIGHT_SEMIBOLD,
38954
39270
  extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;",
@@ -39238,6 +39554,195 @@ var LoadingLine = function LoadingLine(_ref) {
39238
39554
  });
39239
39555
  };
39240
39556
 
39557
+ var fontSize$9 = {
39558
+ "default": "1.375rem",
39559
+ largeTitle: "1.75rem",
39560
+ small: "1.25rem"
39561
+ };
39562
+ var fontWeight$5 = {
39563
+ "default": "600",
39564
+ largeTitle: "700",
39565
+ small: "600"
39566
+ };
39567
+ var fontColor = {
39568
+ "default": CHARADE_GREY,
39569
+ largeTitle: CHARADE_GREY,
39570
+ small: CHARADE_GREY
39571
+ };
39572
+ var lineHeight$3 = {
39573
+ "default": "2rem",
39574
+ largeTitle: "2rem",
39575
+ small: "2rem"
39576
+ };
39577
+ var textAlign = {
39578
+ "default": "left",
39579
+ largeTitle: "left",
39580
+ small: "left"
39581
+ };
39582
+ var titleType = {
39583
+ "default": "h5",
39584
+ largeTitle: "h1",
39585
+ small: "h6"
39586
+ };
39587
+ var titleSpacing = {
39588
+ "default": "0.5rem",
39589
+ largeTitle: "1.125rem",
39590
+ small: "0.5rem"
39591
+ };
39592
+ var boxShadow$1 = {
39593
+ "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
39594
+ largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
39595
+ small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
39596
+ };
39597
+ var borderRadius = {
39598
+ "default": "0.25rem",
39599
+ largeTitle: "0.25rem",
39600
+ small: "0.25rem"
39601
+ };
39602
+ var backgroundColor$6 = {
39603
+ "default": WHITE,
39604
+ largeTitle: WHITE,
39605
+ small: WHITE
39606
+ };
39607
+ var fallbackValues$C = {
39608
+ fontSize: fontSize$9,
39609
+ fontWeight: fontWeight$5,
39610
+ fontColor: fontColor,
39611
+ lineHeight: lineHeight$3,
39612
+ textAlign: textAlign,
39613
+ titleType: titleType,
39614
+ titleSpacing: titleSpacing,
39615
+ boxShadow: boxShadow$1,
39616
+ borderRadius: borderRadius,
39617
+ backgroundColor: backgroundColor$6
39618
+ };
39619
+
39620
+ /*
39621
+ New (01/22) - updated <Module /> to use <Title /> atom
39622
+ Because <Title /> decouples size from element, also gave <Module />
39623
+ two new props: "as" and "fontSize"
39624
+
39625
+ When present, <Module /> will use those values to dictate element type and font size.
39626
+
39627
+ For backwards compatability, <Module /> still computes a themed font size and element type based on old
39628
+ <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
39629
+ */
39630
+
39631
+ var Module = function Module(_ref) {
39632
+ var _ref$variant = _ref.variant,
39633
+ variant = _ref$variant === void 0 ? "default" : _ref$variant,
39634
+ as = _ref.as,
39635
+ disabled = _ref.disabled,
39636
+ heading = _ref.heading,
39637
+ rightTitleContent = _ref.rightTitleContent,
39638
+ _ref$titleID = _ref.titleID,
39639
+ titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
39640
+ _ref$spacing = _ref.spacing,
39641
+ spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
39642
+ _ref$padding = _ref.padding,
39643
+ padding = _ref$padding === void 0 ? "0" : _ref$padding,
39644
+ _ref$margin = _ref.margin,
39645
+ margin = _ref$margin === void 0 ? "0" : _ref$margin,
39646
+ _ref$spacingBottom = _ref.spacingBottom,
39647
+ spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
39648
+ fontSize = _ref.fontSize,
39649
+ themeValues = _ref.themeValues,
39650
+ children = _ref.children;
39651
+ var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
39652
+ var computedFontSize = fontSize || themedFontSize;
39653
+ var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
39654
+ var computedElemType = as || themedElemType;
39655
+ var disabledStyles = "opacity: 0.40;";
39656
+ var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
39657
+ weight: themeValues.fontWeight,
39658
+ color: themeValues.fontColor,
39659
+ margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
39660
+ textAlign: themeValues.textAlign,
39661
+ as: computedElemType,
39662
+ extraStyles: "font-size: ".concat(computedFontSize, ";"),
39663
+ id: titleID
39664
+ }, heading);
39665
+ return /*#__PURE__*/React__default.createElement(Box, {
39666
+ "aria-disabled": disabled,
39667
+ extraStyles: disabled && disabledStyles,
39668
+ padding: "0",
39669
+ role: "group"
39670
+ }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
39671
+ justify: "space-between",
39672
+ align: "center",
39673
+ nowrap: true
39674
+ }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
39675
+ padding: "0 0 ".concat(spacingBottom),
39676
+ extraStyles: "margin: ".concat(margin)
39677
+ }, /*#__PURE__*/React__default.createElement(Box, {
39678
+ padding: padding,
39679
+ background: themeValues.backgroundColor,
39680
+ borderRadius: themeValues.borderRadius,
39681
+ boxShadow: themeValues.boxShadow
39682
+ }, children)));
39683
+ };
39684
+ var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$C, "default"));
39685
+
39686
+ var WalletName = function WalletName(_ref) {
39687
+ var mainText = _ref.mainText,
39688
+ action = _ref.action,
39689
+ _ref$text = _ref.text,
39690
+ text = _ref$text === void 0 ? null : _ref$text,
39691
+ _ref$actionText = _ref.actionText,
39692
+ actionText = _ref$actionText === void 0 ? null : _ref$actionText,
39693
+ _ref$disableAction = _ref.disableAction,
39694
+ disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction,
39695
+ _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
39696
+ linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
39697
+ _ref$isLoading = _ref.isLoading,
39698
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
39699
+ var _useContext = React.useContext(styled.ThemeContext),
39700
+ isMobile = _useContext.isMobile;
39701
+ return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
39702
+ spacingBottom: isMobile ? "0" : "1.5rem"
39703
+ }, /*#__PURE__*/React__default.createElement(Cluster, {
39704
+ align: "center",
39705
+ justify: !!text || !!actionText ? "space-between" : "flex-start",
39706
+ extraStyles: "\n box-shadow: 0px 1px 2px 0px rgba(".concat(CHARADE_GREY, ", 0.1);\n box-shadow: 0px 2px 6px 0px rgba(").concat(CHARADE_GREY, ", 0.2);\n box-shadow: 0px -1px 0px 0px rgba(").concat(CHARADE_GREY, ", 0.1) inset;\n padding: 1.5rem;\n ").concat(isMobile ? "span {text-align: right;}" : "", "\n ")
39707
+ }, /*#__PURE__*/React__default.createElement(Box, {
39708
+ padding: "0"
39709
+ }, isLoading ? /*#__PURE__*/React__default.createElement(Center, {
39710
+ as: "span",
39711
+ style: {
39712
+ padding: "24px 24px 0"
39713
+ },
39714
+ intrinsic: true
39715
+ }, /*#__PURE__*/React__default.createElement(Spinner$2, {
39716
+ strokeWidth: "2",
39717
+ size: "24",
39718
+ radius: "10",
39719
+ cx: "12",
39720
+ cy: "12"
39721
+ })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
39722
+ padding: "0"
39723
+ }, text && /*#__PURE__*/React__default.createElement(Text$1, {
39724
+ variant: "pXS"
39725
+ }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
39726
+ disabled: disableAction,
39727
+ text: actionText,
39728
+ action: action,
39729
+ variant: "smallGhost",
39730
+ extraStyles: "\n margin: 0;\n min-width: 0;\n span {font-size: 0.75rem;}\n ".concat(linkButtonExtraStyles, "\n ")
39731
+ })))), isMobile && /*#__PURE__*/React__default.createElement(Cluster, {
39732
+ align: "center",
39733
+ justify: text || actionText ? "flex-end" : "flex-start",
39734
+ extraStyles: "margin-top: 0.5rem;"
39735
+ }, text && /*#__PURE__*/React__default.createElement(Text$1, {
39736
+ extraStyles: "font-size: 0.857rem;"
39737
+ }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
39738
+ text: actionText,
39739
+ action: action,
39740
+ variant: "smallGhost",
39741
+ disabled: disableAction,
39742
+ extraStyles: "\n margin: 0;\n min-width: 0;\n span {font-size: 0.857rem;}\n ".concat(linkButtonExtraStyles, "\n ")
39743
+ })));
39744
+ };
39745
+
39241
39746
  var Table_styled = styled__default.table.withConfig({
39242
39747
  displayName: "Tablestyled",
39243
39748
  componentId: "sc-mveye7-0"
@@ -39274,10 +39779,10 @@ var TableCell_styled = styled__default.td.withConfig({
39274
39779
  return extraStyles;
39275
39780
  });
39276
39781
 
39277
- var backgroundColor$6 = ALABASTER_WHITE;
39782
+ var backgroundColor$7 = ALABASTER_WHITE;
39278
39783
  var borderColor$3 = GREY_CHATEAU;
39279
- var fallbackValues$C = {
39280
- backgroundColor: backgroundColor$6,
39784
+ var fallbackValues$D = {
39785
+ backgroundColor: backgroundColor$7,
39281
39786
  borderColor: borderColor$3
39282
39787
  };
39283
39788
 
@@ -39298,7 +39803,7 @@ var StyledTableHead = styled__default.thead.withConfig({
39298
39803
 
39299
39804
  var borderColor$4 = GREY_CHATEAU;
39300
39805
  var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
39301
- var fallbackValues$D = {
39806
+ var fallbackValues$E = {
39302
39807
  borderColor: borderColor$4,
39303
39808
  hoverBackgroundColor: hoverBackgroundColor$1
39304
39809
  };
@@ -39337,7 +39842,7 @@ var TableRow = function TableRow(_ref) {
39337
39842
  hoverBackgroundColor: themeValues.hoverBackgroundColor
39338
39843
  }, props), children);
39339
39844
  };
39340
- var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$D);
39845
+ var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$E);
39341
39846
 
39342
39847
  var TableHead = function TableHead(_ref) {
39343
39848
  var children = _ref.children,
@@ -39352,7 +39857,7 @@ var TableHead = function TableHead(_ref) {
39352
39857
  hoverEffect: false
39353
39858
  }, children));
39354
39859
  };
39355
- var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$C);
39860
+ var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$D);
39356
39861
 
39357
39862
  var TableHeading_styled = styled__default.th.withConfig({
39358
39863
  displayName: "TableHeadingstyled",
@@ -39832,6 +40337,14 @@ validatorFns[IS_PROBABLY_EMAIL] = (value, args, form) => {
39832
40337
  return new RegExp(/^\S+@\S+\.\S+$/).test(value);
39833
40338
  };
39834
40339
 
40340
+ const VALID_NAME = 'validator/VALID_NAME';
40341
+ const VALID_NAME_ERROR = 'validator/VALID_NAME_ERROR';
40342
+ const validName = createValidator(VALID_NAME, VALID_NAME_ERROR);
40343
+ validatorFns[VALID_NAME] = (value, args, form) =>
40344
+ value === ''
40345
+ ? false
40346
+ : new RegExp(/[A-zÀ-ÿ\-,'\S]+(\s?[A-zÀ-ÿ\-,'\S])*/).test(value);
40347
+
39835
40348
  const runValidatorErrorMessage = (type) =>
39836
40349
  `${type} was passed to runValidator, but that validator type does not exist.
39837
40350
  Please check that you are only calling validator creator functions exported from
@@ -40178,9 +40691,9 @@ AddressForm.reducer = reducer;
40178
40691
  AddressForm.mapStateToProps = mapStateToProps$1;
40179
40692
  AddressForm.mapDispatchToProps = mapDispatchToProps;
40180
40693
 
40181
- var backgroundColor$7 = "#ebeffb";
40182
- var fallbackValues$E = {
40183
- backgroundColor: backgroundColor$7
40694
+ var backgroundColor$8 = "#ebeffb";
40695
+ var fallbackValues$F = {
40696
+ backgroundColor: backgroundColor$8
40184
40697
  };
40185
40698
 
40186
40699
  var Banner = function Banner(_ref) {
@@ -40228,7 +40741,7 @@ var Banner = function Banner(_ref) {
40228
40741
  extraStyles: isMobile && "> svg { width: 176px; }"
40229
40742
  }, /*#__PURE__*/React__default.createElement(Image, null))));
40230
40743
  };
40231
- var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$E);
40744
+ var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$F);
40232
40745
 
40233
40746
  var ChangePasswordForm = function ChangePasswordForm(_ref) {
40234
40747
  var clearOnDismount = _ref.clearOnDismount,
@@ -40362,7 +40875,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
40362
40875
  var titleColor$1 = "#292A33";
40363
40876
  var headingBackgroundColor = "transparent";
40364
40877
  var bodyBackgroundColor = "transparent";
40365
- var fallbackValues$F = {
40878
+ var fallbackValues$G = {
40366
40879
  titleColor: titleColor$1,
40367
40880
  headingBackgroundColor: headingBackgroundColor,
40368
40881
  bodyBackgroundColor: bodyBackgroundColor
@@ -40487,7 +41000,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
40487
41000
  "aria-labelledby": "".concat(id, "-button")
40488
41001
  }, children))));
40489
41002
  };
40490
- var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$F);
41003
+ var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$G);
40491
41004
 
40492
41005
  var ClipboardIcon = function ClipboardIcon(_ref) {
40493
41006
  var themeValues = _ref.themeValues;
@@ -40769,7 +41282,9 @@ var EditableList = function EditableList(_ref) {
40769
41282
  qaPrefix = _ref.qaPrefix,
40770
41283
  ariaLabel = _ref.ariaLabel,
40771
41284
  _ref$editItemAriaRole = _ref.editItemAriaRole,
40772
- editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole;
41285
+ editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
41286
+ _ref$disablePlacehold = _ref.disablePlaceholder,
41287
+ disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
40773
41288
  var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
40774
41289
  return /*#__PURE__*/React__default.createElement(Box, {
40775
41290
  padding: listPadding,
@@ -40852,7 +41367,8 @@ var EditableList = function EditableList(_ref) {
40852
41367
  text: addText,
40853
41368
  action: addItem,
40854
41369
  dataQa: "Add " + qaPrefix,
40855
- "aria-label": addText
41370
+ "aria-label": addText,
41371
+ isDisabled: disablePlaceholder
40856
41372
  }))));
40857
41373
  };
40858
41374
 
@@ -41063,7 +41579,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
41063
41579
 
41064
41580
  var footerBackgroundColor = BRIGHT_GREY;
41065
41581
  var subfooterBackgroundColor = STORM_GREY;
41066
- var fallbackValues$G = {
41582
+ var fallbackValues$H = {
41067
41583
  footerBackgroundColor: footerBackgroundColor,
41068
41584
  subfooterBackgroundColor: subfooterBackgroundColor
41069
41585
  };
@@ -41094,7 +41610,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
41094
41610
  rightContent: rightSubfooterContent
41095
41611
  }));
41096
41612
  };
41097
- var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$G);
41613
+ var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$H);
41098
41614
 
41099
41615
  var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
41100
41616
  var fields = _ref.fields,
@@ -41140,10 +41656,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
41140
41656
  ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
41141
41657
 
41142
41658
  var textColor$4 = "#ffffff";
41143
- var backgroundColor$8 = "#182848";
41144
- var fallbackValues$H = {
41659
+ var backgroundColor$9 = "#182848";
41660
+ var fallbackValues$I = {
41145
41661
  textColor: textColor$4,
41146
- backgroundColor: backgroundColor$8
41662
+ backgroundColor: backgroundColor$9
41147
41663
  };
41148
41664
 
41149
41665
  // this component needs some fix'n
@@ -41200,7 +41716,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
41200
41716
  }, t));
41201
41717
  }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
41202
41718
  };
41203
- var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$H);
41719
+ var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$I);
41204
41720
 
41205
41721
  var AccountBillIcon = function AccountBillIcon() {
41206
41722
  return /*#__PURE__*/React__default.createElement("svg", {
@@ -42653,33 +43169,19 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
42653
43169
  var MISC_BILL_ICON = "MISC_SINGLE_BILL";
42654
43170
  var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
42655
43171
 
42656
- var disabledBackgroundColor$1 = {
42657
- primary: TRANSPARENT
42658
- };
42659
- var disabledBorderColor$1 = {
42660
- primary: GHOST_GREY
42661
- };
42662
- var disabledColor$1 = {
42663
- primary: MANATEE_GREY
42664
- };
42665
- var activeBackgroundColor$1 = {
42666
- primary: CORNFLOWER_BLUE
42667
- };
42668
- var backgroundColor$9 = {
42669
- primary: LINK_WATER
42670
- };
42671
- var borderColor$5 = {
42672
- primary: MOON_RAKER
42673
- };
42674
- var color$b = {
42675
- primary: ROYAL_BLUE_VIVID
42676
- };
42677
- var fallbackValues$I = {
43172
+ var disabledBackgroundColor$1 = TRANSPARENT;
43173
+ var disabledBorderColor$1 = GHOST_GREY;
43174
+ var disabledColor$1 = MANATEE_GREY;
43175
+ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
43176
+ var backgroundColor$a = LINK_WATER;
43177
+ var borderColor$5 = MOON_RAKER;
43178
+ var color$b = ROYAL_BLUE_VIVID;
43179
+ var fallbackValues$J = {
42678
43180
  disabledBackgroundColor: disabledBackgroundColor$1,
42679
43181
  disabledBorderColor: disabledBorderColor$1,
42680
43182
  disabledColor: disabledColor$1,
42681
43183
  activeBackgroundColor: activeBackgroundColor$1,
42682
- backgroundColor: backgroundColor$9,
43184
+ backgroundColor: backgroundColor$a,
42683
43185
  borderColor: borderColor$5,
42684
43186
  color: color$b
42685
43187
  };
@@ -42795,7 +43297,7 @@ var LinkCard = function LinkCard(_ref) {
42795
43297
  extraStyles: "margin-right: auto;"
42796
43298
  }), showRight && !!rightContent && rightContent))));
42797
43299
  };
42798
- var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "primary");
43300
+ var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$J, "primary");
42799
43301
 
42800
43302
  var LoginForm = function LoginForm(_ref) {
42801
43303
  var clearOnDismount = _ref.clearOnDismount,
@@ -46302,14 +46804,27 @@ var Modal$1 = function Modal(_ref) {
46302
46804
  blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
46303
46805
  var _useContext = React.useContext(styled.ThemeContext),
46304
46806
  isMobile = _useContext.isMobile;
46305
- var modalContainerRef = React.useRef(null);
46807
+
46808
+ // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
46809
+ // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
46810
+ // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
46811
+ // this option will be populated on initial render when `focus-trap` is checking
46812
+ // these option. When there are no buttons in the modal, this causes an error.
46813
+ // Because `focus-trap` cannot be disabled, the ref itself requires a default value
46814
+ // to satisfy `focus-trap` until React populates it with the real ref value.
46815
+ //
46816
+ // See:
46817
+ // - https://react.dev/reference/react/useRef#caveats
46818
+ // - https://github.com/davidtheclark/react-aria-modal/pull/103
46819
+ // - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
46820
+ var modalContainerRef = React.useRef("#react-aria-modal-dialog");
46306
46821
  return /*#__PURE__*/React__default.createElement("div", {
46307
46822
  ref: modalContainerRef,
46823
+ tabIndex: "-1",
46308
46824
  "data-qa": dataQa
46309
- }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal
46310
- // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
46311
- , {
46825
+ }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
46312
46826
  focusTrapOptions: {
46827
+ // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
46313
46828
  fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
46314
46829
  },
46315
46830
  onExit: onExit,
@@ -46434,134 +46949,343 @@ var Modal$1 = function Modal(_ref) {
46434
46949
  }))))))))), children);
46435
46950
  };
46436
46951
 
46437
- var fontSize$9 = {
46438
- "default": "1.375rem",
46439
- largeTitle: "1.75rem",
46440
- small: "1.25rem"
46441
- };
46442
- var fontWeight$5 = {
46443
- "default": "600",
46444
- largeTitle: "700",
46445
- small: "600"
46446
- };
46447
- var fontColor = {
46448
- "default": CHARADE_GREY,
46449
- largeTitle: CHARADE_GREY,
46450
- small: CHARADE_GREY
46451
- };
46452
- var lineHeight$3 = {
46453
- "default": "2rem",
46454
- largeTitle: "2rem",
46455
- small: "2rem"
46456
- };
46457
- var textAlign = {
46458
- "default": "left",
46459
- largeTitle: "left",
46460
- small: "left"
46461
- };
46462
- var titleType = {
46463
- "default": "h5",
46464
- largeTitle: "h1",
46465
- small: "h6"
46466
- };
46467
- var titleSpacing = {
46468
- "default": "0.5rem",
46469
- largeTitle: "1.125rem",
46470
- small: "0.5rem"
46952
+ var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
46953
+ var _ref$children = _ref.children,
46954
+ children = _ref$children === void 0 ? [] : _ref$children,
46955
+ _ref$isMobile = _ref.isMobile,
46956
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
46957
+ var safeChildren = Array.isArray(children) ? children : [children];
46958
+ var flexGrow = isMobile ? "flex-grow: 1;" : "";
46959
+ return /*#__PURE__*/React__default.createElement(Box, {
46960
+ padding: SPACING.MD
46961
+ }, /*#__PURE__*/React__default.createElement(Stack, {
46962
+ childGap: "1rem",
46963
+ direction: "row",
46964
+ justify: "flex-end"
46965
+ }, safeChildren.map(function (child, index) {
46966
+ return /*#__PURE__*/React__default.createElement(Box, {
46967
+ padding: "0",
46968
+ extraStyles: flexGrow,
46969
+ key: index
46970
+ }, child);
46971
+ })));
46471
46972
  };
46472
- var boxShadow$1 = {
46473
- "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
46474
- largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
46475
- small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
46973
+
46974
+ var CancelButton = function CancelButton(_ref) {
46975
+ var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
46976
+ buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
46977
+ _ref$cancelAction = _ref.cancelAction,
46978
+ cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
46979
+ _ref$cancelButtonText = _ref.cancelButtonText,
46980
+ cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
46981
+ _ref$cancelButtonVari = _ref.cancelButtonVariant,
46982
+ cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "secondary" : _ref$cancelButtonVari,
46983
+ _ref$hideModal = _ref.hideModal,
46984
+ hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
46985
+ _ref$isMobile = _ref.isMobile,
46986
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
46987
+ var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
46988
+ var width = isMobile ? "width: 100%;" : "";
46989
+ return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
46990
+ action: cancelAction ? cancelAction : hideModal,
46991
+ borderRadius: BORDER_RADIUS.MD,
46992
+ className: "modal-cancel-button",
46993
+ dataQa: cancelButtonText,
46994
+ extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
46995
+ name: cancelButtonText,
46996
+ role: "button",
46997
+ text: cancelButtonText,
46998
+ textExtraStyles: "".concat(fontSize),
46999
+ variant: cancelButtonVariant
47000
+ });
46476
47001
  };
46477
- var borderRadius = {
46478
- "default": "0.25rem",
46479
- largeTitle: "0.25rem",
46480
- small: "0.25rem"
47002
+
47003
+ var CloseButton = function CloseButton(_ref) {
47004
+ var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
47005
+ buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
47006
+ _ref$closeButtonText = _ref.closeButtonText,
47007
+ closeButtonText = _ref$closeButtonText === void 0 ? "" : _ref$closeButtonText,
47008
+ _ref$hideModal = _ref.hideModal,
47009
+ hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
47010
+ _ref$isMobile = _ref.isMobile,
47011
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
47012
+ var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
47013
+ var width = isMobile ? "width: 100%;" : "";
47014
+ return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
47015
+ action: hideModal,
47016
+ borderRadius: BORDER_RADIUS.MD,
47017
+ className: "modal-close-button",
47018
+ dataQa: closeButtonText,
47019
+ extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
47020
+ name: closeButtonText,
47021
+ role: "button",
47022
+ text: closeButtonText,
47023
+ textExtraStyles: "".concat(fontSize),
47024
+ variant: "primary"
47025
+ });
46481
47026
  };
46482
- var backgroundColor$a = {
46483
- "default": WHITE,
46484
- largeTitle: WHITE,
46485
- small: WHITE
47027
+
47028
+ var CloseIconButton = function CloseIconButton(_ref) {
47029
+ var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
47030
+ _ref$hideModal = _ref.hideModal,
47031
+ hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
47032
+ _ref$iconWidth = _ref.iconWidth,
47033
+ iconWidth = _ref$iconWidth === void 0 ? "24" : _ref$iconWidth,
47034
+ _ref$iconHeight = _ref.iconHeight,
47035
+ iconHeight = _ref$iconHeight === void 0 ? "24" : _ref$iconHeight,
47036
+ _ref$ariaLabel = _ref.ariaLabel,
47037
+ ariaLabel = _ref$ariaLabel === void 0 ? "Close Modal" : _ref$ariaLabel;
47038
+ return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
47039
+ action: hideModal,
47040
+ "aria-label": ariaLabel,
47041
+ contentOverride: true,
47042
+ extraStyles: "\n min-height: auto;\n min-width: auto;\n height: 1.5rem;\n margin: 0 0 0 0.5rem;\n &:focus {\n outline-offset: -3px;\n }\n ",
47043
+ variant: "smallGhost"
47044
+ }, /*#__PURE__*/React__default.createElement(CloseIcon, {
47045
+ role: "img",
47046
+ "aria-hidden": "true",
47047
+ iconWidth: iconWidth,
47048
+ iconHeight: iconHeight
47049
+ }));
46486
47050
  };
46487
- var fallbackValues$J = {
46488
- fontSize: fontSize$9,
46489
- fontWeight: fontWeight$5,
46490
- fontColor: fontColor,
46491
- lineHeight: lineHeight$3,
46492
- textAlign: textAlign,
46493
- titleType: titleType,
46494
- titleSpacing: titleSpacing,
46495
- boxShadow: boxShadow$1,
46496
- borderRadius: borderRadius,
46497
- backgroundColor: backgroundColor$a
47051
+
47052
+ var ContinueButton = function ContinueButton(_ref) {
47053
+ var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
47054
+ buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
47055
+ _ref$continueAction = _ref.continueAction,
47056
+ continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
47057
+ _ref$continueButtonTe = _ref.continueButtonText,
47058
+ continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
47059
+ _ref$continueURL = _ref.continueURL,
47060
+ continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
47061
+ _ref$continueButtonVa = _ref.continueButtonVariant,
47062
+ continueButtonVariant = _ref$continueButtonVa === void 0 ? "primary" : _ref$continueButtonVa,
47063
+ _ref$isContinueAction = _ref.isContinueActionDisabled,
47064
+ isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
47065
+ _ref$isLoading = _ref.isLoading,
47066
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
47067
+ _ref$isMobile = _ref.isMobile,
47068
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
47069
+ _ref$useDangerButton = _ref.useDangerButton,
47070
+ useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
47071
+ var ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
47072
+ var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
47073
+ var width = isMobile ? "width: 100%;" : "";
47074
+ return /*#__PURE__*/React__default.createElement(ContinueButtonAtom, {
47075
+ action: continueAction,
47076
+ borderRadius: BORDER_RADIUS.MD,
47077
+ className: "modal-continue-button",
47078
+ dataQa: continueButtonText,
47079
+ disabled: isContinueActionDisabled,
47080
+ extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
47081
+ isLoading: isLoading,
47082
+ linkExtraStyles: "display: inline-block; ".concat(width),
47083
+ name: continueButtonText,
47084
+ role: "button",
47085
+ text: continueButtonText,
47086
+ textExtraStyles: "".concat(fontSize),
47087
+ url: continueURL,
47088
+ variant: useDangerButton ? "danger" : continueButtonVariant
47089
+ });
46498
47090
  };
46499
47091
 
46500
47092
  /*
46501
- New (01/22) - updated <Module /> to use <Title /> atom
46502
- Because <Title /> decouples size from element, also gave <Module />
46503
- two new props: "as" and "fontSize"
46504
-
46505
- When present, <Module /> will use those values to dictate element type and font size.
47093
+ Default Modal molecule
47094
+ Uses react-aria-modal behind the scenes for a11y purposes
47095
+ Styling accomplished with our atoms / layout primitives
46506
47096
 
46507
- For backwards compatability, <Module /> still computes a themed font size and element type based on old
46508
- <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
47097
+ Cancel button will (for now) always use hideModal as its action
47098
+ Continue button takes an action, if you want to navigate to
47099
+ a different route (as with a link) connect() and use "push" from @thecb/connected-react-router
46509
47100
  */
46510
47101
 
46511
- var Module = function Module(_ref) {
46512
- var _ref$variant = _ref.variant,
46513
- variant = _ref$variant === void 0 ? "default" : _ref$variant,
46514
- as = _ref.as,
46515
- disabled = _ref.disabled,
46516
- heading = _ref.heading,
46517
- rightTitleContent = _ref.rightTitleContent,
46518
- _ref$titleID = _ref.titleID,
46519
- titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
46520
- _ref$spacing = _ref.spacing,
46521
- spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
46522
- _ref$padding = _ref.padding,
46523
- padding = _ref$padding === void 0 ? "0" : _ref$padding,
46524
- _ref$margin = _ref.margin,
46525
- margin = _ref$margin === void 0 ? "0" : _ref$margin,
46526
- _ref$spacingBottom = _ref.spacingBottom,
46527
- spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
46528
- fontSize = _ref.fontSize,
46529
- themeValues = _ref.themeValues,
46530
- children = _ref.children;
46531
- var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
46532
- var computedFontSize = fontSize || themedFontSize;
46533
- var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
46534
- var computedElemType = as || themedElemType;
46535
- var disabledStyles = "opacity: 0.40;";
46536
- var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
46537
- weight: themeValues.fontWeight,
46538
- color: themeValues.fontColor,
46539
- margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
46540
- textAlign: themeValues.textAlign,
46541
- as: computedElemType,
46542
- extraStyles: "font-size: ".concat(computedFontSize, ";"),
46543
- id: titleID
46544
- }, heading);
46545
- return /*#__PURE__*/React__default.createElement(Box, {
46546
- "aria-disabled": disabled,
46547
- extraStyles: disabled && disabledStyles,
47102
+ var getApplicationNode$1 = function getApplicationNode() {
47103
+ return document.getElementById("root");
47104
+ };
47105
+ var Modal$2 = function Modal(_ref) {
47106
+ var _ref$blurUnderlay = _ref.blurUnderlay,
47107
+ blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay,
47108
+ _ref$buttonExtraStyle = _ref.buttonExtraStyles,
47109
+ buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
47110
+ _ref$cancelAction = _ref.cancelAction,
47111
+ cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
47112
+ _ref$cancelButtonText = _ref.cancelButtonText,
47113
+ cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
47114
+ _ref$cancelButtonVari = _ref.cancelButtonVariant,
47115
+ cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "secondary" : _ref$cancelButtonVari,
47116
+ _ref$children = _ref.children,
47117
+ children = _ref$children === void 0 ? [] : _ref$children,
47118
+ _ref$closeButtonText = _ref.closeButtonText,
47119
+ closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
47120
+ _ref$continueAction = _ref.continueAction,
47121
+ continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
47122
+ _ref$continueButtonTe = _ref.continueButtonText,
47123
+ continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
47124
+ _ref$continueButtonVa = _ref.continueButtonVariant,
47125
+ continueButtonVariant = _ref$continueButtonVa === void 0 ? "primary" : _ref$continueButtonVa,
47126
+ _ref$continueURL = _ref.continueURL,
47127
+ continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
47128
+ _ref$customWidth = _ref.customWidth,
47129
+ customWidth = _ref$customWidth === void 0 ? "" : _ref$customWidth,
47130
+ _ref$dataQa = _ref.dataQa,
47131
+ dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
47132
+ _ref$defaultWrapper = _ref.defaultWrapper,
47133
+ defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
47134
+ _ref$hideModal = _ref.hideModal,
47135
+ hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
47136
+ _ref$initialFocusSele = _ref.initialFocusSelector,
47137
+ initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
47138
+ _ref$isContinueAction = _ref.isContinueActionDisabled,
47139
+ isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
47140
+ _ref$isLoading = _ref.isLoading,
47141
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
47142
+ _ref$maxHeight = _ref.maxHeight,
47143
+ maxHeight = _ref$maxHeight === void 0 ? "" : _ref$maxHeight,
47144
+ _ref$modalBodyBg = _ref.modalBodyBg,
47145
+ modalBodyBg = _ref$modalBodyBg === void 0 ? "" : _ref$modalBodyBg,
47146
+ _ref$modalBodyText = _ref.modalBodyText,
47147
+ modalBodyText = _ref$modalBodyText === void 0 ? "" : _ref$modalBodyText,
47148
+ _ref$modalHeaderBg = _ref.modalHeaderBg,
47149
+ modalHeaderBg = _ref$modalHeaderBg === void 0 ? "" : _ref$modalHeaderBg,
47150
+ _ref$modalHeaderText = _ref.modalHeaderText,
47151
+ modalHeaderText = _ref$modalHeaderText === void 0 ? "" : _ref$modalHeaderText,
47152
+ _ref$modalOpen = _ref.modalOpen,
47153
+ modalOpen = _ref$modalOpen === void 0 ? false : _ref$modalOpen,
47154
+ _ref$noButtons = _ref.noButtons,
47155
+ noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
47156
+ _ref$onExit = _ref.onExit,
47157
+ onExit = _ref$onExit === void 0 ? hideModal : _ref$onExit,
47158
+ _ref$onlyCloseButton = _ref.onlyCloseButton,
47159
+ onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
47160
+ _ref$onlyContinueButt = _ref.onlyContinueButton,
47161
+ onlyContinueButton = _ref$onlyContinueButt === void 0 ? false : _ref$onlyContinueButt,
47162
+ _ref$showCloseIconBut = _ref.showCloseIconButton,
47163
+ showCloseIconButton = _ref$showCloseIconBut === void 0 ? false : _ref$showCloseIconBut,
47164
+ _ref$underlayClickExi = _ref.underlayClickExits,
47165
+ underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
47166
+ _ref$useDangerButton = _ref.useDangerButton,
47167
+ useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
47168
+ var _useContext = React.useContext(styled.ThemeContext),
47169
+ isMobile = _useContext.isMobile;
47170
+
47171
+ // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
47172
+ // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
47173
+ // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
47174
+ // this option will be populated on initial render when `focus-trap` is checking
47175
+ // these option. When there are no buttons in the modal, this causes an error.
47176
+ // Because `focus-trap` cannot be disabled, the ref itself requires a default value
47177
+ // to satisfy `focus-trap` until React populates it with the real ref value.
47178
+ //
47179
+ // See:
47180
+ // - https://react.dev/reference/react/useRef#caveats
47181
+ // - https://github.com/davidtheclark/react-aria-modal/pull/103
47182
+ // - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
47183
+ var modalContainerRef = React.useRef("#react-aria-modal-dialog");
47184
+ var hasCloseButton = onlyCloseButton && !noButtons;
47185
+ var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
47186
+ var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
47187
+ return /*#__PURE__*/React__default.createElement("div", {
47188
+ ref: modalContainerRef,
47189
+ tabIndex: "-1",
47190
+ "data-qa": dataQa
47191
+ }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
47192
+ focusTrapOptions: {
47193
+ // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
47194
+ fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
47195
+ },
47196
+ onExit: onExit,
47197
+ getApplicationNode: getApplicationNode$1,
47198
+ titleText: modalHeaderText,
47199
+ underlayStyle: {
47200
+ display: "flex",
47201
+ flexDirection: "column",
47202
+ justifyContent: "center",
47203
+ alignItems: "center",
47204
+ background: "rgba(41, 42, 51, 0.45)",
47205
+ backdropFilter: blurUnderlay ? "blur(4px)" : "none",
47206
+ WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
47207
+ },
47208
+ dialogStyle: {
47209
+ borderRadius: BORDER_RADIUS.MD,
47210
+ margin: SPACING.XS,
47211
+ overflow: "auto",
47212
+ width: isMobile ? "" : customWidth || "576px"
47213
+ },
47214
+ underlayClickExits: underlayClickExits,
47215
+ "aria-modal": true,
47216
+ initialFocus: initialFocusSelector,
47217
+ focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
47218
+ }, /*#__PURE__*/React__default.createElement(Box, {
46548
47219
  padding: "0",
46549
- role: "group"
46550
- }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
46551
- justify: "space-between",
46552
- align: "center",
47220
+ boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
47221
+ }, /*#__PURE__*/React__default.createElement(Box, {
47222
+ background: modalHeaderBg || WHITE,
47223
+ borderColor: SILVER_GREY,
47224
+ borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
47225
+ padding: "".concat(SPACING.XS, " ").concat(SPACING.MD)
47226
+ }, /*#__PURE__*/React__default.createElement(Cluster, {
47227
+ justify: showCloseIconButton ? "space-between" : "flex-start",
47228
+ align: showCloseIconButton && isMobile ? "flex-start" : "center",
46553
47229
  nowrap: true
46554
- }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
46555
- padding: "0 0 ".concat(spacingBottom),
46556
- extraStyles: "margin: ".concat(margin)
47230
+ }, /*#__PURE__*/React__default.createElement(Title$1, {
47231
+ as: "h2",
47232
+ weight: FONT_WEIGHT_SEMIBOLD,
47233
+ fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG
47234
+ }, modalHeaderText), showCloseIconButton && /*#__PURE__*/React__default.createElement(CloseIconButton, {
47235
+ hideModal: hideModal
47236
+ }))), /*#__PURE__*/React__default.createElement(Box, {
47237
+ background: modalBodyBg || ATHENS_GREY,
47238
+ padding: "0"
46557
47239
  }, /*#__PURE__*/React__default.createElement(Box, {
46558
- padding: padding,
46559
- background: themeValues.backgroundColor,
46560
- borderRadius: themeValues.borderRadius,
46561
- boxShadow: themeValues.boxShadow
46562
- }, children)));
47240
+ padding: SPACING.MD,
47241
+ borderWidthOverride: !noButtons && "0 0 ".concat(BORDER_THIN, " 0"),
47242
+ borderColor: !noButtons && SILVER_GREY,
47243
+ extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
47244
+ }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
47245
+ variant: isMobile ? "pS" : "p"
47246
+ }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
47247
+ padding: maxHeight ? "0 0 ".concat(SPACING.XS, " 0") : "0"
47248
+ }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement(ButtonLayoutWrapper, {
47249
+ isMobile: isMobile
47250
+ }, [hasCancelButton && /*#__PURE__*/React__default.createElement(CancelButton, {
47251
+ buttonExtraStyles: buttonExtraStyles,
47252
+ cancelAction: cancelAction,
47253
+ cancelButtonText: cancelButtonText,
47254
+ cancelButtonVariant: cancelButtonVariant,
47255
+ hideModal: hideModal,
47256
+ isMobile: isMobile,
47257
+ key: "cancel"
47258
+ }), hasContinueButton && /*#__PURE__*/React__default.createElement(ContinueButton, {
47259
+ buttonExtraStyles: buttonExtraStyles,
47260
+ continueAction: continueAction,
47261
+ continueButtonText: continueButtonText,
47262
+ continueURL: continueURL,
47263
+ continueButtonVariant: continueButtonVariant,
47264
+ isContinueActionDisabled: isContinueActionDisabled,
47265
+ isLoading: isLoading,
47266
+ isMobile: isMobile,
47267
+ key: "continue",
47268
+ useDangerButton: useDangerButton
47269
+ }), hasCloseButton && /*#__PURE__*/React__default.createElement(CloseButton, {
47270
+ buttonExtraStyles: buttonExtraStyles,
47271
+ closeButtonText: closeButtonText,
47272
+ hideModal: hideModal,
47273
+ isMobile: isMobile,
47274
+ key: "close"
47275
+ })].filter(function (button) {
47276
+ return button;
47277
+ }))))), children);
47278
+ };
47279
+ var ModalControlV2 = withWindowSize(Modal$2);
47280
+
47281
+ var _excluded$A = ["version"];
47282
+ var Modal$3 = function Modal(_ref) {
47283
+ var _ref$version = _ref.version,
47284
+ version = _ref$version === void 0 ? "v1" : _ref$version,
47285
+ rest = _objectWithoutProperties(_ref, _excluded$A);
47286
+ var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
47287
+ return /*#__PURE__*/React__default.createElement(ModalControl, rest);
46563
47288
  };
46564
- var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
46565
47289
 
46566
47290
  var backgroundColor$b = {
46567
47291
  profile: "#3b414d",
@@ -46841,7 +47565,7 @@ var AutopayModal = function AutopayModal(_ref) {
46841
47565
  }
46842
47566
  }
46843
47567
  };
46844
- return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
47568
+ return /*#__PURE__*/React__default.createElement(Modal$3, _extends({
46845
47569
  showModal: function showModal() {
46846
47570
  return toggleModal(true);
46847
47571
  },
@@ -47080,7 +47804,7 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
47080
47804
  return formattedAccount === agencyName ? agencyName : acc + formattedAccount;
47081
47805
  }, "".concat(agencyName, " - ")) : "";
47082
47806
  var identifier = accountType === "Account" && obligations.length > 1 ? "accounts" : accountType === "Property" && obligations.length > 1 ? "properties" : accountType.toLowerCase();
47083
- return /*#__PURE__*/React__default.createElement(Modal$1, {
47807
+ return /*#__PURE__*/React__default.createElement(Modal$3, {
47084
47808
  showModal: function showModal() {
47085
47809
  return setModalIsOpen(true);
47086
47810
  },
@@ -47428,6 +48152,39 @@ var Obligation = function Obligation(_ref) {
47428
48152
  return inactive ? inactiveObligation : activeObligation;
47429
48153
  };
47430
48154
 
48155
+ var PartialAmountField = function PartialAmountField(_ref) {
48156
+ var lineItem = _ref.lineItem,
48157
+ field = _ref.field,
48158
+ showErrors = _ref.showErrors,
48159
+ errorMessages = _ref.errorMessages,
48160
+ moneyFormat = _ref.moneyFormat,
48161
+ fieldActions = _ref.fieldActions;
48162
+ return /*#__PURE__*/React__default.createElement(FormInput$1, {
48163
+ labelTextWhenNoError: lineItem.description,
48164
+ key: lineItem.id,
48165
+ field: field,
48166
+ fieldActions: fieldActions,
48167
+ showErrors: showErrors,
48168
+ errorMessages: errorMessages,
48169
+ style: {
48170
+ textAlign: "right"
48171
+ },
48172
+ placeholder: "$0.00",
48173
+ formatter: moneyFormat,
48174
+ isNum: true,
48175
+ decorator: /*#__PURE__*/React__default.createElement(Text$1, {
48176
+ variant: "p"
48177
+ }, "Amount owed:", " ", /*#__PURE__*/React__default.createElement(Text$1, {
48178
+ variant: "p",
48179
+ weight: "600"
48180
+ }, displayCurrency(lineItem.amount)))
48181
+ });
48182
+ };
48183
+ function arePropsEqual(prevProps, nextProps) {
48184
+ return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
48185
+ }
48186
+ var PartialAmountField$1 = /*#__PURE__*/React__default.memo(PartialAmountField, arePropsEqual);
48187
+
47431
48188
  var PartialAmountForm = function PartialAmountForm(_ref) {
47432
48189
  var _ref$variant = _ref.variant,
47433
48190
  variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -47471,25 +48228,15 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
47471
48228
  height: "16px"
47472
48229
  }
47473
48230
  }), /*#__PURE__*/React__default.createElement(FormInputColumn, null, lineItemsNew.map(function (li) {
47474
- return /*#__PURE__*/React__default.createElement(FormInput$1, {
47475
- labelTextWhenNoError: li.description,
48231
+ return /*#__PURE__*/React__default.createElement(PartialAmountField$1, {
47476
48232
  key: li.id,
48233
+ lineItem: li,
47477
48234
  field: fields[li.id],
47478
- fieldActions: actions.fields[li.id],
48235
+ actions: actions,
47479
48236
  showErrors: showErrors,
47480
- errorMessages: getPartialAmountFormErrors(li.amount),
47481
- style: {
47482
- textAlign: "right"
47483
- },
47484
- placeholder: "$0.00",
47485
- formatter: moneyFormat,
47486
- isNum: true,
47487
- decorator: /*#__PURE__*/React__default.createElement(Text$1, {
47488
- variant: "p"
47489
- }, "Amount owed:", " ", /*#__PURE__*/React__default.createElement(Text$1, {
47490
- variant: "p",
47491
- weight: "600"
47492
- }, displayCurrency(li.amount)))
48237
+ moneyFormat: moneyFormat,
48238
+ fieldActions: actions.fields[li.id],
48239
+ errorMessages: getPartialAmountFormErrors(li.amount)
47493
48240
  });
47494
48241
  })));
47495
48242
  };
@@ -47839,7 +48586,7 @@ var fallbackValues$N = {
47839
48586
  labeledAmountTotal: labeledAmountTotal
47840
48587
  };
47841
48588
 
47842
- var _excluded$A = ["amount"],
48589
+ var _excluded$B = ["amount"],
47843
48590
  _excluded2$1 = ["amount"];
47844
48591
  var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
47845
48592
  var lineItemElems = _ref.lineItemElems,
@@ -48084,7 +48831,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
48084
48831
  return fee.amount > 0;
48085
48832
  }).map(function (_ref5) {
48086
48833
  var amount = _ref5.amount,
48087
- rest = _objectWithoutProperties(_ref5, _excluded$A);
48834
+ rest = _objectWithoutProperties(_ref5, _excluded$B);
48088
48835
  return _objectSpread2(_objectSpread2({}, rest), {}, {
48089
48836
  amount: displayCurrency(amount)
48090
48837
  });
@@ -48244,7 +48991,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
48244
48991
  themeValues = _ref.themeValues,
48245
48992
  _ref$dataQa = _ref.dataQa,
48246
48993
  dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
48247
- return /*#__PURE__*/React__default.createElement(Modal$1, {
48994
+ return /*#__PURE__*/React__default.createElement(Modal$3, {
48248
48995
  modalOpen: isOpen,
48249
48996
  hideModal: function hideModal() {
48250
48997
  return toggleOpen(false);
@@ -48348,7 +49095,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
48348
49095
  themeValues = _ref.themeValues,
48349
49096
  _ref$initialFocusSele = _ref.initialFocusSelector,
48350
49097
  initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
48351
- return /*#__PURE__*/React__default.createElement(Modal$1, {
49098
+ return /*#__PURE__*/React__default.createElement(Modal$3, {
48352
49099
  modalOpen: isOpen,
48353
49100
  hideModal: function hideModal() {
48354
49101
  return toggleOpen(false);
@@ -48521,11 +49268,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
48521
49268
  }, errorMessage))))));
48522
49269
  };
48523
49270
 
48524
- var _excluded$B = ["version"];
49271
+ var _excluded$C = ["version"];
48525
49272
  var TermsAndConditions = function TermsAndConditions(_ref) {
48526
49273
  var _ref$version = _ref.version,
48527
49274
  version = _ref$version === void 0 ? "v1" : _ref$version,
48528
- rest = _objectWithoutProperties(_ref, _excluded$B);
49275
+ rest = _objectWithoutProperties(_ref, _excluded$C);
48529
49276
  var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
48530
49277
  return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
48531
49278
  };
@@ -49247,10 +49994,10 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
49247
49994
  "aria-required": section.required,
49248
49995
  "aria-labelledby": ariaLabelledBy,
49249
49996
  "aria-describedby": ariaDescribedBy,
49250
- onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
49997
+ onClick: isMobile && supportsTouch || section.disabled || section.id === openSection ? noop : function () {
49251
49998
  return toggleOpenSection(section.id);
49252
49999
  },
49253
- onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
50000
+ onTouchEnd: isMobile && supportsTouch && !section.disabled && section.id !== openSection ? function () {
49254
50001
  return toggleOpenSection(section.id);
49255
50002
  } : noop,
49256
50003
  id: "inner-radio-section-".concat(sectionIndex),
@@ -49324,7 +50071,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
49324
50071
  }, section.content))));
49325
50072
  };
49326
50073
 
49327
- var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
50074
+ var _excluded$D = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
49328
50075
 
49329
50076
  /**
49330
50077
  - The RadioSection component takes either a flat array (via the 'sections'
@@ -49372,7 +50119,7 @@ var RadioSection = function RadioSection(_ref) {
49372
50119
  _ref$isSectionRequire = _ref.isSectionRequired,
49373
50120
  isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
49374
50121
  groupedSections = _ref.groupedSections,
49375
- rest = _objectWithoutProperties(_ref, _excluded$C);
50122
+ rest = _objectWithoutProperties(_ref, _excluded$D);
49376
50123
  var _useState = React.useState(null),
49377
50124
  _useState2 = _slicedToArray(_useState, 2),
49378
50125
  focused = _useState2[0],
@@ -49476,8 +50223,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49476
50223
  };
49477
50224
  }, []);
49478
50225
  }
49479
- var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
49480
- var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
50226
+ var firstNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "First name is required"), validName.error, "First name contains invalid characters");
50227
+ var lastNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "Last name is required"), validName.error, "Last name contains invalid characters");
49481
50228
  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Invalid email address");
49482
50229
  var passwordErrorMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Password is required"), hasLength.error, "Password must have at least 8 characters"), hasNumber.error, "Password must contain at least one number"), hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)");
49483
50230
  var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
@@ -49553,10 +50300,10 @@ var RegistrationForm = function RegistrationForm(_ref) {
49553
50300
 
49554
50301
  var formConfig$9 = {
49555
50302
  firstName: {
49556
- validators: [required()]
50303
+ validators: [required(), validName()]
49557
50304
  },
49558
50305
  lastName: {
49559
- validators: [required()]
50306
+ validators: [required(), validName()]
49560
50307
  },
49561
50308
  email: {
49562
50309
  validators: [required(), isProbablyEmail()]
@@ -50088,7 +50835,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
50088
50835
  return "\n background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n ");
50089
50836
  });
50090
50837
 
50091
- var _excluded$D = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
50838
+ var _excluded$E = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
50092
50839
  var PopupMenuItem = function PopupMenuItem(_ref) {
50093
50840
  var id = _ref.id,
50094
50841
  closeMenuCallback = _ref.closeMenuCallback,
@@ -50104,7 +50851,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
50104
50851
  hoverStyles = _ref.hoverStyles,
50105
50852
  activeStyles = _ref.activeStyles,
50106
50853
  extraStyles = _ref.extraStyles,
50107
- rest = _objectWithoutProperties(_ref, _excluded$D);
50854
+ rest = _objectWithoutProperties(_ref, _excluded$E);
50108
50855
  return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
50109
50856
  id: id,
50110
50857
  role: "menuItem",
@@ -50625,6 +51372,9 @@ exports.Cover = Cover;
50625
51372
  exports.CustomerSearchIcon = CustomerSearchIcon;
50626
51373
  exports.DefaultPageTemplate = DefaultPageTemplate;
50627
51374
  exports.Detail = Detail$1;
51375
+ exports.DisabledAccountsAddIcon = DisabledAccountsAddIcon;
51376
+ exports.DisabledPaymentMethodsAddIcon = DisabledPaymentMethodsAddIcon;
51377
+ exports.DisabledPropertiesAddIcon = DisabledPropertiesAddIcon;
50628
51378
  exports.DisplayBox = DisplayBox$1;
50629
51379
  exports.DisplayCard = DisplayCard;
50630
51380
  exports.Dropdown = Dropdown$1;
@@ -50676,7 +51426,7 @@ exports.LinkCard = LinkCard$1;
50676
51426
  exports.Loading = Loading;
50677
51427
  exports.LoadingLine = LoadingLine;
50678
51428
  exports.LoginForm = LoginForm;
50679
- exports.Modal = Modal$1;
51429
+ exports.Modal = Modal$3;
50680
51430
  exports.Module = Module$1;
50681
51431
  exports.Motion = Motion;
50682
51432
  exports.MultiCartIcon = MultiCartIcon;
@@ -50777,6 +51527,7 @@ exports.VoidedIcon = VoidedIcon;
50777
51527
  exports.WalletBannerIcon = WalletBannerIcon$1;
50778
51528
  exports.WalletIcon = WalletIcon$1;
50779
51529
  exports.WalletIconSmall = WalletIconSmall$1;
51530
+ exports.WalletName = WalletName;
50780
51531
  exports.WarningIconXS = WarningIconXS;
50781
51532
  exports.WelcomeModule = WelcomeModule$1;
50782
51533
  exports.WorkflowTile = WorkflowTile;