@thecb/components 11.2.6-beta.0 → 11.2.6-beta.1

package/dist/index.esm.js

@@ -6248,6 +6248,18 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
 
+/**
+ * Gets the next heading level in the sequence.
+ *
+ * @param {string} heading - The current heading level (e.g., "h1").
+ * @returns {string} - The next heading level in the sequence.
+ */
+var headingOrder = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var getNextHeading = function getNextHeading(heading) {
+  var index = headingOrder.indexOf(heading);
+  return index >= 0 && index < 5 ? headingOrder[index + 1] : headingOrder[5];
+};
+
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
   noop: noop$1,
@@ -6269,7 +6281,8 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor
+  adjustHexColor: adjustHexColor,
+  getNextHeading: getNextHeading
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -6509,18 +6522,24 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var CenterWrapper = styled.div.withConfig({
   displayName: "Centerstyled__CenterWrapper",
   componentId: "sc-vawqfc-0"
-})(["box-sizing:content-box;margin-left:auto;margin-right:auto;max-width:", ";padding-left:", ";padding-right:", ";", ";"], function (_ref) {
-  var maxWidth = _ref.maxWidth;
-  return maxWidth;
+})(["box-sizing:content-box;margin-left:auto;margin-right:auto;width:", ";max-width:", ";padding-left:", ";padding-right:", ";", ";", ""], function (_ref) {
+  var width = _ref.width;
+  return width || "auto";
 }, function (_ref2) {
-  var gutters = _ref2.gutters;
-  return gutters;
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth;
 }, function (_ref3) {
   var gutters = _ref3.gutters;
   return gutters;
 }, function (_ref4) {
-  var intrinsic = _ref4.intrinsic;
+  var gutters = _ref4.gutters;
+  return gutters;
+}, function (_ref5) {
+  var intrinsic = _ref5.intrinsic;
   return intrinsic ? "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  " : "";
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
 });
 
 var _excluded$4 = ["maxWidth", "gutters", "intrinsic", "children"];
@@ -22278,17 +22297,14 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref6) {
   var lineheight = _ref6.lineheight;
   return lineheight;
-}, function (_ref7) {
-  var isUnderlined = _ref7.isUnderlined;
-  return isUnderlined ? LINK_TEXT_DECORATION$3 : "none";
-}, function (_ref8) {
-  var hoverColor = _ref8.hoverColor;
+}, LINK_TEXT_DECORATION$3, function (_ref7) {
+  var hoverColor = _ref7.hoverColor;
   return hoverColor;
-}, LINK_TEXT_DECORATION$3, ROYAL_BLUE$1, LINK_TEXT_DECORATION$3, function (_ref9) {
-  var activeColor = _ref9.activeColor;
+}, LINK_TEXT_DECORATION$3, ROYAL_BLUE$1, LINK_TEXT_DECORATION$3, function (_ref8) {
+  var activeColor = _ref8.activeColor;
   return activeColor;
-}, function (_ref10) {
-  var extrastyles = _ref10.extrastyles;
+}, function (_ref9) {
+  var extrastyles = _ref9.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -22344,11 +22360,10 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     activeColor: themeValues.activeColor,
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
-    extrastyles: extraStyles,
+    extrastyles: "".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", " ").concat(extraStyles),
     rel: newTab ? "noopener" : "",
     "data-qa": dataQa,
     "aria-label": ariaLabel,
-    isUnderlined: isUnderlined,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))));
 });
@@ -22396,17 +22411,14 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref7) {
   var margin = _ref7.margin;
   return margin;
-}, function (_ref8) {
-  var isUnderlined = _ref8.isUnderlined;
-  return isUnderlined ? LINK_TEXT_DECORATION$4 : "none";
-}, function (_ref9) {
-  var hoverColor = _ref9.hoverColor;
+}, LINK_TEXT_DECORATION$4, function (_ref8) {
+  var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, LINK_TEXT_DECORATION$4, ROYAL_BLUE$2, LINK_TEXT_DECORATION$4, function (_ref10) {
-  var activeColor = _ref10.activeColor;
+}, LINK_TEXT_DECORATION$4, ROYAL_BLUE$2, LINK_TEXT_DECORATION$4, function (_ref9) {
+  var activeColor = _ref9.activeColor;
   return activeColor;
-}, function (_ref11) {
-  var extrastyles = _ref11.extrastyles;
+}, function (_ref10) {
+  var extrastyles = _ref10.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -22444,9 +22456,8 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: extraStyles,
+    extrastyles: "".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", " ").concat(extraStyles),
     "data-qa": dataQa,
-    isUnderlined: isUnderlined,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 });
@@ -51500,8 +51511,9 @@ var ContactCard = function ContactCard(_ref) {
     fullHeight: true
   }, links.map(function (link) {
     var linkID = createIdFromString(link.text, "contact-card-link");
-    return /*#__PURE__*/React.createElement(React.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
-      key: linkID,
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: linkID
+    }, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
       dataQa: linkID,
       href: link.link,
       newTab: true,
@@ -51514,7 +51526,6 @@ var ContactCard = function ContactCard(_ref) {
       text: link.text,
       ariaLabel: "(Opens in a new tab)"
     })) : /*#__PURE__*/React.createElement(InternalLink, {
-      key: linkID,
       to: link.link,
       dataQa: linkID,
       fontSize: FONT_SIZE.SM,
@@ -51538,10 +51549,11 @@ var fallbackValues$11 = {
 
 var getHeroImageVariantStyles = function getHeroImageVariantStyles(_ref) {
   var imageUrl = _ref.imageUrl,
+    isMobile = _ref.isMobile,
     variant = _ref.variant,
-    gradientPrimary = _ref.gradientPrimary,
-    gradientSecondary = _ref.gradientSecondary;
-  return "\n    background: linear-gradient(\n      90deg,\n      ".concat(gradientPrimary, " 33%,\n      rgba(59, 91, 219, 0) 100%\n    ),\n    url(").concat(imageUrl, ");\n    background-size: cover;\n  ");
+    gradientColorPrimary = _ref.gradientColorPrimary,
+    gradientColorSecondary = _ref.gradientColorSecondary;
+  return css(["background:", ",url(", ") center / cover no-repeat;"], !isMobile ? "linear-gradient(\n            90deg,\n            ".concat(gradientColorPrimary, " 33%,\n            transparent 100%\n            )") : "linear-gradient(\n            ".concat(rgba$1(gradientColorPrimary, 0.8), ",\n            ").concat(rgba$1(gradientColorPrimary, 0.8), "\n            )"), imageUrl);
 };
 var HeroImageContainer = styled(Box).withConfig({
   displayName: "HeroImagestyled__HeroImageContainer",
@@ -51551,57 +51563,62 @@ var HeroImageContainer = styled(Box).withConfig({
 var HeroImage = function HeroImage(_ref) {
   var themeValues = _ref.themeValues,
     heading = _ref.heading,
+    _ref$headingVariant = _ref.headingVariant,
+    headingVariant = _ref$headingVariant === void 0 ? "h2" : _ref$headingVariant,
     subheading = _ref.subheading,
     description = _ref.description,
     imageUrl = _ref.imageUrl,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "v1" : _ref$variant,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "4rem" : _ref$padding,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? "100%" : _ref$minWidth,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? "auto" : _ref$minHeight,
     _ref$contentSpacing = _ref.contentSpacing,
-    contentSpacing = _ref$contentSpacing === void 0 ? "0.5rem" : _ref$contentSpacing;
+    contentSpacing = _ref$contentSpacing === void 0 ? "0.5rem" : _ref$contentSpacing,
+    paddingOverride = _ref.paddingOverride;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
+  var secondaryHeadingVariant = getNextHeading(headingVariant);
   return /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement(HeroImageContainer, {
     minWidth: minWidth,
     minHeight: minHeight,
-    padding: padding,
+    padding: paddingOverride !== null && paddingOverride !== void 0 ? paddingOverride : isMobile ? "2rem" : "3rem 5.75rem",
     extraStyles: getHeroImageVariantStyles({
       imageUrl: imageUrl,
+      isMobile: isMobile,
       variant: variant,
-      gradientPrimary: themeValues.gradientColorPrimary,
-      gradientSecondary: themeValues.gradientColorSecondary
+      gradientColorPrimary: themeValues.gradientColorPrimary,
+      gradientColorSecondary: themeValues.gradientColorSecondary
     })
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    maxWidth: isMobile ? "100%" : "50%",
-    extraStyles: "display: flex; align-items: center;"
+  }, /*#__PURE__*/React.createElement(Center, {
+    maxWidth: "78.5rem",
+    width: "100%",
+    intrinsic: true,
+    extraStyles: "\n              flex-flow: unset;\n              justify-content: flex-start;\n              flex-wrap: nowrap;\"\n            "
   }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: contentSpacing
+    childGap: contentSpacing,
+    extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React.createElement(Title$1, {
     variant: "hero",
-    as: "h2",
-    weight: FONT_WEIGHT_SEMIBOLD,
+    as: headingVariant,
+    weight: FONT_WEIGHT_BOLD,
     color: themeValues.textColor,
-    extraStyles: "line-height: 115%;"
+    extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
   }, heading), /*#__PURE__*/React.createElement(Title$1, {
     variant: "large",
-    as: "h3",
+    as: secondaryHeadingVariant,
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: !isMobile && "2rem",
+    fontSize: isMobile ? "1.5rem" : "2rem",
     color: themeValues.textColor,
-    extraStyles: "line-height: 115%;"
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
   }, subheading)), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Paragraph$1, {
     color: themeValues.textColor,
-    extraStyles: "line-height: 150%; ".concat(!isMobile && "font-size: 1.125rem;")
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", "; ").concat(!isMobile && "font-size: 1.125rem;")
   }, description))))));
 };
 var HeroImage$1 = themeComponent(HeroImage, "HeroImage", fallbackValues$11);