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

package/dist/index.esm.js

@@ -27288,7 +27288,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,
@@ -27348,6 +27350,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"
@@ -48189,7 +48193,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.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48202,7 +48207,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocompleteValue: "cc-number"
+    autocompleteValue: "cc-number",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48220,7 +48226,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocompleteValue: "cc-exp"
+    autocompleteValue: "cc-exp",
+    isRequired: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48233,7 +48240,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.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48249,7 +48257,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.createElement(Cluster, {
     childGap: "4px",
     align: "center"
@@ -48265,7 +48274,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    isRequired: true
   })))));
 };
 
@@ -48718,7 +48728,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.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
@@ -48730,7 +48741,7 @@ var RadioSection = function RadioSection(_ref) {
     }, section.title))), section.rightIcons && /*#__PURE__*/React.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.createElement(RightIcon, {
         src: icon.img,