@thecb/components 12.0.1-beta.1 → 12.0.1

package/dist/index.esm.js

@@ -22111,7 +22111,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.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22170,6 +22170,8 @@ var Checkbox = /*#__PURE__*/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,
@@ -22198,6 +22200,13 @@ var Checkbox = /*#__PURE__*/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);
     },
@@ -22218,19 +22227,16 @@ var Checkbox = /*#__PURE__*/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,
@@ -25967,6 +25973,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);
     },
@@ -25999,6 +26006,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);
     },
@@ -45831,34 +45839,37 @@ var fallbackValues$L = {
   textColor: textColor$5
 };
 
-var getCardBaseStyles = function getCardBaseStyles(theme, disabled, extraStyles) {
-  return "\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  font-size: inherit;\n  color: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(disabled ? "pointer-events: none;" : "", "\n  ").concat(extraStyles || "", "\n");
-};
-var getCardHoverActiveStyles = function getCardHoverActiveStyles(theme, disabled, hoverStyles, activeStyles) {
-  if (disabled) {
-    return "\n      &:hover,\n      &:active {\n        cursor: default;\n        box-shadow: none;\n        border: 1px solid ".concat(theme.disabledBorderColor, ";\n      }\n    ");
-  }
-  return "\n    &:hover,\n    &:active {\n      cursor: pointer;\n      box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n        0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n        0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n        0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n        0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n        0px 80px 33px 0px rgba(41, 42, 51, 0);\n    }\n    ".concat(hoverStyles || "", "\n\n    &:hover:not(:active) {\n      border: 1px solid ").concat(theme.borderColor, ";\n    }\n\n    &:active {\n      background-color: ").concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.borderColor, ";\n      ").concat(activeStyles || "", "\n    }\n  ");
-};
-var Title$2 = styled(Heading$1).withConfig({
-  displayName: "LinkCardstyled__Title",
+var StyledAnchor = styled("a").withConfig({
+  displayName: "LinkCardstyled__StyledAnchor",
   componentId: "sc-l5q1h2-0"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref) {
+})(["", ""], function (_ref) {
   var disabled = _ref.$disabled,
-    theme = _ref.$theme;
-  return disabled ? theme.disabledColor : theme.color;
+    theme = _ref.$theme,
+    extraStyles = _ref.$extraStyles,
+    disabledStyles = _ref.$disabledStyles,
+    hoverStyles = _ref.$hoverStyles,
+    activeStyles = _ref.$activeStyles;
+  return "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(extraStyles || "", "\n\n  ").concat(disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n          ").concat(disabledStyles || "", "\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n        ".concat(hoverStyles || "", "\n\n        &:hover:not(:active) {\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n          ").concat(activeStyles || "", "\n        }\n      "), "\n  ");
 });
-var Subtitle = styled(Paragraph$1).withConfig({
-  displayName: "LinkCardstyled__Subtitle",
+var Title$2 = styled(Heading$1).withConfig({
+  displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref2) {
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref2) {
   var disabled = _ref2.$disabled,
     theme = _ref2.$theme;
+  return disabled ? theme.disabledColor : theme.color;
+});
+var Subtitle = styled(Paragraph$1).withConfig({
+  displayName: "LinkCardstyled__Subtitle",
+  componentId: "sc-l5q1h2-2"
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref3) {
+  var disabled = _ref3.$disabled,
+    theme = _ref3.$theme;
   return disabled ? theme.disabledColor : theme.textColor;
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
-  componentId: "sc-l5q1h2-2"
+  componentId: "sc-l5q1h2-3"
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
@@ -45889,9 +45900,21 @@ var LinkCard = function LinkCard(_ref) {
     isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
   var regex = /\W/g;
   var locatorSlug = title === null || title === void 0 || (_title$toLowerCase = title.toLowerCase) === null || _title$toLowerCase === void 0 || (_title$toLowerCase = _title$toLowerCase.call(title)) === null || _title$toLowerCase === void 0 || (_title$toLowerCase$re = _title$toLowerCase.replaceAll) === null || _title$toLowerCase$re === void 0 ? void 0 : _title$toLowerCase$re.call(_title$toLowerCase, regex, "-");
-  var baseStyles = getCardBaseStyles(themeValues, disabled, extraStyles);
-  var hoverActiveStyles = getCardHoverActiveStyles(themeValues, disabled, extraHoverStyles, extraActiveStyles);
-  var cardContent = /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(StyledAnchor, {
+    key: "link-card-".concat(locatorSlug),
+    href: disabled ? undefined : href,
+    rel: isExternalLink ? "noopener noreferrer" : undefined,
+    target: isExternalLink ? "_blank" : undefined,
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled,
+    $disabled: disabled,
+    "aria-label": "".concat(title, ", ").concat(subtitle),
+    "data-qa": "link-card-".concat(locatorSlug),
+    $theme: themeValues,
+    $extraStyles: disabled ? "pointer-events: none; ".concat(extraStyles) : extraStyles,
+    $hoverStyles: extraHoverStyles,
+    $activeStyles: extraActiveStyles
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
     justify: "space-between",
@@ -45933,30 +45956,7 @@ var LinkCard = function LinkCard(_ref) {
     justify: "space-between"
   }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React__default.createElement(Box, {
     extraStyles: "margin-right: auto;"
-  }), showRight && !!rightContent && rightContent)));
-  if (isExternalLink) {
-    return /*#__PURE__*/React__default.createElement(ExternalLink, {
-      key: "link-card-".concat(locatorSlug),
-      href: disabled ? "" : href,
-      newTab: true,
-      isUnderlined: false,
-      tabIndex: disabled ? "-1" : "0",
-      ariaLabel: "".concat(title, ", ").concat(subtitle),
-      dataQa: "link-card-".concat(locatorSlug),
-      extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
-    }, cardContent);
-  }
-  return /*#__PURE__*/React__default.createElement(InternalLink, {
-    key: "link-card-".concat(locatorSlug),
-    to: disabled ? "" : href,
-    isUnderlined: false,
-    hoverUnderline: false,
-    tabIndex: disabled ? "-1" : "0",
-    "aria-label": "".concat(title, ", ").concat(subtitle),
-    "aria-disabled": disabled,
-    "data-qa": "link-card-".concat(locatorSlug),
-    extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
-  }, cardContent);
+  }), showRight && !!rightContent && rightContent))));
 };
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
 
@@ -48169,7 +48169,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showTerms = _useState2[0],
@@ -48202,7 +48204,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 +49363,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 +49375,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 +49389,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 +49402,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 +49415,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, {