@thecb/components 9.1.3 → 9.1.4-beta.5

package/dist/index.esm.js

@@ -12398,7 +12398,7 @@ if (typeof window !== "undefined") {
 var MotionWrapper = styled(motion.div).withConfig({
   displayName: "Motionstyled__MotionWrapper",
   componentId: "sc-1m6r1io-0"
-})(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-size:", ";border-style:", ";border-width:", ";border-radius:", ";background-color:", ";box-shadow:", ";min-height:", ";min-width:", ";height:", ";width:", ";text-align:", ";margin:", ";&:hover,&:focus{", ";}&:active{", ";}&:disabled{", ";}", ";"], function (_ref) {
+})(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-width:", ";border-style:", ";border-width:", ";border-radius:", ";background-color:", ";box-shadow:", ";min-height:", ";min-width:", ";height:", ";width:", ";text-align:", ";margin:", ";&:hover,&:focus{", ";}&:active{", ";}&:disabled{", ";}", ";"], function (_ref) {
   var position = _ref.position;
   return position;
 }, function (_ref2) {
@@ -24195,7 +24195,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),
@@ -24257,7 +24259,8 @@ var FormSelect = function FormSelect(_ref) {
     },
     disabled: disabled,
     autocompleteValue: autocompleteValue,
-    smoothScroll: smoothScroll
+    smoothScroll: smoothScroll,
+    required: isRequired
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -25027,7 +25030,9 @@ var CountryDropdown = function CountryDropdown(_ref) {
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   return /*#__PURE__*/React.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -25037,7 +25042,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name"
+    autocompleteValue: "country-name",
+    isRequired: isRequired
   });
 };
 
@@ -25882,7 +25888,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"
@@ -25969,6 +25975,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),
@@ -26055,7 +26063,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"),
@@ -26074,7 +26083,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",
@@ -47849,7 +47859,7 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
 };
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
-  var _routingNumberErrors, _accountNumberErrors;
+  var _routingNumberErrors, _confirmRoutingNumber, _accountNumberErrors, _confirmAccountNumber;
 
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -47892,15 +47902,19 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
   var routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required.error, "Routing number is required"), _defineProperty(_routingNumberErrors, hasLength.error, "Routing number must be 9 digits"), _defineProperty(_routingNumberErrors, isRoutingNumber.error, "Invalid routing number"), _routingNumberErrors);
-
-  var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
-
+  var confirmRoutingNumberErrors = (_confirmRoutingNumber = {}, _defineProperty(_confirmRoutingNumber, matchesField.error, "Confirm routing number field must match routing number"), _defineProperty(_confirmRoutingNumber, required.error, "Confirm routing number is required"), _confirmRoutingNumber);
   var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required.error, "Account number is required"), _defineProperty(_accountNumberErrors, hasLength.error, "Account number must be between 5 and 17 digits"), _accountNumberErrors);
-
-  var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
+  var confirmAccountNumberErrors = (_confirmAccountNumber = {}, _defineProperty(_confirmAccountNumber, matchesField.error, "Confirm account number field must match account number"), _defineProperty(_confirmAccountNumber, required.error, "Confirm account number is required"), _confirmAccountNumber);
 
   var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
 
+  var getIsRequiredFromValidators = useCallback(function (field) {
+    var _field$validators;
+
+    return !!(field !== null && field !== void 0 && (_field$validators = field.validators) !== null && _field$validators !== void 0 && _field$validators.find(function (validator) {
+      return validator.type === "validator/REQUIRED";
+    }));
+  }, []);
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -47915,7 +47929,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name"
+    autocompleteValue: "name",
+    isRequired: getIsRequiredFromValidators(fields.name)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -47923,6 +47938,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
+    isRequired: getIsRequiredFromValidators(fields.routingNumber),
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -47948,6 +47964,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: getIsRequiredFromValidators(fields.confirmRoutingNumber),
     isNum: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
@@ -47956,6 +47973,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
+    isRequired: getIsRequiredFromValidators(fields.accountNumber),
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -47981,6 +47999,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: getIsRequiredFromValidators(fields.confirmAccountNumber),
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
@@ -47998,7 +48017,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountType,
     showErrors: showErrors,
     errorMessages: accountTypeErrors,
-    field: fields.accountType
+    field: fields.accountType,
+    isRequired: getIsRequiredFromValidators(fields.accountType)
   }), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
     dataQa: "default-payment-ach",
@@ -48034,7 +48054,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
-    validators: [matchesField("routingNumber")],
+    validators: [matchesField("routingNumber"), required()],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -48042,7 +48062,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber")],
+    validators: [matchesField("accountNumber"), required()],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {
@@ -48083,6 +48103,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       isMobile = _useContext.isMobile;
 
   var showTerms = !!termsContent;
+  var getIsRequiredFromValidators = useCallback(function (field) {
+    var _field$validators;
+
+    return !!(field !== null && field !== void 0 && (_field$validators = field.validators) !== null && _field$validators !== void 0 && _field$validators.find(function (validator) {
+      return validator.type === "validator/REQUIRED";
+    }));
+  }, []);
   useEffect$1(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -48125,7 +48152,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: getIsRequiredFromValidators(fields.country)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     dataQa: "Name on card",
@@ -48136,7 +48164,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    isRequired: getIsRequiredFromValidators(fields.nameOnCard)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48149,7 +48178,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number"
+    autocompleteValue: "cc-number",
+    isRequired: getIsRequiredFromValidators(fields.creditCardNumber)
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48167,7 +48197,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    isRequired: getIsRequiredFromValidators(fields.expirationDate)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48180,7 +48211,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc"
+    autocompleteValue: "cc-csc",
+    isRequired: getIsRequiredFromValidators(fields.cvv)
   })), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48196,7 +48228,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: getIsRequiredFromValidators(fields.zipCode)
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48627,7 +48660,8 @@ var RadioSection = function RadioSection(_ref) {
       extraStyles: borderStyles,
       role: "radio",
       "aria-checked": openSection === section.id,
-      "aria-disabled": section.disabled
+      disabled: section.disabled,
+      required: section === null || section === void 0 ? void 0 : section.required
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -48657,6 +48691,8 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React.createElement(RadioButton$2, {
+      role: "radio",
+      required: !!(section !== null && section !== void 0 && section.required),
       id: "radio-input-".concat(idString(section)),
       name: idString(section),
       ariaDescribedBy: ariaDescribedBy,