@thecb/components 11.8.0-beta.3 → 11.8.0-beta.5

package/dist/index.cjs.js

@@ -1879,6 +1879,20 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   // Convert back to hex
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid ").concat(borderColor);
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1902,7 +1916,8 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor
+  adjustHexColor: adjustHexColor,
+  arrowBorder: arrowBorder
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -19252,7 +19267,7 @@ var AlertInfoIcon = function AlertInfoIcon() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
-    fill: "#281978",
+    fill: "#15749d",
     fillRule: "nonzero",
     xlinkHref: "#path-1"
   })))));
@@ -19403,13 +19418,13 @@ var AlertIcons = {
 };
 
 var background = {
-  info: "".concat(HAWKES_BLUE),
+  info: "".concat(INFO_BLUE),
   warn: "".concat(APRICOT_ORANGE),
   error: "".concat(BLUSH_RED),
   success: "".concat(HINT_GREEN)
 };
 var border$1 = {
-  info: "".concat(LUCKY_POINT),
+  info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   error: "".concat(RAZZMATAZZ_RED),
   success: "".concat(EMERALD_GREEN)
@@ -40231,20 +40246,6 @@ var fallbackValues$I = {
   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,
@@ -47175,13 +47176,18 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+
+  // cancel URLs are external (back to client system)
+  var handleCancel = function handleCancel() {
+    window.location.href = cancelURL;
+  };
+  var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: cancelText,
-    url: cancelURL,
+    action: handleCancel,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: backButtonTestId || cancelText,
-    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
+    "aria-label": "".concat(cancelText, ", navigate back to previous site"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Back",
@@ -47189,7 +47195,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: "Back",
-    "aria-labelledby": "back-button",
+    "aria-label": "Back, navigate to previous page",
     role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -51178,20 +51184,6 @@ var fallbackValues$12 = {
   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,
@@ -51201,12 +51193,13 @@ var Tooltip = function Tooltip(_ref) {
     _ref$hasIconTrigger = _ref.hasIconTrigger,
     hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
     _ref$IconTrigger = _ref.IconTrigger,
-    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? WarningIconXS : _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,
+    tooltipID = _ref$tooltipID === void 0 ? "tooltip-content" : _ref$tooltipID,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
     _ref$textExtraStyles = _ref.textExtraStyles,
     textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _ref$textExtraStyles,
     _ref$minWidth = _ref.minWidth,
@@ -51215,39 +51208,43 @@ var Tooltip = function Tooltip(_ref) {
     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,
+    _ref$arrowPosition = _ref.arrowPosition,
+    arrowPosition = _ref$arrowPosition === void 0 ? {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    } : _ref$arrowPosition,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    } : _ref$position,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? SELECTIVE_YELLOW : _ref$iconColor,
     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;
+    tooltipContentExtraStyles = _ref.tooltipContentExtraStyles;
   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;
+    top = _ref2.top,
+    right = _ref2.right,
+    bottom = _ref2.bottom,
+    left = _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;
+    arrowTop = _ref3.arrowTop,
+    arrowRight = _ref3.arrowRight,
+    arrowBottom = _ref3.arrowBottom,
+    arrowLeft = _ref3.arrowLeft;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
@@ -51258,7 +51255,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   };
   var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+    if (e.key === ESCAPE) {
       handleToggleTooltip(false);
     }
   };
@@ -51293,13 +51290,15 @@ var Tooltip = function Tooltip(_ref) {
     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, {
+  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    "aria-label": "Open tooltip"
+  }, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    color: iconColor
+  })), /*#__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
+    extraStyles: "color: ".concat(tooltipTriggerColor, "; &:hover {\n          ").concat(hoverColor, "; &:active ").concat(activeColor, "; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     background: backgroundColor,
     borderRadius: "4px",
@@ -51308,10 +51307,11 @@ var Tooltip = function Tooltip(_ref) {
     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          ")
+    "aria-hidden": !tooltipOpen,
+    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          ").concat(tooltipContentExtraStyles, ";\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          ")
+    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 Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$12);
@@ -51551,8 +51551,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    key: "content-box",
-    role: "main"
+    key: "content-box"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React__default.createElement(React.Fragment, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: sidebarWrapperPadding,
     key: "content-wrapper"