@thecb/components 11.7.0-beta.0 → 11.8.0-beta.1

package/dist/index.cjs.js

@@ -14863,7 +14863,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
 };
 
 var IconAdd = function IconAdd(_ref) {
-  var _ref$strokeWidth = _ref.strokeWidth,
+  var _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? "none" : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
     strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14878,7 +14880,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)"
@@ -19250,7 +19252,7 @@ var AlertInfoIcon = function AlertInfoIcon() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
-    fill: "#15749d",
+    fill: "#281978",
     fillRule: "nonzero",
     xlinkHref: "#path-1"
   })))));
@@ -19401,13 +19403,13 @@ var AlertIcons = {
 };
 
 var background = {
-  info: "".concat(INFO_BLUE),
+  info: "".concat(HAWKES_BLUE),
   warn: "".concat(APRICOT_ORANGE),
   error: "".concat(BLUSH_RED),
   success: "".concat(HINT_GREEN)
 };
 var border$1 = {
-  info: "".concat(MATISSE_BLUE),
+  info: "".concat(LUCKY_POINT),
   warn: "".concat(ZEST_ORANGE),
   error: "".concat(RAZZMATAZZ_RED),
   success: "".concat(EMERALD_GREEN)
@@ -25529,6 +25531,153 @@ var Popover = function Popover(_ref) {
 };
 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,
@@ -25538,6 +25687,30 @@ var DisplayCard = function DisplayCard(_ref) {
     _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,
@@ -25565,6 +25738,14 @@ var DisplayCard = function DisplayCard(_ref) {
     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, {
@@ -25927,7 +26108,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -26184,7 +26365,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$o, "default");
 
 var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
@@ -26232,7 +26413,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$o, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -26253,7 +26434,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$o, "default");
 
 var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
 var TextareaField = styled__default.textarea.withConfig({
@@ -26389,7 +26570,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$o, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -26403,7 +26584,7 @@ var color$9 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$9
@@ -26445,11 +26626,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$p, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$p = {
+var fallbackValues$q = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -26487,11 +26668,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$q);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$r = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26583,7 +26764,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$r);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26664,7 +26845,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26703,7 +26884,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$s, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26759,7 +26940,7 @@ var ImageBox = function ImageBox(_ref) {
 };
 
 var color$a = "#15749D";
-var fallbackValues$s = {
+var fallbackValues$t = {
   color: color$a
 };
 
@@ -26825,7 +27006,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$t);
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -26917,7 +27098,7 @@ var fontWeight$5 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   fontWeight: fontWeight$5
 };
 
@@ -26976,7 +27157,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$u, "default");
 
 var weightTitle = {
   "default": "600",
@@ -26986,7 +27167,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27034,7 +27215,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$v, "default");
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27294,7 +27475,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   color: color$b,
   height: height$1
 };
@@ -27436,12 +27617,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$w, "default");
 
 var backgroundColor$5 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$w = {
+var fallbackValues$x = {
   backgroundColor: backgroundColor$5
 };
 
@@ -27468,13 +27649,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$x, "default");
 
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var disabledColor$1 = MANATEE_GREY;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$x = {
-  activeColor: activeColor$6,
+var fallbackValues$y = {
+  activeColor: activeColor$7,
   disabledColor: disabledColor$1,
   inactiveBorderColor: inactiveBorderColor
 };
@@ -27560,12 +27741,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$y);
 
-var activeColor$7 = "".concat(MATISSE_BLUE);
+var activeColor$8 = "".concat(MATISSE_BLUE);
 var inactiveColor$1 = "".concat(STORM_GREY);
-var fallbackValues$y = {
-  activeColor: activeColor$7,
+var fallbackValues$z = {
+  activeColor: activeColor$8,
   inactiveColor: inactiveColor$1
 };
 
@@ -27673,11 +27854,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$z);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$z = {
+var fallbackValues$A = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -27775,12 +27956,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$z);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$A);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$A = {
+var fallbackValues$B = {
   border: border$2
 };
 
@@ -27853,7 +28034,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$A, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$B, "default");
 
 var borderColor$4 = {
   "default": "".concat(GREY_CHATEAU)
@@ -27861,7 +28042,7 @@ var borderColor$4 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$B = {
+var fallbackValues$C = {
   borderColor: borderColor$4,
   borderSize: borderSize
 };
@@ -27879,7 +28060,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$C, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -38474,7 +38655,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$D = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -38646,7 +38827,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$C);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$D);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -38693,7 +38874,7 @@ var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var contentBackgroundColor = INFO_BLUE;
-var fallbackValues$D = {
+var fallbackValues$E = {
   backgroundColor: backgroundColor$6,
   contentBackgroundColor: contentBackgroundColor,
   imageBackgroundColor: imageBackgroundColor,
@@ -38718,7 +38899,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$E = {
+var fallbackValues$F = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -38763,7 +38944,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$F);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -38879,14 +39060,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$E);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$9 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$F = {
+var fallbackValues$G = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$8,
+  activeColor: activeColor$9,
   linkColor: linkColor$3
 };
 
@@ -38913,7 +39094,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$G);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39041,7 +39222,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$G = {
+var fallbackValues$H = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$6,
   fontColor: fontColor,
@@ -39121,7 +39302,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$G, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40101,7 +40282,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$H = {
+var fallbackValues$I = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40150,7 +40331,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$I);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40284,7 +40465,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$I = {
+var fallbackValues$J = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40409,7 +40590,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$J);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -40989,7 +41170,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$J = {
+var fallbackValues$K = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41020,7 +41201,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$J);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$K);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41067,7 +41248,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$K = {
+var fallbackValues$L = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -41126,7 +41307,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$K);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$L);
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -45584,7 +45765,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
-var fallbackValues$L = {
+var fallbackValues$M = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$2,
@@ -45719,7 +45900,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$M, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -45791,7 +45972,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$M = {
+var fallbackValues$N = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -45831,7 +46012,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$N, "profile");
 
 var menuVariants = {
   invisible: {
@@ -45883,7 +46064,7 @@ var NavMenuMobile = function NavMenuMobile(_ref3) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$M, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$N, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -46496,7 +46677,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$N = {
+var fallbackValues$O = {
   iconColor: iconColor
 };
 
@@ -46837,7 +47018,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return isLoading ? loadingObligation : inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$O);
 
 var weightTitle$1 = {
   "default": "600",
@@ -46847,7 +47028,7 @@ var detailVariant$1 = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$O = {
+var fallbackValues$P = {
   weightTitle: weightTitle$1,
   detailVariant: detailVariant$1
 };
@@ -46904,7 +47085,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$O, "default"), arePropsEqual);
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$P, "default"), arePropsEqual);
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
@@ -47008,9 +47189,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$P = {
-  activeColor: activeColor$9,
+var activeColor$a = MATISSE_BLUE;
+var fallbackValues$Q = {
+  activeColor: activeColor$a,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47203,7 +47384,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$P);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$Q);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47240,18 +47421,13 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-
-  // 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, {
+  var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     text: cancelText,
-    action: handleCancel,
+    url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: backButtonTestId || cancelText,
-    "aria-label": "".concat(cancelText, ", navigate back to previous site"),
+    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Back",
@@ -47259,7 +47435,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: "Back",
-    "aria-label": "Back, navigate to previous page",
+    "aria-labelledby": "back-button",
     role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -47309,7 +47485,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$Q = {
+var fallbackValues$R = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -47678,7 +47854,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$Q, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$R, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -47698,7 +47874,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$R = {
+var fallbackValues$S = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -47762,7 +47938,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$R, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$S, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -47797,7 +47973,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$S = {
+var fallbackValues$T = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -47869,7 +48045,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$S, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$T, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -48641,7 +48817,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$T = {
+var fallbackValues$U = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -48976,9 +49152,9 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$U);
 
-var fallbackValues$U = {
+var fallbackValues$V = {
   primaryColor: ROYAL_BLUE_VIVID,
   secondaryColor: CHARADE_GREY
 };
@@ -49089,7 +49265,7 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, "or Log In")))));
 };
-var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
+var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$V));
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49209,13 +49385,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$V = {
+var fallbackValues$W = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49330,13 +49506,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$W = {
+var fallbackValues$X = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$X, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49385,7 +49561,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$X = {
+var fallbackValues$Y = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49480,12 +49656,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Y);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$Y = {
+var fallbackValues$Z = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49544,7 +49720,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Z);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49665,7 +49841,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$Z = {
+var fallbackValues$_ = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49710,7 +49886,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$_));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49770,7 +49946,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,
@@ -49837,15 +50013,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$5 = "#116285";
-var activeColor$a = "#0E506D";
+var hoverColor$6 = "#116285";
+var activeColor$b = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$$ = {
-  hoverColor: hoverColor$5,
-  activeColor: activeColor$a,
+var fallbackValues$10 = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$b,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -49979,13 +50155,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$10);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$10 = {
+var fallbackValues$11 = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -50687,7 +50863,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$11);
 
 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({
@@ -50889,7 +51065,7 @@ var justifyContent = {
     desktop: "center"
   }
 };
-var fallbackValues$11 = {
+var fallbackValues$12 = {
   // Colors
   heroPrimaryColor: heroPrimaryColor,
   heroTextColor: heroTextColor,
@@ -51096,7 +51272,7 @@ var HeroImage = function HeroImage(_ref) {
     theme: themeValues
   }, description)))));
 };
-var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
+var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$12, "v1"));
 
 var TurnstileWidgetContainer = styled__default(Box).withConfig({
   displayName: "TurnstileWidget__TurnstileWidgetContainer",
@@ -51240,7 +51416,7 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 });
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$12 = {
+var fallbackValues$13 = {
   pageBackground: pageBackground
 };
 
@@ -51288,7 +51464,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$12));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$13));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51331,7 +51507,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$12));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$13));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51377,7 +51553,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$12));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$13));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51430,7 +51606,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,
@@ -51500,7 +51676,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 () {};
@@ -51796,6 +51972,7 @@ exports.TimeoutImage = TimeoutImage;
 exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
+exports.Tooltip = Tooltip$1;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;