@thecb/components 9.1.4-beta.0 → 9.1.5-beta.0

package/dist/index.esm.js

@@ -6356,6 +6356,9 @@ var titleCaseString = function titleCaseString(string) {
     return index === 0 || index === string.length - 1 || word.length > 3 ? titleCaseWord(word.toLowerCase()) : word;
   }).join(" ");
 };
+var kebabCaseString = function kebabCaseString(string) {
+  return string === null || string === void 0 ? void 0 : string.replaceAll(" ", "-").toLowerCase();
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6375,7 +6378,8 @@ var general = /*#__PURE__*/Object.freeze({
   MOBILE_WIDTH: MOBILE_WIDTH,
   throttle: throttle,
   titleCaseWord: titleCaseWord,
-  titleCaseString: titleCaseString
+  titleCaseString: titleCaseString,
+  kebabCaseString: kebabCaseString
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -22693,10 +22697,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.34.0',
+  version: '3.33.3',
   mode:  'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.34.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -27266,7 +27270,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$u);
 
 var activeColor$6 = "".concat(MATISSE_BLUE);
-var inactiveColor = "".concat(GREY_CHATEAU);
+var inactiveColor = "".concat(STORM_GREY);
 var fallbackValues$v = {
   activeColor: activeColor$6,
   inactiveColor: inactiveColor
@@ -27299,19 +27303,21 @@ var RadioButton$1 = function RadioButton(_ref2) {
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
   var buttonCenter = {
@@ -27360,7 +27366,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "12px",
-    margin: "4px 14px 4px 4px",
+    margin: "6px 14px 6px 6px",
     height: "24px",
     width: "24px",
     variants: buttonBorder,
@@ -47101,6 +47107,8 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       forwardButtonLoading = _ref.forwardButtonLoading,
       _ref$forwardButtonVar = _ref.forwardButtonVariant,
       forwardButtonVariant = _ref$forwardButtonVar === void 0 ? "primary" : _ref$forwardButtonVar,
+      _ref$forwardButtonAri = _ref.forwardButtonAriaRole,
+      forwardButtonAriaRole = _ref$forwardButtonAri === void 0 ? "button" : _ref$forwardButtonAri,
       _ref$backButtonVarian = _ref.backButtonVariant,
       backButtonVariant = _ref$backButtonVarian === void 0 ? "secondary" : _ref$backButtonVarian,
       backButtonAction = _ref.backButtonAction,
@@ -47124,13 +47132,17 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText
+    dataQa: cancelText,
+    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
+    role: "link"
   }) : backButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: "Back",
     variant: backButtonVariant,
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: "Back"
+    dataQa: "Back",
+    "aria-labelledby": "back-button",
+    role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React.createElement(ButtonWithLink, {
     url: redirectURL,
@@ -47138,7 +47150,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: redirectText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
+    role: forwardButtonAriaRole
   }) : forwardButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: forwardButtonText,
     variant: forwardButtonVariant,
@@ -47146,7 +47160,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: forwardButtonText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
+    role: forwardButtonAriaRole
   });
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Box, {
     padding: "1.25rem 0"