@thecb/components 11.8.1-beta.0 → 11.8.1

package/dist/index.esm.js

@@ -1871,6 +1871,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,
@@ -1894,7 +1908,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"];
@@ -14855,7 +14870,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",
@@ -14870,7 +14887,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)"
@@ -25188,406 +25205,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 = useRef();
-  useEffect$1(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 = useState(initialToastState),
-    _useState2 = _slicedToArray(_useState, 2),
-    toastState = _useState2[0],
-    setToastState = _useState2[1];
-  useEffect$1(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) {
-  useEffect$1(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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    scriptLoaded = _useState2[0],
-    setScriptLoaded = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scriptError = _useState4[0],
-    setScriptError = _useState4[1];
-  var handleScriptError = function handleScriptError() {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
-  useEffect$1(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 = 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(Fragment$1, null))))));
-};
-
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -25919,7 +25536,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,
@@ -26176,7 +25793,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) {
@@ -26224,7 +25841,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,
@@ -26245,7 +25862,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.textarea.withConfig({
@@ -26381,7 +25998,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",
@@ -26395,7 +26012,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
@@ -26437,11 +26054,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
 };
@@ -26479,11 +26096,11 @@ 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 textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26575,7 +26192,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.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26656,7 +26273,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$r = {
+var fallbackValues$q = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26695,7 +26312,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.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26751,7 +26368,7 @@ var ImageBox = function ImageBox(_ref) {
 };
 
 var color$a = "#15749D";
-var fallbackValues$s = {
+var fallbackValues$r = {
   color: color$a
 };
 
@@ -26817,7 +26434,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,
@@ -26909,7 +26526,7 @@ var fontWeight$5 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$t = {
+var fallbackValues$s = {
   fontWeight: fontWeight$5
 };
 
@@ -26968,7 +26585,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",
@@ -26978,7 +26595,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$u = {
+var fallbackValues$t = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27026,7 +26643,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, {
@@ -27214,9 +26831,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: {
@@ -27286,7 +26904,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$v = {
+var fallbackValues$u = {
   color: color$b,
   height: height$1
 };
@@ -27428,12 +27046,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
 };
 
@@ -27460,13 +27078,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
 };
@@ -27552,12 +27170,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
 };
 
@@ -27665,11 +27283,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
 };
@@ -27767,12 +27385,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
 };
 
@@ -27845,7 +27463,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)
@@ -27853,7 +27471,7 @@ var borderColor$4 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$B = {
+var fallbackValues$A = {
   borderColor: borderColor$4,
   borderSize: borderSize
 };
@@ -27871,7 +27489,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",
@@ -38466,7 +38084,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,
@@ -38638,7 +38256,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);
@@ -38685,7 +38303,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,
@@ -38710,7 +38328,7 @@ var CardImage = styled.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
@@ -38755,7 +38373,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,
@@ -38871,14 +38489,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
 };
 
@@ -38905,7 +38523,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,
@@ -39033,7 +38651,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$G = {
+var fallbackValues$F = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$6,
   fontColor: fontColor,
@@ -39113,7 +38731,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$G, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$F, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40093,7 +39711,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$H = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40142,7 +39760,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,
@@ -40276,7 +39894,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
@@ -40401,7 +40019,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;
@@ -40436,6 +40054,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 = useRef();
+  useEffect$1(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 = useState(initialToastState),
+    _useState2 = _slicedToArray(_useState, 2),
+    toastState = _useState2[0],
+    setToastState = _useState2[1];
+  useEffect$1(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) {
+  useEffect$1(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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    scriptLoaded = _useState2[0],
+    setScriptLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scriptError = _useState4[0],
+    setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
+  useEffect$1(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 = 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.
@@ -51231,8 +51168,161 @@ var TurnstileWidget = /*#__PURE__*/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 = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipOpen = _useState2[0],
+    setTooltipOpen = _useState2[1];
+  var themeContext = useContext(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);
+  };
+  useEffect$1(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
 };
 
@@ -51280,7 +51370,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,
@@ -51323,7 +51413,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,
@@ -51369,7 +51459,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,
@@ -51422,7 +51512,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,
@@ -51491,7 +51581,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 () {};
@@ -51562,5 +51652,5 @@ var index$2 = /*#__PURE__*/Object.freeze({
   useLogoutTimers: useLogoutTimers
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmExSmallIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankGenericSmallIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, CashSmallIcon, CashieringImage, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DiscoverSmallIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormTextarea$1 as FormTextarea, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GenericSmallIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, MasterCardSmallIcon, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TurnstileWidget, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VisaSmallIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WireSmallIcon, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmExSmallIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankGenericSmallIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, CashSmallIcon, CashieringImage, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DiscoverSmallIcon, DisplayBox$1 as DisplayBox, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormTextarea$1 as FormTextarea, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GenericSmallIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, MasterCardSmallIcon, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, Tooltip, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TurnstileWidget, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VisaSmallIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WireSmallIcon, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map