@thecb/components 11.2.3-beta.4 → 11.2.4-beta.1

package/dist/index.esm.js

@@ -6248,38 +6248,6 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
 
-/**
- * Converts a hex color code to an RGBA color string with the specified alpha value.
- *
- * @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
- * @param {number} alpha - The alpha value (opacity) between 0 and 1.
- * @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
- * @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
- */
-var hexToRGBA = function hexToRGBA(hex, alpha) {
-  // Remove hash at the start if present
-  hex = hex.replace(/^\s*#/, "");
-
-  // If hex is 3 characters, convert it to 6 characters.
-  if (hex.length === 3) {
-    hex = hex.split("").map(function (_char) {
-      return _char + _char;
-    }).join("");
-  }
-
-  // Validate hex length
-  if (hex.length !== 6) {
-    throw new Error("Invalid hex color provided. Expected a 3 or 6-digit hex color.");
-  }
-
-  // Parse the hex color components
-  var bigint = parseInt(hex, 16);
-  var r = bigint >> 16 & 255;
-  var g = bigint >> 8 & 255;
-  var b = bigint & 255;
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
-};
-
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
   noop: noop$1,
@@ -6301,8 +6269,7 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor,
-  hexToRGBA: hexToRGBA
+  adjustHexColor: adjustHexColor
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -6817,7 +6784,7 @@ var Sidebar = function Sidebar(_ref) {
 var StackWrapper = styled.div.withConfig({
   displayName: "Stackstyled__StackWrapper",
   componentId: "sc-ejhezz-0"
-})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";", ""], function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -6834,9 +6801,12 @@ var StackWrapper = styled.div.withConfig({
   var bottomItem = _ref5.bottomItem,
     direction = _ref5.direction;
   return bottomItem ? "\n    > :nth-child(".concat(bottomItem, ") {\n        ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n    }\n  ") : "";
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
 });
 
-var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"];
+var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "extraStyles"];
 
 /*
   Component to impose margin-top between a list of child elements
@@ -6858,13 +6828,15 @@ var Stack = function Stack(_ref) {
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? "column" : _ref$direction,
     justify = _ref.justify,
+    extraStyles = _ref.extraStyles,
     rest = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement(StackWrapper, _extends({
     childGap: childGap,
     bottomItem: bottomItem,
     fullHeight: fullHeight,
     direction: direction,
-    justify: justify
+    justify: justify,
+    extraStyles: extraStyles
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
@@ -16162,13 +16134,16 @@ var ErroredIcon = function ErroredIcon() {
 
 var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
   var linkColor = _ref.linkColor,
-    text = _ref.text;
+    text = _ref.text,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "External Link" : _ref$ariaLabel;
   return /*#__PURE__*/React.createElement("svg", {
     width: "14",
     height: "14",
     viewBox: "0 0 14 14",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -22283,7 +22258,7 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "ExternalLinkstyled__StyledExternalLink",
   componentId: "sc-m1q2m2-0"
-})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
+})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";text-decoration:", ";&:hover{color:", ";text-decoration:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;text-decoration:", ";}&:active{color:", ";}", ""], function (_ref2) {
   var size = _ref2.size;
   return size;
 }, function (_ref3) {
@@ -22298,14 +22273,17 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref6) {
   var lineheight = _ref6.lineheight;
   return lineheight;
-}, LINK_TEXT_DECORATION$3, function (_ref7) {
-  var hoverColor = _ref7.hoverColor;
+}, function (_ref7) {
+  var isUnderlined = _ref7.isUnderlined;
+  return isUnderlined ? LINK_TEXT_DECORATION$3 : "none";
+}, function (_ref8) {
+  var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE$1, function (_ref8) {
-  var activeColor = _ref8.activeColor;
+}, LINK_TEXT_DECORATION$3, ROYAL_BLUE$1, LINK_TEXT_DECORATION$3, function (_ref9) {
+  var activeColor = _ref9.activeColor;
   return activeColor;
-}, function (_ref9) {
-  var extrastyles = _ref9.extrastyles;
+}, function (_ref10) {
+  var extrastyles = _ref10.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -22331,6 +22309,8 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
     dataQa = _ref.dataQa,
     ariaLabel = _ref.ariaLabel,
+    _ref$isUnderlined = _ref.isUnderlined,
+    isUnderlined = _ref$isUnderlined === void 0 ? true : _ref$isUnderlined,
     children = _ref.children;
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
@@ -22363,6 +22343,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rel: newTab ? "noopener" : "",
     "data-qa": dataQa,
     "aria-label": ariaLabel,
+    isUnderlined: isUnderlined,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))));
 });
@@ -22390,7 +22371,7 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
-})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
+})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";text-decoration:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;text-decoration:", ";}&:active{color:", ";}", ""], function (_ref2) {
   var color = _ref2.color,
     active = _ref2.active,
     activeColor = _ref2.activeColor;
@@ -22410,14 +22391,17 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref7) {
   var margin = _ref7.margin;
   return margin;
-}, LINK_TEXT_DECORATION$4, function (_ref8) {
-  var hoverColor = _ref8.hoverColor;
+}, function (_ref8) {
+  var isUnderlined = _ref8.isUnderlined;
+  return isUnderlined ? LINK_TEXT_DECORATION$4 : "none";
+}, function (_ref9) {
+  var hoverColor = _ref9.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE$2, function (_ref9) {
-  var activeColor = _ref9.activeColor;
+}, LINK_TEXT_DECORATION$4, ROYAL_BLUE$2, LINK_TEXT_DECORATION$4, function (_ref10) {
+  var activeColor = _ref10.activeColor;
   return activeColor;
-}, function (_ref10) {
-  var extrastyles = _ref10.extrastyles;
+}, function (_ref11) {
+  var extrastyles = _ref11.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -22438,7 +22422,9 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
     dataQa = _ref.dataQa,
     _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    _ref$isUnderlined = _ref.isUnderlined,
+    isUnderlined = _ref$isUnderlined === void 0 ? true : _ref$isUnderlined;
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledInternalLink, {
@@ -22455,6 +22441,7 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex: tabIndex,
     extrastyles: extraStyles,
     "data-qa": dataQa,
+    isUnderlined: isUnderlined,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 });
@@ -49737,118 +49724,6 @@ var RadioSection = function RadioSection(_ref) {
 };
 var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
 
-var fallbackValues$U = {
-  primaryColor: ROYAL_BLUE_VIVID,
-  secondaryColor: CHARADE_GREY,
-  background: CORNFLOWER_BLUE
-};
-
-var BannerContainer = styled(Cluster).withConfig({
-  displayName: "RegistrationBannerstyled__BannerContainer",
-  componentId: "sc-1m1lm4y-0"
-})(["background:", ";padding:", ";"], function (_ref) {
-  var themeValues = _ref.themeValues;
-  return hexToRGBA(themeValues.background, 0.9);
-}, 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) {
-  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) {
-  var isMobile = _ref5.isMobile;
-  return isMobile ? "296px" : "222px";
-});
-var RegisterLink = styled(ButtonWithLink).withConfig({
-  displayName: "RegistrationBannerstyled__RegisterLink",
-  componentId: "sc-1m1lm4y-3"
-})(["border-radius:100px;margin:0;width:100%;"]);
-var LoginLink = styled(ButtonWithLink).withConfig({
-  displayName: "RegistrationBannerstyled__LoginLink",
-  componentId: "sc-1m1lm4y-4"
-})(["border-radius:100px;padding:0;margin:0;width:100%;min-height:2rem;margin-top:0px;border:none;&:hover{text-decoration:none;}"]);
-
-var RegistrationBanner = function RegistrationBanner(_ref) {
-  var clientName = _ref.clientName,
-    extraStyles = _ref.extraStyles,
-    _ref$loginLink = _ref.loginLink,
-    loginLink = _ref$loginLink === void 0 ? "/login" : _ref$loginLink,
-    _ref$registrationLink = _ref.registrationLink,
-    registrationLink = _ref$registrationLink === void 0 ? "/registration" : _ref$registrationLink,
-    themeValues = _ref.themeValues,
-    titleAs = _ref.titleAs,
-    titleVariant = _ref.titleVariant;
-  var themeContext = useContext(ThemeContext);
-  var isMobile = themeContext.isMobile;
-  return /*#__PURE__*/React.createElement(BannerContainer, {
-    extraStyles: extraStyles,
-    themeValues: themeValues,
-    isMobile: isMobile,
-    role: "banner",
-    "aria-label": "Registration Banner",
-    justify: "center"
-  }, /*#__PURE__*/React.createElement(ContentContainer, {
-    role: "main",
-    align: "center",
-    justify: "space-between",
-    overflow: "visible",
-    isMobile: isMobile
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    textAlign: "left"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    as: titleAs,
-    color: themeValues.primaryColor,
-    fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
-    variant: titleVariant,
-    weight: FONT_WEIGHT_SEMIBOLD
-  }, "Register for a ", clientName, " Wallet Account"), /*#__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,
-    color: themeValues.secondaryColor
-  }, "Save payment methods and information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React.createElement(ButtonContainer, {
-    justify: "space-between",
-    fullHeight: true,
-    childGap: "0.5rem",
-    isMobile: isMobile
-  }, /*#__PURE__*/React.createElement(RegisterLink, {
-    variant: "secondary",
-    color: themeValues.primaryColor,
-    contentOverride: true,
-    fontWeight: FONT_WEIGHT_SEMIBOLD,
-    url: registrationLink
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "center",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    extraStyles: "margin-right: 0.5rem",
-    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
-    color: themeValues.primaryColor,
-    weight: FONT_WEIGHT_SEMIBOLD
-  }, "Register Now"), /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(LoginLink, {
-    text: "Log In",
-    variant: "secondary",
-    contentOverride: true,
-    url: loginLink
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.MD,
-    color: themeValues.primaryColor,
-    weight: FONT_WEIGHT_SEMIBOLD
-  }, "or Log In")))));
-};
-var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
-
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
     fields = _ref.fields,
@@ -49967,13 +49842,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$V = {
+var fallbackValues$U = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -50088,13 +49963,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$W = {
+var fallbackValues$V = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -50143,7 +50018,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$X = {
+var fallbackValues$W = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -50211,12 +50086,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$W);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$Y = {
+var fallbackValues$X = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -50273,7 +50148,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$X);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -50394,7 +50269,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$Z = {
+var fallbackValues$Y = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50439,7 +50314,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Y));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50499,7 +50374,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$_ = {
+var fallbackValues$Z = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50566,13 +50441,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$_);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Z);
 
 var hoverColor$5 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$$ = {
+var fallbackValues$_ = {
   hoverColor: hoverColor$5,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
@@ -50708,13 +50583,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$_);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$10 = {
+var fallbackValues$$ = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -51416,28 +51291,24 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
 
+var TextWrapStyles = css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
 var Container$1 = styled(Box).withConfig({
   displayName: "ContactCardstyled__Container",
   componentId: "sc-1v62a1n-0"
-})(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;"]);
+})(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;", ""], function (_ref) {
+  var extraStyles = _ref.extraStyles;
+  return extraStyles;
+});
 var Title$3 = styled(Heading$1).withConfig({
   displayName: "ContactCardstyled__Title",
   componentId: "sc-1v62a1n-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;background-color:transparent;font-weight:", ";"], FONT_WEIGHT_SEMIBOLD);
+})(["", ""], TextWrapStyles);
 var Content = styled(Box).withConfig({
   displayName: "ContactCardstyled__Content",
   componentId: "sc-1v62a1n-2"
-})(["padding:0;font-size:", ";line-height:1.313rem;overflow-wrap:normal;letter-spacing:0.14px;"], FONT_SIZE.SM);
-var Footer$1 = styled(Stack).withConfig({
-  displayName: "ContactCardstyled__Footer",
-  componentId: "sc-1v62a1n-3"
-})(["width:100%;"]);
-var Divider = styled(Box).withConfig({
-  displayName: "ContactCardstyled__Divider",
-  componentId: "sc-1v62a1n-4"
-})(["padding:0;height:1px;width:100%;"]);
+})(["word-break:break-word;padding:0;font-size:", ";line-height:1.313rem;letter-spacing:0.14px;", " p{margin:0;}p,span{line-height:1.313rem;}"], FONT_SIZE.SM, TextWrapStyles);
 
 var ContactCard = function ContactCard(_ref) {
   var title = _ref.title,
@@ -51463,9 +51334,10 @@ var ContactCard = function ContactCard(_ref) {
   var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
   return /*#__PURE__*/React.createElement(Container$1, {
     borderRadius: "8px",
+    background: WHITE,
     boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
     dataQa: createIdFromString(title, "contact-card"),
-    maxWidth: isMobile ? "100%" : "208px",
+    maxWidth: "100%",
     minWidth: isMobile ? "240px" : "208px",
     minHeight: "141px",
     padding: "1.5rem",
@@ -51486,7 +51358,8 @@ var ContactCard = function ContactCard(_ref) {
   }, /*#__PURE__*/React.createElement(Title$3, {
     variant: titleVariant,
     margin: 0,
-    fontSize: FONT_SIZE.MD
+    fontSize: FONT_SIZE.MD,
+    weight: FONT_WEIGHT_SEMIBOLD
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     width: "100%"
@@ -51503,33 +51376,44 @@ var ContactCard = function ContactCard(_ref) {
   }, /*#__PURE__*/React.createElement(Title$3, {
     variant: titleVariant,
     margin: 0,
-    fontSize: FONT_SIZE.MD
+    fontSize: FONT_SIZE.MD,
+    weight: FONT_WEIGHT_SEMIBOLD
   }, secondTitle), /*#__PURE__*/React.createElement(Stack, {
     childGap: "4px",
     justify: "space-between",
-    style: {
-      width: "100%"
-    },
+    extraStyles: "width: 100%;",
     fullHeight: true
   }, links.map(function (link) {
     var linkID = createIdFromString(link.text, "contact-card-link");
-    return /*#__PURE__*/React.createElement(ExternalLink, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
       key: linkID,
       dataQa: linkID,
       href: link.link,
       newTab: true,
-      extraStyles: "\n                      flex-direction: row;\n                      align-items: center;\n                      align-content: flex-start;\n                      justify-content: space-between;\n                    ",
+      isUnderlined: false,
+      extraStyles: "\n                          flex-direction: row;\n                          align-items: center;\n                          align-content: flex-start;\n                          justify-content: space-between;\n                          word-break: break-word;\n                          ".concat(TextWrapStyles, "\n                        "),
       size: FONT_SIZE.SM,
       lineHeight: "1.313rem"
     }, link.text, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
       linkColor: linkThemeValues.externalLinkColor,
-      text: link.text
-    }));
+      text: link.text,
+      ariaLabel: "(Opens in a new tab)"
+    })) : /*#__PURE__*/React.createElement(InternalLink, {
+      key: linkID,
+      to: link.link,
+      dataQa: linkID,
+      fontSize: FONT_SIZE.SM,
+      color: linkThemeValues.externalLinkColor,
+      isUnderlined: false,
+      active: false,
+      lineheight: "1.313rem",
+      extraStyles: "\n                          word-break: break-word;\n                          ".concat(TextWrapStyles, "\n                        ")
+    }, link.text));
   })))));
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$11 = {
+var fallbackValues$10 = {
   pageBackground: pageBackground
 };
 
@@ -51577,7 +51461,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$10));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51620,7 +51504,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$10));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51666,7 +51550,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$10));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51719,7 +51603,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$10));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51789,7 +51673,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$10));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51860,5 +51744,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useLogoutTimers: useLogoutTimers
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map