@thecb/components 8.4.11-beta.27 → 8.4.11-beta.28

package/dist/index.cjs.js

@@ -6255,7 +6255,7 @@ var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
 };
 
-var createIdFromString = function createIdFromString(text, postscript) {
+var createIdFromString$1 = function createIdFromString(text, postscript) {
   var unique = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
   if (text === undefined) {
@@ -6371,7 +6371,7 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
-  createIdFromString: createIdFromString,
+  createIdFromString: createIdFromString$1,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -24210,10 +24210,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: createIdFromString(labelTextWhenNoError)
+    id: createIdFromString$1(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    ariaLabelledby: createIdFromString$1(labelTextWhenNoError),
+    "aria-describedby": createIdFromString$1(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24235,7 +24235,8 @@ var FormSelect = function FormSelect(_ref) {
     "aria-disabled": disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    required: options.required
+    required: options.required,
+    "data-qa": "".concat(createIdFromString$1(labelTextWhenNoError), "-dropdown")
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -24244,9 +24245,10 @@ var FormSelect = function FormSelect(_ref) {
     variant: "pXS",
     weight: themeValues.fontWeight,
     extraStyles: "\n            word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }\n          ",
-    id: createIdFromString(labelTextWhenNoError, "error message"),
+    id: createIdFromString$1(labelTextWhenNoError, "error message"),
     "aria-live": "polite",
-    "data-qa": labelTextWhenNoError
+    "aria-atomic": true,
+    "data-qa": createIdFromString$1(labelTextWhenNoError, "error message")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -25969,7 +25971,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
-    id: createIdFromString(labelTextWhenNoError)
+    id: createIdFromString$1(labelTextWhenNoError)
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -25986,7 +25988,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }\n                ",
-    id: createIdFromString(labelTextWhenNoError)
+    id: createIdFromString$1(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -26007,8 +26009,8 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-labelledby": createIdFromString$1(labelTextWhenNoError),
+    "aria-describedby": createIdFromString$1(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(value) {
       return setValue(value);
@@ -26020,15 +26022,14 @@ var FormInput = function FormInput(_ref15) {
     field: field,
     formatter: formatter,
     showErrors: showErrors,
-    dataQa: labelTextWhenNoError,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString$1(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     autoComplete: autocomplete
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-labelledby": createIdFromString$1(labelTextWhenNoError),
+    "aria-describedby": createIdFromString$1(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return setValue(e.target.value);
@@ -26039,8 +26040,7 @@ var FormInput = function FormInput(_ref15) {
     inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
-    dataQa: labelTextWhenNoError,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString$1(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
@@ -26051,13 +26051,13 @@ var FormInput = function FormInput(_ref15) {
     justify: "space-between",
     "aria-live": "polite",
     "aria-atomic": true,
-    "data-qa": "Errors container"
+    "data-qa": createIdFromString$1("FormInput errors")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: createIdFromString(labelTextWhenNoError, "error message")
+    id: createIdFromString$1(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
@@ -40401,8 +40401,7 @@ var AddressForm = function AddressForm(_ref) {
     },
     autocomplete: "address-line1",
     "aria-label": "Address Line 1",
-    "data-qa": "Address Line 1",
-    dataQa: "Address Line 1"
+    "data-qa": createIdFromString$1("Address Line 1")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40413,7 +40412,7 @@ var AddressForm = function AddressForm(_ref) {
     },
     autocomplete: "address-line2",
     "aria-label": "Address Line 2",
-    "data-qa": "Address Line 2"
+    "data-qa": createIdFromString$1("Address Line 2")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     required: true,
@@ -40440,8 +40439,7 @@ var AddressForm = function AddressForm(_ref) {
     "aria-label": isUS ? "State" : "State or Province",
     required: true,
     autocomplete: "administrative-area",
-    "data-qa": "State or Province",
-    dataQa: "State or Province"
+    "data-qa": createIdFromString$1("State or Province")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40456,15 +40454,13 @@ var AddressForm = function AddressForm(_ref) {
     "aria-label": "Zip code",
     autocomplete: "postal-code",
     required: true,
-    "data-qa": "Zip code",
-    dataQa: "Zip code"
+    "data-qa": createIdFromString$1("Zip code")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
     checked: walletCheckboxMarked,
     onChange: saveToWallet,
-    "data-qa": "Save address to wallet",
-    dataQa: "Save address to wallet"
+    "data-qa": createIdFromString$1("Save address to wallet")
   })));
 };
 
@@ -41123,8 +41119,8 @@ var EditableList = function EditableList(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: listPadding,
     as: "section",
-    "aria-labelledby": typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : "",
-    "aria-label": !title && typeof itemName === "string" ? "editable-list-".concat(createIdFromString(itemName)) : ""
+    "aria-labelledby": typeof title === "string" ? "editable-list-".concat(createIdFromString$1(title)) : "",
+    "aria-label": !title && typeof itemName === "string" ? "editable-list-".concat(createIdFromString$1(itemName)) : ""
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0rem"
   }, title !== "" && /*#__PURE__*/React__default.createElement(Box, {
@@ -41134,7 +41130,7 @@ var EditableList = function EditableList(_ref) {
     weight: titleWeight,
     color: CHARADE_GREY,
     extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;",
-    id: typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : ""
+    id: typeof title === "string" ? "editable-list-".concat(createIdFromString$1(title)) : ""
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -41389,12 +41385,13 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autoComplete: "email",
-    "data-qa": "Email address"
+    "data-qa": createIdFromString("Email address")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save email address to wallet")
   })));
 };
 
@@ -48898,7 +48895,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     "aria-label": "ACH Payment"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on checking account",
-    "data-qa": "Name on checking account",
+    "data-qa": createIdFromString("Name on checking account"),
     errorMessages: nameErrors,
     field: fields.name,
     fieldActions: actions.fields.name,
@@ -48906,11 +48903,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "name",
-    dataQa: "Name on checking account"
+    autocomplete: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
-    "data-qa": "Routing number",
+    "data-qa": createIdFromString("Routing number"),
     errorMessages: routingNumberErrors,
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
@@ -48928,8 +48924,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    },
-    dataQa: "Routing number"
+    }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
     "data-qa": "Confirm routing number",
@@ -48940,12 +48935,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    dataQa: "Confirm routing number"
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
-    "data-qa": "Account number",
-    dataQa: "Account number",
+    "data-qa": createIdFromString("Account number"),
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
@@ -48966,7 +48959,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
-    "data-qa": "Confirm account number",
+    "data-qa": createIdFromString("Confirm account number"),
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48974,12 +48967,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    dataQa: "Confirm account number"
+    isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
-    "data-qa": "Account type",
-    dataQa: "Account type",
+    "data-qa": createIdFromString("Account type"),
     options: [{
       text: "Select account type",
       value: ""
@@ -49000,14 +48991,13 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     name: "default-payment-ach",
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
-    hidden: hideDefaultPayment,
-    dataQa: "default-payment-ach"
+    hidden: hideDefaultPayment
   }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
-    "data-qa": "Save checking account to wallet",
+    "data-qa": createIdFromString("Save checking account to wallet"),
     title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49018,8 +49008,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showCheckbox: false,
     description: "View",
     terms: termsContent,
-    dataQa: "Terms and Conditions",
-    "data-qa": "Terms and Conditions"
+    "data-qa": createIdFromString("Terms and Conditions")
   })))));
 };
 
@@ -49123,11 +49112,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       }
     },
     showErrors: showErrors,
-    "data-qa": "Country",
-    dataQa: "Country"
+    "data-qa": "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
-    "data-qa": "Name on card",
+    "data-qa": createIdFromString("Name on card"),
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
     fieldActions: actions.fields.nameOnCard,
@@ -49135,11 +49123,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-name",
-    dataQa: "Name on card"
+    autocomplete: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
-    "data-qa": "Credit card number",
+    "data-qa": createIdFromString("Credit card number"),
     errorMessages: creditCardNumberErrors,
     field: fields.creditCardNumber,
     fieldActions: actions.fields.creditCardNumber,
@@ -49149,14 +49136,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocomplete: "cc-number",
-    dataQa: "Credit card number"
+    autocomplete: "cc-number"
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
-    "data-qa": "Expiration date",
+    "data-qa": createIdFromString("Expiration date"),
     errorMessages: expirationDateErrors,
     field: fields.expirationDate,
     fieldActions: actions.fields.expirationDate,
@@ -49168,11 +49154,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocomplete: "cc-exp",
-    dataQa: "Expiration date"
+    autocomplete: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
-    "data-qa": "CVV",
+    "data-qa": createIdFromString("CVV"),
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
@@ -49182,8 +49167,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-csc",
-    dataQa: "CVV"
+    autocomplete: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -49191,7 +49175,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
-    "data-qa": "Zip code",
+    "data-qa": createIdFromString("Zip code"),
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
     fieldActions: actions.fields.zipCode,
@@ -49199,14 +49183,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autoComplete: "billing postal-code",
-    dataQa: "Zip code"
+    autoComplete: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
-    "data-qa": "Save credit card to wallet",
+    "data-qa": createIdFromString("Save credit card to wallet"),
     title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49420,12 +49403,13 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocomplete: "tel",
     isPhone: true,
-    "data-qa": "Phone number"
+    "data-qa": createIdFromString("Phone number")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save phone number to wallet")
   })));
 };
 
@@ -49653,7 +49637,7 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
-      name: typeof section.title === "string" ? createIdFromString(section.title) : section.id,
+      name: typeof section.title === "string" ? createIdFromString$1(section.title) : section.id,
       ariaDescribedBy: ariaDescribedBy,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,