@thecb/components 9.1.1-beta.0 → 9.1.2-beta.0

package/dist/index.cjs.js

@@ -22104,8 +22104,7 @@ var StyledCheckbox = styled__default.div.withConfig({
       focusedStyles = _ref3.focusedStyles,
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles,
-      disabledCheckedStyles = _ref3.disabledCheckedStyles,
-      _ref3$required = _ref3.required;
+      disabledCheckedStyles = _ref3.disabledCheckedStyles;
   return error ? styled.css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? styled.css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(["", " ", ""], checkedStyles, focused && focusedStyles) : styled.css(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
@@ -22168,8 +22167,7 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : "",
-    required: required
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     role: "checkbox",
     error: error,
@@ -25033,9 +25031,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-      _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
@@ -25045,8 +25041,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name",
-    required: isRequired
+    autocompleteValue: "country-name"
   });
 };
 
@@ -25891,7 +25886,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", "isRequired"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -25926,10 +25921,7 @@ var FormattedInputField = styled__default(function (_ref8) {
       themeValues = _ref8.themeValues,
       props = _objectWithoutProperties(_ref8, _excluded$p);
 
-  var isRequired = props.isRequired;
-  return /*#__PURE__*/React__default.createElement(FormattedInput, isRequired ? _objectSpread2(_objectSpread2({}, props), {}, {
-    required: true
-  }) : _objectSpread2({}, props));
+  return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
   componentId: "sc-l094r1-1"
@@ -25981,8 +25973,6 @@ 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 = React.useState(false),
@@ -26069,8 +26059,7 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue,
-    required: isRequired
+    autoComplete: autocompleteValue
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -26089,8 +26078,7 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue,
-    required: isRequired
+    autoComplete: autocompleteValue
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
@@ -27196,9 +27184,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       _ref5$handleChange = _ref5.handleChange,
       handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
       field = _ref5.field,
-      config = _ref5.config,
-      _ref5$required = _ref5.required,
-      required = _ref5$required === void 0 ? false : _ref5$required;
+      config = _ref5.config;
 
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
@@ -27231,8 +27217,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       setValue(e.target.value);
       handleChange(e);
     },
-    defaultChecked: getDefaultChecked(value, index),
-    required: required
+    defaultChecked: getDefaultChecked(value, index)
   }), /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     htmlFor: id,
@@ -27275,9 +27260,7 @@ 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,
-      _ref2$isRequired = _ref2.isRequired,
-      isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
+      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27337,8 +27320,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     disabled: disabled,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: "-1",
-    required: isRequired
+    tabIndex: "-1"
   }, extraProps)), /*#__PURE__*/React__default.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
@@ -38731,7 +38713,7 @@ validatorFns[INCLUDED_IN] = (value, args, form) =>
 
 const REQUIRED = 'validator/REQUIRED';
 const REQUIRED_ERROR = 'error/REQUIRED';
-const required$1 = createValidator(REQUIRED, REQUIRED_ERROR);
+const required = createValidator(REQUIRED, REQUIRED_ERROR);
 validatorFns[REQUIRED] = (value, args, form) => value !== '';
 
 const ONLY_INTEGERS = 'validator/ONLY_INTEGERS';
@@ -39344,15 +39326,15 @@ var AddressForm = function AddressForm(_ref) {
     }, []);
   }
 
-  var street1ErrorMessages = _defineProperty({}, required$1.error, "Street is required");
+  var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
 
-  var cityErrorMessages = _defineProperty({}, required$1.error, "City is required");
+  var cityErrorMessages = _defineProperty({}, required.error, "City is required");
 
-  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 zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
 
-  var stateProvinceErrorMessages = _defineProperty({}, required$1.error, "State or Province is required");
+  var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required");
 
-  var countryErrorMessages = _defineProperty({}, required$1.error, "Country is required");
+  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
 
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
@@ -39377,8 +39359,7 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country",
-    isRequired: true
+    dataQa: "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -39389,8 +39370,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address",
-    required: true
+    dataQa: "Address"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39400,8 +39380,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2",
-    required: true
+    dataQa: "Address Line 2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -39412,8 +39391,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City",
-    required: true
+    dataQa: "City"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39424,8 +39402,7 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province",
-    required: true
+    dataQa: "State or Province"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39438,8 +39415,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code",
-    required: true
+    dataQa: "Zip code"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -39450,23 +39426,23 @@ var AddressForm = function AddressForm(_ref) {
 
 var formConfig = {
   street1: {
-    validators: [required$1()]
+    validators: [required()]
   },
   street2: {
     validators: []
   },
   city: {
-    validators: [required$1()]
+    validators: [required()]
   },
   stateProvince: {
-    validators: [required$1()]
+    validators: [required()]
   },
   country: {
     defaultValue: "US",
-    validators: [required$1()]
+    validators: [required()]
   },
   zip: {
-    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")],
+    validators: [required(), 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")]
   }
 };
@@ -39558,9 +39534,9 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     }, []);
   }
 
-  var currentPasswordErrorMessages = _defineProperty({}, required$1.error, "Current Password is required");
+  var currentPasswordErrorMessages = _defineProperty({}, required.error, "Current Password is required");
 
-  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 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 confirmNewPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match your new password");
 
@@ -39653,13 +39629,13 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
 
 var formConfig$1 = {
   currentPassword: {
-    validators: [required$1()]
+    validators: [required()]
   },
   newPassword: {
-    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmNewPassword: {
-    validators: [required$1(), matchesField("newPassword")]
+    validators: [required(), matchesField("newPassword")]
   }
 };
 
@@ -40002,9 +39978,9 @@ var EditNameForm = function EditNameForm(_ref) {
     }, []);
   }
 
-  var firstNameErrorMessages = _defineProperty({}, required$1.error, "First name is required");
+  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
 
-  var lastNameErrorMessages = _defineProperty({}, required$1.error, "Last name is required");
+  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
 
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     role: "form",
@@ -40019,8 +39995,7 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "given-name",
-    isRequired: true
+    autocompleteValue: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     dataQa: "Edit Last Name",
@@ -40031,17 +40006,16 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "family-name",
-    isRequired: true
+    autocompleteValue: "family-name"
   })));
 };
 
 var formConfig$2 = {
   firstName: {
-    validators: [required$1()]
+    validators: [required()]
   },
   lastName: {
-    validators: [required$1()]
+    validators: [required()]
   }
 };
 
@@ -40344,9 +40318,7 @@ var EmailForm = function EmailForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked,
-      _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+      walletCheckboxMarked = _ref.walletCheckboxMarked;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -40356,14 +40328,13 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
 
-  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required$1.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
+  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
     "aria-label": "Email address"
   }, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    margin: "0 0 1.125rem 0",
-    id: "explanation"
+    margin: "0 0 1.125rem 0"
   }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailFieldErrorMessages,
@@ -40376,20 +40347,18 @@ var EmailForm = function EmailForm(_ref) {
     },
     isEmail: true,
     autocompleteValue: "email",
-    dataQa: "Email address",
-    required: isRequired
+    dataQa: "Email address"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    "aria-describedby": "explanation"
+    onChange: saveToWallet
   })));
 };
 
 var formConfig$3 = {
   email: {
-    validators: [required$1(), isProbablyEmail()]
+    validators: [required(), isProbablyEmail()]
   }
 };
 
@@ -40456,7 +40425,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     }, []);
   }
 
-  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required$1.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
+  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
@@ -40473,7 +40442,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
 
 var formConfig$4 = {
   email: {
-    validators: [required$1(), isProbablyEmail()]
+    validators: [required(), isProbablyEmail()]
   }
 };
 
@@ -42135,9 +42104,9 @@ var LoginForm = function LoginForm(_ref) {
     }, []);
   }
 
-  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required$1.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
+  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
 
-  var passwordErrorMessages = _defineProperty({}, required$1.error, "Password is required");
+  var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
 
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
     role: "form",
@@ -42170,10 +42139,10 @@ var LoginForm = function LoginForm(_ref) {
 
 var formConfig$5 = {
   email: {
-    validators: [required$1(), isProbablyEmail()]
+    validators: [required(), isProbablyEmail()]
   },
   password: {
-    validators: [required$1()]
+    validators: [required()]
   }
 };
 
@@ -46778,7 +46747,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     }, []);
   }
 
-  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 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 getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
     var errorMessages = amountErrors;
@@ -46852,7 +46821,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$1(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
+  var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
     return lineItem != item;
   }).reduce(function (acc, curr) {
     return [].concat(_toConsumableArray(acc), [curr.id]);
@@ -47120,13 +47089,15 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText
+    dataQa: cancelText,
+    role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Back",
     variant: backButtonVariant,
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: "Back"
+    dataQa: "Back",
+    role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     url: redirectURL,
@@ -47134,7 +47105,8 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: redirectText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    role: "link"
   }) : forwardButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: forwardButtonText,
     variant: forwardButtonVariant,
@@ -47142,7 +47114,8 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: forwardButtonText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    role: "link"
   });
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "1.25rem 0"
@@ -47914,17 +47887,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var showTerms = !!termsContent;
 
-  var nameErrors = _defineProperty({}, required$1.error, "Name is required");
+  var nameErrors = _defineProperty({}, required.error, "Name is required");
 
-  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 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 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 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 accountTypeErrors = _defineProperty({}, required$1.error, "Account type is required");
+  var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
 
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -47940,8 +47913,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name",
-    isRequired: true
+    autocompleteValue: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -47963,8 +47935,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    },
-    isRequired: true
+    }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
     dataQa: "Confirm routing number",
@@ -47975,7 +47946,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isRequired: true,
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
@@ -47984,7 +47954,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
-    isRequired: true,
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
@@ -48002,7 +47971,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
-    isRequired: true,
     dataQa: "Confirm account number",
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
@@ -48031,7 +47999,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountType
   }), !hideDefaultPayment && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
-    required: true,
     dataQa: "default-payment-ach",
     name: "default-payment-ach",
     onChange: toggleCheckbox,
@@ -48058,10 +48025,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
 var formConfig$6 = {
   name: {
-    validators: [required$1()]
+    validators: [required()]
   },
   routingNumber: {
-    validators: [required$1(), hasLength(9, 9), isRoutingNumber()],
+    validators: [required(), hasLength(9, 9), isRoutingNumber()],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
@@ -48069,7 +48036,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
-    validators: [required$1(), hasLength(5, 17)],
+    validators: [required(), hasLength(5, 17)],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
@@ -48078,7 +48045,7 @@ var formConfig$6 = {
   },
   accountType: {
     defaultValue: "CHECKING",
-    validators: [required$1()]
+    validators: [required()]
   }
 };
 
@@ -48129,14 +48096,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     }
   }, []);
 
-  var nameOnCardErrors = _defineProperty({}, required$1.error, "Name is required");
+  var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 
-  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 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 countryErrorMessages = _defineProperty({}, required$1.error, "Country is required");
+  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
 
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
@@ -48156,8 +48123,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country",
-    isRequired: true
+    dataQa: "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     dataQa: "Name on card",
@@ -48168,8 +48134,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name",
-    required: true
+    autocompleteValue: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48182,8 +48147,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number",
-    required: true
+    autocompleteValue: "cc-number"
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48201,8 +48165,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp",
-    required: true
+    autocompleteValue: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48215,8 +48178,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc",
-    required: true
+    autocompleteValue: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48232,8 +48194,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "billing postal-code",
-    required: true
+    autocompleteValue: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48258,25 +48219,25 @@ var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
 var formConfig$7 = {
   country: {
     defaultValue: "US",
-    validators: [required$1()]
+    validators: [required()]
   },
   nameOnCard: {
-    validators: [required$1()]
+    validators: [required()]
   },
   creditCardNumber: {
-    validators: [required$1(), hasLength(15, 16)],
+    validators: [required(), hasLength(15, 16)],
     constraints: [onlyIntegers(), hasLength(0, 16)]
   },
   expirationDate: {
-    validators: [required$1(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
+    validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
     constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
-    validators: [required$1(), hasLength(3, 4)],
+    validators: [required(), hasLength(3, 4)],
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    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")],
+    validators: [required(), 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")]
   }
 };
@@ -48426,9 +48387,7 @@ var PhoneForm = function PhoneForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked,
-      _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+      walletCheckboxMarked = _ref.walletCheckboxMarked;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -48438,7 +48397,7 @@ var PhoneForm = function PhoneForm(_ref) {
     }, []);
   }
 
-  var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required$1.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
+  var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -48455,8 +48414,7 @@ var PhoneForm = function PhoneForm(_ref) {
     },
     autocompleteValue: "tel-national",
     dataQa: "Phone number",
-    isNum: true,
-    required: isRequired
+    isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -48467,7 +48425,7 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [required$1(), hasLength(10, 10)],
+    validators: [required(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
@@ -48505,9 +48463,7 @@ var RadioGroup = function RadioGroup(_ref) {
       _ref$handleChange = _ref.handleChange,
       handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
       field = _ref.field,
-      fieldActions = _ref.fieldActions,
-      _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+      fieldActions = _ref.fieldActions;
 
   var setValue = function setValue(value) {
     return fieldActions.set(value);
@@ -48521,7 +48477,6 @@ var RadioGroup = function RadioGroup(_ref) {
     childGap: "4px"
   }, config.map(function (c, idx) {
     return /*#__PURE__*/React__default.createElement(RadioButtonWithLabel$1, _extends({
-      required: isRequired,
       index: idx,
       key: c.id
     }, c, {
@@ -48708,8 +48663,7 @@ var RadioSection = function RadioSection(_ref) {
       toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      tabIndex: "-1",
-      isRequired: true
+      tabIndex: "-1"
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48768,12 +48722,12 @@ var RegistrationForm = function RegistrationForm(_ref) {
     }, []);
   }
 
-  var firstNameErrorMessages = _defineProperty({}, required$1.error, "First name is required");
+  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
 
-  var lastNameErrorMessages = _defineProperty({}, required$1.error, "Last name is required");
+  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
 
-  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 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 confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
 
@@ -48849,19 +48803,19 @@ var RegistrationForm = function RegistrationForm(_ref) {
 
 var formConfig$9 = {
   firstName: {
-    validators: [required$1()]
+    validators: [required()]
   },
   lastName: {
-    validators: [required$1()]
+    validators: [required()]
   },
   email: {
-    validators: [required$1(), isProbablyEmail()]
+    validators: [required(), isProbablyEmail()]
   },
   password: {
-    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmPassword: {
-    validators: [required$1(), matchesField("password")]
+    validators: [required(), matchesField("password")]
   }
 };
 
@@ -48942,7 +48896,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     }, []);
   }
 
-  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 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 confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
 
@@ -48981,10 +48935,10 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
 
 var formConfig$a = {
   password: {
-    validators: [required$1(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
+    validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
   confirmPassword: {
-    validators: [required$1(), matchesField("password")]
+    validators: [required(), matchesField("password")]
   }
 };