@thecb/components 4.3.6 → 4.3.9

package/dist/index.cjs.js

@@ -12469,10 +12469,10 @@ var border = {
 };
 var hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12482,10 +12482,10 @@ var hoverBackgroundColor = {
 };
 var hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12508,10 +12508,10 @@ var hoverColor = {
 };
 var activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12521,10 +12521,10 @@ var activeBackgroundColor = {
 };
 var activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12534,7 +12534,7 @@ var activeBorderColor = {
 };
 var activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
@@ -12620,7 +12620,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z",
-    id: "path-1"
+    id: "spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     fill: "none",
@@ -12632,11 +12632,11 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     id: "mask-2",
     fill: color || "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "loader",
     fill: color || "white",
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   }))))));
 };
 
@@ -14944,6 +14944,238 @@ var TrashIcon = function TrashIcon(_ref) {
 
 var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
 
+var NoCustomerResultsIcon = function NoCustomerResultsIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "366",
+    height: "209",
+    viewBox: "0 0 366 209"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-537 -434)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 300)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(405 134)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zm35-137.5c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5S194.5 87.083 194.5 73c0-14.084 11.416-25.5 25.5-25.5zm-70 0c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5-14.083 0-25.5-11.417-25.5-25.5 0-14.084 11.417-25.5 25.5-25.5zM220.001 68c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.634 1.87l.062-.152.083-.214c.786-1.896 2.574-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C227.903 70.69 224.208 68 220 68zM150 68c-4.206 0-7.902 2.685-9.346 6.632a2.506 2.506 0 001.497 3.215 2.512 2.512 0 003.158-1.342l.061-.153.083-.212c.781-1.884 2.562-3.126 4.547-3.126 1.986 0 3.767 1.242 4.55 3.127l.082.212.062.153a2.512 2.512 0 003.158 1.34 2.506 2.506 0 001.496-3.215c-1.445-3.946-5.141-6.631-9.348-6.631z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#292A33",
+    fillRule: "nonzero",
+    d: "M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm179.832-42l.26.004c4.66.134 8.422 3.878 8.422 8.51a2.515 2.515 0 01-5.023.166l-.006-.166-.005-.183c-.096-1.763-1.573-3.2-3.446-3.297l-.202-.005h-23.664l-.196.005c-1.873.094-3.352 1.528-3.452 3.29l-.006.19-.005.166a2.515 2.515 0 01-5.023-.166c0-4.632 3.761-8.376 8.422-8.51l.26-.004h23.664zm23.169-72.5c16.845 0 30.499 13.654 30.499 30.5 0 16.845-13.655 30.5-30.5 30.5S189.5 89.845 189.5 73c0-.335.005-.668.016-1h-9.032l.012.499.004.5c0 16.846-13.655 30.501-30.5 30.501S119.5 89.845 119.5 73s13.655-30.5 30.5-30.5c10.22 0 19.266 5.026 24.8 12.742 3.73-1.495 7.226-2.242 10.491-2.242 3.304 0 6.593.765 9.87 2.296C200.69 47.55 209.755 42.5 220 42.5zm0 5C205.916 47.5 194.5 58.916 194.5 73c0 14.083 11.416 25.5 25.5 25.5s25.5-11.417 25.5-25.5c0-14.084-11.416-25.5-25.5-25.5zm-70 0C135.917 47.5 124.5 58.916 124.5 73c0 14.083 11.417 25.5 25.5 25.5 14.084 0 25.5-11.417 25.5-25.5 0-14.084-11.416-25.5-25.5-25.5zM185 59a3 3 0 100 6.002 3 3 0 000-6.002zM294.626 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#959CA8",
+    fillRule: "nonzero",
+    d: "M220.001 68c4.207 0 7.902 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152C223.916 74.343 222.07 73 220 73c-1.995 0-3.783 1.25-4.57 3.145l-.082.214a2.5 2.5 0 01-4.696-1.718C212.098 70.69 215.795 68 220 68zM150 68c4.207 0 7.903 2.685 9.348 6.631a2.506 2.506 0 01-1.496 3.216 2.512 2.512 0 01-3.158-1.34l-.062-.154c-.734-2.003-2.572-3.339-4.632-3.339-1.985 0-3.766 1.242-4.547 3.126l-.083.212a2.511 2.511 0 01-3.22 1.495 2.506 2.506 0 01-1.496-3.215C142.097 70.685 145.793 68 150 68z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4E6EB",
+    d: "M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#15749D",
+    fillRule: "nonzero",
+    d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.604 3.628l-.001-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zm193.321-62.228a42.836 42.836 0 01.704 8.714l53.02 37.735a4 4 0 01.661 5.926l-.148.157L301 134.5V123l6.557-6.5-45.68-32.513a42.337 42.337 0 01-2.193 6.683 4 4 0 01-7.368-3.116 34.513 34.513 0 002.719-13.477c0-2.149-.195-4.27-.58-6.349a4 4 0 117.866-1.456z"
+  }))))));
+};
+
+var NoPaymentResultsIcon = function NoPaymentResultsIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "366",
+    height: "209",
+    viewBox: "0 0 366 209"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-537 -466)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 332)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(405 134)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M220 47.5c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5S194.5 87.083 194.5 73c0-14.084 11.416-25.5 25.5-25.5zm-70 0c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5-14.083 0-25.5-11.417-25.5-25.5 0-14.084 11.417-25.5 25.5-25.5zM220.001 68c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.634 1.87l.062-.152.083-.214c.786-1.896 2.574-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C227.903 70.69 224.208 68 220 68zM150 68c-4.206 0-7.902 2.685-9.346 6.632a2.506 2.506 0 001.497 3.215 2.512 2.512 0 003.158-1.342l.061-.153.083-.212c.781-1.884 2.562-3.126 4.547-3.126 1.986 0 3.767 1.242 4.55 3.127l.082.212.062.153a2.512 2.512 0 003.158 1.34 2.506 2.506 0 001.496-3.215c-1.445-3.946-5.141-6.631-9.348-6.631z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E8FFEF",
+    d: "M237 197c0 6.627-23.281 12-52 12-28.718 0-52-5.373-52-12s23.282-12 52-12c28.719 0 52 5.373 52 12"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#292A33",
+    fillRule: "nonzero",
+    d: "M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm179.832-42l.26.004c4.66.134 8.422 3.878 8.422 8.51a2.515 2.515 0 01-5.023.166l-.006-.166-.005-.183c-.096-1.763-1.573-3.2-3.446-3.297l-.202-.005h-23.664l-.196.005c-1.873.094-3.352 1.528-3.452 3.29l-.006.19-.005.166a2.515 2.515 0 01-5.023-.166c0-4.632 3.761-8.376 8.422-8.51l.26-.004h23.664zm23.169-72.5c16.845 0 30.499 13.654 30.499 30.5 0 16.845-13.655 30.5-30.5 30.5S189.5 89.845 189.5 73c0-.335.005-.668.016-1h-9.032l.012.499.004.5c0 16.846-13.655 30.501-30.5 30.501S119.5 89.845 119.5 73s13.655-30.5 30.5-30.5c10.22 0 19.266 5.026 24.8 12.742 3.73-1.495 7.226-2.242 10.491-2.242 3.304 0 6.593.765 9.87 2.296C200.69 47.55 209.755 42.5 220 42.5zm0 5C205.916 47.5 194.5 58.916 194.5 73c0 14.083 11.416 25.5 25.5 25.5s25.5-11.417 25.5-25.5c0-14.084-11.416-25.5-25.5-25.5zm-70 0C135.917 47.5 124.5 58.916 124.5 73c0 14.083 11.417 25.5 25.5 25.5 14.084 0 25.5-11.417 25.5-25.5 0-14.084-11.416-25.5-25.5-25.5zM185 59a3 3 0 100 6.002 3 3 0 000-6.002zM294.626 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#959CA8",
+    fillRule: "nonzero",
+    d: "M220.001 68c4.207 0 7.902 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152C223.916 74.343 222.07 73 220 73c-1.995 0-3.783 1.25-4.57 3.145l-.082.214a2.5 2.5 0 01-4.696-1.718C212.098 70.69 215.795 68 220 68zM150 68c4.207 0 7.903 2.685 9.348 6.631a2.506 2.506 0 01-1.496 3.216 2.512 2.512 0 01-3.158-1.34l-.062-.154c-.734-2.003-2.572-3.339-4.632-3.339-1.985 0-3.766 1.242-4.547 3.126l-.083.212a2.511 2.511 0 01-3.22 1.495 2.506 2.506 0 01-1.496-3.215C142.097 70.685 145.793 68 150 68z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4E6EB",
+    d: "M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#317D4F",
+    fillRule: "nonzero",
+    d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.604 3.628l-.001-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zm193.321-62.228a42.836 42.836 0 01.704 8.714l53.02 37.735a4 4 0 01.661 5.926l-.148.157L301 134.5V123l6.557-6.5-45.68-32.513a42.337 42.337 0 01-2.193 6.683 4 4 0 01-7.368-3.116 34.513 34.513 0 002.719-13.477c0-2.149-.195-4.27-.58-6.349a4 4 0 117.866-1.456z"
+  }))))));
+};
+
+var CustomerSearchIcon = function CustomerSearchIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "366",
+    height: "209",
+    viewBox: "0 0 366 209"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
+    id: "customer-search-path-1",
+    width: "64",
+    height: "64",
+    x: "39",
+    y: "40",
+    rx: "6"
+  }), /*#__PURE__*/React__default.createElement("filter", {
+    id: "customer-search-filter-2",
+    width: "178.1%",
+    height: "178.1%",
+    x: "-39.1%",
+    y: "-35.9%",
+    filterUnits: "objectBoundingBox"
+  }, /*#__PURE__*/React__default.createElement("feOffset", {
+    dy: "2",
+    "in": "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    "in": "shadowOffsetOuter1",
+    result: "shadowBlurOuter1",
+    stdDeviation: "8"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    "in": "shadowBlurOuter1",
+    values: "0 0 0 0 0.0823529412 0 0 0 0 0.454901961 0 0 0 0 0.615686275 0 0 0 0.5 0"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-537 -434)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 300)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(405 134)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#292A33",
+    fillRule: "nonzero",
+    d: "M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm186-52.514a2.515 2.515 0 012.514 2.514c0 4.633-3.761 8.376-8.422 8.51l-.26.004h-23.664c-4.78 0-8.683-3.795-8.683-8.514a2.515 2.515 0 015.024-.165l.006.165c0 1.848 1.517 3.383 3.457 3.48l.196.005h23.664c1.968 0 3.549-1.475 3.648-3.301l.006-.184a2.515 2.515 0 012.514-2.514zM216 39c13.255 0 24 10.745 24 24 0 5.67-1.967 10.881-5.255 14.988l.012.01.13.114 8.51 8.049a5.002 5.002 0 015.193.818l.18.162 17.668 16.728a5 5 0 01-6.696 7.424l-.18-.162-17.667-16.728a5.001 5.001 0 01-1.26-5.348l-8.496-8.037a2.025 2.025 0 01-.132-.137A23.909 23.909 0 01216 87c-13.255 0-24-10.745-24-24C192 49.746 202.745 39 216 39zm0 5c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm-66 13.986c4.212 0 7.914 2.692 9.362 6.65a2.514 2.514 0 01-4.662 1.88l-.062-.153c-.734-2.009-2.576-3.349-4.639-3.349-1.988 0-3.772 1.246-4.554 3.136l-.083.213a2.515 2.515 0 01-4.724-1.726c1.446-3.958 5.148-6.651 9.361-6.651zM294.624 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4E6EB",
+    d: "M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#959CA8",
+    fillRule: "nonzero",
+    d: "M216 58c4.207 0 7.903 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152c-.737-2.016-2.583-3.359-4.651-3.359-1.995 0-3.784 1.25-4.57 3.145l-.083.214a2.5 2.5 0 01-4.696-1.718c1.445-3.952 5.142-6.641 9.349-6.641z"
+  }), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    fillOpacity: "1",
+    filter: "url(#customer-search-filter-2)",
+    xlinkHref: "#customer-search-path-1"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM80 70c-3.535 0-6.145 1.941-7.827 5.824C70.192 73.274 67.633 72 64.5 72c-5.912 0-9.773 4.536-11.585 13.608a2 2 0 001.83 2.388l.13.004h19.25l.148-.005a2 2 0 001.812-2.387 37.807 37.807 0 00-.733-3.045L75.184 82h11.893l.15-.005a2 2 0 001.797-2.451C87.534 73.18 84.526 70 80 70zm136-26c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zM64.5 56a7 7 0 100 14 7 7 0 000-14zM216 58c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.635 1.87l.061-.152.083-.214c.786-1.896 2.575-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58zM80 57a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#15749D",
+    fillRule: "nonzero",
+    d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM80 70c4.526 0 7.534 3.181 9.024 9.544a2 2 0 01-1.798 2.45l-.149.006H75.184c.342 1.11.643 2.313.901 3.608a2 2 0 01-1.812 2.387l-.149.005H54.876a2 2 0 01-1.961-2.392C54.727 76.536 58.588 72 64.5 72c3.134 0 5.692 1.275 7.673 3.824C73.855 71.941 76.465 70 80 70zM64.5 56a7 7 0 110 14 7 7 0 010-14zM80 57a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"
+  }))))));
+};
+
+var PaymentSearchIcon = function PaymentSearchIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "366",
+    height: "209",
+    viewBox: "0 0 366 209"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
+    id: "payment-search-path-1",
+    width: "64",
+    height: "64",
+    x: "39",
+    y: "40",
+    rx: "6"
+  }), /*#__PURE__*/React__default.createElement("filter", {
+    id: "payment-search-filter-2",
+    width: "178.1%",
+    height: "178.1%",
+    x: "-39.1%",
+    y: "-35.9%",
+    filterUnits: "objectBoundingBox"
+  }, /*#__PURE__*/React__default.createElement("feOffset", {
+    dy: "2",
+    "in": "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    "in": "shadowOffsetOuter1",
+    result: "shadowBlurOuter1",
+    stdDeviation: "8"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    "in": "shadowBlurOuter1",
+    values: "0 0 0 0 0.192156863 0 0 0 0 0.490196078 0 0 0 0 0.309803922 0 0 0 0.5 0"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-537 -466)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 332)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(405 134)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#292A33",
+    fillRule: "nonzero",
+    d: "M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm186-52.514a2.515 2.515 0 012.514 2.514c0 4.633-3.761 8.376-8.422 8.51l-.26.004h-23.664c-4.78 0-8.683-3.795-8.683-8.514a2.515 2.515 0 015.024-.165l.006.165c0 1.848 1.517 3.383 3.457 3.48l.196.005h23.664c1.968 0 3.549-1.475 3.648-3.301l.006-.184a2.515 2.515 0 012.514-2.514zM216 39c13.255 0 24 10.745 24 24 0 5.67-1.967 10.881-5.255 14.988l.012.01.13.114 8.51 8.049a5.002 5.002 0 015.193.818l.18.162 17.668 16.728a5 5 0 01-6.696 7.424l-.18-.162-17.667-16.728a5.001 5.001 0 01-1.26-5.348l-8.496-8.037a2.025 2.025 0 01-.132-.137A23.909 23.909 0 01216 87c-13.255 0-24-10.745-24-24C192 49.746 202.745 39 216 39zm0 5c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm-66 13.986c4.212 0 7.914 2.692 9.362 6.65a2.514 2.514 0 01-4.662 1.88l-.062-.153c-.734-2.009-2.576-3.349-4.639-3.349-1.988 0-3.772 1.246-4.554 3.136l-.083.213a2.515 2.515 0 01-4.724-1.726c1.446-3.958 5.148-6.651 9.361-6.651zM294.624 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4E6EB",
+    d: "M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M216 44c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zm0 14c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.696 1.718l.083-.214c.786-1.896 2.575-3.145 4.57-3.145 2.068 0 3.914 1.343 4.651 3.359l.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#959CA8",
+    fillRule: "nonzero",
+    d: "M216 58c4.207 0 7.903 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152c-.737-2.016-2.583-3.359-4.651-3.359-1.995 0-3.784 1.25-4.57 3.145l-.083.214a2.5 2.5 0 01-4.696-1.718c1.445-3.952 5.142-6.641 9.349-6.641z"
+  }), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    fillOpacity: "1",
+    filter: "url(#payment-search-filter-2)",
+    xlinkHref: "#payment-search-path-1"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E8FFEF",
+    d: "M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM74.134 56h-5.268c-.441 0-.806.304-.86.696l-.006.1v2.456c-4.391.845-7.029 3.74-7.144 7.532l-.004.26v.072c0 5.135 4.208 6.644 9.66 7.865 3.408.801 4.302 1.333 4.351 2.348l.002.093v.073c0 1.077-1.025 1.723-2.963 1.723-2.717 0-5.28-.875-7.66-2.542a.896.896 0 00-1.112.082l-.078.081-2.845 3.336a.84.84 0 00.11 1.21c2.061 1.596 4.522 2.668 7.182 3.207l.5.095.001 2.581c0 .37.3.677.688.725l.108.007h5.407c.403 0 .737-.275.79-.632l.007-.1v-2.602c4.212-.902 6.88-3.587 6.996-7.58l.004-.273v-.072c0-4.705-3.659-6.572-9.513-7.83-3.483-.767-4.411-1.263-4.462-2.344l-.002-.097v-.072c0-.934.842-1.616 2.562-1.616 2.041 0 4.32.669 6.462 2.007a.9.9 0 001.13-.126l.073-.089 2.566-3.556a.841.841 0 00-.185-1.18 14.999 14.999 0 00-5.178-2.318l-.451-.103-.002-2.62c0-.44-.388-.797-.866-.797z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#317D4F",
+    fillRule: "nonzero",
+    d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM74.134 56c.478 0 .866.356.866.796l.002 2.621c2.128.452 3.983 1.265 5.629 2.42.383.27.457.804.185 1.181l-2.566 3.556c-.275.382-.801.466-1.203.215-2.142-1.338-4.42-2.007-6.462-2.007-1.72 0-2.562.682-2.562 1.616v.072c0 1.15.879 1.652 4.464 2.442C78.341 70.169 82 72.036 82 76.742v.07c0 4.144-2.692 6.932-7 7.854v2.602c0 .404-.357.732-.797.732h-5.407c-.44 0-.796-.328-.796-.732v-2.581c-2.852-.502-5.493-1.606-7.684-3.302a.84.84 0 01-.11-1.21l2.846-3.336a.898.898 0 011.19-.163c2.38 1.667 4.943 2.542 7.66 2.542 1.938 0 2.963-.646 2.963-1.723v-.073c0-1.076-.841-1.615-4.353-2.44-5.452-1.222-9.66-2.73-9.66-7.866v-.072c0-3.92 2.657-6.928 7.148-7.792v-2.456c0-.44.388-.796.866-.796h5.268z"
+  }))))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -38613,6 +38845,10 @@ var Modal$1 = function Modal(_ref) {
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
       underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+      noBorder = _ref.noBorder,
+      customWidth = _ref.customWidth,
+      isLoading = _ref.isLoading,
+      buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children;
 
   var _useContext = React.useContext(styled.ThemeContext),
@@ -38629,7 +38865,7 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: "615px"
+      width: customWidth || "615px"
     },
     underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -38638,7 +38874,7 @@ var Modal$1 = function Modal(_ref) {
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
   }, /*#__PURE__*/React__default.createElement(Box, {
     background: modalHeaderBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -38647,13 +38883,13 @@ var Modal$1 = function Modal(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    borderWidthOverride: "0 0 2px 0",
-    borderColor: SILVER_GREY,
-    padding: "0 0 1.5rem 0",
+    borderWidthOverride: noBorder && "0 0 2px 0",
+    borderColor: !noBorder && SILVER_GREY,
+    padding: !noBorder && "0 0 1.5rem 0",
     extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
   }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "p"
@@ -38661,33 +38897,63 @@ var Modal$1 = function Modal(_ref) {
     padding: maxHeight ? "0 0 1rem 0" : "0"
   }, modalBodyText)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
     justify: "flex-end",
     align: "center",
     childGap: "0rem"
-  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "secondary",
     action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
-    dataQa: cancelButtonText
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
     text: continueButtonText,
-    dataQa: continueButtonText
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
+  }))) : /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "secondary",
+    action: cancelAction ? cancelAction : hideModal,
+    text: cancelButtonText,
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: useDangerButton ? "danger" : "primary",
+    action: continueAction,
+    text: continueButtonText,
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: hideModal,
     variant: "primary",
     text: "Close",
-    dataQa: "Close"
+    dataQa: "Close",
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })))))))), children);
 };
 
@@ -41490,6 +41756,7 @@ exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
 exports.CountryDropdown = CountryDropdown;
 exports.Cover = Cover;
+exports.CustomerSearchIcon = CustomerSearchIcon;
 exports.DefaultPageTemplate = DefaultPageTemplate;
 exports.DisplayBox = DisplayBox$1;
 exports.DisplayCard = DisplayCard;
@@ -41538,6 +41805,8 @@ exports.NavFooter = NavFooter;
 exports.NavHeader = NavHeader;
 exports.NavMenuDesktop = NavMenuDesktop$1;
 exports.NavMenuMobile = NavMenuMobile$1;
+exports.NoCustomerResultsIcon = NoCustomerResultsIcon;
+exports.NoPaymentResultsIcon = NoPaymentResultsIcon;
 exports.NotFoundIcon = NotFoundIcon;
 exports.Obligation = Obligation;
 exports.ObligationIcons = iconsMap;
@@ -41552,6 +41821,7 @@ exports.PaymentFormCard = PaymentFormCard;
 exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
+exports.PaymentSearchIcon = PaymentSearchIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PendingIcon = PendingIcon;
 exports.PhoneForm = PhoneForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.3.6",
+  "version": "4.3.9",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -117,10 +117,10 @@ const border = {
 
 const hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -131,10 +131,10 @@ const hoverBackgroundColor = {
 
 const hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -159,10 +159,10 @@ const hoverColor = {
 
 const activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -173,10 +173,10 @@ const activeBackgroundColor = {
 
 const activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -187,7 +187,7 @@ const activeBorderColor = {
 
 const activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",

package/src/components/atoms/icons/CustomerSearchIcon.js

@@ -0,0 +1,90 @@
+import React from "react";
+
+const CustomerSearchIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="366"
+      height="209"
+      viewBox="0 0 366 209"
+    >
+      <defs>
+        <rect
+          id="customer-search-path-1"
+          width="64"
+          height="64"
+          x="39"
+          y="40"
+          rx="6"
+        ></rect>
+        <filter
+          id="customer-search-filter-2"
+          width="178.1%"
+          height="178.1%"
+          x="-39.1%"
+          y="-35.9%"
+          filterUnits="objectBoundingBox"
+        >
+          <feOffset
+            dy="2"
+            in="SourceAlpha"
+            result="shadowOffsetOuter1"
+          ></feOffset>
+          <feGaussianBlur
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+            stdDeviation="8"
+          ></feGaussianBlur>
+          <feColorMatrix
+            in="shadowBlurOuter1"
+            values="0 0 0 0 0.0823529412 0 0 0 0 0.454901961 0 0 0 0 0.615686275 0 0 0 0.5 0"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-537 -434)">
+          <g transform="translate(132 300)">
+            <g transform="translate(405 134)">
+              <path
+                fill="#FFF"
+                d="M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+              ></path>
+              <path
+                fill="#292A33"
+                fillRule="nonzero"
+                d="M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm186-52.514a2.515 2.515 0 012.514 2.514c0 4.633-3.761 8.376-8.422 8.51l-.26.004h-23.664c-4.78 0-8.683-3.795-8.683-8.514a2.515 2.515 0 015.024-.165l.006.165c0 1.848 1.517 3.383 3.457 3.48l.196.005h23.664c1.968 0 3.549-1.475 3.648-3.301l.006-.184a2.515 2.515 0 012.514-2.514zM216 39c13.255 0 24 10.745 24 24 0 5.67-1.967 10.881-5.255 14.988l.012.01.13.114 8.51 8.049a5.002 5.002 0 015.193.818l.18.162 17.668 16.728a5 5 0 01-6.696 7.424l-.18-.162-17.667-16.728a5.001 5.001 0 01-1.26-5.348l-8.496-8.037a2.025 2.025 0 01-.132-.137A23.909 23.909 0 01216 87c-13.255 0-24-10.745-24-24C192 49.746 202.745 39 216 39zm0 5c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm-66 13.986c4.212 0 7.914 2.692 9.362 6.65a2.514 2.514 0 01-4.662 1.88l-.062-.153c-.734-2.009-2.576-3.349-4.639-3.349-1.988 0-3.772 1.246-4.554 3.136l-.083.213a2.515 2.515 0 01-4.724-1.726c1.446-3.958 5.148-6.651 9.361-6.651zM294.624 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+              ></path>
+              <path
+                fill="#E4E6EB"
+                d="M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+              ></path>
+              <path
+                fill="#959CA8"
+                fillRule="nonzero"
+                d="M216 58c4.207 0 7.903 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152c-.737-2.016-2.583-3.359-4.651-3.359-1.995 0-3.784 1.25-4.57 3.145l-.083.214a2.5 2.5 0 01-4.696-1.718c1.445-3.952 5.142-6.641 9.349-6.641z"
+              ></path>
+              <use
+                fill="#000"
+                fillOpacity="1"
+                filter="url(#customer-search-filter-2)"
+                xlinkHref="#customer-search-path-1"
+              ></use>
+              <path
+                fill="#E4F4FD"
+                d="M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM80 70c-3.535 0-6.145 1.941-7.827 5.824C70.192 73.274 67.633 72 64.5 72c-5.912 0-9.773 4.536-11.585 13.608a2 2 0 001.83 2.388l.13.004h19.25l.148-.005a2 2 0 001.812-2.387 37.807 37.807 0 00-.733-3.045L75.184 82h11.893l.15-.005a2 2 0 001.797-2.451C87.534 73.18 84.526 70 80 70zm136-26c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zM64.5 56a7 7 0 100 14 7 7 0 000-14zM216 58c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.635 1.87l.061-.152.083-.214c.786-1.896 2.575-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58zM80 57a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"
+              ></path>
+              <path
+                fill="#15749D"
+                fillRule="nonzero"
+                d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM80 70c4.526 0 7.534 3.181 9.024 9.544a2 2 0 01-1.798 2.45l-.149.006H75.184c.342 1.11.643 2.313.901 3.608a2 2 0 01-1.812 2.387l-.149.005H54.876a2 2 0 01-1.961-2.392C54.727 76.536 58.588 72 64.5 72c3.134 0 5.692 1.275 7.673 3.824C73.855 71.941 76.465 70 80 70zM64.5 56a7 7 0 110 14 7 7 0 010-14zM80 57a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default CustomerSearchIcon;

package/src/components/atoms/icons/NoCustomerResultsIcon.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+const NoCustomerResultsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="366"
+      height="209"
+      viewBox="0 0 366 209"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-537 -434)">
+          <g transform="translate(132 300)">
+            <g transform="translate(405 134)">
+              <path
+                fill="#FFF"
+                d="M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+              ></path>
+              <path
+                fill="#E4F4FD"
+                d="M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zm35-137.5c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5S194.5 87.083 194.5 73c0-14.084 11.416-25.5 25.5-25.5zm-70 0c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5-14.083 0-25.5-11.417-25.5-25.5 0-14.084 11.417-25.5 25.5-25.5zM220.001 68c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.634 1.87l.062-.152.083-.214c.786-1.896 2.574-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C227.903 70.69 224.208 68 220 68zM150 68c-4.206 0-7.902 2.685-9.346 6.632a2.506 2.506 0 001.497 3.215 2.512 2.512 0 003.158-1.342l.061-.153.083-.212c.781-1.884 2.562-3.126 4.547-3.126 1.986 0 3.767 1.242 4.55 3.127l.082.212.062.153a2.512 2.512 0 003.158 1.34 2.506 2.506 0 001.496-3.215c-1.445-3.946-5.141-6.631-9.348-6.631z"
+              ></path>
+              <path
+                fill="#292A33"
+                fillRule="nonzero"
+                d="M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm179.832-42l.26.004c4.66.134 8.422 3.878 8.422 8.51a2.515 2.515 0 01-5.023.166l-.006-.166-.005-.183c-.096-1.763-1.573-3.2-3.446-3.297l-.202-.005h-23.664l-.196.005c-1.873.094-3.352 1.528-3.452 3.29l-.006.19-.005.166a2.515 2.515 0 01-5.023-.166c0-4.632 3.761-8.376 8.422-8.51l.26-.004h23.664zm23.169-72.5c16.845 0 30.499 13.654 30.499 30.5 0 16.845-13.655 30.5-30.5 30.5S189.5 89.845 189.5 73c0-.335.005-.668.016-1h-9.032l.012.499.004.5c0 16.846-13.655 30.501-30.5 30.501S119.5 89.845 119.5 73s13.655-30.5 30.5-30.5c10.22 0 19.266 5.026 24.8 12.742 3.73-1.495 7.226-2.242 10.491-2.242 3.304 0 6.593.765 9.87 2.296C200.69 47.55 209.755 42.5 220 42.5zm0 5C205.916 47.5 194.5 58.916 194.5 73c0 14.083 11.416 25.5 25.5 25.5s25.5-11.417 25.5-25.5c0-14.084-11.416-25.5-25.5-25.5zm-70 0C135.917 47.5 124.5 58.916 124.5 73c0 14.083 11.417 25.5 25.5 25.5 14.084 0 25.5-11.417 25.5-25.5 0-14.084-11.416-25.5-25.5-25.5zM185 59a3 3 0 100 6.002 3 3 0 000-6.002zM294.626 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+              ></path>
+              <path
+                fill="#959CA8"
+                fillRule="nonzero"
+                d="M220.001 68c4.207 0 7.902 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152C223.916 74.343 222.07 73 220 73c-1.995 0-3.783 1.25-4.57 3.145l-.082.214a2.5 2.5 0 01-4.696-1.718C212.098 70.69 215.795 68 220 68zM150 68c4.207 0 7.903 2.685 9.348 6.631a2.506 2.506 0 01-1.496 3.216 2.512 2.512 0 01-3.158-1.34l-.062-.154c-.734-2.003-2.572-3.339-4.632-3.339-1.985 0-3.766 1.242-4.547 3.126l-.083.212a2.511 2.511 0 01-3.22 1.495 2.506 2.506 0 01-1.496-3.215C142.097 70.685 145.793 68 150 68z"
+              ></path>
+              <path
+                fill="#E4E6EB"
+                d="M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+              ></path>
+              <path
+                fill="#15749D"
+                fillRule="nonzero"
+                d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.604 3.628l-.001-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zm193.321-62.228a42.836 42.836 0 01.704 8.714l53.02 37.735a4 4 0 01.661 5.926l-.148.157L301 134.5V123l6.557-6.5-45.68-32.513a42.337 42.337 0 01-2.193 6.683 4 4 0 01-7.368-3.116 34.513 34.513 0 002.719-13.477c0-2.149-.195-4.27-.58-6.349a4 4 0 117.866-1.456z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default NoCustomerResultsIcon;

package/src/components/atoms/icons/NoPaymentResultsIcon.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+const NoPaymentResultsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="366"
+      height="209"
+      viewBox="0 0 366 209"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-537 -466)">
+          <g transform="translate(132 332)">
+            <g transform="translate(405 134)">
+              <path
+                fill="#FFF"
+                d="M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+              ></path>
+              <path
+                fill="#E4F4FD"
+                d="M220 47.5c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5S194.5 87.083 194.5 73c0-14.084 11.416-25.5 25.5-25.5zm-70 0c14.084 0 25.5 11.416 25.5 25.5 0 14.083-11.416 25.5-25.5 25.5-14.083 0-25.5-11.417-25.5-25.5 0-14.084 11.417-25.5 25.5-25.5zM220.001 68c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.634 1.87l.062-.152.083-.214c.786-1.896 2.574-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C227.903 70.69 224.208 68 220 68zM150 68c-4.206 0-7.902 2.685-9.346 6.632a2.506 2.506 0 001.497 3.215 2.512 2.512 0 003.158-1.342l.061-.153.083-.212c.781-1.884 2.562-3.126 4.547-3.126 1.986 0 3.767 1.242 4.55 3.127l.082.212.062.153a2.512 2.512 0 003.158 1.34 2.506 2.506 0 001.496-3.215c-1.445-3.946-5.141-6.631-9.348-6.631z"
+              ></path>
+              <path
+                fill="#E8FFEF"
+                d="M237 197c0 6.627-23.281 12-52 12-28.718 0-52-5.373-52-12s23.282-12 52-12c28.719 0 52 5.373 52 12"
+              ></path>
+              <path
+                fill="#292A33"
+                fillRule="nonzero"
+                d="M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm179.832-42l.26.004c4.66.134 8.422 3.878 8.422 8.51a2.515 2.515 0 01-5.023.166l-.006-.166-.005-.183c-.096-1.763-1.573-3.2-3.446-3.297l-.202-.005h-23.664l-.196.005c-1.873.094-3.352 1.528-3.452 3.29l-.006.19-.005.166a2.515 2.515 0 01-5.023-.166c0-4.632 3.761-8.376 8.422-8.51l.26-.004h23.664zm23.169-72.5c16.845 0 30.499 13.654 30.499 30.5 0 16.845-13.655 30.5-30.5 30.5S189.5 89.845 189.5 73c0-.335.005-.668.016-1h-9.032l.012.499.004.5c0 16.846-13.655 30.501-30.5 30.501S119.5 89.845 119.5 73s13.655-30.5 30.5-30.5c10.22 0 19.266 5.026 24.8 12.742 3.73-1.495 7.226-2.242 10.491-2.242 3.304 0 6.593.765 9.87 2.296C200.69 47.55 209.755 42.5 220 42.5zm0 5C205.916 47.5 194.5 58.916 194.5 73c0 14.083 11.416 25.5 25.5 25.5s25.5-11.417 25.5-25.5c0-14.084-11.416-25.5-25.5-25.5zm-70 0C135.917 47.5 124.5 58.916 124.5 73c0 14.083 11.417 25.5 25.5 25.5 14.084 0 25.5-11.417 25.5-25.5 0-14.084-11.416-25.5-25.5-25.5zM185 59a3 3 0 100 6.002 3 3 0 000-6.002zM294.626 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+              ></path>
+              <path
+                fill="#959CA8"
+                fillRule="nonzero"
+                d="M220.001 68c4.207 0 7.902 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152C223.916 74.343 222.07 73 220 73c-1.995 0-3.783 1.25-4.57 3.145l-.082.214a2.5 2.5 0 01-4.696-1.718C212.098 70.69 215.795 68 220 68zM150 68c4.207 0 7.903 2.685 9.348 6.631a2.506 2.506 0 01-1.496 3.216 2.512 2.512 0 01-3.158-1.34l-.062-.154c-.734-2.003-2.572-3.339-4.632-3.339-1.985 0-3.766 1.242-4.547 3.126l-.083.212a2.511 2.511 0 01-3.22 1.495 2.506 2.506 0 01-1.496-3.215C142.097 70.685 145.793 68 150 68z"
+              ></path>
+              <path
+                fill="#E4E6EB"
+                d="M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+              ></path>
+              <path
+                fill="#317D4F"
+                fillRule="nonzero"
+                d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.604 3.628l-.001-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zm193.321-62.228a42.836 42.836 0 01.704 8.714l53.02 37.735a4 4 0 01.661 5.926l-.148.157L301 134.5V123l6.557-6.5-45.68-32.513a42.337 42.337 0 01-2.193 6.683 4 4 0 01-7.368-3.116 34.513 34.513 0 002.719-13.477c0-2.149-.195-4.27-.58-6.349a4 4 0 117.866-1.456z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default NoPaymentResultsIcon;

package/src/components/atoms/icons/PaymentSearchIcon.js

@@ -0,0 +1,94 @@
+import React from "react";
+
+const PaymentSearchIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="366"
+      height="209"
+      viewBox="0 0 366 209"
+    >
+      <defs>
+        <rect
+          id="payment-search-path-1"
+          width="64"
+          height="64"
+          x="39"
+          y="40"
+          rx="6"
+        ></rect>
+        <filter
+          id="payment-search-filter-2"
+          width="178.1%"
+          height="178.1%"
+          x="-39.1%"
+          y="-35.9%"
+          filterUnits="objectBoundingBox"
+        >
+          <feOffset
+            dy="2"
+            in="SourceAlpha"
+            result="shadowOffsetOuter1"
+          ></feOffset>
+          <feGaussianBlur
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+            stdDeviation="8"
+          ></feGaussianBlur>
+          <feColorMatrix
+            in="shadowBlurOuter1"
+            values="0 0 0 0 0.192156863 0 0 0 0 0.490196078 0 0 0 0 0.309803922 0 0 0 0.5 0"
+          ></feColorMatrix>
+        </filter>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-537 -466)">
+          <g transform="translate(132 332)">
+            <g transform="translate(405 134)">
+              <path
+                fill="#FFF"
+                d="M73 25h224v144.75a2.25 2.25 0 01-2.25 2.25H75.25a2.25 2.25 0 01-2.25-2.25V25z"
+              ></path>
+              <path
+                fill="#292A33"
+                fillRule="nonzero"
+                d="M294.625 0A6.376 6.376 0 01301 6.377V157h19a3 3 0 01.176 5.995L320 163h-19v6.623a6.376 6.376 0 01-6.375 6.377H75.374A6.375 6.375 0 0169 169.623V163H33a3 3 0 01-.176-5.995L33 157h36V6.377A6.375 6.375 0 0175.374 0h219.251zM297 25H73v144.623c0 1.259.976 2.288 2.211 2.372l.163.005h219.251a2.376 2.376 0 002.37-2.214l.005-.163V25zm39.953 132l26.112.082a2.952 2.952 0 012.935 2.969 2.953 2.953 0 01-2.78 2.945l-.173.004-26.112-.082a2.952 2.952 0 01-2.935-2.969 2.953 2.953 0 012.78-2.945l.173-.004zM17 157a3 3 0 01.176 5.995L17 163H3a3 3 0 01-.176-5.995L3 157h14zm186-52.514a2.515 2.515 0 012.514 2.514c0 4.633-3.761 8.376-8.422 8.51l-.26.004h-23.664c-4.78 0-8.683-3.795-8.683-8.514a2.515 2.515 0 015.024-.165l.006.165c0 1.848 1.517 3.383 3.457 3.48l.196.005h23.664c1.968 0 3.549-1.475 3.648-3.301l.006-.184a2.515 2.515 0 012.514-2.514zM216 39c13.255 0 24 10.745 24 24 0 5.67-1.967 10.881-5.255 14.988l.012.01.13.114 8.51 8.049a5.002 5.002 0 015.193.818l.18.162 17.668 16.728a5 5 0 01-6.696 7.424l-.18-.162-17.667-16.728a5.001 5.001 0 01-1.26-5.348l-8.496-8.037a2.025 2.025 0 01-.132-.137A23.909 23.909 0 01216 87c-13.255 0-24-10.745-24-24C192 49.746 202.745 39 216 39zm0 5c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm-66 13.986c4.212 0 7.914 2.692 9.362 6.65a2.514 2.514 0 01-4.662 1.88l-.062-.153c-.734-2.009-2.576-3.349-4.639-3.349-1.988 0-3.772 1.246-4.554 3.136l-.083.213a2.515 2.515 0 01-4.724-1.726c1.446-3.958 5.148-6.651 9.361-6.651zM294.624 4H75.374a2.375 2.375 0 00-2.369 2.214L73 6.377V21h224V6.377a2.376 2.376 0 00-2.212-2.372L294.625 4zM81.5 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm8 0a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
+              ></path>
+              <path
+                fill="#E4E6EB"
+                d="M294.75 4A2.25 2.25 0 01297 6.25V21H73V6.25A2.25 2.25 0 0175.25 4zM81.5 10a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm8 0a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
+              ></path>
+              <path
+                fill="#E4F4FD"
+                d="M216 44c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zm0 14c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.696 1.718l.083-.214c.786-1.896 2.575-3.145 4.57-3.145 2.068 0 3.914 1.343 4.651 3.359l.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58z"
+              ></path>
+              <path
+                fill="#959CA8"
+                fillRule="nonzero"
+                d="M216 58c4.207 0 7.903 2.689 9.348 6.641a2.5 2.5 0 01-4.635 1.87l-.061-.152c-.737-2.016-2.583-3.359-4.651-3.359-1.995 0-3.784 1.25-4.57 3.145l-.083.214a2.5 2.5 0 01-4.696-1.718c1.445-3.952 5.142-6.641 9.349-6.641z"
+              ></path>
+              <use
+                fill="#000"
+                fillOpacity="1"
+                filter="url(#payment-search-filter-2)"
+                xlinkHref="#payment-search-path-1"
+              ></use>
+              <path
+                fill="#E8FFEF"
+                d="M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM74.134 56h-5.268c-.441 0-.806.304-.86.696l-.006.1v2.456c-4.391.845-7.029 3.74-7.144 7.532l-.004.26v.072c0 5.135 4.208 6.644 9.66 7.865 3.408.801 4.302 1.333 4.351 2.348l.002.093v.073c0 1.077-1.025 1.723-2.963 1.723-2.717 0-5.28-.875-7.66-2.542a.896.896 0 00-1.112.082l-.078.081-2.845 3.336a.84.84 0 00.11 1.21c2.061 1.596 4.522 2.668 7.182 3.207l.5.095.001 2.581c0 .37.3.677.688.725l.108.007h5.407c.403 0 .737-.275.79-.632l.007-.1v-2.602c4.212-.902 6.88-3.587 6.996-7.58l.004-.273v-.072c0-4.705-3.659-6.572-9.513-7.83-3.483-.767-4.411-1.263-4.462-2.344l-.002-.097v-.072c0-.934.842-1.616 2.562-1.616 2.041 0 4.32.669 6.462 2.007a.9.9 0 001.13-.126l.073-.089 2.566-3.556a.841.841 0 00-.185-1.18 14.999 14.999 0 00-5.178-2.318l-.451-.103-.002-2.62c0-.44-.388-.797-.866-.797z"
+              ></path>
+              <path
+                fill="#317D4F"
+                fillRule="nonzero"
+                d="M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM74.134 56c.478 0 .866.356.866.796l.002 2.621c2.128.452 3.983 1.265 5.629 2.42.383.27.457.804.185 1.181l-2.566 3.556c-.275.382-.801.466-1.203.215-2.142-1.338-4.42-2.007-6.462-2.007-1.72 0-2.562.682-2.562 1.616v.072c0 1.15.879 1.652 4.464 2.442C78.341 70.169 82 72.036 82 76.742v.07c0 4.144-2.692 6.932-7 7.854v2.602c0 .404-.357.732-.797.732h-5.407c-.44 0-.796-.328-.796-.732v-2.581c-2.852-.502-5.493-1.606-7.684-3.302a.84.84 0 01-.11-1.21l2.846-3.336a.898.898 0 011.19-.163c2.38 1.667 4.943 2.542 7.66 2.542 1.938 0 2.963-.646 2.963-1.723v-.073c0-1.076-.841-1.615-4.353-2.44-5.452-1.222-9.66-2.73-9.66-7.866v-.072c0-3.92 2.657-6.928 7.148-7.792v-2.456c0-.44.388-.796.866-.796h5.268z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default PaymentSearchIcon;

package/src/components/atoms/icons/index.js

@@ -46,6 +46,10 @@ import GenericCardLarge from "./GenericCardLarge";
 import EmptyCartIcon from "./EmptyCartIcon";
 import ShoppingCartIcon from "./ShoppingCartIcon";
 import TrashIcon from "./TrashIcon";
+import NoCustomerResultsIcon from "./NoCustomerResultsIcon";
+import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
+import CustomerSearchIcon from "./CustomerSearchIcon";
+import PaymentSearchIcon from "./PaymentSearchIcon";
 
 export {
   AccountsIcon,
@@ -95,5 +99,9 @@ export {
   GenericCardLarge,
   EmptyCartIcon,
   ShoppingCartIcon,
-  TrashIcon
+  TrashIcon,
+  NoCustomerResultsIcon,
+  NoPaymentResultsIcon,
+  CustomerSearchIcon,
+  PaymentSearchIcon
 };

package/src/components/molecules/modal/Modal.js

@@ -36,6 +36,10 @@ const Modal = ({
   onlyCloseButton = false,
   maxHeight,
   underlayClickExits = true,
+  noBorder,
+  customWidth,
+  isLoading,
+  buttonExtraStyles,
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -53,7 +57,7 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: "615px"
+            width: customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
         >
@@ -62,19 +66,19 @@ const Modal = ({
             borderRadius="2px"
             boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)"
           >
-            <Box background={modalHeaderBg} padding="1rem 1.5rem">
+            <Box background={modalHeaderBg} padding="1.5rem">
               <Cluster justify="flex-start" align="center">
                 <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
                   {modalHeaderText}
                 </Heading>
               </Cluster>
             </Box>
-            <Box background={modalBodyBg} padding="1rem 1.5rem">
+            <Box background={modalBodyBg} padding="1.5rem">
               <Stack childGap="1.5rem">
                 <Box
-                  borderWidthOverride="0 0 2px 0"
-                  borderColor={SILVER_GREY}
-                  padding="0 0 1.5rem 0"
+                  borderWidthOverride={noBorder && "0 0 2px 0"}
+                  borderColor={!noBorder && SILVER_GREY}
+                  padding={!noBorder && "0 0 1.5rem 0"}
                   extraStyles={
                     maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
                   }
@@ -88,31 +92,63 @@ const Modal = ({
                   )}
                 </Box>
                 <Box padding="0">
-                  <Cluster justify="flex-end" align="center" childGap="0rem">
+                  <Stack
+                    direction="row"
+                    justify="flex-end"
+                    align="center"
+                    childGap="0rem"
+                  >
                     {!onlyCloseButton ? (
                       <Fragment>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant="secondary"
-                            action={cancelAction ? cancelAction : hideModal}
-                            text={cancelButtonText}
-                            dataQa={cancelButtonText}
-                          />
-                        </Box>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant={useDangerButton ? "danger" : "primary"}
-                            action={continueAction}
-                            text={continueButtonText}
-                            dataQa={continueButtonText}
-                          />
-                        </Box>
+                        {isMobile ? (
+                          <Stack childGap="1rem" direction="row">
+                            <Box width="100%" padding="0">
+                              <ButtonWithAction
+                                variant="secondary"
+                                action={cancelAction ? cancelAction : hideModal}
+                                text={cancelButtonText}
+                                dataQa={cancelButtonText}
+                                extraStyles={buttonExtraStyles}
+                                className="modal-cancel-button"
+                              />
+                            </Box>
+                            <Box width="100%" padding="0">
+                              <ButtonWithAction
+                                variant={useDangerButton ? "danger" : "primary"}
+                                action={continueAction}
+                                text={continueButtonText}
+                                dataQa={continueButtonText}
+                                isLoading={isLoading}
+                                extraStyles={buttonExtraStyles}
+                                className="modal-continue-button"
+                              />
+                            </Box>
+                          </Stack>
+                        ) : (
+                          <Stack
+                            childGap="1rem"
+                            direction="row"
+                            justify="flex-end"
+                          >
+                            <ButtonWithAction
+                              variant="secondary"
+                              action={cancelAction ? cancelAction : hideModal}
+                              text={cancelButtonText}
+                              dataQa={cancelButtonText}
+                              extraStyles={buttonExtraStyles}
+                              className="modal-cancel-button"
+                            />
+                            <ButtonWithAction
+                              variant={useDangerButton ? "danger" : "primary"}
+                              action={continueAction}
+                              text={continueButtonText}
+                              dataQa={continueButtonText}
+                              isLoading={isLoading}
+                              extraStyles={buttonExtraStyles}
+                              className="modal-continue-button"
+                            />
+                          </Stack>
+                        )}
                       </Fragment>
                     ) : (
                       <Box padding="0.5rem">
@@ -121,10 +157,12 @@ const Modal = ({
                           variant="primary"
                           text="Close"
                           dataQa="Close"
+                          extraStyles={buttonExtraStyles}
+                          className="modal-cancel-button"
                         />
                       </Box>
                     )}
-                  </Cluster>
+                  </Stack>
                 </Box>
               </Stack>
             </Box>

package/src/deprecated/spinner/Spinner.js

@@ -45,7 +45,7 @@ const SpinnerIcon = ({ color, isMobile }) => (
         <defs>
           <path
             d="M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z"
-            id="path-1"
+            id="spinner-path-1"
           />
         </defs>
         <g id="Symbols" fill="none" fillRule="evenodd">
@@ -54,9 +54,13 @@ const SpinnerIcon = ({ color, isMobile }) => (
             transform="translate(-60 -12)"
           >
             <mask id="mask-2" fill={color || "white"}>
-              <use xlinkHref="#path-1" />
+              <use xlinkHref="#spinner-path-1" />
             </mask>
-            <use id="loader" fill={color || "white"} xlinkHref="#path-1" />
+            <use
+              id="loader"
+              fill={color || "white"}
+              xlinkHref="#spinner-path-1"
+            />
           </g>
         </g>
       </svg>