@thecb/components 12.0.0 → 12.0.1

package/dist/index.cjs.js

@@ -22119,7 +22119,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22178,6 +22178,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     hidden = _ref5$hidden === void 0 ? false : _ref5$hidden,
     _ref5$error = _ref5.error,
     error = _ref5$error === void 0 ? false : _ref5$error,
+    _ref5$isRequired = _ref5.isRequired,
+    isRequired = _ref5$isRequired === void 0 ? false : _ref5$isRequired,
     _ref5$checkboxMargin = _ref5.checkboxMargin,
     checkboxMargin = _ref5$checkboxMargin === void 0 ? "0 16px 0 0" : _ref5$checkboxMargin,
     extraStyles = _ref5.extraStyles,
@@ -22206,6 +22208,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     ref: ref,
     padding: "0",
     tabIndex: "0",
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-required": isRequired || undefined,
+    "aria-invalid": error,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
+    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
     onFocus: function onFocus() {
       return setFocused(true);
     },
@@ -22226,19 +22235,16 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledById,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
-    "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    required: isRequired,
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
-    role: "checkbox",
+    "aria-hidden": "true",
     error: error,
     disabled: disabled,
     checked: checked,
-    "aria-checked": checked,
     focused: focused,
     defaultStyles: themeValues.defaultStyles,
     checkedStyles: themeValues.checkedStyles,
@@ -25975,6 +25981,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-labelledby": ariaLabelledBy === undefined ? createIdFromString(labelTextWhenNoError) : ariaLabelledBy,
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
+    "aria-required": isRequired,
     onChange: function onChange(value) {
       return setValue(value);
     },
@@ -26007,6 +26014,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-labelledby": ariaLabelledBy === undefined ? createIdFromString(labelTextWhenNoError) : ariaLabelledBy,
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
+    "aria-required": isRequired,
     onChange: function onChange(e) {
       return setValue(e.target.value);
     },
@@ -48169,7 +48177,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     _ref$modalTitle = _ref.modalTitle,
     modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showTerms = _useState2[0],
@@ -48202,7 +48212,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
     extraStyles: "align-self: flex-start;",
-    labelledById: TermsAndConditionsTitleDivId
+    labelledById: TermsAndConditionsTitleDivId,
+    isRequired: isRequired
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -49360,7 +49371,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "given-name",
-    dataQa: "First name"
+    dataQa: "First name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last name",
     errorMessages: lastNameErrorMessages,
@@ -49371,7 +49383,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "family-name",
-    dataQa: "Last name"
+    dataQa: "Last name",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
@@ -49384,7 +49397,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     type: "email",
     isEmail: true,
     autocompleteValue: "email",
-    dataQa: "Email address"
+    dataQa: "Email address",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -49396,7 +49410,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     },
     type: "password",
     autocompleteValue: "new-password",
-    dataQa: "Password"
+    dataQa: "Password",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -49408,7 +49423,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     },
     type: "password",
     autocompleteValue: "new-password",
-    dataQa: "Confirm password"
+    dataQa: "Confirm password",
+    isRequired: true
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {