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

package/dist/index.esm.js

@@ -21732,6 +21732,7 @@ function adjustHue(degree, color) {
 
 // prettier-ignore
 var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
+var curriedAdjustHue$1 = curriedAdjustHue;
 
 function guard(lowerBoundary, upperBoundary, value) {
   return Math.max(lowerBoundary, Math.min(upperBoundary, value));
@@ -21770,6 +21771,7 @@ function darken(amount, color) {
 
 // prettier-ignore
 var curriedDarken = curry /* ::<number | string, string, string> */(darken);
+var curriedDarken$1 = curriedDarken;
 
 /**
  * Decreases the intensity of a color. Its range is between 0 to 1. The first
@@ -51527,47 +51529,218 @@ var ContactCard = function ContactCard(_ref) {
   })))));
 };
 
+// Colors
 var heroPrimaryColor = ROYAL_BLUE_VIVID;
-var heroSecondaryColor = MATISSE_BLUE;
 var heroTextColor = WHITE;
-var fallbackValues$11 = {
-  heroPrimaryColor: heroPrimaryColor,
-  heroSecondaryColor: heroSecondaryColor,
-  heroTextColor: heroTextColor
+
+// Font Sizes
+var headingFontSize = {
+  v1: {
+    mobile: "3.00rem",
+    desktop: "3.50rem"
+  },
+  v2: {
+    mobile: "2.50rem",
+    desktop: "3.50rem"
+  }
+};
+var subheadingFontSize = {
+  v1: {
+    mobile: "2.00rem",
+    desktop: "2.50rem"
+  }
+};
+var descriptionFontSize = {
+  v1: {
+    mobile: FONT_SIZE.MD,
+    desktop: FONT_SIZE.XL
+  },
+  v2: {
+    mobile: FONT_SIZE.LG,
+    desktop: FONT_SIZE.XL
+  }
 };
 
-var _excluded$P = ["variant", "isMobile"];
+// Line Heights
+var headingLineHeight = {
+  v1: {
+    mobile: 1.25,
+    desktop: 1.15
+  },
+  v2: {
+    mobile: 1.25,
+    desktop: 1.15
+  }
+};
+var subheadingLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.15
+  }
+};
+var descriptionLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.5
+  },
+  v2: {
+    mobile: 1.5,
+    desktop: 1.5
+  }
+};
+
+// Alignment
+var textAlign$2 = {
+  v1: {
+    mobile: "left",
+    desktop: "left"
+  },
+  v2: {
+    mobile: "left",
+    desktop: "center"
+  }
+};
+var justifyContent = {
+  v1: {
+    mobile: "flex-start",
+    desktop: "flex-start"
+  },
+  v2: {
+    mobile: "flex-start",
+    desktop: "center"
+  }
+};
+var fallbackValues$11 = {
+  // Colors
+  heroPrimaryColor: heroPrimaryColor,
+  heroTextColor: heroTextColor,
+  // Font sizes
+  headingFontSize: headingFontSize,
+  descriptionFontSize: descriptionFontSize,
+  subheadingFontSize: subheadingFontSize,
+  // Line heights
+  headingLineHeight: headingLineHeight,
+  subheadingLineHeight: subheadingLineHeight,
+  descriptionLineHeight: descriptionLineHeight,
+  // Alignment
+  textAlign: textAlign$2,
+  justifyContent: justifyContent
+};
+
+var _excluded$P = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
+  _excluded2$2 = ["theme", "isMobile"],
+  _excluded3 = ["theme", "isMobile"],
+  _excluded4 = ["theme", "isMobile"];
 var getHeroGradientStyles = function getHeroGradientStyles(_ref) {
   var variant = _ref.variant,
     isMobile = _ref.isMobile,
-    heroPrimaryColor = _ref.heroPrimaryColor,
-    heroSecondaryColor = _ref.heroSecondaryColor;
+    heroPrimaryColor = _ref.heroPrimaryColor;
   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 heroSecondaryColor = curriedDarken$1(0.18, curriedAdjustHue$1(-29, heroPrimaryColor));
   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];
+  return variant === "v1" ? isMobile ? v1GradientMobile : v1Gradient : v2Gradient;
 };
-var HeroDescription = styled(function (_ref2) {
+var getDeviceStyles = function getDeviceStyles(isMobile, theme) {
+  return isMobile ? theme.mobile : theme.desktop;
+};
+var HeroContainer = styled(function (_ref2) {
   var variant = _ref2.variant,
+    imageUrl = _ref2.imageUrl,
     isMobile = _ref2.isMobile,
+    theme = _ref2.theme,
+    extraStyles = _ref2.extraStyles,
     props = _objectWithoutProperties(_ref2, _excluded$P);
-  return /*#__PURE__*/React.createElement(Paragraph$1, props);
+  return /*#__PURE__*/React.createElement(Box, props);
 }).withConfig({
-  displayName: "HeroImagestyled__HeroDescription",
+  displayName: "HeroImagestyled__HeroContainer",
   componentId: "sc-oqear-0"
-})(["line-height:150%;font-size:", ";text-align:", ";font-size:", ";"], function (_ref3) {
-  var isMobile = _ref3.isMobile;
-  return !isMobile ? "1.25rem" : "inherit";
+})(["display:flex;background:", ";", ""], function (_ref3) {
+  var variant = _ref3.variant,
+    imageUrl = _ref3.imageUrl,
+    isMobile = _ref3.isMobile,
+    theme = _ref3.theme;
+  return "".concat(getHeroGradientStyles({
+    variant: variant,
+    isMobile: isMobile,
+    heroPrimaryColor: theme.heroPrimaryColor
+  }), ",\n    url(").concat(imageUrl, ") center / cover no-repeat, ").concat(theme.heroPrimaryColor);
 }, 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 extraStyles = _ref4.extraStyles;
+  return extraStyles;
+});
+var HeroHeading = styled(function (_ref5) {
+  var theme = _ref5.theme,
+    isMobile = _ref5.isMobile,
+    props = _objectWithoutProperties(_ref5, _excluded2$2);
+  return /*#__PURE__*/React.createElement(Title$1, props);
+}).withConfig({
+  displayName: "HeroImagestyled__HeroHeading",
+  componentId: "sc-oqear-1"
+})(["font-size:", ";color:", ";font-weight:", ";text-align:", ";line-height:", ";"], function (_ref6) {
+  var theme = _ref6.theme,
+    isMobile = _ref6.isMobile;
+  return getDeviceStyles(isMobile, theme.headingFontSize);
+}, function (_ref7) {
+  var color = _ref7.color;
+  return color;
+}, function (_ref8) {
+  var weight = _ref8.weight;
+  return weight;
+}, function (_ref9) {
+  var textAlign = _ref9.textAlign;
+  return textAlign;
+}, function (_ref10) {
+  var theme = _ref10.theme,
+    isMobile = _ref10.isMobile;
+  return getDeviceStyles(isMobile, theme.headingLineHeight);
+});
+var HeroSubheading = styled(function (_ref11) {
+  var theme = _ref11.theme,
+    isMobile = _ref11.isMobile,
+    props = _objectWithoutProperties(_ref11, _excluded3);
+  return /*#__PURE__*/React.createElement(Title$1, props);
+}).withConfig({
+  displayName: "HeroImagestyled__HeroSubheading",
+  componentId: "sc-oqear-2"
+})(["font-size:", ";color:", ";font-weight:", ";text-align:", ";line-height:", ";"], function (_ref12) {
+  var theme = _ref12.theme,
+    isMobile = _ref12.isMobile;
+  return getDeviceStyles(isMobile, theme.subheadingFontSize);
+}, function (_ref13) {
+  var color = _ref13.color;
+  return color;
+}, function (_ref14) {
+  var weight = _ref14.weight;
+  return weight;
+}, function (_ref15) {
+  var textAlign = _ref15.textAlign;
+  return textAlign;
+}, function (_ref16) {
+  var theme = _ref16.theme,
+    isMobile = _ref16.isMobile;
+  return getDeviceStyles(isMobile, theme.subheadingLineHeight);
+});
+var HeroDescription = styled(function (_ref17) {
+  var theme = _ref17.theme,
+    isMobile = _ref17.isMobile,
+    props = _objectWithoutProperties(_ref17, _excluded4);
+  return /*#__PURE__*/React.createElement(Paragraph$1, props);
+}).withConfig({
+  displayName: "HeroImagestyled__HeroDescription",
+  componentId: "sc-oqear-3"
+})(["line-height:", ";font-size:", ";text-align:", ";"], function (_ref18) {
+  var theme = _ref18.theme,
+    isMobile = _ref18.isMobile;
+  return getDeviceStyles(isMobile, theme.descriptionLineHeight);
+}, function (_ref19) {
+  var theme = _ref19.theme,
+    isMobile = _ref19.isMobile;
+  return getDeviceStyles(isMobile, theme.descriptionFontSize);
+}, function (_ref20) {
+  var theme = _ref20.theme,
+    isMobile = _ref20.isMobile;
+  return getDeviceStyles(isMobile, theme.textAlign);
 });
 
 var HeroImage = function HeroImage(_ref) {
@@ -51591,57 +51764,60 @@ var HeroImage = function HeroImage(_ref) {
     _ref$secondaryHeading = _ref.secondaryHeadingVariant,
     secondaryHeadingVariant = _ref$secondaryHeading === void 0 ? "h2" : _ref$secondaryHeading,
     extraStyles = _ref.extraStyles;
-  var _useContext = useContext(ThemeContext),
-    isMobile = _useContext.isMobile;
-  var gradientStyles = getHeroGradientStyles({
+  var themeContext = useContext(ThemeContext);
+  var isMobile = themeContext.isMobile;
+  return /*#__PURE__*/React.createElement(HeroContainer, {
     variant: variant,
-    isMobile: isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor,
-    heroSecondaryColor: themeValues.heroSecondaryColor
-  });
-  return /*#__PURE__*/React.createElement(Box, {
     minWidth: minWidth,
     minHeight: minHeight,
     padding: isMobile ? "2rem" : "3rem 2rem",
-    extraStyles: "\n        display: flex;\n        background: ".concat(gradientStyles, ",\n          url(").concat(imageUrl, ") center / cover no-repeat, ").concat(themeValues.heroPrimaryColor, ";\n        ").concat(extraStyles, "\n      ")
+    extraStyles: extraStyles,
+    imageUrl: imageUrl,
+    isMobile: isMobile,
+    theme: themeValues
   }, /*#__PURE__*/React.createElement(Center, {
     maxWidth: contentMaxWidth,
     width: "100%",
     intrinsic: true,
-    extraStyles: "\n          flex-flow: unset;\n          justify-content: ".concat(variant === "v2" ? "center" : "flex-start", ";\n          flex-wrap: nowrap;\n        ")
+    extraStyles: "\n          flex-flow: unset;\n          justify-content: ".concat(getDeviceStyles(isMobile, themeValues.justifyContent), ";\n          flex-wrap: nowrap;\n        ")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: contentSpacing,
     extraStyles: "max-width: ".concat(isMobile || variant === "v2" ? "100%" : "50%", ";")
   }, variant === "v1" ? /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
-  }, heading && /*#__PURE__*/React.createElement(Title$1, {
+  }, heading && /*#__PURE__*/React.createElement(HeroHeading, {
     variant: "hero",
     as: headingVariant,
     weight: FONT_WEIGHT_BOLD,
     color: themeValues.heroTextColor,
-    extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
-  }, heading), subheading && /*#__PURE__*/React.createElement(Title$1, {
+    textAlign: getDeviceStyles(isMobile, themeValues.textAlign),
+    isMobile: isMobile,
+    theme: themeValues
+  }, heading), subheading && /*#__PURE__*/React.createElement(HeroSubheading, {
     variant: "large",
     as: secondaryHeadingVariant,
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: isMobile ? "2rem" : "2.5rem",
+    textAlign: getDeviceStyles(isMobile, themeValues.textAlign),
     color: themeValues.heroTextColor,
-    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
-  }, subheading)) : /*#__PURE__*/React.createElement(React.Fragment, null, heading && /*#__PURE__*/React.createElement(Title$1, {
+    isMobile: isMobile,
+    theme: themeValues
+  }, subheading)) : /*#__PURE__*/React.createElement(React.Fragment, null, heading && /*#__PURE__*/React.createElement(HeroHeading, {
     variant: "hero",
     as: headingVariant,
     weight: FONT_WEIGHT_BOLD,
     color: themeValues.heroTextColor,
-    extraStyles: "text-align: center; line-height: ".concat(isMobile ? "125%" : "115%", ";")
+    textAlign: getDeviceStyles(isMobile, themeValues.textAlign),
+    isMobile: isMobile,
+    theme: themeValues
   }, heading)), description && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(HeroDescription, {
     color: themeValues.heroTextColor,
     isMobile: isMobile,
-    variant: variant
+    theme: themeValues
   }, description)))));
 };
-var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11));
+var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
 
 var pageBackground = "#FBFCFD";
 var fallbackValues$12 = {