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

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"
@@ -27291,7 +27296,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$required = _ref2.required,
+      required = _ref2$required === void 0 ? false : _ref2$required;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27351,6 +27358,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
     type: "radio",
     id: "radio-".concat(name),
     disabled: disabled,
+    required: required,
+    "aria-required": required,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
     tabIndex: "-1"
@@ -38056,7 +38065,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 +39416,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 +39427,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 +39439,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 +39451,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 +39465,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 +47751,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 +47865,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 +47972,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 +47995,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 +48007,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 +48016,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 +48035,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 +48046,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 +48084,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    isRequired: true
   })))));
 };
 
@@ -48178,7 +48201,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name"
+    autocompleteValue: "cc-name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48191,7 +48215,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number"
+    autocompleteValue: "cc-number",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48209,7 +48234,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48222,7 +48248,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-csc"
+    autocompleteValue: "cc-csc",
+    isRequired: true
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48238,7 +48265,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "billing postal-code"
+    autocompleteValue: "billing postal-code",
+    isRequired: true
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48254,7 +48282,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    isRequired: true
   })))));
 };
 
@@ -48707,7 +48736,8 @@ var RadioSection = function RadioSection(_ref) {
       toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      tabIndex: "-1"
+      tabIndex: "-1",
+      required: section === null || section === void 0 ? void 0 : section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48719,7 +48749,7 @@ var RadioSection = function RadioSection(_ref) {
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem",
       "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
-      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
+      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || "group"
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,