@thecb/components 9.3.0-beta.0 → 9.3.0-beta.1

package/dist/index.cjs.js

@@ -22130,7 +22130,9 @@ var Checkbox = function Checkbox(_ref4) {
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
       _ref4$dataQa = _ref4.dataQa,
-      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
+      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa,
+      _ref4$isRequired = _ref4.isRequired,
+      isRequired = _ref4$isRequired === void 0 ? false : _ref4$isRequired;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22184,7 +22186,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    "aria-required": isRequired
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -24210,7 +24213,8 @@ var FormSelect = function FormSelect(_ref) {
       dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
       _ref$widthFitOptions = _ref.widthFitOptions,
       widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
-      _ref$isRequired = _ref.isRequired;
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24218,6 +24222,7 @@ var FormSelect = function FormSelect(_ref) {
       setOpen = _useState2[1];
 
   var dropdownRef = React.useRef(null);
+  var required = (options === null || options === void 0 ? void 0 : options.required) || isRequired;
   var labelId = React.useMemo(function () {
     return function (labelTextWhenNoError) {
       return createIdFromString(labelTextWhenNoError);
@@ -24283,7 +24288,7 @@ var FormSelect = function FormSelect(_ref) {
     disabled: disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    required: options === null || options === void 0 ? void 0 : options.required
+    isRequired: required
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -38056,7 +38061,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     autocompleteValue: "address-level1",
-    isRequired: (options === null || options === void 0 ? void 0 : options.required) || isRequired
+    isRequired: isRequired
   });
 };
 
@@ -39407,7 +39412,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address"
+    dataQa: "Address",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39417,7 +39423,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2"
+    dataQa: "Address Line 2",
+    isRequired: false
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -39428,7 +39435,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City"
+    dataQa: "City",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39439,7 +39447,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province"
+    dataQa: "State or Province",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39452,7 +39461,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code"
+    dataQa: "Zip code",
+    isRequired: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -47737,7 +47747,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck
+    onChange: onCheck,
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -47850,7 +47861,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;"
+    extraStyles: "align-self: flex-start;",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47956,7 +47968,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name"
+    autocompleteValue: "name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -47978,7 +47991,8 @@ 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",
@@ -47989,6 +48003,7 @@ 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",
@@ -47997,6 +48012,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__default.createElement(AccountAndRoutingModal$1, {
@@ -48015,6 +48031,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
     dataQa: "Confirm account number",
+    isRequired: true,
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48025,6 +48042,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
+    isRequired: true,
     dataQa: "Account type",
     options: [{
       text: "Select account type",
@@ -48062,7 +48080,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    isRequired: true
   })))));
 };