@thecb/components 11.8.0-beta.1 → 11.8.0-beta.11

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"];
@@ -19252,7 +19267,7 @@ var AlertInfoIcon = function AlertInfoIcon() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
-    fill: "#281978",
+    fill: "#15749d",
     fillRule: "nonzero",
     xlinkHref: "#path-1"
   })))));
@@ -19403,13 +19418,13 @@ var AlertIcons = {
 };
 
 var background = {
-  info: "".concat(HAWKES_BLUE),
+  info: "".concat(INFO_BLUE),
   warn: "".concat(APRICOT_ORANGE),
   error: "".concat(BLUSH_RED),
   success: "".concat(HINT_GREEN)
 };
 var border$1 = {
-  info: "".concat(LUCKY_POINT),
+  info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   error: "".concat(RAZZMATAZZ_RED),
   success: "".concat(EMERALD_GREEN)
@@ -25198,585 +25213,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 hoverColor$5 = "#116285";
-var activeColor$6 = "#0E506D";
-var tooltipTriggerColor = "#15749D";
-var fallbackValues$n = {
-  hoverColor: hoverColor$5,
-  activeColor: activeColor$6,
-  tooltipTriggerColor: tooltipTriggerColor
-};
-
-var arrowBorder$1 = 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 Tooltip = function Tooltip(_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$hasIconTrigger = _ref.hasIconTrigger,
-    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
-    _ref$IconTrigger = _ref.IconTrigger,
-    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
-    _ref$iconHelpText = _ref.iconHelpText,
-    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
-    _ref$tooltipID = _ref.tooltipID,
-    tooltipID = _ref$tooltipID === void 0 ? 0 : _ref$tooltipID,
-    extraStyles = _ref.extraStyles,
-    _ref$textExtraStyles = _ref.textExtraStyles,
-    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _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,
-    tooltipExtraStyles = _ref.tooltipExtraStyles;
-  var hoverColor = themeValues.hoverColor,
-    activeColor = themeValues.activeColor,
-    tooltipTriggerColor = themeValues.tooltipTriggerColor;
-  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),
-    tooltipOpen = _useState2[0],
-    setTooltipOpen = _useState2[1];
-  var handleToggleTooltip = function handleToggleTooltip(tooltipState) {
-    if (tooltipOpen !== tooltipState) {
-      setTooltipOpen(tooltipState);
-    }
-  };
-  var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
-      handleToggleTooltip(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() {
-      return handleToggleTooltip(true);
-    },
-    onBlur: function onBlur() {
-      return handleToggleTooltip(false);
-    },
-    onKeyDown: handleKeyboardEvent,
-    onTouchStart: function onTouchStart() {
-      return handleToggleTooltip(true);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return handleToggleTooltip(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return handleToggleTooltip(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleToggleTooltip(false);
-    },
-    contentOverride: true,
-    variant: "smallGhost",
-    tabIndex: "0",
-    "aria-describedby": tooltipID,
-    extraStyles: buttonExtraStyles
-  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconTrigger, {
-    stroke: BLACK
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    srOnly: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: 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: tooltipID,
-    role: "tooltip",
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(tooltipOpen ? "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(tooltipExtraStyles, ";\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$1(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 Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$n);
-
-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$hasTooltip = _ref.hasTooltip,
-    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
-    _ref$tooltipTriggerTe = _ref.tooltipTriggerText,
-    tooltipTriggerText = _ref$tooltipTriggerTe === void 0 ? "" : _ref$tooltipTriggerTe,
-    _ref$tooltipContent = _ref.tooltipContent,
-    tooltipContent = _ref$tooltipContent === void 0 ? "" : _ref$tooltipContent,
-    _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? {
-      top: "auto",
-      bottom: "calc(100% + 0.25rem)",
-      left: "auto",
-      right: "0"
-    } : _ref$tooltipPosition,
-    _ref$tooltipArrowPosi = _ref.tooltipArrowPosition,
-    tooltipArrowPosition = _ref$tooltipArrowPosi === void 0 ? {
-      arrowBottom: "-0.5rem",
-      arrowRight: "0.625rem",
-      arrowTop: "auto",
-      arrowLeft: "auto"
-    } : _ref$tooltipArrowPosi,
-    tooltipArrowDirection = _ref.tooltipArrowDirection,
-    tooltipExtraStyles = _ref.tooltipExtraStyles,
-    _ref$tooltipTextExtra = _ref.tooltipTextExtraStyles,
-    tooltipTextExtraStyles = _ref$tooltipTextExtra === void 0 ? "max-width: 300px;" : _ref$tooltipTextExtra,
-    _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
-  }), hasTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    triggerText: tooltipTriggerText,
-    content: tooltipContent,
-    textExtraStyles: tooltipTextExtraStyles,
-    position: tooltipPosition,
-    arrowPosition: tooltipArrowPosition,
-    arrowDirection: tooltipArrowDirection,
-    tooltipExtraStyles: tooltipExtraStyles
-  }))), /*#__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++) {
@@ -26108,7 +25544,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$o = {
+var fallbackValues$m = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -26365,7 +25801,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$o, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
 
 var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
@@ -26413,7 +25849,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$o, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$m, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -26434,7 +25870,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$o, "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({
@@ -26570,7 +26006,7 @@ var FormTextarea = function FormTextarea(_ref8) {
     extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
   })));
 };
-var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$o, "default");
+var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$m, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -26584,7 +26020,7 @@ var color$9 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$p = {
+var fallbackValues$n = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$9
@@ -26626,11 +26062,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$p, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -26668,11 +26104,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$q);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$r = {
+var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26764,7 +26200,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$r);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26845,7 +26281,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$s = {
+var fallbackValues$q = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26884,7 +26320,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$s, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$q, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26940,7 +26376,7 @@ var ImageBox = function ImageBox(_ref) {
 };
 
 var color$a = "#15749D";
-var fallbackValues$t = {
+var fallbackValues$r = {
   color: color$a
 };
 
@@ -27006,7 +26442,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: strokeWidth
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$t);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -27098,7 +26534,7 @@ var fontWeight$5 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$u = {
+var fallbackValues$s = {
   fontWeight: fontWeight$5
 };
 
@@ -27157,7 +26593,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$u, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
 
 var weightTitle = {
   "default": "600",
@@ -27167,7 +26603,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$v = {
+var fallbackValues$t = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27215,7 +26651,7 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$v, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27403,9 +26839,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: {
@@ -27475,7 +26912,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$w = {
+var fallbackValues$u = {
   color: color$b,
   height: height$1
 };
@@ -27617,12 +27054,12 @@ var Placeholder = function Placeholder(_ref4) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$w, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$u, "default");
 
 var backgroundColor$5 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$x = {
+var fallbackValues$v = {
   backgroundColor: backgroundColor$5
 };
 
@@ -27649,13 +27086,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$x, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$v, "default");
 
-var activeColor$7 = MATISSE_BLUE;
+var activeColor$5 = MATISSE_BLUE;
 var disabledColor$1 = MANATEE_GREY;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$y = {
-  activeColor: activeColor$7,
+var fallbackValues$w = {
+  activeColor: activeColor$5,
   disabledColor: disabledColor$1,
   inactiveBorderColor: inactiveBorderColor
 };
@@ -27741,12 +27178,12 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     borderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$y);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$w);
 
-var activeColor$8 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor$1 = "".concat(STORM_GREY);
-var fallbackValues$z = {
-  activeColor: activeColor$8,
+var fallbackValues$x = {
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor$1
 };
 
@@ -27854,11 +27291,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$z);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$x);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$A = {
+var fallbackValues$y = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -27956,12 +27393,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$A);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$y);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$B = {
+var fallbackValues$z = {
   border: border$2
 };
 
@@ -28034,7 +27471,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$B, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$z, "default");
 
 var borderColor$4 = {
   "default": "".concat(GREY_CHATEAU)
@@ -28042,7 +27479,7 @@ var borderColor$4 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$C = {
+var fallbackValues$A = {
   borderColor: borderColor$4,
   borderSize: borderSize
 };
@@ -28060,7 +27497,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$C, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$A, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -38655,7 +38092,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$D = {
+var fallbackValues$B = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -38827,7 +38264,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$D);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$B);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -38874,7 +38311,7 @@ var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var contentBackgroundColor = INFO_BLUE;
-var fallbackValues$E = {
+var fallbackValues$C = {
   backgroundColor: backgroundColor$6,
   contentBackgroundColor: contentBackgroundColor,
   imageBackgroundColor: imageBackgroundColor,
@@ -38899,7 +38336,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$F = {
+var fallbackValues$D = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -38944,7 +38381,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$F);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$D);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39060,14 +38497,14 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$E);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$C);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$9 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$G = {
+var fallbackValues$E = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$9,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -39094,7 +38531,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$G);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$E);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39222,7 +38659,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$H = {
+var fallbackValues$F = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$6,
   fontColor: fontColor,
@@ -39302,7 +38739,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$F, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40282,7 +39719,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$I = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40331,7 +39768,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$I);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40465,7 +39902,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$J = {
+var fallbackValues$H = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40590,7 +40027,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$J);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -40625,6 +40062,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.
@@ -41170,7 +40926,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$K = {
+var fallbackValues$J = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41201,7 +40957,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$K);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$J);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41248,7 +41004,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$L = {
+var fallbackValues$K = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -41307,7 +41063,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$L);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$K);
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -45765,7 +45521,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
-var fallbackValues$M = {
+var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$2,
@@ -45900,7 +45656,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$M, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -45972,7 +45728,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$N = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -46012,7 +45768,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$N, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
 
 var menuVariants = {
   invisible: {
@@ -46064,7 +45820,7 @@ var NavMenuMobile = function NavMenuMobile(_ref3) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$N, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$M, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -46677,7 +46433,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$O = {
+var fallbackValues$N = {
   iconColor: iconColor
 };
 
@@ -47018,7 +46774,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return isLoading ? loadingObligation : inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$O);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
 
 var weightTitle$1 = {
   "default": "600",
@@ -47028,7 +46784,7 @@ var detailVariant$1 = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   weightTitle: weightTitle$1,
   detailVariant: detailVariant$1
 };
@@ -47085,7 +46841,7 @@ var PartialAmountField = function PartialAmountField(_ref) {
 function arePropsEqual(prevProps, nextProps) {
   return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
 }
-var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$P, "default"), arePropsEqual);
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$O, "default"), arePropsEqual);
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
@@ -47189,9 +46945,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$a = MATISSE_BLUE;
-var fallbackValues$Q = {
-  activeColor: activeColor$a,
+var activeColor$9 = MATISSE_BLUE;
+var fallbackValues$P = {
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47384,7 +47140,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$Q);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$P);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47421,13 +47177,18 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+
+  // cancel URLs are external (back to client system)
+  var handleCancel = function handleCancel() {
+    window.location.href = cancelURL;
+  };
+  var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: cancelText,
-    url: cancelURL,
+    action: handleCancel,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: backButtonTestId || cancelText,
-    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
+    "aria-label": "".concat(cancelText, ", navigate back to previous site"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Back",
@@ -47435,7 +47196,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: "Back",
-    "aria-labelledby": "back-button",
+    "aria-label": "Back, navigate to previous page",
     role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -47485,7 +47246,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$R = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -47854,7 +47615,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$R, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$Q, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -47874,7 +47635,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$S = {
+var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -47938,7 +47699,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$S, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$R, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -47973,7 +47734,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$T = {
+var fallbackValues$S = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48045,7 +47806,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$T, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$S, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -48817,7 +48578,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$U = {
+var fallbackValues$T = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49152,9 +48913,9 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$U);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
 
-var fallbackValues$V = {
+var fallbackValues$U = {
   primaryColor: ROYAL_BLUE_VIVID,
   secondaryColor: CHARADE_GREY
 };
@@ -49265,7 +49026,7 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, "or Log In")))));
 };
-var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$V));
+var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49385,13 +49146,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$W = {
+var fallbackValues$V = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49506,13 +49267,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$X = {
+var fallbackValues$W = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$X, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49561,7 +49322,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$Y = {
+var fallbackValues$X = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49656,12 +49417,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Y);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$Z = {
+var fallbackValues$Y = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49720,7 +49481,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Z);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49841,7 +49602,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$_ = {
+var fallbackValues$Z = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49886,7 +49647,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$_));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49946,7 +49707,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$$ = {
+var fallbackValues$_ = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50013,15 +49774,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$$);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$_);
 
-var hoverColor$6 = "#116285";
-var activeColor$b = "#0E506D";
+var hoverColor$5 = "#116285";
+var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$10 = {
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$b,
+var fallbackValues$$ = {
+  hoverColor: hoverColor$5,
+  activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -50155,13 +49916,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$10);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$11 = {
+var fallbackValues$10 = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -50863,7 +50624,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$11);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
 
 var TextWrapStyles = styled.css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
 var Container$1 = styled__default(Box).withConfig({
@@ -51065,7 +50826,7 @@ var justifyContent = {
     desktop: "center"
   }
 };
-var fallbackValues$12 = {
+var fallbackValues$11 = {
   // Colors
   heroPrimaryColor: heroPrimaryColor,
   heroTextColor: heroTextColor,
@@ -51272,7 +51033,7 @@ var HeroImage = function HeroImage(_ref) {
     theme: themeValues
   }, description)))));
 };
-var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$12, "v1"));
+var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
 
 var TurnstileWidgetContainer = styled__default(Box).withConfig({
   displayName: "TurnstileWidget__TurnstileWidgetContainer",
@@ -51415,6 +51176,159 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
+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
@@ -51650,8 +51564,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    key: "content-box",
-    role: "main"
+    key: "content-box"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React__default.createElement(React.Fragment, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: sidebarWrapperPadding,
     key: "content-wrapper"
@@ -51815,7 +51728,6 @@ exports.DisabledPaymentMethodsAddIcon = DisabledPaymentMethodsAddIcon;
 exports.DisabledPropertiesAddIcon = DisabledPropertiesAddIcon;
 exports.DiscoverSmallIcon = DiscoverSmallIcon;
 exports.DisplayBox = DisplayBox$1;
-exports.DisplayCard = DisplayCard;
 exports.Dropdown = Dropdown$1;
 exports.DuplicateIcon = DuplicateIcon;
 exports.EditNameForm = EditNameForm;
@@ -51972,7 +51884,7 @@ exports.TimeoutImage = TimeoutImage;
 exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
-exports.Tooltip = Tooltip$1;
+exports.Tooltip = Tooltip;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;