@thecb/components 12.0.0-beta.10 → 12.0.0-beta.11

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);
     },
@@ -45827,7 +45835,6 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
-var textColor$5 = BRIGHT_GREY;
 var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
@@ -45835,37 +45842,36 @@ var fallbackValues$L = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
-  color: color$c,
-  textColor: textColor$5
+  color: color$c
 };
 
-var StyledAnchor = styled__default("a").withConfig({
-  displayName: "LinkCardstyled__StyledAnchor",
+var Container = styled__default(Box).withConfig({
+  displayName: "LinkCardstyled__Container",
   componentId: "sc-l5q1h2-0"
-})(["", ""], function (_ref) {
-  var disabled = _ref.$disabled,
-    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  ");
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;", ""], function (_ref) {
+  var isDisabled = _ref.isDisabled,
+    theme = _ref.theme;
+  return "\n    background-color: ".concat(isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n    border: 1px solid ").concat(isDisabled ? theme.disabledBorderColor : theme.borderColor, ";\n  ");
+}, function (_ref2) {
+  var isDisabled = _ref2.isDisabled,
+    theme = _ref2.theme;
+  return isDisabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\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\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        }\n      ");
 });
 var Title$2 = styled__default(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["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;
+})(["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:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref3) {
+  var isDisabled = _ref3.isDisabled,
+    theme = _ref3.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
 });
 var Subtitle = styled__default(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;
+})(["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:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
+  var isDisabled = _ref4.isDisabled,
+    theme = _ref4.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
 });
 var Footer = styled__default(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -45884,7 +45890,7 @@ var LinkCard = function LinkCard(_ref) {
     leftContent = _ref.leftContent,
     showRight = _ref.showRight,
     rightContent = _ref.rightContent,
-    href = _ref.href,
+    onClick = _ref.onClick,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
     _ref$extraHoverStyles = _ref.extraHoverStyles,
@@ -45894,26 +45900,32 @@ var LinkCard = function LinkCard(_ref) {
     themeValues = _ref.themeValues,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
+    _ref$titlePadding = _ref.titlePadding,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$isExternalLink = _ref.isExternalLink,
     isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   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, "-");
-  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,
+  return /*#__PURE__*/React__default.createElement(Container, {
+    borderRadius: "8px",
+    dataQa: "link-card-".concat(locatorSlug),
+    width: "100%",
+    maxWidth: isMobile ? "100%" : "288px",
+    minWidth: isMobile ? "240px" : "288px",
+    minHeight: "141px",
+    padding: "24px",
+    theme: themeValues,
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
+    onClick: disabled ? noop$1 : onClick,
     "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
+    isDisabled: disabled,
+    role: "group",
+    "aria-label": "".concat(title, ", ").concat(subtitle)
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -45928,9 +45940,9 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    $theme: themeValues,
+    theme: themeValues,
     margin: 0,
-    $disabled: disabled
+    isDisabled: disabled
   }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     linkColor: themeValues.color,
     text: locatorSlug,
@@ -45943,8 +45955,8 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    $theme: themeValues,
-    $disabled: disabled
+    theme: themeValues,
+    isDisabled: disabled
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
@@ -48169,7 +48181,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 +48216,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 +49375,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 +49387,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 +49401,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 +49414,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 +49427,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, {
@@ -50927,7 +50947,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
 
 var TextWrapStyles = styled.css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
-var Container = styled__default(Box).withConfig({
+var Container$1 = styled__default(Box).withConfig({
   displayName: "ContactCardstyled__Container",
   componentId: "sc-1v62a1n-0"
 })(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;", ""], function (_ref) {
@@ -50965,7 +50985,7 @@ var ContactCard = function ContactCard(_ref) {
     externalLinkColor: ROYAL_BLUE_VIVID
   };
   var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
-  return /*#__PURE__*/React__default.createElement(Container, {
+  return /*#__PURE__*/React__default.createElement(Container$1, {
     borderRadius: "8px",
     background: WHITE,
     boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
@@ -51479,12 +51499,12 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 var hoverColor$6 = ROYAL_BLUE;
 var activeColor$b = CONGRESS_BLUE;
 var linkColor$6 = ROYAL_BLUE_VIVID;
-var textColor$6 = CHARADE_GREY;
+var textColor$5 = CHARADE_GREY;
 var fallbackValues$12 = {
   linkColor: linkColor$6,
   hoverColor: hoverColor$6,
   activeColor: activeColor$b,
-  textColor: textColor$6
+  textColor: textColor$5
 };
 
 var TOOLTIP_THEME_SOURCE = "Popover";