@thecb/components 11.6.5-beta.1 → 11.6.6-beta.0

package/dist/index.cjs.js

@@ -11730,15 +11730,14 @@ var index = /*#__PURE__*/Object.freeze({
 
 var WHITE$1 = WHITE,
   TRANSPARENT$1 = TRANSPARENT,
+  SAPPHIRE_BLUE$1 = SAPPHIRE_BLUE,
   PEACOCK_BLUE$1 = PEACOCK_BLUE,
   MANATEE_GREY$1 = MANATEE_GREY,
-  LUCKY_POINT$1 = LUCKY_POINT,
+  MATISSE_BLUE$1 = MATISSE_BLUE,
   HINT_GREEN$1 = HINT_GREEN,
   SEA_GREEN$1 = SEA_GREEN,
   RASPBERRY$1 = RASPBERRY,
-  ERROR_COLOR$1 = ERROR_COLOR,
-  LUCKY_POINT_DARK$1 = LUCKY_POINT_DARK,
-  HAWKES_BLUE$1 = HAWKES_BLUE;
+  ERROR_COLOR$1 = ERROR_COLOR;
 var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
 var disabledBorderColor = {
   primary: MANATEE_GREY$1,
@@ -11806,13 +11805,13 @@ var padding = {
 };
 var color$2 = {
   primary: WHITE$1,
-  secondary: LUCKY_POINT$1,
-  back: LUCKY_POINT$1,
+  secondary: MATISSE_BLUE$1,
+  back: MATISSE_BLUE$1,
   smallPrimary: WHITE$1,
-  smallSecondary: LUCKY_POINT$1,
-  smallGhost: LUCKY_POINT$1,
-  ghost: LUCKY_POINT$1,
-  tertiary: LUCKY_POINT$1,
+  smallSecondary: MATISSE_BLUE$1,
+  smallGhost: MATISSE_BLUE$1,
+  ghost: MATISSE_BLUE$1,
+  tertiary: MATISSE_BLUE$1,
   danger: WHITE$1,
   dangerSecondary: ERROR_COLOR$1,
   whitePrimary: WHITE$1,
@@ -11901,10 +11900,10 @@ var textDecoration = {
   greenSecondary: "none"
 };
 var backgroundColor = {
-  primary: LUCKY_POINT$1,
+  primary: MATISSE_BLUE$1,
   secondary: TRANSPARENT$1,
   back: TRANSPARENT$1,
-  smallPrimary: LUCKY_POINT$1,
+  smallPrimary: MATISSE_BLUE$1,
   smallSecondary: TRANSPARENT$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
@@ -11917,11 +11916,11 @@ var backgroundColor = {
   greenSecondary: TRANSPARENT$1
 };
 var border = {
-  primary: "2px solid " + LUCKY_POINT$1,
-  secondary: "2px solid " + LUCKY_POINT$1,
-  back: "2px solid " + LUCKY_POINT$1,
-  smallPrimary: "2px solid " + LUCKY_POINT$1,
-  smallSecondary: "2px solid " + LUCKY_POINT$1,
+  primary: "2px solid " + MATISSE_BLUE$1,
+  secondary: "2px solid " + MATISSE_BLUE$1,
+  back: "2px solid " + MATISSE_BLUE$1,
+  smallPrimary: "2px solid " + MATISSE_BLUE$1,
+  smallSecondary: "2px solid " + MATISSE_BLUE$1,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
@@ -11933,11 +11932,11 @@ var border = {
   greenSecondary: "2px solid " + SEA_GREEN$1
 };
 var hoverBackgroundColor = {
-  primary: LUCKY_POINT_DARK$1,
-  secondary: HAWKES_BLUE$1,
+  primary: SAPPHIRE_BLUE$1,
+  secondary: "#DBEAF0",
   back: TRANSPARENT$1,
-  smallPrimary: LUCKY_POINT_DARK$1,
-  smallSecondary: HAWKES_BLUE$1,
+  smallPrimary: SAPPHIRE_BLUE$1,
+  smallSecondary: "#DBEAF0",
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11949,11 +11948,11 @@ var hoverBackgroundColor = {
   greenSecondary: HINT_GREEN$1
 };
 var hoverBorderColor = {
-  primary: LUCKY_POINT_DARK$1,
-  secondary: LUCKY_POINT$1,
+  primary: SAPPHIRE_BLUE$1,
+  secondary: MATISSE_BLUE$1,
   back: "#DCEAF1",
-  smallPrimary: LUCKY_POINT_DARK$1,
-  smallSecondary: LUCKY_POINT$1,
+  smallPrimary: SAPPHIRE_BLUE$1,
+  smallSecondary: MATISSE_BLUE$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11966,13 +11965,13 @@ var hoverBorderColor = {
 };
 var hoverColor = {
   primary: WHITE$1,
-  secondary: LUCKY_POINT$1,
-  back: LUCKY_POINT$1,
+  secondary: SAPPHIRE_BLUE$1,
+  back: SAPPHIRE_BLUE$1,
   smallPrimary: WHITE$1,
-  smallSecondary: LUCKY_POINT$1,
-  smallGhost: LUCKY_POINT$1,
-  ghost: LUCKY_POINT$1,
-  tertiary: LUCKY_POINT$1,
+  smallSecondary: SAPPHIRE_BLUE$1,
+  smallGhost: SAPPHIRE_BLUE$1,
+  ghost: SAPPHIRE_BLUE$1,
+  tertiary: SAPPHIRE_BLUE$1,
   danger: WHITE$1,
   dangerSecondary: "#B10541",
   whitePrimary: WHITE$1,
@@ -11981,11 +11980,11 @@ var hoverColor = {
   greenSecondary: SEA_GREEN$1
 };
 var activeBackgroundColor = {
-  primary: LUCKY_POINT_DARK$1,
-  secondary: adjustHexColor(HAWKES_BLUE$1, 10, "darken"),
+  primary: PEACOCK_BLUE$1,
+  secondary: "#B8D5E1",
   back: TRANSPARENT$1,
-  smallPrimary: LUCKY_POINT_DARK$1,
-  smallSecondary: adjustHexColor(HAWKES_BLUE$1, 10, "darken"),
+  smallPrimary: PEACOCK_BLUE$1,
+  smallSecondary: "#B8D5E1",
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11997,11 +11996,11 @@ var activeBackgroundColor = {
   greenSecondary: adjustHexColor(HINT_GREEN$1, 5, "darken")
 };
 var activeBorderColor = {
-  primary: adjustHexColor(LUCKY_POINT_DARK$1, 10, "darken"),
-  secondary: LUCKY_POINT$1,
+  primary: PEACOCK_BLUE$1,
+  secondary: MATISSE_BLUE$1,
   back: PEACOCK_BLUE$1,
-  smallPrimary: adjustHexColor(LUCKY_POINT_DARK$1, 10, "darken"),
-  smallSecondary: LUCKY_POINT$1,
+  smallPrimary: PEACOCK_BLUE$1,
+  smallSecondary: MATISSE_BLUE$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -12014,7 +12013,7 @@ var activeBorderColor = {
 };
 var activeColor = {
   primary: WHITE$1,
-  secondary: LUCKY_POINT$1,
+  secondary: MATISSE_BLUE$1,
   back: PEACOCK_BLUE$1,
   smallPrimary: WHITE$1,
   smallSecondary: PEACOCK_BLUE$1,
@@ -16200,7 +16199,7 @@ var PeriscopeFailedIcon = function PeriscopeFailedIcon() {
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(288 64)"
   }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#281978",
+    fill: "#15749D",
     fillOpacity: "0.3",
     d: "M302.247 310.746c36.612 0 66.292 6.549 66.292 14.627S338.86 340 302.247 340c-36.613 0-66.292-6.55-66.292-14.627 0-8.078 29.68-14.627 66.292-14.627zM65.904 208.318c6.071 0 11.057 4.655 11.608 10.6a6.983 6.983 0 014.09-1.321c3.885 0 7.034 3.159 7.034 7.055 0 3.818-3.022 6.926-6.798 7.051l-.237.004H49.756c-4.548 0-8.234-3.696-8.234-8.256 0-4.56 3.686-8.257 8.234-8.257 1.848 0 3.549.618 4.923 1.65 1.378-4.919 5.88-8.526 11.225-8.526zm195.894-57.546c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.134 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm80.899 0c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.135 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm-80.899 22.503c-5.514 0-10.317 3.673-12.173 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.658-9.018-12.172-9.018zm80.9 0c-5.515 0-10.318 3.673-12.174 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.659-9.018-12.172-9.018zM519.99 12.426c12.578 0 22.908 9.642 24.048 21.958a14.473 14.473 0 018.471-2.737c8.049 0 14.575 6.544 14.575 14.617 0 7.966-6.358 14.445-14.262 14.612l-.313.003H486.54c-9.42 0-17.057-7.658-17.057-17.106 0-9.446 7.637-17.104 17.057-17.104 3.83 0 7.352 1.281 10.2 3.418 2.855-10.189 12.179-17.66 23.252-17.66zM170.591 0c6.61 0 12.239 4.15 14.476 9.99a6.571 6.571 0 011.792-.252c2.114 0 3.994.996 5.208 2.543a9.767 9.767 0 014.028-.872c5.431 0 9.833 4.414 9.833 9.86 0 5.354-4.254 9.712-9.557 9.858l-.276.004h-42.442c-5.43 0-9.833-4.415-9.833-9.861 0-5.447 4.403-9.861 9.833-9.861.666 0 1.315.068 1.942.194C157.345 4.93 163.386 0 170.59 0z"
   }), /*#__PURE__*/React__default.createElement("path", {
@@ -16218,7 +16217,7 @@ var PeriscopeFailedIcon = function PeriscopeFailedIcon() {
     filter: "url(#periscope-failed-filter-2)",
     xlinkHref: "#periscope-failed-path-1"
   }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#281978",
+    fill: "#15749D",
     xlinkHref: "#periscope-failed-path-1"
   })), /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(0 96.764)"
@@ -19250,7 +19249,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"
   })))));
@@ -19401,13 +19400,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)
@@ -21187,7 +21186,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
 var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
 
 // import theme from "styled-theming";
-var MATISSE_BLUE$1 = MATISSE_BLUE,
+var MATISSE_BLUE$2 = MATISSE_BLUE,
   STORM_GREY$1 = STORM_GREY;
 var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
@@ -21196,7 +21195,7 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
   for colors/values that should be used here instead
 */
 
-var color$6 = "".concat(MATISSE_BLUE$1);
+var color$6 = "".concat(MATISSE_BLUE$2);
 var activeColor$2 = "".concat(STORM_GREY$1);
 var activeBreadcrumbColor = "".concat(STORM_GREY$1);
 var fontSize$2 = "0.875rem";
@@ -23704,9 +23703,9 @@ exportTypedArrayMethod$1('at', function at(index) {
   return (k < 0 || k >= len) ? undefined : O[k];
 });
 
-var selectedColor = "".concat(LUCKY_POINT);
-var hoverColor$3 = "".concat(HAWKES_BLUE);
-var focusColor = "".concat(LUCKY_POINT_DARK);
+var selectedColor = "".concat(MATISSE_BLUE);
+var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
+var focusColor = "".concat(MATISSE_BLUE_DARK);
 var fallbackValues$i = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3,
@@ -24128,15 +24127,15 @@ var SelectField = styled__default.select.withConfig({
 }, function (_ref3) {
   var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
-}, LUCKY_POINT);
+}, MATISSE_BLUE);
 var SelectOption = styled__default.option.withConfig({
   displayName: "FormSelectstyled__SelectOption",
   componentId: "sc-hkrqrv-2"
 })([""]);
 
 var linkColor$1 = {
-  "default": "".concat(LUCKY_POINT),
-  disabled: "".concat(LUCKY_POINT)
+  "default": "".concat(MATISSE_BLUE),
+  disabled: "".concat(MATISSE_BLUE)
 };
 var formBackgroundColor = {
   "default": "".concat(WHITE),
@@ -24177,7 +24176,7 @@ var fontWeight$3 = {
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
 var hoverFocusStyles = {
-  "default": "color: ".concat(LUCKY_POINT_DARK, "; outline: none; text-decoration: underline;  "),
+  "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
 var fallbackValues$j = {
@@ -47240,13 +47239,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",
@@ -47254,7 +47258,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, {