@thecb/components 11.2.5-beta.2 → 11.2.6-beta.0

package/dist/index.cjs.js

@@ -20704,15 +20704,20 @@ var TitleText = styled__default.h1.withConfig({
 // Comments assume desktop base font size of 16px, mobile base font size of 14px
 
 var fontSize$1 = {
+  hero: "3rem",
+  // 48px
   large: "1.5rem",
   // 24px (at base font size of 16px)
   small: "1.25rem" // 20px
 };
 var fontFamily$1 = {
+  hero: "Public Sans",
   large: "Public Sans",
   small: "Public Sans"
 };
 var mobileFontSize = {
+  hero: "2.5rem",
+  // 40px
   large: "1.5rem",
   // 21px (at base font size of 14px)
   small: "1.2142rem" // 17px
@@ -49741,29 +49746,29 @@ var fallbackValues$U = {
 var BannerContainer = styled__default(Cluster).withConfig({
   displayName: "RegistrationBannerstyled__BannerContainer",
   componentId: "sc-1m1lm4y-0"
-})(["background:", ";padding:2rem;"], function (_ref) {
+})(["background:", ";padding:", ";"], function (_ref) {
   var themeValues = _ref.themeValues;
   return adjustHexColor(themeValues.background, 10, "lighten");
+}, function (_ref2) {
+  var isMobile = _ref2.isMobile;
+  return isMobile ? "1rem 2rem" : " 2rem 8.25rem";
 });
 var ContentContainer = styled__default(Cluster).withConfig({
   displayName: "RegistrationBannerstyled__ContentContainer",
   componentId: "sc-1m1lm4y-1"
-})(["padding:0;width:", ";> div{flex-direction:", ";}"], function (_ref2) {
-  var isMobile = _ref2.isMobile;
-  return isMobile ? "100%" : " 1224px";
-}, function (_ref3) {
+})(["padding:0;width:", ";> div{flex-direction:", ";}"], function (_ref3) {
   var isMobile = _ref3.isMobile;
+  return isMobile ? "296px" : " 1176px";
+}, function (_ref4) {
+  var isMobile = _ref4.isMobile;
   return isMobile ? "column" : "row";
 });
 var ButtonContainer = styled__default(Stack).withConfig({
   displayName: "RegistrationBannerstyled__ButtonContainer",
   componentId: "sc-1m1lm4y-2"
-})(["align-items:center;width:", ";padding-left:", ";> *{width:inherit;}"], function (_ref4) {
-  var isMobile = _ref4.isMobile;
-  return isMobile ? "100%" : "222px";
-}, function (_ref5) {
+})(["align-items:center;> a{width:", ";}"], function (_ref5) {
   var isMobile = _ref5.isMobile;
-  return isMobile ? "0" : "2rem";
+  return isMobile ? "296px" : "222px";
 });
 var RegisterLink = styled__default(ButtonWithLink).withConfig({
   displayName: "RegistrationBannerstyled__RegisterLink",
@@ -49796,8 +49801,7 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     align: "center",
     justify: "space-between",
     overflow: "visible",
-    isMobile: isMobile,
-    nowrap: true
+    isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     textAlign: "left"
@@ -49807,11 +49811,11 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
     variant: titleVariant,
     weight: FONT_WEIGHT_SEMIBOLD
-  }, "Register for a ", clientName, " Wallet"), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, "Register for a ", clientName, " Wallet Account"), /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "\n              display: block;\n              padding: ".concat(isMobile ? ".125rem 0 1rem" : "0", "\n            "),
-    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
+    fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.LG,
     color: themeValues.secondaryColor
-  }, "Save payment methods and billing information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React__default.createElement(ButtonContainer, {
+  }, "Save payment methods and information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React__default.createElement(ButtonContainer, {
     justify: "space-between",
     fullHeight: true,
     childGap: "0.5rem",
@@ -49824,8 +49828,7 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     url: registrationLink
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
-    align: "center",
-    extraStyles: "min-width: 100%"
+    align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "margin-right: 0.5rem",
     fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
@@ -51532,8 +51535,87 @@ var ContactCard = function ContactCard(_ref) {
   })))));
 };
 
-var pageBackground = "#FBFCFD";
+var gradientColorPrimary = ROYAL_BLUE_VIVID;
+var gradientColorSecondary = MATISSE_BLUE;
+var textColor$5 = WHITE;
 var fallbackValues$11 = {
+  gradientColorPrimary: gradientColorPrimary,
+  gradientColorSecondary: gradientColorSecondary,
+  textColor: textColor$5
+};
+
+var getHeroImageVariantStyles = function getHeroImageVariantStyles(_ref) {
+  var imageUrl = _ref.imageUrl,
+    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  ");
+};
+var HeroImageContainer = styled__default(Box).withConfig({
+  displayName: "HeroImagestyled__HeroImageContainer",
+  componentId: "sc-oqear-0"
+})(["display:flex;"]);
+
+var HeroImage = function HeroImage(_ref) {
+  var themeValues = _ref.themeValues,
+    heading = _ref.heading,
+    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;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, imageUrl && /*#__PURE__*/React__default.createElement(HeroImageContainer, {
+    minWidth: minWidth,
+    minHeight: minHeight,
+    padding: padding,
+    extraStyles: getHeroImageVariantStyles({
+      imageUrl: imageUrl,
+      variant: variant,
+      gradientPrimary: themeValues.gradientColorPrimary,
+      gradientSecondary: themeValues.gradientColorSecondary
+    })
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    maxWidth: isMobile ? "100%" : "50%",
+    extraStyles: "display: flex; align-items: center;"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: contentSpacing
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: "hero",
+    as: "h2",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    color: themeValues.textColor,
+    extraStyles: "line-height: 115%;"
+  }, heading), /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: "large",
+    as: "h3",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: !isMobile && "2rem",
+    color: themeValues.textColor,
+    extraStyles: "line-height: 115%;"
+  }, subheading)), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    color: themeValues.textColor,
+    extraStyles: "line-height: 150%; ".concat(!isMobile && "font-size: 1.125rem;")
+  }, description))))));
+};
+var HeroImage$1 = themeComponent(HeroImage, "HeroImage", fallbackValues$11);
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$12 = {
   pageBackground: pageBackground
 };
 
@@ -51581,7 +51663,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$11));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$12));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51624,7 +51706,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$11));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$12));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51670,7 +51752,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$11));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$12));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51723,7 +51805,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$11));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$12));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51793,7 +51875,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$11));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$12));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51962,6 +52044,7 @@ exports.Grid = Grid;
 exports.GuidedCheckoutImage = GuidedCheckoutImage;
 exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
+exports.HeroImage = HeroImage$1;
 exports.HighlightTabRow = HighlightTabRow$1;
 exports.HistoryIconSmall = HistoryIconSmall$1;
 exports.IconAdd = IconAdd;