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

package/dist/index.esm.js

@@ -22360,7 +22360,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     activeColor: themeValues.activeColor,
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
-    extrastyles: "".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", " ").concat(extraStyles),
+    extrastyles: "text-decoration: ".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", "; ").concat(extraStyles),
     rel: newTab ? "noopener" : "",
     "data-qa": dataQa,
     "aria-label": ariaLabel,
@@ -22456,7 +22456,7 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: "".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", " ").concat(extraStyles),
+    extrastyles: "text-decoration: ".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", "; ").concat(extraStyles),
     "data-qa": dataQa,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
@@ -49749,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",
@@ -49804,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"
@@ -49814,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",
@@ -49831,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,
@@ -50249,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",
@@ -51538,22 +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,
-    gradientColorPrimary = _ref.gradientColorPrimary,
-    gradientColorSecondary = _ref.gradientColorSecondary;
-  return 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);
+    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",
@@ -51580,7 +51582,7 @@ var HeroImage = function HeroImage(_ref) {
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var secondaryHeadingVariant = getNextHeading(headingVariant);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement(HeroImageContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImageContainer, {
     minWidth: minWidth,
     minHeight: minHeight,
     padding: paddingOverride !== null && paddingOverride !== void 0 ? paddingOverride : isMobile ? "2rem" : "3rem 5.75rem",
@@ -51588,14 +51590,14 @@ var HeroImage = function HeroImage(_ref) {
       imageUrl: imageUrl,
       isMobile: isMobile,
       variant: variant,
-      gradientColorPrimary: themeValues.gradientColorPrimary,
-      gradientColorSecondary: themeValues.gradientColorSecondary
+      heroPrimaryColor: themeValues.heroPrimaryColor,
+      heroSecondaryColor: themeValues.heroSecondaryColor
     })
   }, /*#__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            "
+    extraStyles: "\n            flex-flow: unset;\n            justify-content: flex-start;\n            flex-wrap: nowrap;\"\n          "
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: contentSpacing,
     extraStyles: "max-width: ".concat(isMobile ? "100%" : "50%", ";")
@@ -51605,19 +51607,19 @@ var HeroImage = function HeroImage(_ref) {
     variant: "hero",
     as: headingVariant,
     weight: FONT_WEIGHT_BOLD,
-    color: themeValues.textColor,
+    color: themeValues.heroTextColor,
     extraStyles: "line-height: ".concat(isMobile ? "125%" : "115%", ";")
   }, heading), /*#__PURE__*/React.createElement(Title$1, {
     variant: "large",
     as: secondaryHeadingVariant,
     weight: FONT_WEIGHT_SEMIBOLD,
     fontSize: isMobile ? "1.5rem" : "2rem",
-    color: themeValues.textColor,
+    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,
+    color: themeValues.heroTextColor,
     extraStyles: "line-height: ".concat(isMobile ? "150%" : "115%", "; ").concat(!isMobile && "font-size: 1.125rem;")
   }, description))))));
 };