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

package/dist/index.esm.js

@@ -6248,6 +6248,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,
@@ -6269,7 +6281,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"];
@@ -6509,18 +6522,24 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var CenterWrapper = styled.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"];
@@ -22278,17 +22297,14 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, 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 */
@@ -22344,11 +22360,10 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     activeColor: themeValues.activeColor,
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
-    extrastyles: extraStyles,
+    extrastyles: "text-decoration: ".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.createElement("span", null))));
 });
@@ -22396,17 +22411,14 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, 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 */
@@ -22444,9 +22456,8 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: extraStyles,
+    extrastyles: "text-decoration: ".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", "; ").concat(extraStyles),
     "data-qa": dataQa,
-    isUnderlined: isUnderlined,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 });
@@ -49738,29 +49749,29 @@ var fallbackValues$U = {
 var BannerContainer = styled(Cluster).withConfig({
   displayName: "RegistrationBannerstyled__BannerContainer",
   componentId: "sc-1m1lm4y-0"
-})(["background:", ";padding:", ";"], function (_ref) {
+})(["background:", ";padding:2rem;"], 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(Cluster).withConfig({
   displayName: "RegistrationBannerstyled__ContentContainer",
   componentId: "sc-1m1lm4y-1"
-})(["padding:0;width:", ";> div{flex-direction:", ";}"], function (_ref3) {
+})(["padding:0;width:", ";> div{flex-direction:", ";}"], function (_ref2) {
+  var isMobile = _ref2.isMobile;
+  return isMobile ? "100%" : " 1224px";
+}, function (_ref3) {
   var isMobile = _ref3.isMobile;
-  return isMobile ? "296px" : " 1176px";
-}, function (_ref4) {
-  var isMobile = _ref4.isMobile;
   return isMobile ? "column" : "row";
 });
 var ButtonContainer = styled(Stack).withConfig({
   displayName: "RegistrationBannerstyled__ButtonContainer",
   componentId: "sc-1m1lm4y-2"
-})(["align-items:center;> a{width:", ";}"], function (_ref5) {
+})(["align-items:center;width:", ";padding-left:", ";> *{width:inherit;}"], function (_ref4) {
+  var isMobile = _ref4.isMobile;
+  return isMobile ? "100%" : "222px";
+}, function (_ref5) {
   var isMobile = _ref5.isMobile;
-  return isMobile ? "296px" : "222px";
+  return isMobile ? "0" : "2rem";
 });
 var RegisterLink = styled(ButtonWithLink).withConfig({
   displayName: "RegistrationBannerstyled__RegisterLink",
@@ -49793,7 +49804,8 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     align: "center",
     justify: "space-between",
     overflow: "visible",
-    isMobile: isMobile
+    isMobile: isMobile,
+    nowrap: true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     textAlign: "left"
@@ -49803,11 +49815,11 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
     variant: titleVariant,
     weight: FONT_WEIGHT_SEMIBOLD
-  }, "Register for a ", clientName, " Wallet Account"), /*#__PURE__*/React.createElement(Text$1, {
+  }, "Register for a ", clientName, " Wallet"), /*#__PURE__*/React.createElement(Text$1, {
     extraStyles: "\n              display: block;\n              padding: ".concat(isMobile ? ".125rem 0 1rem" : "0", "\n            "),
-    fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.LG,
+    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
     color: themeValues.secondaryColor
-  }, "Save payment methods and information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React.createElement(ButtonContainer, {
+  }, "Save payment methods and billing information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React.createElement(ButtonContainer, {
     justify: "space-between",
     fullHeight: true,
     childGap: "0.5rem",
@@ -49820,7 +49832,8 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     url: registrationLink
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
-    align: "center"
+    align: "center",
+    extraStyles: "min-width: 100%"
   }, /*#__PURE__*/React.createElement(Text$1, {
     extraStyles: "margin-right: 0.5rem",
     fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
@@ -50238,7 +50251,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "text-decoration: none;\n            &:hover {\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
+      extraStyles: "text-decoration: none;\n            &:hover {\n            text-decoration: none;\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
     }, /*#__PURE__*/React.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -51500,8 +51513,9 @@ var ContactCard = function ContactCard(_ref) {
     fullHeight: true
   }, links.map(function (link) {
     var linkID = createIdFromString(link.text, "contact-card-link");
-    return /*#__PURE__*/React.createElement(React.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
-      key: linkID,
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: linkID
+    }, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
       dataQa: linkID,
       href: link.link,
       newTab: true,
@@ -51514,7 +51528,6 @@ var ContactCard = function ContactCard(_ref) {
       text: link.text,
       ariaLabel: "(Opens in a new tab)"
     })) : /*#__PURE__*/React.createElement(InternalLink, {
-      key: linkID,
       to: link.link,
       dataQa: linkID,
       fontSize: FONT_SIZE.SM,
@@ -51527,21 +51540,22 @@ var ContactCard = function ContactCard(_ref) {
   })))));
 };
 
-var gradientColorPrimary = ROYAL_BLUE_VIVID;
-var gradientColorSecondary = MATISSE_BLUE;
-var textColor$5 = WHITE;
+var heroPrimaryColor = ROYAL_BLUE_VIVID;
+var heroSecondaryColor = MATISSE_BLUE;
+var heroTextColor = WHITE;
 var fallbackValues$11 = {
-  gradientColorPrimary: gradientColorPrimary,
-  gradientColorSecondary: gradientColorSecondary,
-  textColor: textColor$5
+  heroPrimaryColor: heroPrimaryColor,
+  heroSecondaryColor: heroSecondaryColor,
+  heroTextColor: heroTextColor
 };
 
 var getHeroImageVariantStyles = function getHeroImageVariantStyles(_ref) {
   var imageUrl = _ref.imageUrl,
+    isMobile = _ref.isMobile,
     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  ");
+    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);
 };
 var HeroImageContainer = styled(Box).withConfig({
   displayName: "HeroImagestyled__HeroImageContainer",
@@ -51551,57 +51565,62 @@ var HeroImageContainer = styled(Box).withConfig({
 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$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;
+    contentSpacing = _ref$contentSpacing === void 0 ? "0.5rem" : _ref$contentSpacing,
+    paddingOverride = _ref.paddingOverride;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement(HeroImageContainer, {
+  var secondaryHeadingVariant = getNextHeading(headingVariant);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImageContainer, {
     minWidth: minWidth,
     minHeight: minHeight,
-    padding: padding,
+    padding: paddingOverride !== null && paddingOverride !== void 0 ? paddingOverride : isMobile ? "2rem" : "3rem 5.75rem",
     extraStyles: getHeroImageVariantStyles({
       imageUrl: imageUrl,
+      isMobile: isMobile,
       variant: variant,
-      gradientPrimary: themeValues.gradientColorPrimary,
-      gradientSecondary: themeValues.gradientColorSecondary
+      heroPrimaryColor: themeValues.heroPrimaryColor,
+      heroSecondaryColor: themeValues.heroSecondaryColor
     })
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    maxWidth: isMobile ? "100%" : "50%",
-    extraStyles: "display: flex; align-items: center;"
+  }, /*#__PURE__*/React.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.createElement(Stack, {
-    childGap: contentSpacing
+    childGap: contentSpacing,
+    extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React.createElement(Title$1, {
     variant: "hero",
-    as: "h2",
-    weight: FONT_WEIGHT_SEMIBOLD,
-    color: themeValues.textColor,
-    extraStyles: "line-height: 115%;"
+    as: headingVariant,
+    weight: FONT_WEIGHT_BOLD,
+    color: themeValues.heroTextColor,
+    extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
   }, heading), /*#__PURE__*/React.createElement(Title$1, {
     variant: "large",
-    as: "h3",
+    as: secondaryHeadingVariant,
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: !isMobile && "2rem",
-    color: themeValues.textColor,
-    extraStyles: "line-height: 115%;"
+    fontSize: isMobile ? "1.5rem" : "2rem",
+    color: themeValues.heroTextColor,
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", ";")
   }, subheading)), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Paragraph$1, {
-    color: themeValues.textColor,
-    extraStyles: "line-height: 150%; ".concat(!isMobile && "font-size: 1.125rem;")
+    color: themeValues.heroTextColor,
+    extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", "; ").concat(!isMobile && "font-size: 1.125rem;")
   }, description))))));
 };
 var HeroImage$1 = themeComponent(HeroImage, "HeroImage", fallbackValues$11);