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

package/dist/index.d.ts

@@ -67,7 +67,6 @@ declare const ROYAL_BLUE_VIVID: Color;
 declare const ASTRAL_BLUE: Color;
 declare const SAPPHIRE_BLUE: Color;
 declare const PEACOCK_BLUE: Color;
-declare const HAWKES_BLUE: Color;
 
 // GREEN
 declare const FOREST_GREEN: Color;
@@ -99,9 +98,6 @@ declare const FANTASY_RED: Color;
 declare const COSMOS_RED: Color;
 declare const BLUSH_RED: Color;
 
-// PURPLE
-declare const LUCKY_POINT: Color;
-
 declare const ERROR_COLOR: Color;
 declare const ERROR_BACKGROUND_COLOR: Color;
 
@@ -185,7 +181,6 @@ declare const colors_d_ROYAL_BLUE_VIVID: typeof ROYAL_BLUE_VIVID;
 declare const colors_d_ASTRAL_BLUE: typeof ASTRAL_BLUE;
 declare const colors_d_SAPPHIRE_BLUE: typeof SAPPHIRE_BLUE;
 declare const colors_d_PEACOCK_BLUE: typeof PEACOCK_BLUE;
-declare const colors_d_HAWKES_BLUE: typeof HAWKES_BLUE;
 declare const colors_d_FOREST_GREEN: typeof FOREST_GREEN;
 declare const colors_d_MEADOW_GREEN: typeof MEADOW_GREEN;
 declare const colors_d_POLAR_GREEN: typeof POLAR_GREEN;
@@ -208,7 +203,6 @@ declare const colors_d_RASPBERRY: typeof RASPBERRY;
 declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
 declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
 declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
-declare const colors_d_LUCKY_POINT: typeof LUCKY_POINT;
 declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
 declare const colors_d_ERROR_BACKGROUND_COLOR: typeof ERROR_BACKGROUND_COLOR;
 declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
@@ -267,7 +261,6 @@ declare namespace colors_d {
     colors_d_ASTRAL_BLUE as ASTRAL_BLUE,
     colors_d_SAPPHIRE_BLUE as SAPPHIRE_BLUE,
     colors_d_PEACOCK_BLUE as PEACOCK_BLUE,
-    colors_d_HAWKES_BLUE as HAWKES_BLUE,
     colors_d_FOREST_GREEN as FOREST_GREEN,
     colors_d_MEADOW_GREEN as MEADOW_GREEN,
     colors_d_POLAR_GREEN as POLAR_GREEN,
@@ -290,7 +283,6 @@ declare namespace colors_d {
     colors_d_FANTASY_RED as FANTASY_RED,
     colors_d_COSMOS_RED as COSMOS_RED,
     colors_d_BLUSH_RED as BLUSH_RED,
-    colors_d_LUCKY_POINT as LUCKY_POINT,
     colors_d_ERROR_COLOR as ERROR_COLOR,
     colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
     colors_d_ALERT_COLORS as ALERT_COLORS,

package/dist/index.esm.js

@@ -11722,15 +11722,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,
@@ -11798,13 +11797,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,
@@ -11893,10 +11892,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,
@@ -11909,11 +11908,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",
@@ -11925,11 +11924,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,
@@ -11941,11 +11940,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,
@@ -11958,13 +11957,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,
@@ -11973,11 +11972,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,
@@ -11989,11 +11988,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,
@@ -12006,7 +12005,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,
@@ -16192,7 +16191,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", {
@@ -16210,7 +16209,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)"
@@ -19242,7 +19241,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"
   })))));
@@ -19393,13 +19392,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)
@@ -21179,7 +21178,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;
 
@@ -21188,7 +21187,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";
@@ -23696,9 +23695,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,
@@ -24120,15 +24119,15 @@ var SelectField = styled.select.withConfig({
 }, function (_ref3) {
   var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
-}, LUCKY_POINT);
+}, MATISSE_BLUE);
 var SelectOption = styled.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),
@@ -24169,7 +24168,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 = {
@@ -47232,13 +47231,18 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = useContext(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",
@@ -47246,7 +47250,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, {