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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -6248,38 +6248,6 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
6248
6248
  return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
6249
6249
  };
6250
6250
 
6251
- /**
6252
- * Converts a hex color code to an RGBA color string with the specified alpha value.
6253
- *
6254
- * @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
6255
- * @param {number} alpha - The alpha value (opacity) between 0 and 1.
6256
- * @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
6257
- * @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
6258
- */
6259
- var hexToRGBA = function hexToRGBA(hex, alpha) {
6260
- // Remove hash at the start if present
6261
- hex = hex.replace(/^\s*#/, "");
6262
-
6263
- // If hex is 3 characters, convert it to 6 characters.
6264
- if (hex.length === 3) {
6265
- hex = hex.split("").map(function (_char) {
6266
- return _char + _char;
6267
- }).join("");
6268
- }
6269
-
6270
- // Validate hex length
6271
- if (hex.length !== 6) {
6272
- throw new Error("Invalid hex color provided. Expected a 3 or 6-digit hex color.");
6273
- }
6274
-
6275
- // Parse the hex color components
6276
- var bigint = parseInt(hex, 16);
6277
- var r = bigint >> 16 & 255;
6278
- var g = bigint >> 8 & 255;
6279
- var b = bigint & 255;
6280
- return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
6281
- };
6282
-
6283
6251
  var general = /*#__PURE__*/Object.freeze({
6284
6252
  __proto__: null,
6285
6253
  noop: noop$1,
@@ -6301,8 +6269,7 @@ var general = /*#__PURE__*/Object.freeze({
6301
6269
  titleCaseString: titleCaseString,
6302
6270
  kebabCaseString: kebabCaseString,
6303
6271
  wrapIndex: wrapIndex,
6304
- adjustHexColor: adjustHexColor,
6305
- hexToRGBA: hexToRGBA
6272
+ adjustHexColor: adjustHexColor
6306
6273
  });
6307
6274
 
6308
6275
  var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -6817,7 +6784,7 @@ var Sidebar = function Sidebar(_ref) {
6817
6784
  var StackWrapper = styled.div.withConfig({
6818
6785
  displayName: "Stackstyled__StackWrapper",
6819
6786
  componentId: "sc-ejhezz-0"
6820
- })(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
6787
+ })(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";", ""], function (_ref) {
6821
6788
  var direction = _ref.direction;
6822
6789
  return direction;
6823
6790
  }, function (_ref2) {
@@ -6834,9 +6801,12 @@ var StackWrapper = styled.div.withConfig({
6834
6801
  var bottomItem = _ref5.bottomItem,
6835
6802
  direction = _ref5.direction;
6836
6803
  return bottomItem ? "\n > :nth-child(".concat(bottomItem, ") {\n ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n }\n ") : "";
6804
+ }, function (_ref6) {
6805
+ var extraStyles = _ref6.extraStyles;
6806
+ return extraStyles;
6837
6807
  });
6838
6808
 
6839
- var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"];
6809
+ var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "extraStyles"];
6840
6810
 
6841
6811
  /*
6842
6812
  Component to impose margin-top between a list of child elements
@@ -6858,13 +6828,15 @@ var Stack = function Stack(_ref) {
6858
6828
  _ref$direction = _ref.direction,
6859
6829
  direction = _ref$direction === void 0 ? "column" : _ref$direction,
6860
6830
  justify = _ref.justify,
6831
+ extraStyles = _ref.extraStyles,
6861
6832
  rest = _objectWithoutProperties(_ref, _excluded$a);
6862
6833
  return /*#__PURE__*/React.createElement(StackWrapper, _extends({
6863
6834
  childGap: childGap,
6864
6835
  bottomItem: bottomItem,
6865
6836
  fullHeight: fullHeight,
6866
6837
  direction: direction,
6867
- justify: justify
6838
+ justify: justify,
6839
+ extraStyles: extraStyles
6868
6840
  }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
6869
6841
  };
6870
6842
 
@@ -16162,13 +16134,16 @@ var ErroredIcon = function ErroredIcon() {
16162
16134
 
16163
16135
  var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
16164
16136
  var linkColor = _ref.linkColor,
16165
- text = _ref.text;
16137
+ text = _ref.text,
16138
+ _ref$ariaLabel = _ref.ariaLabel,
16139
+ ariaLabel = _ref$ariaLabel === void 0 ? "External Link" : _ref$ariaLabel;
16166
16140
  return /*#__PURE__*/React.createElement("svg", {
16167
16141
  width: "14",
16168
16142
  height: "14",
16169
16143
  viewBox: "0 0 14 14",
16170
16144
  fill: "none",
16171
- xmlns: "http://www.w3.org/2000/svg"
16145
+ xmlns: "http://www.w3.org/2000/svg",
16146
+ "aria-label": ariaLabel
16172
16147
  }, /*#__PURE__*/React.createElement("path", {
16173
16148
  fillRule: "evenodd",
16174
16149
  clipRule: "evenodd",
@@ -49737,118 +49712,6 @@ var RadioSection = function RadioSection(_ref) {
49737
49712
  };
49738
49713
  var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
49739
49714
 
49740
- var fallbackValues$U = {
49741
- primaryColor: ROYAL_BLUE_VIVID,
49742
- secondaryColor: CHARADE_GREY,
49743
- background: CORNFLOWER_BLUE
49744
- };
49745
-
49746
- var BannerContainer = styled(Cluster).withConfig({
49747
- displayName: "RegistrationBannerstyled__BannerContainer",
49748
- componentId: "sc-1m1lm4y-0"
49749
- })(["background:", ";padding:", ";"], function (_ref) {
49750
- var themeValues = _ref.themeValues;
49751
- return hexToRGBA(themeValues.background, 0.9);
49752
- }, function (_ref2) {
49753
- var isMobile = _ref2.isMobile;
49754
- return isMobile ? "1rem 2rem" : " 2rem 8.25rem";
49755
- });
49756
- var ContentContainer = styled(Cluster).withConfig({
49757
- displayName: "RegistrationBannerstyled__ContentContainer",
49758
- componentId: "sc-1m1lm4y-1"
49759
- })(["padding:0;width:", ";> div{flex-direction:", ";}"], function (_ref3) {
49760
- var isMobile = _ref3.isMobile;
49761
- return isMobile ? "296px" : " 1176px";
49762
- }, function (_ref4) {
49763
- var isMobile = _ref4.isMobile;
49764
- return isMobile ? "column" : "row";
49765
- });
49766
- var ButtonContainer = styled(Stack).withConfig({
49767
- displayName: "RegistrationBannerstyled__ButtonContainer",
49768
- componentId: "sc-1m1lm4y-2"
49769
- })(["align-items:center;> a{width:", ";}"], function (_ref5) {
49770
- var isMobile = _ref5.isMobile;
49771
- return isMobile ? "296px" : "222px";
49772
- });
49773
- var RegisterLink = styled(ButtonWithLink).withConfig({
49774
- displayName: "RegistrationBannerstyled__RegisterLink",
49775
- componentId: "sc-1m1lm4y-3"
49776
- })(["border-radius:100px;margin:0;width:100%;"]);
49777
- var LoginLink = styled(ButtonWithLink).withConfig({
49778
- displayName: "RegistrationBannerstyled__LoginLink",
49779
- componentId: "sc-1m1lm4y-4"
49780
- })(["border-radius:100px;padding:0;margin:0;width:100%;min-height:2rem;margin-top:0px;border:none;&:hover{text-decoration:none;}"]);
49781
-
49782
- var RegistrationBanner = function RegistrationBanner(_ref) {
49783
- var clientName = _ref.clientName,
49784
- extraStyles = _ref.extraStyles,
49785
- _ref$loginLink = _ref.loginLink,
49786
- loginLink = _ref$loginLink === void 0 ? "/login" : _ref$loginLink,
49787
- _ref$registrationLink = _ref.registrationLink,
49788
- registrationLink = _ref$registrationLink === void 0 ? "/registration" : _ref$registrationLink,
49789
- themeValues = _ref.themeValues,
49790
- titleAs = _ref.titleAs,
49791
- titleVariant = _ref.titleVariant;
49792
- var themeContext = useContext(ThemeContext);
49793
- var isMobile = themeContext.isMobile;
49794
- return /*#__PURE__*/React.createElement(BannerContainer, {
49795
- extraStyles: extraStyles,
49796
- themeValues: themeValues,
49797
- isMobile: isMobile,
49798
- role: "banner",
49799
- "aria-label": "Registration Banner",
49800
- justify: "center"
49801
- }, /*#__PURE__*/React.createElement(ContentContainer, {
49802
- role: "main",
49803
- align: "center",
49804
- justify: "space-between",
49805
- overflow: "visible",
49806
- isMobile: isMobile
49807
- }, /*#__PURE__*/React.createElement(Box, {
49808
- padding: "0",
49809
- textAlign: "left"
49810
- }, /*#__PURE__*/React.createElement(Heading$1, {
49811
- as: titleAs,
49812
- color: themeValues.primaryColor,
49813
- fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
49814
- variant: titleVariant,
49815
- weight: FONT_WEIGHT_SEMIBOLD
49816
- }, "Register for a ", clientName, " Wallet Account"), /*#__PURE__*/React.createElement(Text$1, {
49817
- extraStyles: "\n display: block;\n padding: ".concat(isMobile ? ".125rem 0 1rem" : "0", "\n "),
49818
- fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.LG,
49819
- color: themeValues.secondaryColor
49820
- }, "Save payment methods and information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React.createElement(ButtonContainer, {
49821
- justify: "space-between",
49822
- fullHeight: true,
49823
- childGap: "0.5rem",
49824
- isMobile: isMobile
49825
- }, /*#__PURE__*/React.createElement(RegisterLink, {
49826
- variant: "secondary",
49827
- color: themeValues.primaryColor,
49828
- contentOverride: true,
49829
- fontWeight: FONT_WEIGHT_SEMIBOLD,
49830
- url: registrationLink
49831
- }, /*#__PURE__*/React.createElement(Cluster, {
49832
- justify: "center",
49833
- align: "center"
49834
- }, /*#__PURE__*/React.createElement(Text$1, {
49835
- extraStyles: "margin-right: 0.5rem",
49836
- fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
49837
- color: themeValues.primaryColor,
49838
- weight: FONT_WEIGHT_SEMIBOLD
49839
- }, "Register Now"), /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(LoginLink, {
49840
- text: "Log In",
49841
- variant: "secondary",
49842
- contentOverride: true,
49843
- url: loginLink
49844
- }, /*#__PURE__*/React.createElement(Text$1, {
49845
- fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.MD,
49846
- color: themeValues.primaryColor,
49847
- weight: FONT_WEIGHT_SEMIBOLD
49848
- }, "or Log In")))));
49849
- };
49850
- var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
49851
-
49852
49715
  var RegistrationForm = function RegistrationForm(_ref) {
49853
49716
  var clearOnDismount = _ref.clearOnDismount,
49854
49717
  fields = _ref.fields,
@@ -49967,13 +49830,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
49967
49830
 
49968
49831
  var GRECIAN_GREY$1 = GRECIAN_GREY;
49969
49832
  var bannerBackgroundColor = GRECIAN_GREY$1;
49970
- var fallbackValues$V = {
49833
+ var fallbackValues$U = {
49971
49834
  bannerBackgroundColor: bannerBackgroundColor
49972
49835
  };
49973
49836
 
49974
49837
  var ResetConfirmationForm = function ResetConfirmationForm() {
49975
49838
  var themeContext = useContext(ThemeContext);
49976
- var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
49839
+ var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetConfirmationForm");
49977
49840
  var isMobile = themeContext.isMobile;
49978
49841
  return /*#__PURE__*/React.createElement(Box, {
49979
49842
  padding: "0",
@@ -50088,13 +49951,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
50088
49951
 
50089
49952
  var GRECIAN_GREY$2 = GRECIAN_GREY;
50090
49953
  var bannerBackgroundColor$1 = GRECIAN_GREY$2;
50091
- var fallbackValues$W = {
49954
+ var fallbackValues$V = {
50092
49955
  bannerBackgroundColor: bannerBackgroundColor$1
50093
49956
  };
50094
49957
 
50095
49958
  var ResetPasswordSuccess = function ResetPasswordSuccess() {
50096
49959
  var themeContext = useContext(ThemeContext);
50097
- var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
49960
+ var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetPasswordSuccess");
50098
49961
  var isMobile = themeContext.isMobile;
50099
49962
  return /*#__PURE__*/React.createElement(Box, {
50100
49963
  padding: "0",
@@ -50143,7 +50006,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
50143
50006
  var activeTabBackground = "#FFFFFF";
50144
50007
  var activeTabAccent = "#15749D";
50145
50008
  var activeTabHover = "#B8D5E1";
50146
- var fallbackValues$X = {
50009
+ var fallbackValues$W = {
50147
50010
  activeTabBackground: activeTabBackground,
50148
50011
  activeTabAccent: activeTabAccent,
50149
50012
  activeTabHover: activeTabHover
@@ -50211,12 +50074,12 @@ var Tabs = function Tabs(_ref) {
50211
50074
  }, tab.content);
50212
50075
  }))));
50213
50076
  };
50214
- var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
50077
+ var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$W);
50215
50078
 
50216
50079
  var activeTabBackground$1 = "#FFFFFF";
50217
50080
  var activeTabAccent$1 = "#15749D";
50218
50081
  var activeTabHover$1 = "#B8D5E1";
50219
- var fallbackValues$Y = {
50082
+ var fallbackValues$X = {
50220
50083
  activeTabBackground: activeTabBackground$1,
50221
50084
  activeTabAccent: activeTabAccent$1,
50222
50085
  activeTabHover: activeTabHover$1
@@ -50273,7 +50136,7 @@ var TabSidebar = function TabSidebar(_ref) {
50273
50136
  }, text)))));
50274
50137
  })));
50275
50138
  };
50276
- var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
50139
+ var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$X);
50277
50140
 
50278
50141
  var Timeout = function Timeout(_ref) {
50279
50142
  var onLogout = _ref.onLogout;
@@ -50394,7 +50257,7 @@ var fontColor$1 = WHITE;
50394
50257
  var textAlign$1 = "left";
50395
50258
  var headerBackgroundColor$1 = BRIGHT_GREY;
50396
50259
  var imageBackgroundColor$1 = MATISSE_BLUE;
50397
- var fallbackValues$Z = {
50260
+ var fallbackValues$Y = {
50398
50261
  fontWeight: fontWeight$8,
50399
50262
  fontColor: fontColor$1,
50400
50263
  textAlign: textAlign$1,
@@ -50439,7 +50302,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
50439
50302
  src: welcomeImage
50440
50303
  })))));
50441
50304
  };
50442
- var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
50305
+ var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Y));
50443
50306
 
50444
50307
  var WorkflowTile = function WorkflowTile(_ref) {
50445
50308
  var _ref$workflowName = _ref.workflowName,
@@ -50499,7 +50362,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
50499
50362
  var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
50500
50363
  var menuItemHoverBackgroundColorDelete = BLUSH_RED;
50501
50364
  var menuItemHoverColor = ROYAL_BLUE_VIVID;
50502
- var fallbackValues$_ = {
50365
+ var fallbackValues$Z = {
50503
50366
  menuItemBackgroundColor: menuItemBackgroundColor,
50504
50367
  menuItemColor: menuItemColor,
50505
50368
  menuItemColorDelete: menuItemColorDelete,
@@ -50566,13 +50429,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
50566
50429
  extraStyles: textExtraStyles
50567
50430
  }, text)));
50568
50431
  };
50569
- var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$_);
50432
+ var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Z);
50570
50433
 
50571
50434
  var hoverColor$5 = "#116285";
50572
50435
  var activeColor$a = "#0E506D";
50573
50436
  var menuTriggerColor = "#15749D";
50574
50437
  var backgroundColor$e = "white";
50575
- var fallbackValues$$ = {
50438
+ var fallbackValues$_ = {
50576
50439
  hoverColor: hoverColor$5,
50577
50440
  activeColor: activeColor$a,
50578
50441
  menuTriggerColor: menuTriggerColor,
@@ -50708,13 +50571,13 @@ var PopupMenu = function PopupMenu(_ref) {
50708
50571
  }, item));
50709
50572
  })));
50710
50573
  };
50711
- var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
50574
+ var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$_);
50712
50575
 
50713
50576
  var primaryColor$1 = WHITE;
50714
50577
  var primaryHoverColor = INFO_BLUE;
50715
50578
  var secondaryColor = MATISSE_BLUE;
50716
50579
  var secondaryHoverColor = "#115D7E";
50717
- var fallbackValues$10 = {
50580
+ var fallbackValues$$ = {
50718
50581
  primaryColor: primaryColor$1,
50719
50582
  primaryHoverColor: primaryHoverColor,
50720
50583
  secondaryColor: secondaryColor,
@@ -51416,28 +51279,24 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
51416
51279
  ariaLabel: "Apply all filters"
51417
51280
  }))));
51418
51281
  };
51419
- var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
51282
+ var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
51420
51283
 
51284
+ var TextWrapStyles = css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
51421
51285
  var Container$1 = styled(Box).withConfig({
51422
51286
  displayName: "ContactCardstyled__Container",
51423
51287
  componentId: "sc-1v62a1n-0"
51424
- })(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;"]);
51288
+ })(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;", ""], function (_ref) {
51289
+ var extraStyles = _ref.extraStyles;
51290
+ return extraStyles;
51291
+ });
51425
51292
  var Title$3 = styled(Heading$1).withConfig({
51426
51293
  displayName: "ContactCardstyled__Title",
51427
51294
  componentId: "sc-1v62a1n-1"
51428
- })(["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);
51295
+ })(["", ""], TextWrapStyles);
51429
51296
  var Content = styled(Box).withConfig({
51430
51297
  displayName: "ContactCardstyled__Content",
51431
51298
  componentId: "sc-1v62a1n-2"
51432
- })(["padding:0;font-size:", ";line-height:1.313rem;overflow-wrap:normal;letter-spacing:0.14px;"], FONT_SIZE.SM);
51433
- var Footer$1 = styled(Stack).withConfig({
51434
- displayName: "ContactCardstyled__Footer",
51435
- componentId: "sc-1v62a1n-3"
51436
- })(["width:100%;"]);
51437
- var Divider = styled(Box).withConfig({
51438
- displayName: "ContactCardstyled__Divider",
51439
- componentId: "sc-1v62a1n-4"
51440
- })(["padding:0;height:1px;width:100%;"]);
51299
+ })(["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);
51441
51300
 
51442
51301
  var ContactCard = function ContactCard(_ref) {
51443
51302
  var title = _ref.title,
@@ -51463,6 +51322,7 @@ var ContactCard = function ContactCard(_ref) {
51463
51322
  var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
51464
51323
  return /*#__PURE__*/React.createElement(Container$1, {
51465
51324
  borderRadius: "8px",
51325
+ background: WHITE,
51466
51326
  boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
51467
51327
  dataQa: createIdFromString(title, "contact-card"),
51468
51328
  maxWidth: isMobile ? "100%" : "208px",
@@ -51486,7 +51346,8 @@ var ContactCard = function ContactCard(_ref) {
51486
51346
  }, /*#__PURE__*/React.createElement(Title$3, {
51487
51347
  variant: titleVariant,
51488
51348
  margin: 0,
51489
- fontSize: FONT_SIZE.MD
51349
+ fontSize: FONT_SIZE.MD,
51350
+ weight: FONT_WEIGHT_SEMIBOLD
51490
51351
  }, title)), /*#__PURE__*/React.createElement(Box, {
51491
51352
  padding: "0",
51492
51353
  width: "100%"
@@ -51503,33 +51364,39 @@ var ContactCard = function ContactCard(_ref) {
51503
51364
  }, /*#__PURE__*/React.createElement(Title$3, {
51504
51365
  variant: titleVariant,
51505
51366
  margin: 0,
51506
- fontSize: FONT_SIZE.MD
51367
+ fontSize: FONT_SIZE.MD,
51368
+ weight: FONT_WEIGHT_SEMIBOLD
51507
51369
  }, secondTitle), /*#__PURE__*/React.createElement(Stack, {
51508
51370
  childGap: "4px",
51509
51371
  justify: "space-between",
51510
- style: {
51511
- width: "100%"
51512
- },
51372
+ extraStyles: "width: 100%;",
51513
51373
  fullHeight: true
51514
51374
  }, links.map(function (link) {
51515
51375
  var linkID = createIdFromString(link.text, "contact-card-link");
51516
- return /*#__PURE__*/React.createElement(ExternalLink, {
51376
+ return /*#__PURE__*/React.createElement(React.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
51517
51377
  key: linkID,
51518
51378
  dataQa: linkID,
51519
51379
  href: link.link,
51520
51380
  newTab: true,
51521
- extraStyles: "\n flex-direction: row;\n align-items: center;\n align-content: flex-start;\n justify-content: space-between;\n ",
51381
+ 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 "),
51522
51382
  size: FONT_SIZE.SM,
51523
51383
  lineHeight: "1.313rem"
51524
51384
  }, link.text, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
51525
51385
  linkColor: linkThemeValues.externalLinkColor,
51526
- text: link.text
51527
- }));
51386
+ text: link.text,
51387
+ ariaLabel: "(Opens in a new tab)"
51388
+ })) : /*#__PURE__*/React.createElement(InternalLink, {
51389
+ key: linkID,
51390
+ to: link.link,
51391
+ dataQa: linkID,
51392
+ fontSize: FONT_SIZE.SM,
51393
+ extraStyles: "\n word-break: break-word;\n ".concat(TextWrapStyles, "\n ")
51394
+ }, link.text));
51528
51395
  })))));
51529
51396
  };
51530
51397
 
51531
51398
  var pageBackground = "#FBFCFD";
51532
- var fallbackValues$11 = {
51399
+ var fallbackValues$10 = {
51533
51400
  pageBackground: pageBackground
51534
51401
  };
51535
51402
 
@@ -51577,7 +51444,7 @@ var CenterSingle = function CenterSingle(_ref) {
51577
51444
  padding: "0"
51578
51445
  })));
51579
51446
  };
51580
- var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$11));
51447
+ var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$10));
51581
51448
 
51582
51449
  var CenterStack = function CenterStack(_ref) {
51583
51450
  var header = _ref.header,
@@ -51620,7 +51487,7 @@ var CenterStack = function CenterStack(_ref) {
51620
51487
  padding: "0"
51621
51488
  })));
51622
51489
  };
51623
- var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$11));
51490
+ var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$10));
51624
51491
 
51625
51492
  var CenterSingle$2 = function CenterSingle(_ref) {
51626
51493
  var header = _ref.header,
@@ -51666,7 +51533,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
51666
51533
  padding: "0"
51667
51534
  })));
51668
51535
  };
51669
- var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$11));
51536
+ var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$10));
51670
51537
 
51671
51538
  var SidebarSingleContent = function SidebarSingleContent(_ref) {
51672
51539
  var header = _ref.header,
@@ -51719,7 +51586,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
51719
51586
  padding: "0"
51720
51587
  })));
51721
51588
  };
51722
- var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$11));
51589
+ var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$10));
51723
51590
 
51724
51591
  var SidebarStackContent = function SidebarStackContent(_ref) {
51725
51592
  var header = _ref.header,
@@ -51789,7 +51656,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
51789
51656
  key: "footer-box"
51790
51657
  })));
51791
51658
  };
51792
- var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$11));
51659
+ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$10));
51793
51660
 
51794
51661
  var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
51795
51662
  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51860,5 +51727,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
51860
51727
  useLogoutTimers: useLogoutTimers
51861
51728
  });
51862
51729
 
51863
- 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 };
51730
+ 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 };
51864
51731
  //# sourceMappingURL=index.esm.js.map