@thecb/components 11.2.3-beta.3 → 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,119 +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 description = _ref.description,
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
- title = _ref.title,
49791
- titleAs = _ref.titleAs,
49792
- titleVariant = _ref.titleVariant;
49793
- var themeContext = useContext(ThemeContext);
49794
- var isMobile = themeContext.isMobile;
49795
- return /*#__PURE__*/React.createElement(BannerContainer, {
49796
- extraStyles: extraStyles,
49797
- themeValues: themeValues,
49798
- isMobile: isMobile,
49799
- role: "banner",
49800
- "aria-label": "Registration Banner",
49801
- justify: "center"
49802
- }, /*#__PURE__*/React.createElement(ContentContainer, {
49803
- role: "main",
49804
- align: "center",
49805
- justify: "space-between",
49806
- overflow: "visible",
49807
- isMobile: isMobile
49808
- }, /*#__PURE__*/React.createElement(Box, {
49809
- padding: "0",
49810
- textAlign: "left"
49811
- }, /*#__PURE__*/React.createElement(Heading$1, {
49812
- as: titleAs,
49813
- color: themeValues.primaryColor,
49814
- fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
49815
- variant: titleVariant,
49816
- weight: FONT_WEIGHT_SEMIBOLD
49817
- }, title), /*#__PURE__*/React.createElement(Text$1, {
49818
- extraStyles: "\n display: block;\n padding: ".concat(isMobile ? ".125rem 0 1rem" : "0", "\n "),
49819
- fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.LG,
49820
- color: themeValues.secondaryColor
49821
- }, description)), /*#__PURE__*/React.createElement(ButtonContainer, {
49822
- justify: "space-between",
49823
- fullHeight: true,
49824
- childGap: "0.5rem",
49825
- isMobile: isMobile
49826
- }, /*#__PURE__*/React.createElement(RegisterLink, {
49827
- variant: "secondary",
49828
- color: themeValues.primaryColor,
49829
- contentOverride: true,
49830
- fontWeight: FONT_WEIGHT_SEMIBOLD,
49831
- url: registrationLink
49832
- }, /*#__PURE__*/React.createElement(Cluster, {
49833
- justify: "center",
49834
- align: "center"
49835
- }, /*#__PURE__*/React.createElement(Text$1, {
49836
- extraStyles: "margin-right: 0.5rem",
49837
- fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG,
49838
- color: themeValues.primaryColor,
49839
- weight: FONT_WEIGHT_SEMIBOLD
49840
- }, "Register Now"), /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(LoginLink, {
49841
- text: "Log In",
49842
- variant: "secondary",
49843
- contentOverride: true,
49844
- url: loginLink
49845
- }, /*#__PURE__*/React.createElement(Text$1, {
49846
- fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.MD,
49847
- color: themeValues.primaryColor,
49848
- weight: FONT_WEIGHT_SEMIBOLD
49849
- }, "or Log In")))));
49850
- };
49851
- var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
49852
-
49853
49715
  var RegistrationForm = function RegistrationForm(_ref) {
49854
49716
  var clearOnDismount = _ref.clearOnDismount,
49855
49717
  fields = _ref.fields,
@@ -49968,13 +49830,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
49968
49830
 
49969
49831
  var GRECIAN_GREY$1 = GRECIAN_GREY;
49970
49832
  var bannerBackgroundColor = GRECIAN_GREY$1;
49971
- var fallbackValues$V = {
49833
+ var fallbackValues$U = {
49972
49834
  bannerBackgroundColor: bannerBackgroundColor
49973
49835
  };
49974
49836
 
49975
49837
  var ResetConfirmationForm = function ResetConfirmationForm() {
49976
49838
  var themeContext = useContext(ThemeContext);
49977
- var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
49839
+ var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetConfirmationForm");
49978
49840
  var isMobile = themeContext.isMobile;
49979
49841
  return /*#__PURE__*/React.createElement(Box, {
49980
49842
  padding: "0",
@@ -50089,13 +49951,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
50089
49951
 
50090
49952
  var GRECIAN_GREY$2 = GRECIAN_GREY;
50091
49953
  var bannerBackgroundColor$1 = GRECIAN_GREY$2;
50092
- var fallbackValues$W = {
49954
+ var fallbackValues$V = {
50093
49955
  bannerBackgroundColor: bannerBackgroundColor$1
50094
49956
  };
50095
49957
 
50096
49958
  var ResetPasswordSuccess = function ResetPasswordSuccess() {
50097
49959
  var themeContext = useContext(ThemeContext);
50098
- var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
49960
+ var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetPasswordSuccess");
50099
49961
  var isMobile = themeContext.isMobile;
50100
49962
  return /*#__PURE__*/React.createElement(Box, {
50101
49963
  padding: "0",
@@ -50144,7 +50006,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
50144
50006
  var activeTabBackground = "#FFFFFF";
50145
50007
  var activeTabAccent = "#15749D";
50146
50008
  var activeTabHover = "#B8D5E1";
50147
- var fallbackValues$X = {
50009
+ var fallbackValues$W = {
50148
50010
  activeTabBackground: activeTabBackground,
50149
50011
  activeTabAccent: activeTabAccent,
50150
50012
  activeTabHover: activeTabHover
@@ -50212,12 +50074,12 @@ var Tabs = function Tabs(_ref) {
50212
50074
  }, tab.content);
50213
50075
  }))));
50214
50076
  };
50215
- var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
50077
+ var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$W);
50216
50078
 
50217
50079
  var activeTabBackground$1 = "#FFFFFF";
50218
50080
  var activeTabAccent$1 = "#15749D";
50219
50081
  var activeTabHover$1 = "#B8D5E1";
50220
- var fallbackValues$Y = {
50082
+ var fallbackValues$X = {
50221
50083
  activeTabBackground: activeTabBackground$1,
50222
50084
  activeTabAccent: activeTabAccent$1,
50223
50085
  activeTabHover: activeTabHover$1
@@ -50274,7 +50136,7 @@ var TabSidebar = function TabSidebar(_ref) {
50274
50136
  }, text)))));
50275
50137
  })));
50276
50138
  };
50277
- var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
50139
+ var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$X);
50278
50140
 
50279
50141
  var Timeout = function Timeout(_ref) {
50280
50142
  var onLogout = _ref.onLogout;
@@ -50395,7 +50257,7 @@ var fontColor$1 = WHITE;
50395
50257
  var textAlign$1 = "left";
50396
50258
  var headerBackgroundColor$1 = BRIGHT_GREY;
50397
50259
  var imageBackgroundColor$1 = MATISSE_BLUE;
50398
- var fallbackValues$Z = {
50260
+ var fallbackValues$Y = {
50399
50261
  fontWeight: fontWeight$8,
50400
50262
  fontColor: fontColor$1,
50401
50263
  textAlign: textAlign$1,
@@ -50440,7 +50302,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
50440
50302
  src: welcomeImage
50441
50303
  })))));
50442
50304
  };
50443
- var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
50305
+ var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Y));
50444
50306
 
50445
50307
  var WorkflowTile = function WorkflowTile(_ref) {
50446
50308
  var _ref$workflowName = _ref.workflowName,
@@ -50500,7 +50362,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
50500
50362
  var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
50501
50363
  var menuItemHoverBackgroundColorDelete = BLUSH_RED;
50502
50364
  var menuItemHoverColor = ROYAL_BLUE_VIVID;
50503
- var fallbackValues$_ = {
50365
+ var fallbackValues$Z = {
50504
50366
  menuItemBackgroundColor: menuItemBackgroundColor,
50505
50367
  menuItemColor: menuItemColor,
50506
50368
  menuItemColorDelete: menuItemColorDelete,
@@ -50567,13 +50429,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
50567
50429
  extraStyles: textExtraStyles
50568
50430
  }, text)));
50569
50431
  };
50570
- var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$_);
50432
+ var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Z);
50571
50433
 
50572
50434
  var hoverColor$5 = "#116285";
50573
50435
  var activeColor$a = "#0E506D";
50574
50436
  var menuTriggerColor = "#15749D";
50575
50437
  var backgroundColor$e = "white";
50576
- var fallbackValues$$ = {
50438
+ var fallbackValues$_ = {
50577
50439
  hoverColor: hoverColor$5,
50578
50440
  activeColor: activeColor$a,
50579
50441
  menuTriggerColor: menuTriggerColor,
@@ -50709,13 +50571,13 @@ var PopupMenu = function PopupMenu(_ref) {
50709
50571
  }, item));
50710
50572
  })));
50711
50573
  };
50712
- var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
50574
+ var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$_);
50713
50575
 
50714
50576
  var primaryColor$1 = WHITE;
50715
50577
  var primaryHoverColor = INFO_BLUE;
50716
50578
  var secondaryColor = MATISSE_BLUE;
50717
50579
  var secondaryHoverColor = "#115D7E";
50718
- var fallbackValues$10 = {
50580
+ var fallbackValues$$ = {
50719
50581
  primaryColor: primaryColor$1,
50720
50582
  primaryHoverColor: primaryHoverColor,
50721
50583
  secondaryColor: secondaryColor,
@@ -51417,28 +51279,24 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
51417
51279
  ariaLabel: "Apply all filters"
51418
51280
  }))));
51419
51281
  };
51420
- var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
51282
+ var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
51421
51283
 
51284
+ var TextWrapStyles = css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
51422
51285
  var Container$1 = styled(Box).withConfig({
51423
51286
  displayName: "ContactCardstyled__Container",
51424
51287
  componentId: "sc-1v62a1n-0"
51425
- })(["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
+ });
51426
51292
  var Title$3 = styled(Heading$1).withConfig({
51427
51293
  displayName: "ContactCardstyled__Title",
51428
51294
  componentId: "sc-1v62a1n-1"
51429
- })(["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);
51430
51296
  var Content = styled(Box).withConfig({
51431
51297
  displayName: "ContactCardstyled__Content",
51432
51298
  componentId: "sc-1v62a1n-2"
51433
- })(["padding:0;font-size:", ";line-height:1.313rem;overflow-wrap:normal;letter-spacing:0.14px;"], FONT_SIZE.SM);
51434
- var Footer$1 = styled(Stack).withConfig({
51435
- displayName: "ContactCardstyled__Footer",
51436
- componentId: "sc-1v62a1n-3"
51437
- })(["width:100%;"]);
51438
- var Divider = styled(Box).withConfig({
51439
- displayName: "ContactCardstyled__Divider",
51440
- componentId: "sc-1v62a1n-4"
51441
- })(["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);
51442
51300
 
51443
51301
  var ContactCard = function ContactCard(_ref) {
51444
51302
  var title = _ref.title,
@@ -51464,6 +51322,7 @@ var ContactCard = function ContactCard(_ref) {
51464
51322
  var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
51465
51323
  return /*#__PURE__*/React.createElement(Container$1, {
51466
51324
  borderRadius: "8px",
51325
+ background: WHITE,
51467
51326
  boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
51468
51327
  dataQa: createIdFromString(title, "contact-card"),
51469
51328
  maxWidth: isMobile ? "100%" : "208px",
@@ -51487,7 +51346,8 @@ var ContactCard = function ContactCard(_ref) {
51487
51346
  }, /*#__PURE__*/React.createElement(Title$3, {
51488
51347
  variant: titleVariant,
51489
51348
  margin: 0,
51490
- fontSize: FONT_SIZE.MD
51349
+ fontSize: FONT_SIZE.MD,
51350
+ weight: FONT_WEIGHT_SEMIBOLD
51491
51351
  }, title)), /*#__PURE__*/React.createElement(Box, {
51492
51352
  padding: "0",
51493
51353
  width: "100%"
@@ -51504,33 +51364,39 @@ var ContactCard = function ContactCard(_ref) {
51504
51364
  }, /*#__PURE__*/React.createElement(Title$3, {
51505
51365
  variant: titleVariant,
51506
51366
  margin: 0,
51507
- fontSize: FONT_SIZE.MD
51367
+ fontSize: FONT_SIZE.MD,
51368
+ weight: FONT_WEIGHT_SEMIBOLD
51508
51369
  }, secondTitle), /*#__PURE__*/React.createElement(Stack, {
51509
51370
  childGap: "4px",
51510
51371
  justify: "space-between",
51511
- style: {
51512
- width: "100%"
51513
- },
51372
+ extraStyles: "width: 100%;",
51514
51373
  fullHeight: true
51515
51374
  }, links.map(function (link) {
51516
51375
  var linkID = createIdFromString(link.text, "contact-card-link");
51517
- return /*#__PURE__*/React.createElement(ExternalLink, {
51376
+ return /*#__PURE__*/React.createElement(React.Fragment, null, test(URL_TEST, link.link) ? /*#__PURE__*/React.createElement(ExternalLink, {
51518
51377
  key: linkID,
51519
51378
  dataQa: linkID,
51520
51379
  href: link.link,
51521
51380
  newTab: true,
51522
- 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 "),
51523
51382
  size: FONT_SIZE.SM,
51524
51383
  lineHeight: "1.313rem"
51525
51384
  }, link.text, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
51526
51385
  linkColor: linkThemeValues.externalLinkColor,
51527
- text: link.text
51528
- }));
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));
51529
51395
  })))));
51530
51396
  };
51531
51397
 
51532
51398
  var pageBackground = "#FBFCFD";
51533
- var fallbackValues$11 = {
51399
+ var fallbackValues$10 = {
51534
51400
  pageBackground: pageBackground
51535
51401
  };
51536
51402
 
@@ -51578,7 +51444,7 @@ var CenterSingle = function CenterSingle(_ref) {
51578
51444
  padding: "0"
51579
51445
  })));
51580
51446
  };
51581
- var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$11));
51447
+ var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$10));
51582
51448
 
51583
51449
  var CenterStack = function CenterStack(_ref) {
51584
51450
  var header = _ref.header,
@@ -51621,7 +51487,7 @@ var CenterStack = function CenterStack(_ref) {
51621
51487
  padding: "0"
51622
51488
  })));
51623
51489
  };
51624
- var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$11));
51490
+ var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$10));
51625
51491
 
51626
51492
  var CenterSingle$2 = function CenterSingle(_ref) {
51627
51493
  var header = _ref.header,
@@ -51667,7 +51533,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
51667
51533
  padding: "0"
51668
51534
  })));
51669
51535
  };
51670
- var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$11));
51536
+ var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$10));
51671
51537
 
51672
51538
  var SidebarSingleContent = function SidebarSingleContent(_ref) {
51673
51539
  var header = _ref.header,
@@ -51720,7 +51586,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
51720
51586
  padding: "0"
51721
51587
  })));
51722
51588
  };
51723
- var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$11));
51589
+ var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$10));
51724
51590
 
51725
51591
  var SidebarStackContent = function SidebarStackContent(_ref) {
51726
51592
  var header = _ref.header,
@@ -51790,7 +51656,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
51790
51656
  key: "footer-box"
51791
51657
  })));
51792
51658
  };
51793
- var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$11));
51659
+ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$10));
51794
51660
 
51795
51661
  var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
51796
51662
  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51861,5 +51727,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
51861
51727
  useLogoutTimers: useLogoutTimers
51862
51728
  });
51863
51729
 
51864
- 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 };
51865
51731
  //# sourceMappingURL=index.esm.js.map