@thecb/components 11.2.5 → 11.2.6-beta.1

package/dist/index.cjs.js

@@ -6256,6 +6256,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,
@@ -6277,7 +6289,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"];
@@ -6517,18 +6530,24 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 var CenterWrapper = styled__default.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"];
@@ -20704,15 +20723,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
@@ -22281,17 +22305,14 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, 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 */
@@ -22347,11 +22368,10 @@ var ExternalLink = /*#__PURE__*/React.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__default.createElement("span", null))));
 });
@@ -22399,17 +22419,14 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, 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 */
@@ -22447,9 +22464,8 @@ var InternalLink = /*#__PURE__*/React.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__default.createElement("span", null)));
 });
@@ -49741,29 +49757,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 +49812,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 +49822,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 +49839,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,
@@ -51505,8 +51519,9 @@ var ContactCard = function ContactCard(_ref) {
     fullHeight: true
   }, links.map(function (link) {
     var linkID = createIdFromString(link.text, "contact-card-link");
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React__default.createElement(ExternalLink, {
-      key: linkID,
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: linkID
+    }, test(URL_TEST, link.link) ? /*#__PURE__*/React__default.createElement(ExternalLink, {
       dataQa: linkID,
       href: link.link,
       newTab: true,
@@ -51519,7 +51534,6 @@ var ContactCard = function ContactCard(_ref) {
       text: link.text,
       ariaLabel: "(Opens in a new tab)"
     })) : /*#__PURE__*/React__default.createElement(InternalLink, {
-      key: linkID,
       to: link.link,
       dataQa: linkID,
       fontSize: FONT_SIZE.SM,
@@ -51532,8 +51546,93 @@ 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,
+    isMobile = _ref.isMobile,
+    variant = _ref.variant,
+    gradientColorPrimary = _ref.gradientColorPrimary,
+    gradientColorSecondary = _ref.gradientColorSecondary;
+  return styled.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__default(Box).withConfig({
+  displayName: "HeroImagestyled__HeroImageContainer",
+  componentId: "sc-oqear-0"
+})(["display:flex;"]);
+
+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$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,
+    paddingOverride = _ref.paddingOverride;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
+  var secondaryHeadingVariant = getNextHeading(headingVariant);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, imageUrl && /*#__PURE__*/React__default.createElement(HeroImageContainer, {
+    minWidth: minWidth,
+    minHeight: minHeight,
+    padding: paddingOverride !== null && paddingOverride !== void 0 ? paddingOverride : isMobile ? "2rem" : "3rem 5.75rem",
+    extraStyles: getHeroImageVariantStyles({
+      imageUrl: imageUrl,
+      isMobile: isMobile,
+      variant: variant,
+      gradientColorPrimary: themeValues.gradientColorPrimary,
+      gradientColorSecondary: themeValues.gradientColorSecondary
+    })
+  }, /*#__PURE__*/React__default.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__default.createElement(Stack, {
+    childGap: contentSpacing,
+    extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: "hero",
+    as: headingVariant,
+    weight: FONT_WEIGHT_BOLD,
+    color: themeValues.textColor,
+    extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
+  }, heading), /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: "large",
+    as: secondaryHeadingVariant,
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: isMobile ? "1.5rem" : "2rem",
+    color: themeValues.textColor,
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
+  }, subheading)), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    color: themeValues.textColor,
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", "; ").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 +51680,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 +51723,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 +51769,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 +51822,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 +51892,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 +52061,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;