@thecb/components 12.1.0-beta.11 → 12.1.0-beta.12

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", "customAriaLabel"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22220,7 +22220,6 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     _ref5$hasIconOverride = _ref5.hasIconOverride,
     hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
     Icon = _ref5.icon,
-    customAriaLabel = _ref5.customAriaLabel,
     rest = _objectWithoutProperties(_ref5, _excluded$x);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -22231,12 +22230,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       func();
     }
   };
-  var normalizeName = name ? name.replace(/\s+/g, "-") : "";
-  var checkboxId = "checkbox-".concat(normalizeName);
-  var titleId = title ? "checkboxlabel-".concat(normalizeName) : undefined;
-  var ariaLabelledById = customAriaLabel ? undefined : labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
-  var ariaLabel = ariaLabelledById ? undefined : customAriaLabel !== null && customAriaLabel !== void 0 ? customAriaLabel : name;
-  var errorMessageNormalized = error ? "".concat(normalizeName, "-error-message") : undefined;
+  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
+  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     padding: "0",
@@ -22247,7 +22243,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     "aria-invalid": error,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledById,
-    "aria-describedby": errorMessageNormalized,
+    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
     onFocus: function onFocus() {
       return setFocused(true);
     },
@@ -22265,7 +22261,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
-    id: checkboxId,
+    id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
     checked: checked,
@@ -48191,10 +48187,6 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
 };
 
 var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
-var InlineTermsWrapper = styled.span.withConfig({
-  displayName: "TermsAndConditionsControlV2__InlineTermsWrapper",
-  componentId: "sc-16np073-0"
-})(["display:inline;> div{display:inline;}.modal-trigger{display:inline !important;}"]);
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
     showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -48236,21 +48228,6 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       useScrollTo("terms-body-text", 0, 0, "smooth", 100);
     }
   };
-  if (!showCheckbox && displayInline) {
-    return /*#__PURE__*/React__default.createElement(InlineTermsWrapper, {
-      id: TermsAndConditionsTitleDivId
-    }, description && /*#__PURE__*/React__default.createElement(Text$1, {
-      color: CHARADE_GREY
-    }, description), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
-      link: linkText,
-      terms: terms,
-      isOpen: showTerms,
-      toggleOpen: toggleTerms,
-      linkVariant: modalVariant,
-      title: modalTitle,
-      initialFocusSelector: initialFocusSelector
-    }));
-  }
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: displayInline ? "0" : "1.5rem",
     minWidth: displayInline ? "0" : "100%",
@@ -48463,33 +48440,25 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px",
+    align: "center",
+    overflow: true
+  }, 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();
-      },
-      style: {
-        display: "inline"
-      }
-    }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
-      version: "v2",
-      showCheckbox: false,
-      description: "View ",
-      terms: termsContent,
-      initialFocusSelector: ".modal-close-button"
-    }))),
+    title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
-    description: "View ",
+    description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })));
+  })))));
 };
 
 var formConfig$6 = {
@@ -48661,33 +48630,25 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     autocompleteValue: "billing postal-code",
     isRequired: true
-  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
-    name: "bank checkbox",
+  })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px",
+    align: "center",
+    overflow: true
+  }, 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();
-      },
-      style: {
-        display: "inline"
-      }
-    }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
-      version: "v2",
-      showCheckbox: false,
-      description: "View ",
-      terms: termsContent,
-      initialFocusSelector: ".modal-close-button"
-    }))),
+    title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
-    description: "View ",
+    description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })));
+  })))));
 };
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);