@thecb/components 11.2.6-beta.3 → 11.2.6-beta.5

package/dist/index.esm.js

@@ -6248,18 +6248,6 @@ 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,
@@ -6281,8 +6269,7 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor,
-  getNextHeading: getNextHeading
+  adjustHexColor: adjustHexColor
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -20715,8 +20702,8 @@ var TitleText = styled.h1.withConfig({
 // Comments assume desktop base font size of 16px, mobile base font size of 14px
 
 var fontSize$1 = {
-  hero: "3rem",
-  // 48px
+  hero: "3.5rem",
+  // 56px
   large: "1.5rem",
   // 24px (at base font size of 16px)
   small: "1.25rem" // 20px
@@ -20727,8 +20714,8 @@ var fontFamily$1 = {
   small: "Public Sans"
 };
 var mobileFontSize = {
-  hero: "2.5rem",
-  // 40px
+  hero: "3rem",
+  // 48px
   large: "1.5rem",
   // 21px (at base font size of 14px)
   small: "1.2142rem" // 17px
@@ -51550,12 +51537,11 @@ var fallbackValues$11 = {
 };
 
 var getHeroImageVariantStyles = function getHeroImageVariantStyles(_ref) {
-  var imageUrl = _ref.imageUrl,
+  var variant = _ref.variant,
+    imageUrl = _ref.imageUrl,
     isMobile = _ref.isMobile,
-    variant = _ref.variant,
-    heroPrimaryColor = _ref.heroPrimaryColor,
-    heroSecondaryColor = _ref.heroSecondaryColor;
-  return css(["background:", ",url(", ") center / cover no-repeat,", ";"], !isMobile ? "linear-gradient(\n            90deg,\n            ".concat(heroPrimaryColor, " 33%,\n            transparent 100%\n            )") : "linear-gradient(\n            ".concat(rgba$1(heroPrimaryColor, 0.8), ",\n            ").concat(rgba$1(heroPrimaryColor, 0.8), "\n            )"), imageUrl, heroPrimaryColor);
+    heroPrimaryColor = _ref.heroPrimaryColor;
+  return "\n    background: ".concat(!isMobile ? "linear-gradient(\n            90deg,\n            ".concat(heroPrimaryColor, " 33%,\n            transparent 100%\n            )") : "linear-gradient(\n            ".concat(rgba$1(heroPrimaryColor, 0.8), ",\n            ").concat(rgba$1(heroPrimaryColor, 0.8), "\n            )"), ",\n      url(").concat(imageUrl, ") center / cover no-repeat, ").concat(heroPrimaryColor, ";\n  ");
 };
 var HeroImageContainer = styled(Box).withConfig({
   displayName: "HeroImagestyled__HeroImageContainer",
@@ -51563,67 +51549,70 @@ var HeroImageContainer = styled(Box).withConfig({
 })(["display:flex;"]);
 
 var HeroImage = function HeroImage(_ref) {
-  var themeValues = _ref.themeValues,
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "v1" : _ref$variant,
+    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$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? "100%" : _ref$minWidth,
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? "auto" : _ref$minHeight,
+    _ref$contentMaxWidth = _ref.contentMaxWidth,
+    contentMaxWidth = _ref$contentMaxWidth === void 0 ? "76.5rem" : _ref$contentMaxWidth,
     _ref$contentSpacing = _ref.contentSpacing,
     contentSpacing = _ref$contentSpacing === void 0 ? "0.5rem" : _ref$contentSpacing,
-    paddingOverride = _ref.paddingOverride;
+    _ref$headingVariant = _ref.headingVariant,
+    headingVariant = _ref$headingVariant === void 0 ? "h1" : _ref$headingVariant,
+    _ref$secondaryHeading = _ref.secondaryHeadingVariant,
+    secondaryHeadingVariant = _ref$secondaryHeading === void 0 ? "h2" : _ref$secondaryHeading,
+    extraStyles = _ref.extraStyles;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var secondaryHeadingVariant = getNextHeading(headingVariant);
+  var heroImageVariantStyles = getHeroImageVariantStyles({
+    variant: variant,
+    imageUrl: imageUrl,
+    isMobile: isMobile,
+    heroPrimaryColor: themeValues.heroPrimaryColor
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImageContainer, {
     minWidth: minWidth,
     minHeight: minHeight,
-    padding: paddingOverride !== null && paddingOverride !== void 0 ? paddingOverride : isMobile ? "2rem" : "3rem 2rem",
-    extraStyles: getHeroImageVariantStyles({
-      imageUrl: imageUrl,
-      isMobile: isMobile,
-      variant: variant,
-      heroPrimaryColor: themeValues.heroPrimaryColor,
-      heroSecondaryColor: themeValues.heroSecondaryColor
-    })
+    padding: isMobile ? "2rem" : "3rem 2rem",
+    extraStyles: "".concat(heroImageVariantStyles, " ").concat(extraStyles)
   }, /*#__PURE__*/React.createElement(Center, {
-    maxWidth: "78.5rem",
+    maxWidth: contentMaxWidth,
     width: "100%",
     intrinsic: true,
-    extraStyles: "\n            flex-flow: unset;\n            justify-content: flex-start;\n            flex-wrap: nowrap;\"\n          "
+    extraStyles: "\n            flex-flow: unset;\n            justify-content: flex-start;\n            flex-wrap: nowrap;\n          "
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: contentSpacing,
     extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
-  }, /*#__PURE__*/React.createElement(Title$1, {
+  }, heading && /*#__PURE__*/React.createElement(Title$1, {
     variant: "hero",
     as: headingVariant,
     weight: FONT_WEIGHT_BOLD,
     color: themeValues.heroTextColor,
     extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
-  }, heading), /*#__PURE__*/React.createElement(Title$1, {
+  }, heading), subheading && /*#__PURE__*/React.createElement(Title$1, {
     variant: "large",
     as: secondaryHeadingVariant,
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: isMobile ? "1.5rem" : "2rem",
+    fontSize: isMobile ? "2rem" : "2.5rem",
     color: themeValues.heroTextColor,
     extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
-  }, subheading)), /*#__PURE__*/React.createElement(Box, {
+  }, subheading)), description && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Paragraph$1, {
     color: themeValues.heroTextColor,
-    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", "; ").concat(!isMobile && "font-size: 1.125rem;")
+    extraStyles: "line-height: 150%; ".concat(!isMobile ? "font-size: 1.25rem;" : "")
   }, description))))));
 };
-var HeroImage$1 = themeComponent(HeroImage, "HeroImage", fallbackValues$11);
+var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11));
 
 var pageBackground = "#FBFCFD";
 var fallbackValues$12 = {