@thecb/components 11.8.1-beta.0 → 11.9.0

package/dist/index.cjs.js

@@ -1879,6 +1879,20 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   // Convert back to hex
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid ").concat(borderColor);
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1902,7 +1916,8 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor
+  adjustHexColor: adjustHexColor,
+  arrowBorder: arrowBorder
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -14863,7 +14878,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
 };
 
 var IconAdd = function IconAdd(_ref) {
-  var _ref$strokeWidth = _ref.strokeWidth,
+  var _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? "none" : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
     strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14878,7 +14895,7 @@ var IconAdd = function IconAdd(_ref) {
   })), /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
-    stroke: "none",
+    stroke: stroke,
     strokeWidth: strokeWidth
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(-407 -563)"
@@ -19003,6 +19020,238 @@ var WireSmallIcon = function WireSmallIcon() {
   }));
 };
 
+var VisaLargeIcon = function VisaLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Visa"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M34.858 24H1.14296C0.511437 24 0 23.4738 0 22.8252V1.17485C0 0.5262 0.511437 0 1.14296 0H34.858C35.4897 0 36 0.5262 36 1.17485V22.8252C36 23.4738 35.4897 24 34.858 24Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_visa_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.1125 7.63715L11.9703 15.1338H9.92036L8.37411 9.15114C8.28024 8.78265 8.19861 8.64765 7.91312 8.4924C7.44699 8.23952 6.67725 7.99227 6 7.85502L6.04601 7.63715H9.34586C9.71649 7.63715 10.0446 7.91715 10.1401 8.40152L10.9567 12.7395L13.0749 7.63702H15.1125V7.63715ZM23.1447 12.6864C23.153 10.7078 20.4087 10.5988 20.4276 9.71489C20.4335 9.44589 20.6895 9.15989 21.2502 9.08689C21.528 9.05052 22.2936 9.02277 23.162 9.42239L23.5026 7.83266C23.0361 7.66328 22.4357 7.50027 21.6887 7.50027C19.7718 7.50027 18.4229 8.51927 18.4115 9.97839C18.399 11.0576 19.3743 11.6599 20.109 12.0185C20.8649 12.3858 21.1185 12.6218 21.1157 12.9503C21.1103 13.4531 20.5128 13.6751 19.9545 13.6839C18.9797 13.6989 18.414 13.4201 17.9633 13.2105L17.6117 14.8529C17.9648 15.0608 18.9012 15.2421 19.7684 15.2513C21.8057 15.2513 23.1384 14.2449 23.1447 12.6864ZM28.2065 15.134H30L28.4345 7.63715H26.779C26.4066 7.63715 26.0927 7.85389 25.9536 8.18715L23.0436 15.1338H25.0799L25.4841 14.0141H27.9723L28.2065 15.1338V15.134ZM26.0426 12.4778L27.0633 9.66302L27.6507 12.4778H26.0426ZM17.8833 7.63715L16.2797 15.1338H14.3405L15.9447 7.63715H17.8833Z",
+    fill: "#1434CB"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_visa_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "24",
+    height: "7.75097",
+    fill: "white",
+    transform: "translate(6 7.5)"
+  }))));
+};
+
+var AmExLargeIcon = function AmExLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "American Express"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_amex_large)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip1_amex_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.868 21.376L31.204 19.52L29.4761 21.376H26.084H18.788V12.736H15.396L19.62 3.072H23.7161L25.188 6.4V3.072H30.3079L31.204 5.568L32.1 3.072H36.004V1.6C36.004 0.704 35.2999 0 34.404 0H0.0999999C-0.795999 0 -1.5 0.704 -1.5 1.6V22.4C-1.5 23.296 -0.795999 24 0.0999999 24H34.404C35.2999 24 36.004 23.296 36.004 22.4V21.376H32.868Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M33.3161 20.352H36.004L32.484 16.576L36.004 12.864H33.38L31.14 15.296L28.9639 12.864H26.2759L29.86 16.64L26.2759 20.352H28.9L31.14 17.92L33.3161 20.352Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.9878 18.624V17.472H26.2118V15.744H21.9878V14.592H26.2759V12.864H19.9398V20.352H26.2759V18.624H21.9878Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.02 11.776H35.94V4.224L32.868 4.288L31.204 8.96L29.4761 4.288H26.2759V11.776H28.3241V6.528L30.244 11.776H32.036L34.02 6.528V11.776Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.012 4.28796H20.388L17.06 11.776H19.2999L19.94 10.304H23.396L24.036 11.776H26.34L23.012 4.28796ZM20.6439 8.57596L21.6679 6.14396L22.692 8.57596H20.6439Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.148 16.3839L36.004 18.432V14.3359L34.148 16.3839Z",
+    fill: "#0071CE"
+  }))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_amex_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    rx: "1.5",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip1_amex_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    fill: "white"
+  }))));
+};
+
+var DiscoverLargeIcon = function DiscoverLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Discover"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_discover_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.8144 0H1.18564C0.529586 0 0 0.552009 0 1.23584V22.7642C0 23.448 0.529586 24 1.18564 24H34.8144C35.4704 24 36 23.448 36 22.7642V1.23584C36 0.552009 35.4704 0 34.8144 0ZM34.2294 12C34.2294 18.3975 29.2538 23.5881 23.1122 23.5881H1.18564C1.13031 23.5881 1.07893 23.5839 1.02756 23.5716C0.976178 23.5592 0.9248 23.5428 0.877374 23.5221C0.810188 23.4933 0.746954 23.448 0.691623 23.3985C0.652103 23.3657 0.616533 23.3286 0.584916 23.2874C0.470304 23.1432 0.395214 22.9619 0.395214 22.7601V1.23584C0.395214 1.06694 0.446592 0.906282 0.529586 0.774459C0.557252 0.729146 0.588869 0.687951 0.624438 0.650876C0.695576 0.576725 0.782523 0.514934 0.877374 0.47274C0.9248 0.453141 0.976178 0.436664 1.02756 0.424305C1.07893 0.411947 1.13031 0.407828 1.18564 0.407828H23.1122C29.2497 0.407828 34.2294 5.59424 34.2294 11.9959V12Z",
+    fill: "url(#paint0_linear_discover_large)"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.06678 9.25305H1.66773V13.928H3.06284C3.80189 13.928 4.33937 13.7618 4.80968 13.388C5.36693 12.9462 5.69891 12.2816 5.69891 11.5943C5.69891 10.2160 4.61997 9.25305 3.07074 9.25305H3.06678ZM4.18128 12.7649C3.88092 13.0217 3.49361 13.1350 2.87708 13.1350H2.62019V10.0423H2.87708C3.49361 10.0423 3.86907 10.1480 4.18128 10.4199C4.51326 10.6993 4.71087 11.1373 4.71087 11.583C4.71087 12.0286 4.51326 12.4817 4.18128 12.7612V12.7649Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.08614 9.25305H6.13367V13.928H7.08614V9.25305Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.42188 11.0467C8.84882 10.8428 8.68283 10.7106 8.68283 10.4576C8.68283 10.1631 8.98319 9.94031 9.39413 9.94031C9.67875 9.94031 9.91589 10.0536 10.1649 10.318L10.6628 9.69486C10.2518 9.35123 9.76175 9.17725 9.22427 9.17725C8.35875 9.17725 7.69874 9.75150 7.69874 10.518C7.69874 11.1638 8.00700 11.4923 8.90415 11.7982C9.27567 11.9228 9.46929 12.0097 9.56415 12.0625C9.75386 12.1796 9.84870 12.3495 9.84870 12.5459C9.84870 12.9235 9.53253 13.2068 9.10578 13.2068C8.65113 13.2068 8.28366 12.9877 8.06241 12.5836L7.44586 13.1501C7.88445 13.7656 8.41407 14.0412 9.14119 14.0412C10.1331 14.0412 10.8286 13.4106 10.8286 12.5081C10.8286 11.7642 10.5087 11.4281 9.42188 11.1005V11.0467Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.1291 11.5943C11.1291 12.9688 12.2595 14.0336 13.7099 14.0336C14.1209 14.0336 14.4727 13.9581 14.9073 13.7618V12.6893C14.524 13.0556 14.1881 13.2029 13.7534 13.2029C12.7932 13.2029 12.1093 12.5383 12.1093 11.5905C12.1093 10.6917 12.8128 10.0056 13.7099 10.0056C14.1644 10.0056 14.5082 10.1604 14.9073 10.5105V9.43804C14.4885 9.23414 14.1446 9.15106 13.7336 9.15106C12.2871 9.15106 11.1291 10.2386 11.1291 11.598V11.5943Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M22.4756 12.3911L21.1674 9.25305H20.1281L22.2029 14.045H22.7167L24.8312 9.25305H23.7957L22.4756 12.3911Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M25.262 13.928H27.9692V13.1350H26.2145V11.8737H27.902V11.0808H26.2145V10.0461H27.9692V9.25305H25.262V13.928Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M31.7474 10.6314C31.7474 9.75528 31.1150 9.25305 29.9164 9.25305H28.6014V13.928H29.5539V12.0512H29.6804L31.0004 13.928H32.1742L30.6329 11.9568C31.3519 11.8171 31.7474 11.3488 31.7474 10.6314ZM29.8346 11.4016H29.5539V9.98564H29.8464C30.4393 9.98564 30.7633 10.2236 30.7633 10.6805C30.7633 11.1374 30.4393 11.4016 29.8305 11.4016H29.8346Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.5062 9.49845C32.5062 9.41537 32.4469 9.37005 32.3442 9.37005H32.2059V9.78167H32.3087V9.62317L32.4312 9.78167H32.5577L32.4153 9.61173C32.4746 9.59663 32.5103 9.55509 32.5103 9.49845H32.5062ZM32.3244 9.55509H32.3087V9.44558H32.3285C32.3798 9.44558 32.4075 9.46446 32.4075 9.49845C32.4075 9.53244 32.3798 9.55509 32.3285 9.55509H32.3244Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.364 9.21524C32.1545 9.21524 31.9886 9.37385 31.9886 9.57398C31.9886 9.77412 32.1585 9.93272 32.364 9.93272C32.5695 9.93272 32.7355 9.77034 32.7355 9.57398C32.7355 9.37762 32.5695 9.21524 32.364 9.21524ZM32.364 9.86852C32.198 9.86852 32.0636 9.73635 32.0636 9.57398C32.0636 9.41160 32.198 9.27944 32.364 9.27944C32.5299 9.27944 32.6604 9.41538 32.6604 9.57398C32.6604 9.73258 32.526 9.86852 32.364 9.86852Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter0_i_discover_large)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "17.7501",
+    cy: "11.6276",
+    r: "2.64908",
+    fill: "url(#paint1_linear_discover_large)"
+  }))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter0_i_discover_large",
+    x: "15.1011",
+    y: "8.9785",
+    width: "5.68815",
+    height: "5.68815",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "BackgroundImageFix",
+    result: "shape"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React__default.createElement("feMorphology", {
+    radius: "0.015",
+    operator: "erode",
+    "in": "SourceAlpha",
+    result: "effect1_innerShadow_discover_large"
+  }), /*#__PURE__*/React__default.createElement("feOffset", {
+    dx: "0.75",
+    dy: "0.75"
+  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "0.1875"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "arithmetic",
+    k2: "-1",
+    k3: "1"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "shape",
+    result: "effect1_innerShadow_discover_large"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "paint0_linear_discover_large",
+    x1: "47.9987",
+    y1: "66.2864",
+    x2: "5.22557",
+    y2: "-4.9576",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#F9A020"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0.5",
+    stopColor: "#F9A020"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#DF5026"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "paint1_linear_discover_large",
+    x1: "19.8984",
+    y1: "13.2793",
+    x2: "15.9843",
+    y2: "9.62301",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#EA953E"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#D44B33"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_discover_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    fill: "white"
+  }))));
+};
+
+var MasterCardLargeIcon = function MasterCardLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Mastercard"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    rx: "1.5",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.7104 5.06982H14.2698V18.4409H21.7104V5.06982Z",
+    fill: "#FF5F00"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.7422 11.7553C14.7410 10.4676 14.9329 9.19649 15.5955 8.03822C16.2583 6.87993 17.1270 5.86487 18.0001 5.06984C16.7357 4.08381 15.2291 3.47061 13.6426 3.30033C12.0561 3.13007 10.4538 3.40956 9.01863 4.10691C7.58351 4.80426 6.37353 5.89133 5.52701 7.24383C4.6805 8.59635 4.23156 10.1597 4.23156 11.7553C4.23156 13.3509 4.6805 14.9143 5.52701 16.2668C6.37353 17.6193 7.58351 18.7064 9.01863 19.4037C10.4538 20.1011 12.0561 20.3806 13.6426 20.2103C15.2291 20.0400 16.7357 19.4268 18.0001 18.4408C17.1272 17.6457 16.2583 16.6307 15.5955 15.4724C14.9329 14.3141 14.7410 13.043 14.7422 11.7553Z",
+    fill: "#EB001B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M31.7483 11.7553C31.7483 13.3509 31.2994 14.9143 30.4529 16.2668C29.6064 17.6193 28.3965 18.7064 26.9614 19.4037C25.5263 20.1011 23.924 20.3805 22.3376 20.2103C20.751 20.04 19.2446 19.4268 17.9801 18.4408C18.8522 17.6450 19.5204 16.6298 19.9831 15.4716C20.4456 14.3136 20.7379 13.0428 20.7379 11.7553C20.7379 10.4678 20.4456 9.19709 19.9831 8.03899C19.5204 6.88091 18.8522 5.86566 17.9801 5.06984C19.2446 4.08381 20.751 3.47061 22.3376 3.30033C23.924 3.13006 25.5263 3.40958 26.9614 4.10694C28.3965 4.80429 29.6064 5.89136 30.4529 7.24386C31.2994 8.59638 31.7483 10.1598 31.7483 11.7553Z",
+    fill: "#F79E1B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M30.9371 17.0246V16.7508H31.0475V16.6952H30.7664V16.7508H30.8768V17.0246H30.9371ZM31.4828 17.0246V16.6946H31.3967L31.2977 16.9215L31.1984 16.6946H31.1121V17.0246H31.173V16.7757L31.266 16.9904H31.329L31.422 16.7751V17.0246H31.4828Z",
+    fill: "#F79E1B"
+  }));
+};
+
 var color$3 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -25196,406 +25445,6 @@ var DisplayBox = function DisplayBox(_ref) {
 };
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 
-/* 
-  Hook that assigns a click event listener to the main document element
-  Returns a ref to attach to another element (like an icon/button that triggers a popover)
-  If a click event gets captured by the document and the assigned element isn't the target
-  hook will run whatever handler is passed (eg a function that closes a popover)
-
-  See popover component for implementation
-
-*/
-
-var useOutsideClickHook = function useOutsideClickHook(handler) {
-  var ref = React.useRef();
-  React.useEffect(function () {
-    var handleOutsideClick = function handleOutsideClick(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        handler();
-      }
-    };
-    document.addEventListener("click", handleOutsideClick, true);
-    return function () {
-      document.removeEventListener("click", handleOutsideClick, true);
-    };
-  }, [ref]);
-  return ref;
-};
-
-/* 
-  Hook that takes an ID selector for an element on the screen
-  And optionally values for top position, left position, smooth behavior
-  Finds element on screen and scrolls it to the provided coordinates
-
-  (string, number, number, string, number) => undefined;
-*/
-
-var useScrollTo = function useScrollTo(id) {
-  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
-  var delay = arguments.length > 4 ? arguments[4] : undefined;
-  var scrollItem;
-  if (delay) {
-    setTimeout(function () {
-      var _scrollItem;
-      scrollItem = document.getElementById(id);
-      (_scrollItem = scrollItem) === null || _scrollItem === void 0 || _scrollItem.scrollTo({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    }, delay);
-  } else {
-    var _scrollItem2;
-    scrollItem = document.getElementById(id);
-    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 || _scrollItem2.scrollTo({
-      top: top,
-      left: left,
-      behavior: behavior
-    });
-  }
-};
-
-var initialToastState = {
-  isOpen: false,
-  variant: "",
-  message: ""
-};
-var useToastNotification = function useToastNotification() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$timeout = _ref.timeout,
-    timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
-  var _useState = React.useState(initialToastState),
-    _useState2 = _slicedToArray(_useState, 2),
-    toastState = _useState2[0],
-    setToastState = _useState2[1];
-  React.useEffect(function () {
-    if (toastState.isOpen && timeout > 0) {
-      setTimeout(function () {
-        setToastState(initialToastState);
-      }, timeout);
-    }
-  }, [timeout, toastState.isOpen]);
-  var showToast = function showToast(_ref2) {
-    var message = _ref2.message,
-      variant = _ref2.variant;
-    return setToastState({
-      isOpen: true,
-      variant: variant,
-      message: message
-    });
-  };
-  var hideToast = function hideToast() {
-    return setToastState(initialToastState);
-  };
-  return {
-    isToastOpen: toastState.isOpen,
-    toastVariant: toastState.variant,
-    toastMessage: toastState.message,
-    showToast: showToast,
-    hideToast: hideToast
-  };
-};
-
-function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
-  React.useEffect(function () {
-    if (condition) {
-      addValidator(validatorFn());
-    }
-    return function () {
-      // Remove validator when component unmounts
-      removeValidator(validatorFn());
-    };
-  }, [condition, addValidator, removeValidator]);
-}
-
-/**
- * A custom hook to dynamically load the Cloudflare Turnstile script.
- *
- * @param {string} verifyURL - The URL of the Turnstile verification script.
- */
-var useTurnstileScript = function useTurnstileScript(verifyURL) {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    scriptLoaded = _useState2[0],
-    setScriptLoaded = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scriptError = _useState4[0],
-    setScriptError = _useState4[1];
-  var handleScriptError = function handleScriptError() {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
-  React.useEffect(function () {
-    if (typeof window === "undefined") {
-      setScriptLoaded(false);
-      return;
-    }
-    if (window.turnstile && window.turnstile.render) {
-      setScriptLoaded(true);
-      return;
-    }
-    var script = document.createElement("script");
-    script.src = "".concat(verifyURL, "?render=explicit");
-    script.onload = function () {
-      setScriptLoaded(true);
-    };
-    script.onerror = function () {
-      handleScriptError();
-    };
-    script.onabort = function () {
-      handleScriptError();
-    };
-    script.defer = true;
-    document.getElementsByTagName("head")[0].appendChild(script);
-    return function () {
-      setScriptLoaded(false);
-      setScriptError(false);
-    };
-  }, [verifyURL]);
-  return {
-    scriptLoaded: scriptLoaded,
-    scriptError: scriptError
-  };
-};
-
-
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  useOutsideClick: useOutsideClickHook,
-  useScrollTo: useScrollTo,
-  useToastNotification: useToastNotification,
-  useConditionallyAddValidator: useConditionallyAddValidator,
-  useTurnstileScript: useTurnstileScript
-});
-
-var hoverColor$4 = "#116285";
-var activeColor$5 = "#0E506D";
-var popoverTriggerColor = "#15749D";
-var fallbackValues$m = {
-  hoverColor: hoverColor$4,
-  activeColor: activeColor$5,
-  popoverTriggerColor: popoverTriggerColor
-};
-
-var arrowBorder = function arrowBorder(borderColor, direction) {
-  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
-  var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid ").concat(borderColor);
-  if (direction == "down") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
-  } else if (direction == "up") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
-  } else if (direction == "left") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
-  } else if (direction == "right") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
-  }
-};
-var Popover = function Popover(_ref) {
-  var themeValues = _ref.themeValues,
-    _ref$triggerText = _ref.triggerText,
-    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
-    _ref$content = _ref.content,
-    content = _ref$content === void 0 ? "" : _ref$content,
-    _ref$hasIcon = _ref.hasIcon,
-    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-    Icon = _ref.icon,
-    _ref$iconHelpText = _ref.iconHelpText,
-    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
-    _ref$popoverID = _ref.popoverID,
-    popoverID = _ref$popoverID === void 0 ? 0 : _ref$popoverID,
-    _ref$popoverFocus = _ref.popoverFocus,
-    popoverFocus = _ref$popoverFocus === void 0 ? false : _ref$popoverFocus,
-    extraStyles = _ref.extraStyles,
-    textExtraStyles = _ref.textExtraStyles,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "auto" : _ref$height,
-    position = _ref.position,
-    arrowPosition = _ref.arrowPosition,
-    _ref$arrowDirection = _ref.arrowDirection,
-    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
-    _ref$transform = _ref.transform,
-    transform = _ref$transform === void 0 ? "none" : _ref$transform,
-    buttonExtraStyles = _ref.buttonExtraStyles,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
-    popoverExtraStyles = _ref.popoverExtraStyles;
-  var hoverColor = themeValues.hoverColor,
-    activeColor = themeValues.activeColor,
-    popoverTriggerColor = themeValues.popoverTriggerColor;
-  var _ref2 = position !== null && position !== void 0 ? position : {},
-    _ref2$top = _ref2.top,
-    top = _ref2$top === void 0 ? "-110px" : _ref2$top,
-    _ref2$right = _ref2.right,
-    right = _ref2$right === void 0 ? "auto" : _ref2$right,
-    _ref2$bottom = _ref2.bottom,
-    bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
-    _ref2$left = _ref2.left,
-    left = _ref2$left === void 0 ? "-225px" : _ref2$left;
-  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
-    _ref3$arrowTop = _ref3.arrowTop,
-    arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
-    _ref3$arrowRight = _ref3.arrowRight,
-    arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
-    _ref3$arrowBottom = _ref3.arrowBottom,
-    arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
-    _ref3$arrowLeft = _ref3.arrowLeft,
-    arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    popoverOpen = _useState2[0],
-    togglePopover = _useState2[1];
-  var handleTogglePopover = function handleTogglePopover(popoverState) {
-    if (popoverOpen !== popoverState) {
-      togglePopover(popoverState);
-    }
-  };
-  var triggerRef = useOutsideClickHook(function () {
-    return handleTogglePopover(false);
-  });
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "position: relative; ".concat(extraStyles)
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: function action() {
-      return noop$1;
-    },
-    onFocus: function onFocus() {
-      handleTogglePopover(true);
-    },
-    onBlur: function onBlur() {
-      handleTogglePopover(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === ESCAPE) {
-        handleTogglePopover(false);
-      }
-    },
-    onTouchStart: function onTouchStart() {
-      return handleTogglePopover(true);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return handleTogglePopover(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return handleTogglePopover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleTogglePopover(false);
-    },
-    contentOverride: true,
-    variant: "smallGhost",
-    tabIndex: "0",
-    id: "btnPopover".concat(popoverID),
-    "aria-expanded": popoverOpen,
-    "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
-    "aria-describedby": "Disclosure".concat(popoverID),
-    "aria-controls": "Disclosed".concat(popoverID),
-    ref: triggerRef,
-    extraStyles: buttonExtraStyles
-  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    srOnly: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    id: "btnPopover".concat(popoverID, "_info")
-  }, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
-    color: popoverTriggerColor,
-    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
-  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
-    background: backgroundColor,
-    borderRadius: "4px",
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-    id: "Disclosed".concat(popoverID),
-    role: "region",
-    "aria-describedby": "Disclosure".concat(popoverID),
-    tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
-  })));
-};
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$m);
-
-var DisplayCard = function DisplayCard(_ref) {
-  var title = _ref.title,
-    item = _ref.item,
-    buttonText = _ref.buttonText,
-    buttonAction = _ref.buttonAction,
-    url = _ref.url,
-    _ref$link = _ref.link,
-    link = _ref$link === void 0 ? false : _ref$link,
-    helpText = _ref.helpText,
-    _ref$hasPopover = _ref.hasPopover,
-    hasPopover = _ref$hasPopover === void 0 ? false : _ref$hasPopover,
-    _ref$popoverTriggerTe = _ref.popoverTriggerText,
-    popoverTriggerText = _ref$popoverTriggerTe === void 0 ? "" : _ref$popoverTriggerTe,
-    _ref$popoverContent = _ref.popoverContent,
-    popoverContent = _ref$popoverContent === void 0 ? "" : _ref$popoverContent,
-    popoverExtraStyles = _ref.popoverExtraStyles,
-    popoverTextExtraStyles = _ref.popoverTextExtraStyles;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 16px"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0rem"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 8px 0"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center",
-    overflow: true
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "pL",
-    color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px"
-  }, title), hasPopover && /*#__PURE__*/React__default.createElement(Popover$1, {
-    triggerText: popoverTriggerText,
-    content: popoverContent,
-    popoverExtraStyles: popoverExtraStyles,
-    popoverTextExtraStyles: popoverTextExtraStyles
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "24px",
-    borderSize: "1px",
-    borderRadius: "4px",
-    background: WHITE,
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    color: CHARADE_GREY
-  }, item), link ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
-    text: buttonText,
-    url: url,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    text: buttonText,
-    action: buttonAction,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : helpText ? /*#__PURE__*/React__default.createElement(Text$1, {
-    color: STORM_GREY,
-    extraStyles: "font-style: italic;"
-  }, helpText) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
-};
-
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -25927,7 +25776,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$n = {
+var fallbackValues$m = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -26184,7 +26033,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
 
 var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
@@ -26232,7 +26081,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$n, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$m, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -26253,7 +26102,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$n, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$m, "default");
 
 var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
 var TextareaField = styled__default.textarea.withConfig({
@@ -26389,7 +26238,7 @@ var FormTextarea = function FormTextarea(_ref8) {
     extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
   })));
 };
-var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$n, "default");
+var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$m, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -26403,7 +26252,7 @@ var color$9 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$o = {
+var fallbackValues$n = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$9
@@ -26445,11 +26294,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$o, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$p = {
+var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -26487,11 +26336,51 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$p);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
+
+var cardBrands = {
+  visa: {
+    label: "Visa",
+    small: VisaSmallIcon,
+    large: VisaLargeIcon
+  },
+  master_card: {
+    label: "Mastercard",
+    small: MasterCardSmallIcon,
+    large: MasterCardLargeIcon
+  },
+  discover: {
+    label: "Discover",
+    small: DiscoverSmallIcon,
+    large: DiscoverLargeIcon
+  },
+  amex: {
+    label: "American Express",
+    small: AmExSmallIcon,
+    large: AmExLargeIcon
+  },
+  "default": {
+    label: "Credit card",
+    small: GenericSmallIcon,
+    large: GenericCardLarge
+  }
+};
+var CardType = function CardType(_ref) {
+  var type = _ref.type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size;
+  var _ref2 = cardBrands[type] || cardBrands["default"],
+    label = _ref2.label,
+    IconComponent = _ref2[size];
+  return /*#__PURE__*/React__default.createElement("span", {
+    role: "img",
+    "aria-label": label
+  }, /*#__PURE__*/React__default.createElement(IconComponent, null));
+};
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26563,11 +26452,14 @@ var CCIconWrapper = styled__default.div.withConfig({
 })(["margin-right:16px;width:30px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
+    type = _ref.type,
     autoPay = _ref.autoPay,
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(GenericCard, null)), /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
+    type: type
+  })), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -26583,7 +26475,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$q);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26664,7 +26556,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$r = {
+var fallbackValues$q = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26703,7 +26595,7 @@ var Heading = function Heading(_ref) {
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$r, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$q, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26759,7 +26651,7 @@ var ImageBox = function ImageBox(_ref) {
 };
 
 var color$a = "#15749D";
-var fallbackValues$s = {
+var fallbackValues$r = {
   color: color$a
 };
 
@@ -26825,7 +26717,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: strokeWidth
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$s);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -26917,7 +26809,7 @@ var fontWeight$5 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$t = {
+var fallbackValues$s = {
   fontWeight: fontWeight$5
 };
 
@@ -26976,7 +26868,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$t, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
 
 var weightTitle = {
   "default": "600",
@@ -26986,7 +26878,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$u = {
+var fallbackValues$t = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27034,7 +26926,7 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$u, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27222,9 +27114,10 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
     color: RAZZMATAZZ_RED
   }), INPUT_STATE_VALID, {
     icon: /*#__PURE__*/React__default.createElement(IconValid, {
-      margin: "0 0.5rem 0 0"
+      margin: "0 0.5rem 0 0",
+      bgFill: SEA_GREEN
     }),
-    color: FOREST_GREEN
+    color: SEA_GREEN
   });
   var validationMap = {
     charactersValidation: {
@@ -27294,7 +27187,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$v = {
+var fallbackValues$u = {
   color: color$b,
   height: height$1
 };
@@ -27436,12 +27329,12 @@ var Placeholder = function Placeholder(_ref4) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$v, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$u, "default");
 
 var backgroundColor$5 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$w = {
+var fallbackValues$v = {
   backgroundColor: backgroundColor$5
 };
 
@@ -27468,13 +27361,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$v, "default");
 
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$5 = MATISSE_BLUE;
 var disabledColor$1 = MANATEE_GREY;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$x = {
-  activeColor: activeColor$6,
+var fallbackValues$w = {
+  activeColor: activeColor$5,
   disabledColor: disabledColor$1,
   inactiveBorderColor: inactiveBorderColor
 };
@@ -27560,12 +27453,12 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     borderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$w);
 
-var activeColor$7 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor$1 = "".concat(STORM_GREY);
-var fallbackValues$y = {
-  activeColor: activeColor$7,
+var fallbackValues$x = {
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor$1
 };
 
@@ -27673,11 +27566,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$y);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$x);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$z = {
+var fallbackValues$y = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -27775,12 +27668,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$z);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$y);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$A = {
+var fallbackValues$z = {
   border: border$2
 };
 
@@ -27853,7 +27746,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$A, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$z, "default");
 
 var borderColor$4 = {
   "default": "".concat(GREY_CHATEAU)
@@ -27861,7 +27754,7 @@ var borderColor$4 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$B = {
+var fallbackValues$A = {
   borderColor: borderColor$4,
   borderSize: borderSize
 };
@@ -27879,7 +27772,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$B, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$A, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -38474,7 +38367,7 @@ var white = "".concat(WHITE);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  > div {\n    flex-direction: row;\n  }\n";
 var leftLabelStyles = "\n  > div {\n    flex-direction: row-reverse;\n  }\n";
-var fallbackValues$C = {
+var fallbackValues$B = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -38646,7 +38539,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$C);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$B);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -38693,7 +38586,7 @@ var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var contentBackgroundColor = INFO_BLUE;
-var fallbackValues$D = {
+var fallbackValues$C = {
   backgroundColor: backgroundColor$6,
   contentBackgroundColor: contentBackgroundColor,
   imageBackgroundColor: imageBackgroundColor,
@@ -38718,7 +38611,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$E = {
+var fallbackValues$D = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -38763,7 +38656,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$E);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$D);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -38879,14 +38772,14 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$D);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$C);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$F = {
+var fallbackValues$E = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$8,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -38913,7 +38806,7 @@ var NavTab = function NavTab(_ref) {
     extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0;\n        ")
   }, label));
 };
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$F);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$E);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39041,7 +38934,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$G = {
+var fallbackValues$F = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$6,
   fontColor: fontColor,
@@ -39121,7 +39014,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$G, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$F, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40101,7 +39994,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$H = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40150,7 +40043,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$H);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40284,7 +40177,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$I = {
+var fallbackValues$H = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40409,7 +40302,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$I);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -40444,6 +40337,325 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
 };
 var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
 
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+var useOutsideClickHook = function useOutsideClickHook(handler) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    var handleOutsideClick = function handleOutsideClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick, true);
+    return function () {
+      document.removeEventListener("click", handleOutsideClick, true);
+    };
+  }, [ref]);
+  return ref;
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 || _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 || _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+var useToastNotification = function useToastNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+  var _useState = React.useState(initialToastState),
+    _useState2 = _slicedToArray(_useState, 2),
+    toastState = _useState2[0],
+    setToastState = _useState2[1];
+  React.useEffect(function () {
+    if (toastState.isOpen && timeout > 0) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+      variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
+};
+
+function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
+  React.useEffect(function () {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return function () {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+var useTurnstileScript = function useTurnstileScript(verifyURL) {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    scriptLoaded = _useState2[0],
+    setScriptLoaded = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scriptError = _useState4[0],
+    setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
+  React.useEffect(function () {
+    if (typeof window === "undefined") {
+      setScriptLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setScriptLoaded(true);
+      return;
+    }
+    var script = document.createElement("script");
+    script.src = "".concat(verifyURL, "?render=explicit");
+    script.onload = function () {
+      setScriptLoaded(true);
+    };
+    script.onerror = function () {
+      handleScriptError();
+    };
+    script.onabort = function () {
+      handleScriptError();
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+    return function () {
+      setScriptLoaded(false);
+      setScriptError(false);
+    };
+  }, [verifyURL]);
+  return {
+    scriptLoaded: scriptLoaded,
+    scriptError: scriptError
+  };
+};
+
+
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  useOutsideClick: useOutsideClickHook,
+  useScrollTo: useScrollTo,
+  useToastNotification: useToastNotification,
+  useConditionallyAddValidator: useConditionallyAddValidator,
+  useTurnstileScript: useTurnstileScript
+});
+
+var hoverColor$4 = "#116285";
+var activeColor$8 = "#0E506D";
+var popoverTriggerColor = "#15749D";
+var fallbackValues$I = {
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$8,
+  popoverTriggerColor: popoverTriggerColor
+};
+
+var Popover = function Popover(_ref) {
+  var themeValues = _ref.themeValues,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    Icon = _ref.icon,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+    _ref$popoverID = _ref.popoverID,
+    popoverID = _ref$popoverID === void 0 ? 0 : _ref$popoverID,
+    _ref$popoverFocus = _ref.popoverFocus,
+    popoverFocus = _ref$popoverFocus === void 0 ? false : _ref$popoverFocus,
+    extraStyles = _ref.extraStyles,
+    textExtraStyles = _ref.textExtraStyles,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    position = _ref.position,
+    arrowPosition = _ref.arrowPosition,
+    _ref$arrowDirection = _ref.arrowDirection,
+    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+    _ref$transform = _ref.transform,
+    transform = _ref$transform === void 0 ? "none" : _ref$transform,
+    buttonExtraStyles = _ref.buttonExtraStyles,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+    popoverExtraStyles = _ref.popoverExtraStyles;
+  var hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor,
+    popoverTriggerColor = themeValues.popoverTriggerColor;
+  var _ref2 = position !== null && position !== void 0 ? position : {},
+    _ref2$top = _ref2.top,
+    top = _ref2$top === void 0 ? "-110px" : _ref2$top,
+    _ref2$right = _ref2.right,
+    right = _ref2$right === void 0 ? "auto" : _ref2$right,
+    _ref2$bottom = _ref2.bottom,
+    bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
+    _ref2$left = _ref2.left,
+    left = _ref2$left === void 0 ? "-225px" : _ref2$left;
+  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
+    _ref3$arrowTop = _ref3.arrowTop,
+    arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
+    _ref3$arrowRight = _ref3.arrowRight,
+    arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
+    _ref3$arrowBottom = _ref3.arrowBottom,
+    arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
+    _ref3$arrowLeft = _ref3.arrowLeft,
+    arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverOpen = _useState2[0],
+    togglePopover = _useState2[1];
+  var handleTogglePopover = function handleTogglePopover(popoverState) {
+    if (popoverOpen !== popoverState) {
+      togglePopover(popoverState);
+    }
+  };
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: function action() {
+      return noop$1;
+    },
+    onFocus: function onFocus() {
+      handleTogglePopover(true);
+    },
+    onBlur: function onBlur() {
+      handleTogglePopover(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === ESCAPE) {
+        handleTogglePopover(false);
+      }
+    },
+    onTouchStart: function onTouchStart() {
+      return handleTogglePopover(true);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleTogglePopover(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleTogglePopover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleTogglePopover(false);
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    id: "btnPopover".concat(popoverID),
+    "aria-expanded": popoverOpen,
+    "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
+    "aria-describedby": "Disclosure".concat(popoverID),
+    "aria-controls": "Disclosed".concat(popoverID),
+    ref: triggerRef,
+    extraStyles: buttonExtraStyles
+  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    id: "btnPopover".concat(popoverID, "_info")
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: popoverTriggerColor,
+    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    background: backgroundColor,
+    borderRadius: "4px",
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    id: "Disclosed".concat(popoverID),
+    role: "region",
+    "aria-describedby": "Disclosure".concat(popoverID),
+    tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+  })));
+};
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$I);
+
 /*
 This component will render `content` and a clipboard icon.
 When hovered, a popover with content `initialPopoverContent` will be displayed.
@@ -51239,8 +51451,161 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
-var pageBackground = "#FBFCFD";
+var TOOLTIP_THEME_SOURCE = "Popover";
 var fallbackValues$12 = {
+  hoverColor: SAPPHIRE_BLUE,
+  activeColor: PEACOCK_BLUE,
+  popoverTriggerColor: MATISSE_BLUE,
+  borderColor: "rgba(255, 255, 255, 0.85)"
+};
+var Tooltip = function Tooltip(_ref) {
+  var tooltipID = _ref.tooltipID,
+    _ref$hasIconTrigger = _ref.hasIconTrigger,
+    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
+    _ref$IconTrigger = _ref.IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? WarningIconXS : _ref$IconTrigger,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "Open the tooltip" : _ref$iconHelpText,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "Open the tooltip" : _ref$triggerText,
+    _ref$tooltipContent = _ref.tooltipContent,
+    tooltipContent = _ref$tooltipContent === void 0 ? "The contents of the tooltip go here." : _ref$tooltipContent,
+    _ref$contentPosition = _ref.contentPosition,
+    contentPosition = _ref$contentPosition === void 0 ? {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    } : _ref$contentPosition,
+    _ref$arrowDirection = _ref.arrowDirection,
+    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+    _ref$arrowPosition = _ref.arrowPosition,
+    arrowPosition = _ref$arrowPosition === void 0 ? {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    } : _ref$arrowPosition,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    _ref$containerExtraSt = _ref.containerExtraStyles,
+    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
+    _ref$triggerExtraStyl = _ref.triggerExtraStyles,
+    triggerExtraStyles = _ref$triggerExtraStyl === void 0 ? "" : _ref$triggerExtraStyl,
+    _ref$triggerButtonVar = _ref.triggerButtonVariant,
+    triggerButtonVariant = _ref$triggerButtonVar === void 0 ? "smallGhost" : _ref$triggerButtonVar,
+    _ref$contentExtraStyl = _ref.contentExtraStyles,
+    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
+    _ref$contentBackgroun = _ref.contentBackgroundColor,
+    contentBackgroundColor = _ref$contentBackgroun === void 0 ? WHITE : _ref$contentBackgroun;
+  var closeTimeoutRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipOpen = _useState2[0],
+    setTooltipOpen = _useState2[1];
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
+  var borderColor = themeValues.borderColor,
+    tooltipTriggerColor = themeValues.popoverTriggerColor,
+    hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor;
+  var top = contentPosition.top,
+    right = contentPosition.right,
+    bottom = contentPosition.bottom,
+    left = contentPosition.left;
+  var arrowTop = arrowPosition.arrowTop,
+    arrowRight = arrowPosition.arrowRight,
+    arrowBottom = arrowPosition.arrowBottom,
+    arrowLeft = arrowPosition.arrowLeft;
+  var handleToggleTooltip = function handleToggleTooltip(desiredTooltipState) {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
+    }
+  };
+  var handleKeyboardEvent = function handleKeyboardEvent(e) {
+    if (e.key === "Escape") {
+      handleToggleTooltip(false);
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    closeTimeoutRef.current = setTimeout(function () {
+      handleToggleTooltip(false);
+    }, 300);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    ref: closeTimeoutRef,
+    padding: "0",
+    extraStyles: "position: relative; ".concat(containerExtraStyles),
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEnter();
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseLeave();
+    },
+    "data-qa": "tooltip-container"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    "aria-describedby": tooltipID,
+    onKeyDown: handleKeyboardEvent,
+    variant: triggerButtonVariant,
+    onFocus: function onFocus() {
+      return handleToggleTooltip(true);
+    },
+    onBlur: function onBlur() {
+      return handleToggleTooltip(false);
+    },
+    onTouchStart: function onTouchStart() {
+      return handleToggleTooltip(true);
+    },
+    "data-qa": "tooltip-trigger",
+    contentOverride: true
+  }, hasIconTrigger === true && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    "aria-label": "Open tooltip"
+  }, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    color: tooltipTriggerColor
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), hasIconTrigger === false && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: tooltipTriggerColor,
+    extraStyles: "\n              color: ".concat(tooltipTriggerColor, ";\n              &:visited {\n                color: ").concat(tooltipTriggerColor, ";\n              }\n              &:hover {\n                color: ").concat(hoverColor, "; \n              }\n              &:active,\n              &:focus {\n                color: ").concat(activeColor, "; \n              }\n              ").concat(triggerExtraStyles, ";\n            ")
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    role: "tooltip",
+    id: tooltipID,
+    "aria-hidden": !tooltipOpen,
+    background: contentBackgroundColor,
+    "data-qa": "tooltip-contents",
+    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, "; \n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, "\n          "),
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    border: "1px solid transparent",
+    borderRadius: "4px",
+    minWidth: minWidth,
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, tooltipContent), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+  })));
+};
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$13 = {
   pageBackground: pageBackground
 };
 
@@ -51288,7 +51653,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$12));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$13));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51331,7 +51696,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$12));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$13));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51377,7 +51742,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$12));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$13));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51430,7 +51795,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$12));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$13));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51499,7 +51864,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$12));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$13));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51580,6 +51945,7 @@ exports.AddressForm = AddressForm;
 exports.AgencyIcon = AgencyIcon;
 exports.Alert = Alert$1;
 exports.AllocatedIcon = AllocatedIcon;
+exports.AmExLargeIcon = AmExLargeIcon;
 exports.AmExSmallIcon = AmExSmallIcon;
 exports.AmountCallout = AmountCallout$1;
 exports.ArrowDownCircleIconSmall = ArrowDownCircleIconSmall;
@@ -51602,6 +51968,7 @@ exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
 exports.Card = Card$1;
+exports.CardType = CardType;
 exports.CaretArrowDown = CaretArrowDown$1;
 exports.CaretArrowUp = CaretArrowUp$1;
 exports.CarrotIcon = CarrotIcon$1;
@@ -51636,9 +52003,9 @@ exports.Detail = Detail$1;
 exports.DisabledAccountsAddIcon = DisabledAccountsAddIcon;
 exports.DisabledPaymentMethodsAddIcon = DisabledPaymentMethodsAddIcon;
 exports.DisabledPropertiesAddIcon = DisabledPropertiesAddIcon;
+exports.DiscoverLargeIcon = DiscoverLargeIcon;
 exports.DiscoverSmallIcon = DiscoverSmallIcon;
 exports.DisplayBox = DisplayBox$1;
-exports.DisplayCard = DisplayCard;
 exports.Dropdown = Dropdown$1;
 exports.DuplicateIcon = DuplicateIcon;
 exports.EditNameForm = EditNameForm;
@@ -51693,6 +52060,7 @@ exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
+exports.MasterCardLargeIcon = MasterCardLargeIcon;
 exports.MasterCardSmallIcon = MasterCardSmallIcon;
 exports.Modal = Modal$3;
 exports.Module = Module$1;
@@ -51795,11 +52163,13 @@ exports.TimeoutImage = TimeoutImage;
 exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
+exports.Tooltip = Tooltip;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.VisaLargeIcon = VisaLargeIcon;
 exports.VisaSmallIcon = VisaSmallIcon;
 exports.VoidedIcon = VoidedIcon;
 exports.WalletBannerIcon = WalletBannerIcon$1;