@thecb/components 11.2.6 → 11.2.8-beta.0

package/dist/index.esm.js

@@ -51536,17 +51536,39 @@ var fallbackValues$11 = {
   heroTextColor: heroTextColor
 };
 
-var getHeroImageVariantStyles = function getHeroImageVariantStyles(_ref) {
+var _excluded$P = ["variant", "isMobile"];
+var getHeroGradientStyles = function getHeroGradientStyles(_ref) {
   var variant = _ref.variant,
-    imageUrl = _ref.imageUrl,
     isMobile = _ref.isMobile,
-    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",
+    heroPrimaryColor = _ref.heroPrimaryColor,
+    heroSecondaryColor = _ref.heroSecondaryColor;
+  var v1Gradient = "linear-gradient(\n    90deg,\n    ".concat(heroPrimaryColor, " 33%,\n    transparent 100%\n  )");
+  var v1GradientMobile = "linear-gradient(\n    ".concat(rgba$1(heroPrimaryColor, 0.8), ",\n    ").concat(rgba$1(heroPrimaryColor, 0.8), "\n  )");
+  var v2Gradient = "linear-gradient(\n    90deg,\n    ".concat(rgba$1(heroPrimaryColor, 0.8), " 0%,\n    ").concat(rgba$1(heroSecondaryColor, 0.8), " 100%\n  )");
+  return {
+    v1: isMobile ? v1GradientMobile : v1Gradient,
+    v2: v2Gradient
+  }[variant];
+};
+var HeroDescription = styled(function (_ref2) {
+  var variant = _ref2.variant,
+    isMobile = _ref2.isMobile,
+    props = _objectWithoutProperties(_ref2, _excluded$P);
+  return /*#__PURE__*/React.createElement(Paragraph$1, props);
+}).withConfig({
+  displayName: "HeroImagestyled__HeroDescription",
   componentId: "sc-oqear-0"
-})(["display:flex;"]);
+})(["line-height:150%;font-size:", ";text-align:", ";font-size:", ";"], function (_ref3) {
+  var isMobile = _ref3.isMobile;
+  return !isMobile ? "1.25rem" : "inherit";
+}, function (_ref4) {
+  var variant = _ref4.variant;
+  return variant === "v2" ? "center" : "inherit";
+}, function (_ref5) {
+  var variant = _ref5.variant,
+    isMobile = _ref5.isMobile;
+  return variant === "v2" ? isMobile ? "1.125rem" : "1.25rem" : "inherit";
+});
 
 var HeroImage = function HeroImage(_ref) {
   var _ref$variant = _ref.variant,
@@ -51571,26 +51593,26 @@ var HeroImage = function HeroImage(_ref) {
     extraStyles = _ref.extraStyles;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var heroImageVariantStyles = getHeroImageVariantStyles({
+  var gradientStyles = getHeroGradientStyles({
     variant: variant,
-    imageUrl: imageUrl,
     isMobile: isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor
+    heroPrimaryColor: themeValues.heroPrimaryColor,
+    heroSecondaryColor: themeValues.heroSecondaryColor
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImageContainer, {
+  return /*#__PURE__*/React.createElement(Box, {
     minWidth: minWidth,
     minHeight: minHeight,
     padding: isMobile ? "2rem" : "3rem 2rem",
-    extraStyles: "".concat(heroImageVariantStyles, " ").concat(extraStyles)
+    extraStyles: "\n        display: flex;\n        background: ".concat(gradientStyles, ",\n          url(").concat(imageUrl, ") center / cover no-repeat, ").concat(themeValues.heroPrimaryColor, ";\n        ").concat(extraStyles, "\n      ")
   }, /*#__PURE__*/React.createElement(Center, {
     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: ".concat(variant === "v2" ? "center" : "flex-start", ";\n          flex-wrap: nowrap;\n        ")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: contentSpacing,
-    extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
-  }, /*#__PURE__*/React.createElement(Stack, {
+    extraStyles: "max-width: ".concat(isMobile || variant === "v2" ? "100%" : "50%", ";")
+  }, variant === "v1" ? /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, heading && /*#__PURE__*/React.createElement(Title$1, {
     variant: "hero",
@@ -51605,12 +51627,19 @@ var HeroImage = function HeroImage(_ref) {
     fontSize: isMobile ? "2rem" : "2.5rem",
     color: themeValues.heroTextColor,
     extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
-  }, subheading)), description && /*#__PURE__*/React.createElement(Box, {
+  }, subheading)) : /*#__PURE__*/React.createElement(React.Fragment, null, heading && /*#__PURE__*/React.createElement(Title$1, {
+    variant: "hero",
+    as: headingVariant,
+    weight: FONT_WEIGHT_BOLD,
+    color: themeValues.heroTextColor,
+    extraStyles: "text-align: center; line-height: ".concat(isMobile ? "125%" : "115%", ";")
+  }, heading)), description && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, /*#__PURE__*/React.createElement(HeroDescription, {
     color: themeValues.heroTextColor,
-    extraStyles: "line-height: 150%; ".concat(!isMobile ? "font-size: 1.25rem;" : "")
-  }, description))))));
+    isMobile: isMobile,
+    variant: variant
+  }, description)))));
 };
 var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11));