@thecb/components 9.1.0 → 9.1.1-beta.0

package/dist/index.esm.js

@@ -22096,7 +22096,8 @@ var StyledCheckbox = styled.div.withConfig({
       focusedStyles = _ref3.focusedStyles,
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles,
-      disabledCheckedStyles = _ref3.disabledCheckedStyles;
+      disabledCheckedStyles = _ref3.disabledCheckedStyles,
+      _ref3$required = _ref3.required;
   return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
@@ -22159,7 +22160,8 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    "aria-describedby": error ? "".concat(name, "-error-message") : "",
+    required: required
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
     role: "checkbox",
     error: error,
@@ -25023,7 +25025,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,
@@ -25033,7 +25037,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name"
+    autocompleteValue: "country-name",
+    required: isRequired
   });
 };
 
@@ -25878,7 +25883,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"
@@ -25913,7 +25918,10 @@ var FormattedInputField = styled(function (_ref8) {
       themeValues = _ref8.themeValues,
       props = _objectWithoutProperties(_ref8, _excluded$p);
 
-  return /*#__PURE__*/React.createElement(FormattedInput, props);
+  var isRequired = props.isRequired;
+  return /*#__PURE__*/React.createElement(FormattedInput, isRequired ? _objectSpread2(_objectSpread2({}, props), {}, {
+    required: true
+  }) : _objectSpread2({}, props));
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
   componentId: "sc-l094r1-1"
@@ -25965,6 +25973,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),
@@ -26051,7 +26061,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"),
@@ -26070,7 +26081,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",
@@ -27176,7 +27188,9 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       _ref5$handleChange = _ref5.handleChange,
       handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
       field = _ref5.field,
-      config = _ref5.config;
+      config = _ref5.config,
+      _ref5$required = _ref5.required,
+      required = _ref5$required === void 0 ? false : _ref5$required;
 
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
@@ -27209,7 +27223,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       setValue(e.target.value);
       handleChange(e);
     },
-    defaultChecked: getDefaultChecked(value, index)
+    defaultChecked: getDefaultChecked(value, index),
+    required: required
   }), /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     htmlFor: id,
@@ -27252,7 +27267,9 @@ var RadioButton$1 = function RadioButton(_ref2) {
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
       _ref2$ariaLabel = _ref2.ariaLabel,
-      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
+      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
+      _ref2$isRequired = _ref2.isRequired,
+      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27312,7 +27329,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
     disabled: disabled,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    required: isRequired
   }, extraProps)), /*#__PURE__*/React.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
@@ -38705,7 +38723,7 @@ validatorFns[INCLUDED_IN] = (value, args, form) =>
 
 const REQUIRED = 'validator/REQUIRED';
 const REQUIRED_ERROR = 'error/REQUIRED';
-const required = createValidator(REQUIRED, REQUIRED_ERROR);
+const required$1 = createValidator(REQUIRED, REQUIRED_ERROR);
 validatorFns[REQUIRED] = (value, args, form) => value !== '';
 
 const ONLY_INTEGERS = 'validator/ONLY_INTEGERS';
@@ -39318,15 +39336,15 @@ var AddressForm = function AddressForm(_ref) {
     }, []);
   }
 
-  var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
+  var street1ErrorMessages = _defineProperty({}, required$1.error, "Street is required");
 
-  var cityErrorMessages = _defineProperty({}, required.error, "City is required");
+  var cityErrorMessages = _defineProperty({}, required$1.error, "City is required");
 
-  var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
+  var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required$1.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
 
-  var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required");
+  var stateProvinceErrorMessages = _defineProperty({}, required$1.error, "State or Province is required");
 
-  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
+  var countryErrorMessages = _defineProperty({}, required$1.error, "Country is required");
 
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React.createElement(FormContainer$1, {
@@ -39351,7 +39369,8 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -39362,7 +39381,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address"
+    dataQa: "Address",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39372,7 +39392,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2"
+    dataQa: "Address Line 2",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -39383,7 +39404,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City"
+    dataQa: "City",
+    required: true
   }), /*#__PURE__*/React.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39394,7 +39416,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province"
+    dataQa: "State or Province",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39407,7 +39430,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code"
+    dataQa: "Zip code",
+    required: true
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -39418,23 +39442,23 @@ var AddressForm = function AddressForm(_ref) {
 
 var formConfig = {
   street1: {
-    validators: [required()]
+    validators: [required$1()]
   },
   street2: {
     validators: []
   },
   city: {
-    validators: [required()]
+    validators: [required$1()]
   },
   stateProvince: {
-    validators: [required()]
+    validators: [required$1()]
   },
   country: {
     defaultValue: "US",
-    validators: [required()]
+    validators: [required$1()]
   },
   zip: {
-    validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
+    validators: [required$1(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
     constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
   }
 };
@@ -39526,9 +39550,9 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     }, []);
   }
 
-  var currentPasswordErrorMessages = _defineProperty({}, required.error, "Current Password is required");
+  var currentPasswordErrorMessages = _defineProperty({}, required$1.error, "Current Password is required");
 
-  var newPasswordErrorMessages = (_newPasswordErrorMess = {}, _defineProperty(_newPasswordErrorMess, required.error, "New Password field is required."), _defineProperty(_newPasswordErrorMess, hasLength.error, "Your new password must have at least 8 characters"), _defineProperty(_newPasswordErrorMess, hasNumber.error, "Your new password must contain at least one number"), _defineProperty(_newPasswordErrorMess, hasLowercaseLetter.error, "Your new password must contain at least one lowercase letter"), _defineProperty(_newPasswordErrorMess, hasUppercaseLetter.error, "Your new password must contain at least one uppercase letter"), _defineProperty(_newPasswordErrorMess, hasSpecialCharacter.error, "Your new password must contain at least one special character (!@#$%^&*.?)"), _newPasswordErrorMess);
+  var newPasswordErrorMessages = (_newPasswordErrorMess = {}, _defineProperty(_newPasswordErrorMess, required$1.error, "New Password field is required."), _defineProperty(_newPasswordErrorMess, hasLength.error, "Your new password must have at least 8 characters"), _defineProperty(_newPasswordErrorMess, hasNumber.error, "Your new password must contain at least one number"), _defineProperty(_newPasswordErrorMess, hasLowercaseLetter.error, "Your new password must contain at least one lowercase letter"), _defineProperty(_newPasswordErrorMess, hasUppercaseLetter.error, "Your new password must contain at least one uppercase letter"), _defineProperty(_newPasswordErrorMess, hasSpecialCharacter.error, "Your new password must contain at least one special character (!@#$%^&*.?)"), _newPasswordErrorMess);
 
   var confirmNewPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match your new password");
 
@@ -39621,13 +39645,13 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
 
 var formConfig$1 = {
   currentPassword: {
-    validators: [required()]
+    validators: [required$1()]
   },
   newPassword: {
-    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmNewPassword: {
-    validators: [required(), matchesField("newPassword")]
+    validators: [required$1(), matchesField("newPassword")]
   }
 };
 
@@ -39970,9 +39994,9 @@ var EditNameForm = function EditNameForm(_ref) {
     }, []);
   }
 
-  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
+  var firstNameErrorMessages = _defineProperty({}, required$1.error, "First name is required");
 
-  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
+  var lastNameErrorMessages = _defineProperty({}, required$1.error, "Last name is required");
 
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     role: "form",
@@ -39987,7 +40011,8 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "given-name"
+    autocompleteValue: "given-name",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     dataQa: "Edit Last Name",
@@ -39998,16 +40023,17 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "family-name"
+    autocompleteValue: "family-name",
+    isRequired: true
   })));
 };
 
 var formConfig$2 = {
   firstName: {
-    validators: [required()]
+    validators: [required$1()]
   },
   lastName: {
-    validators: [required()]
+    validators: [required$1()]
   }
 };
 
@@ -40310,7 +40336,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 () {
@@ -40320,13 +40348,14 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
 
-  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
+  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required$1.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
     "aria-label": "Email address"
   }, guestCheckout && /*#__PURE__*/React.createElement(Paragraph$1, {
-    margin: "0 0 1.125rem 0"
+    margin: "0 0 1.125rem 0",
+    id: "explanation"
   }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailFieldErrorMessages,
@@ -40339,18 +40368,20 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autocompleteValue: "email",
-    dataQa: "Email address"
+    dataQa: "Email address",
+    required: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "aria-describedby": "explanation"
   })));
 };
 
 var formConfig$3 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [required$1(), isProbablyEmail()]
   }
 };
 
@@ -40417,7 +40448,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     }, []);
   }
 
-  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
+  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required$1.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
   return /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
@@ -40434,7 +40465,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
 
 var formConfig$4 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [required$1(), isProbablyEmail()]
   }
 };
 
@@ -42096,9 +42127,9 @@ var LoginForm = function LoginForm(_ref) {
     }, []);
   }
 
-  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
+  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required$1.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
 
-  var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
+  var passwordErrorMessages = _defineProperty({}, required$1.error, "Password is required");
 
   return /*#__PURE__*/React.createElement(FormInputColumn, {
     role: "form",
@@ -42131,10 +42162,10 @@ var LoginForm = function LoginForm(_ref) {
 
 var formConfig$5 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [required$1(), isProbablyEmail()]
   },
   password: {
-    validators: [required()]
+    validators: [required$1()]
   }
 };
 
@@ -46739,7 +46770,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     }, []);
   }
 
-  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "There is a minimum payment of ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "There is a maximum payment of ".concat(displayCurrency(maximum))), _amountErrors);
+  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required$1.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "There is a minimum payment of ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "There is a maximum payment of ".concat(displayCurrency(maximum))), _amountErrors);
 
   var getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
     var errorMessages = amountErrors;
@@ -46813,7 +46844,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 var createPartialAmountFormValidators = function createPartialAmountFormValidators(item, lineItems, maximum) {
   var minimum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var blockPartialPaymentOverpay = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
+  var validators = [required$1(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
     return lineItem != item;
   }).reduce(function (acc, curr) {
     return [].concat(_toConsumableArray(acc), [curr.id]);
@@ -47875,17 +47906,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var showTerms = !!termsContent;
 
-  var nameErrors = _defineProperty({}, required.error, "Name is required");
+  var nameErrors = _defineProperty({}, required$1.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 routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required$1.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 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 accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required$1.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 accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
+  var accountTypeErrors = _defineProperty({}, required$1.error, "Account type is required");
 
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
@@ -47901,7 +47932,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",
@@ -47923,7 +47955,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",
@@ -47934,6 +47967,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
+    isRequired: true,
     isNum: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
@@ -47942,6 +47976,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
+    isRequired: true,
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -47959,6 +47994,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
+    isRequired: true,
     dataQa: "Confirm account number",
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
@@ -47987,6 +48023,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountType
   }), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
+    required: true,
     dataQa: "default-payment-ach",
     name: "default-payment-ach",
     onChange: toggleCheckbox,
@@ -48013,10 +48050,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
 var formConfig$6 = {
   name: {
-    validators: [required()]
+    validators: [required$1()]
   },
   routingNumber: {
-    validators: [required(), hasLength(9, 9), isRoutingNumber()],
+    validators: [required$1(), hasLength(9, 9), isRoutingNumber()],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
@@ -48024,7 +48061,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
-    validators: [required(), hasLength(5, 17)],
+    validators: [required$1(), hasLength(5, 17)],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
@@ -48033,7 +48070,7 @@ var formConfig$6 = {
   },
   accountType: {
     defaultValue: "CHECKING",
-    validators: [required()]
+    validators: [required$1()]
   }
 };
 
@@ -48084,14 +48121,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     }
   }, []);
 
-  var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
+  var nameOnCardErrors = _defineProperty({}, required$1.error, "Name is required");
 
-  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
-  var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, isValidMonth.error, "Expiration month is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
-  var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
-  var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
+  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required$1.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
+  var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required$1.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, isValidMonth.error, "Expiration month is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
+  var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required$1.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
+  var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required$1.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
-  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
+  var countryErrorMessages = _defineProperty({}, required$1.error, "Country is required");
 
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React.createElement(FormContainer$1, {
@@ -48111,7 +48148,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     dataQa: "Name on card",
@@ -48122,7 +48160,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48135,7 +48174,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number"
+    autocompleteValue: "cc-number",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48153,7 +48193,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    required: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48166,7 +48207,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc"
+    autocompleteValue: "cc-csc",
+    required: true
   })), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48182,7 +48224,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "billing postal-code"
+    autocompleteValue: "billing postal-code",
+    required: true
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48207,25 +48250,25 @@ var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
 var formConfig$7 = {
   country: {
     defaultValue: "US",
-    validators: [required()]
+    validators: [required$1()]
   },
   nameOnCard: {
-    validators: [required()]
+    validators: [required$1()]
   },
   creditCardNumber: {
-    validators: [required(), hasLength(15, 16)],
+    validators: [required$1(), hasLength(15, 16)],
     constraints: [onlyIntegers(), hasLength(0, 16)]
   },
   expirationDate: {
-    validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
+    validators: [required$1(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
     constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
-    validators: [required(), hasLength(3, 4)],
+    validators: [required$1(), hasLength(3, 4)],
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
+    validators: [required$1(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
     constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
   }
 };
@@ -48375,7 +48418,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 () {
@@ -48385,7 +48430,7 @@ var PhoneForm = function PhoneForm(_ref) {
     }, []);
   }
 
-  var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
+  var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required$1.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -48402,7 +48447,8 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocompleteValue: "tel-national",
     dataQa: "Phone number",
-    isNum: true
+    isNum: true,
+    required: isRequired
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -48413,7 +48459,7 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [required(), hasLength(10, 10)],
+    validators: [required$1(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
@@ -48451,7 +48497,9 @@ var RadioGroup = function RadioGroup(_ref) {
       _ref$handleChange = _ref.handleChange,
       handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
       field = _ref.field,
-      fieldActions = _ref.fieldActions;
+      fieldActions = _ref.fieldActions,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   var setValue = function setValue(value) {
     return fieldActions.set(value);
@@ -48465,6 +48513,7 @@ var RadioGroup = function RadioGroup(_ref) {
     childGap: "4px"
   }, config.map(function (c, idx) {
     return /*#__PURE__*/React.createElement(RadioButtonWithLabel$1, _extends({
+      required: isRequired,
       index: idx,
       key: c.id
     }, c, {
@@ -48651,7 +48700,8 @@ var RadioSection = function RadioSection(_ref) {
       toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      tabIndex: "-1"
+      tabIndex: "-1",
+      isRequired: true
     })), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
@@ -48710,12 +48760,12 @@ var RegistrationForm = function RegistrationForm(_ref) {
     }, []);
   }
 
-  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
+  var firstNameErrorMessages = _defineProperty({}, required$1.error, "First name is required");
 
-  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
+  var lastNameErrorMessages = _defineProperty({}, required$1.error, "Last name is required");
 
-  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
-  var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
+  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required$1.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
+  var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required$1.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
 
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
 
@@ -48791,19 +48841,19 @@ var RegistrationForm = function RegistrationForm(_ref) {
 
 var formConfig$9 = {
   firstName: {
-    validators: [required()]
+    validators: [required$1()]
   },
   lastName: {
-    validators: [required()]
+    validators: [required$1()]
   },
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [required$1(), isProbablyEmail()]
   },
   password: {
-    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmPassword: {
-    validators: [required(), matchesField("password")]
+    validators: [required$1(), matchesField("password")]
   }
 };
 
@@ -48884,7 +48934,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     }, []);
   }
 
-  var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
+  var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required$1.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
 
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
 
@@ -48923,10 +48973,10 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
 
 var formConfig$a = {
   password: {
-    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmPassword: {
-    validators: [required(), matchesField("password")]
+    validators: [required$1(), matchesField("password")]
   }
 };