@thecb/components 12.1.0-beta.4 → 12.1.0-beta.7

package/dist/index.esm.js

@@ -22148,7 +22148,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "customAriaLabel", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22219,6 +22219,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     checkboxExtraStyles = _ref5.checkboxExtraStyles,
     _ref5$hasIconOverride = _ref5.hasIconOverride,
     hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
+    customAriaLabel = _ref5.customAriaLabel,
     Icon = _ref5.icon,
     rest = _objectWithoutProperties(_ref5, _excluded$x);
   var _useState = useState(false),
@@ -22255,7 +22256,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     tabIndex: "0",
     required: isRequired,
     "aria-invalid": error,
-    "aria-label": ariaLabel,
+    "aria-label": customAriaLabel || ariaLabel,
     "aria-labelledby": labelledById,
     "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
     onKeyDown: function onKeyDown(e) {
@@ -48101,7 +48102,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
     themeValues = _ref.themeValues,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$linkExtraStyles = _ref.linkExtraStyles,
+    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles;
   return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -48142,7 +48145,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
     textDecoration: themeValues.modalLinkTextDecoration,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;",
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px; ".concat(linkExtraStyles),
     role: "button" // This should always be a "button" since it opens a modal
     ,
     className: "modal-trigger"
@@ -48453,6 +48456,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     dataQa: "Save checking account to wallet",
+    customAriaLabel: "Save checking account to wallet (optional).",
     title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save checking account to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
       onClick: function onClick(e) {
         return e.stopPropagation();
@@ -48462,7 +48466,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       terms: termsContent,
       isOpen: showTermsModal,
       toggleOpen: toggleTermsModal,
-      initialFocusSelector: ".modal-close-button"
+      initialFocusSelector: ".modal-close-button",
+      linkExtraStyles: "display: inline-block;"
     }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -48657,6 +48662,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     dataQa: "Save credit card to wallet",
+    customAriaLabel: "Save credit card to wallet (optional).",
     title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save credit card to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
       onClick: function onClick(e) {
         return e.stopPropagation();
@@ -48666,7 +48672,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       terms: termsContent,
       isOpen: showTermsModal,
       toggleOpen: toggleTermsModal,
-      initialFocusSelector: ".modal-close-button"
+      initialFocusSelector: ".modal-close-button",
+      linkExtraStyles: "display: inline-block;"
     }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet