@thecb/components 9.2.4-beta.9 → 9.2.7-beta.0

package/dist/index.esm.js

@@ -23791,7 +23791,9 @@ var Dropdown = function Dropdown(_ref13) {
       _ref13$smoothScroll = _ref13.smoothScroll,
       smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
       _ref13$ariaInvalid = _ref13.ariaInvalid,
-      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid;
+      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
+      _ref13$isRequired = _ref13.isRequired,
+      isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -23984,11 +23986,11 @@ var Dropdown = function Dropdown(_ref13) {
       clearTimeout(timer);
       setTimer(setTimeout(function () {
         return setInputValue("");
-      }, 3000));
+      }, 20000));
     }
 
     setFilteredOptions(options.filter(function (option) {
-      return option.value.toLowerCase().startsWith(inputValue.toLowerCase()) || option.text.toLowerCase().startsWith(inputValue.toLowerCase());
+      return option.value.toLowerCase().match(inputValue.toLowerCase()) || option.text.toLowerCase().match(inputValue.toLowerCase());
     }));
   }, [inputValue]);
   useEffect$1(function () {
@@ -24062,7 +24064,7 @@ var Dropdown = function Dropdown(_ref13) {
     },
     padding: "12px",
     placeholder: getSelection(),
-    required: options.required,
+    required: options.required || isRequired,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
@@ -24230,7 +24232,9 @@ var FormSelect = function FormSelect(_ref) {
       _ref$dataQa = _ref.dataQa,
       dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
       _ref$widthFitOptions = _ref.widthFitOptions,
-      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
+      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24292,7 +24296,8 @@ var FormSelect = function FormSelect(_ref) {
     },
     disabled: disabled,
     autocompleteValue: autocompleteValue,
-    smoothScroll: smoothScroll
+    smoothScroll: smoothScroll,
+    isRequired: isRequired
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -25063,6 +25068,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       _ref$dataQa = _ref.dataQa,
       dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -25074,7 +25081,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name"
+    autocompleteValue: "country-name",
+    isRequired: isRequired
   });
 };
 
@@ -25921,7 +25929,7 @@ var fallbackValues$k = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -26008,6 +26016,8 @@ var FormInput = function FormInput(_ref15) {
       removeFromValue = _ref15.removeFromValue,
       _ref15$dataQa = _ref15.dataQa,
       dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
+      _ref15$isRequired = _ref15.isRequired,
+      isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _useState = useState(false),
@@ -26094,7 +26104,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
+    autoComplete: autocompleteValue,
+    required: isRequired
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -26113,7 +26124,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
+    autoComplete: autocompleteValue,
+    required: isRequired
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between",
@@ -27332,7 +27344,6 @@ var fallbackValues$v = {
   inactiveColor: inactiveColor
 };
 
-var _excluded$w = ["radioOn", "radioFocused", "toggleRadio", "name", "disabled", "ariaDescribedBy", "themeValues", "ariaLabelledBy", "ariaLabel", "isRequired"];
 var HiddenRadioButton = styled.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
   componentId: "sc-1jed2i-0"
@@ -27358,9 +27369,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       _ref2$ariaLabel = _ref2.ariaLabel,
       ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
       _ref2$isRequired = _ref2.isRequired,
-      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
-      rest = _objectWithoutProperties(_ref2, _excluded$w);
-
+      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27403,7 +27412,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       width: "0px"
     }
   };
-  var extraProps = rest !== null && rest !== void 0 && rest.length ? rest : {};
+  var extraProps = {};
 
   if (ariaLabelledBy && ariaLabelledBy.length) {
     extraProps["aria-labelledby"] = ariaLabelledBy;
@@ -38113,7 +38122,9 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode;
+      countryCode = _ref.countryCode,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -38123,7 +38134,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: "address-level1"
+    autocompleteValue: "address-level1",
+    isRequired: isRequired
   });
 };
 
@@ -38692,7 +38704,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38702,7 +38714,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$x);
+      props = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -39462,7 +39474,8 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -39473,7 +39486,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address"
+    dataQa: "Address",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39494,7 +39508,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City"
+    dataQa: "City",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39505,7 +39520,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province"
+    dataQa: "State or Province",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39518,7 +39534,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code"
+    dataQa: "Zip code",
+    isRequired: true
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -40421,7 +40438,9 @@ var EmailForm = function EmailForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -40450,7 +40469,8 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autocompleteValue: "email",
-    dataQa: "Email address"
+    dataQa: "Email address",
+    isRequired: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -45749,7 +45769,8 @@ var Modal$1 = function Modal(_ref) {
     dialogStyle: {
       width: customWidth || "615px"
     },
-    underlayClickExits: underlayClickExits
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45808,7 +45829,8 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button"
   }))) : /*#__PURE__*/React.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45819,7 +45841,8 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button"
   }), /*#__PURE__*/React.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45828,7 +45851,8 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button"
   }))) : /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -45837,7 +45861,8 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button"
+    className: "modal-close-button",
+    role: "button"
   }))))))))), children);
 };
 
@@ -47259,7 +47284,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$y = ["amount"],
+var _excluded$x = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -47504,7 +47529,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$y);
+        rest = _objectWithoutProperties(_ref5, _excluded$x);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -47682,7 +47707,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    role: "button"
   }, link));
 };
 
@@ -47778,7 +47804,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
+    role: "button"
   }, link));
 };
 
@@ -47907,12 +47934,12 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$z = ["version"];
+var _excluded$y = ["version"];
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
       version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$z);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
@@ -47985,7 +48012,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name"
+    autocompleteValue: "name",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -48007,7 +48035,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
     dataQa: "Confirm routing number",
@@ -48018,7 +48047,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
     dataQa: "Account number",
@@ -48040,7 +48070,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
     dataQa: "Confirm account number",
@@ -48051,6 +48082,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: true,
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
@@ -48068,7 +48100,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountType,
     showErrors: showErrors,
     errorMessages: accountTypeErrors,
-    field: fields.accountType
+    field: fields.accountType,
+    isRequired: true
   }), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
     dataQa: "default-payment-ach",
@@ -48206,7 +48239,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48219,7 +48253,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number"
+    autocompleteValue: "cc-number",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48237,7 +48272,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48250,7 +48286,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc"
+    autocompleteValue: "cc-csc",
+    isRequired: true
   })), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48266,7 +48303,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "billing postal-code"
+    autocompleteValue: "billing postal-code",
+    isRequired: true
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48459,7 +48497,9 @@ var PhoneForm = function PhoneForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -48486,7 +48526,8 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocompleteValue: "tel-national",
     dataQa: "Phone number",
-    isNum: true
+    isNum: true,
+    isRequired: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -48677,7 +48718,7 @@ var RadioSection = function RadioSection(_ref) {
     extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0",
-    role: "radiogroup",
+    "aria-role": "radiogroup",
     "aria-required": isSectionRequired
   }, sections.filter(function (section) {
     return !section.hidden;
@@ -48701,7 +48742,7 @@ var RadioSection = function RadioSection(_ref) {
       role: "radio",
       "aria-checked": openSection === section.id,
       "aria-disabled": section.disabled,
-      "aria-required": !!(section !== null && section !== void 0 && section.required)
+      "aria-required": section === null || section === void 0 ? void 0 : section.required
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48740,7 +48781,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: !!(section !== null && section !== void 0 && section.required)
+      isRequired: section === null || section === void 0 ? void 0 : section.required
     })), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {