@thecb/components 6.2.8 → 6.3.0-beta.1

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import React, { createContext, createElement, PureComponent, forwardRef, Component, cloneElement, Children, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, memo, useEffect as useEffect$1, useMemo, useCallback, isValidElement, createRef } from 'react';
 import styled, { ThemeContext, css, ThemeProvider } from 'styled-components';
 import theme from 'styled-theming';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import reactDom from 'react-dom';
 
 function ownKeys(object, enumerableOnly) {
@@ -6296,6 +6296,20 @@ var checkDeniedCards = function checkDeniedCards(name) {
 var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
 var inputPlaceholderTextStyle = "\n  ::-webkit-input-placeholder {\n    color: ".concat(CHARADE_GREY, ";\n  }\n  ::-moz-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::-ms-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n");
 var inputDisabledStyle = "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";
+var MOBILE_WIDTH = 768;
+var throttle = function throttle(delay, fn) {
+  var lastCall = 0;
+  return function () {
+    var now = new Date().getTime();
+
+    if (now - lastCall < delay) {
+      return;
+    }
+
+    lastCall = now;
+    return fn.apply(void 0, arguments);
+  };
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6311,7 +6325,9 @@ var general = /*#__PURE__*/Object.freeze({
   checkDeniedCards: checkDeniedCards,
   screenReaderOnlyStyle: screenReaderOnlyStyle,
   inputPlaceholderTextStyle: inputPlaceholderTextStyle,
-  inputDisabledStyle: inputDisabledStyle
+  inputDisabledStyle: inputDisabledStyle,
+  MOBILE_WIDTH: MOBILE_WIDTH,
+  throttle: throttle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -19033,22 +19049,6 @@ var fallbackValues$b = {
   iconBackgroundColor: iconBackgroundColor
 };
 
-var MOBILE_WIDTH = 768;
-
-var throttle = function throttle(delay, fn) {
-  var lastCall = 0;
-  return function () {
-    var now = new Date().getTime();
-
-    if (now - lastCall < delay) {
-      return;
-    }
-
-    lastCall = now;
-    return fn.apply(void 0, arguments);
-  };
-};
-
 var withWindowSize = function withWindowSize(Child) {
   return function (_ref) {
     var props = _extends({}, _ref);
@@ -19101,7 +19101,7 @@ var CardVariantSwitcher = function CardVariantSwitcher(_ref) {
   }, children));
 };
 
-var Card = function Card(_ref2) {
+var CardRegistryCard = function CardRegistryCard(_ref2) {
   var themeValues = _ref2.themeValues,
       icon = _ref2.icon,
       heading = _ref2.heading,
@@ -19187,11 +19187,11 @@ var Card = function Card(_ref2) {
   }))))));
 };
 
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$b);
+var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$b);
 
 var cardRegistry = {
   accounts: function accounts(props) {
-    return /*#__PURE__*/React.createElement(Card$1, _extends({
+    return /*#__PURE__*/React.createElement(CardRegistryCard$1, _extends({
       icon: "accounts",
       heading: "Find Your Account",
       buttonText: "Find Account",
@@ -19200,7 +19200,7 @@ var cardRegistry = {
     }, props));
   },
   properties: function properties(props) {
-    return /*#__PURE__*/React.createElement(Card$1, _extends({
+    return /*#__PURE__*/React.createElement(CardRegistryCard$1, _extends({
       icon: "properties",
       heading: "Find Your Property",
       buttonText: "Find Property",
@@ -19209,7 +19209,7 @@ var cardRegistry = {
     }, props));
   },
   payment: function payment(props) {
-    return /*#__PURE__*/React.createElement(Card$1, _extends({
+    return /*#__PURE__*/React.createElement(CardRegistryCard$1, _extends({
       icon: "payment",
       heading: "Manage Your Wallet",
       buttonText: "Go to Wallet",
@@ -34890,6 +34890,113 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
+var backgroundColor$5 = WHITE;
+var fallbackValues$v = {
+  backgroundColor: backgroundColor$5
+};
+
+var _excluded$w = ["themeValues", "variant", "children", "extraStyles"];
+
+var CardVariantSwitcher$1 = function CardVariantSwitcher(_ref) {
+  var variant = _ref.variant,
+      children = _ref.children;
+  return variant === "vertical" ? /*#__PURE__*/React.createElement(Fragment$1, null, children) : /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "width: 100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0",
+    maxWidth: "100%",
+    fullHeight: true
+  }, children));
+};
+
+var Card = function Card(_ref2) {
+  var themeValues = _ref2.themeValues,
+      variant = _ref2.variant,
+      children = _ref2.children,
+      extraStyles = _ref2.extraStyles,
+      props = _objectWithoutProperties(_ref2, _excluded$w);
+
+  return /*#__PURE__*/React.createElement(BoxWithShadow$1, _extends({
+    variant: "baseStandard",
+    background: themeValues.backgroundColor,
+    borderRadius: "4px",
+    padding: "0",
+    margin: "0",
+    maxWidth: variant !== "vertical" ? "100%" : "276px",
+    minHeight: "100%",
+    minWidth: variant !== "vertical" && "276px",
+    extraStyles: extraStyles
+  }, props), /*#__PURE__*/React.createElement(Cover, {
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React.createElement(CardVariantSwitcher$1, {
+    variant: variant
+  }, children)));
+};
+
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$v);
+
+var fontFamily$6 = "Public Sans, sans-serif";
+var activeColor$5 = MATISSE_BLUE;
+var linkColor$3 = CHARADE_GREY;
+var fallbackValues$w = {
+  fontFamily: fontFamily$6,
+  activeColor: activeColor$5,
+  linkColor: linkColor$3
+};
+
+var NavTab = function NavTab(_ref) {
+  var path = _ref.path,
+      label = _ref.label,
+      themeValues = _ref.themeValues;
+
+  var _useContext = useContext(ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setIsActive = _useState2[1];
+
+  var location = useLocation();
+  useEffect$1(function () {
+    setIsActive(location.pathname.includes(path));
+  }, [location.pathname]);
+  var border = "border-bottom: 3px solid ".concat(themeValues.activeColor);
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: 0
+  }, /*#__PURE__*/React.createElement(InternalLink, {
+    color: isActive ? themeValues.activeColor : themeValues.linkColor,
+    to: path,
+    extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0.1rem;\n        ")
+  }, label));
+};
+
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$w);
+
+var NavTabs = function NavTabs(_ref) {
+  var tabsConfig = _ref.tabsConfig,
+      tabGap = _ref.tabGap;
+
+  var _useContext = useContext(ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  var tabs = tabsConfig.map(function (tabConfig) {
+    return /*#__PURE__*/React.createElement(NavTab$1, _extends({
+      key: tabConfig.path
+    }, tabConfig));
+  });
+  return /*#__PURE__*/React.createElement(BoxWithShadow$1, {
+    variant: "insetStandard",
+    extraStyles: "padding: 0"
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, isMobile ? tabs : /*#__PURE__*/React.createElement(Cluster, {
+    childGap: tabGap
+  }, tabs)));
+};
+
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
   ...rest
@@ -36817,6 +36924,38 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
+var headerBackgroundColor = STORM_GREY;
+var headerTextColor = WHITE;
+var fallbackValues$x = {
+  headerBackgroundColor: headerBackgroundColor,
+  headerTextColor: headerTextColor
+};
+
+var _excluded$x = ["themeValues", "children", "header", "extraStyles"];
+
+var CardWithHeader = function CardWithHeader(_ref) {
+  var themeValues = _ref.themeValues,
+      children = _ref.children,
+      header = _ref.header,
+      extraStyles = _ref.extraStyles,
+      props = _objectWithoutProperties(_ref, _excluded$x);
+
+  return /*#__PURE__*/React.createElement(Card$1, _extends({
+    extraStyles: extraStyles
+  }, props), /*#__PURE__*/React.createElement(Box, {
+    padding: "24px",
+    background: themeValues.headerBackgroundColor,
+    extraStyles: "\n        border-radius: 4px 4px 0 0;\n        "
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    variant: "small",
+    color: themeValues.headerTextColor
+  }, header)), /*#__PURE__*/React.createElement(Box, {
+    padding: "24px"
+  }, children));
+};
+
+var CardWithHeader$1 = themeComponent(CardWithHeader, "CardWithHeader", fallbackValues$x);
+
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var _newPasswordErrorMess;
 
@@ -36957,7 +37096,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$v = {
+var fallbackValues$y = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -37084,7 +37223,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$v);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$y);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -37488,6 +37627,42 @@ EmailForm.reducer = reducer$3;
 EmailForm.mapStateToProps = mapStateToProps$4;
 EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
+var footerBackgroundColor = BRIGHT_GREY;
+var subfooterBackgroundColor = STORM_GREY;
+var fallbackValues$z = {
+  footerBackgroundColor: footerBackgroundColor,
+  subfooterBackgroundColor: subfooterBackgroundColor
+};
+
+var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
+  var _ref$footerLargeSide = _ref.footerLargeSide,
+      footerLargeSide = _ref$footerLargeSide === void 0 ? "right" : _ref$footerLargeSide,
+      _ref$footerLargeSideS = _ref.footerLargeSideSize,
+      footerLargeSideSize = _ref$footerLargeSideS === void 0 ? "2" : _ref$footerLargeSideS,
+      leftFooterContent = _ref.leftFooterContent,
+      rightFooterContent = _ref.rightFooterContent,
+      leftSubfooterContent = _ref.leftSubfooterContent,
+      rightSubfooterContent = _ref.rightSubfooterContent,
+      themeValues = _ref.themeValues;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavFooter, {
+    largeSide: footerLargeSide,
+    largeSideSize: footerLargeSideSize,
+    rightContent: rightFooterContent,
+    leftContent: leftFooterContent,
+    "aria-label": "footer",
+    backgroundColor: themeValues.footerBackgroundColor
+  }), /*#__PURE__*/React.createElement(NavFooter, {
+    backgroundColor: themeValues.subfooterBackgroundColor,
+    footerMinHeight: "45px",
+    footerPadding: "0 1rem",
+    "aria-label": "subfooter",
+    leftContent: leftSubfooterContent,
+    rightContent: rightSubfooterContent
+  }));
+};
+
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$z);
+
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var _EmailErrorMessages;
 
@@ -37537,10 +37712,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
-var backgroundColor$5 = "#182848";
-var fallbackValues$w = {
+var backgroundColor$6 = "#182848";
+var fallbackValues$A = {
   textColor: textColor$2,
-  backgroundColor: backgroundColor$5
+  backgroundColor: backgroundColor$6
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -37595,7 +37770,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$w));
+var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$A));
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -42998,12 +43173,12 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$6 = {
+var backgroundColor$7 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$x = {
+var fallbackValues$B = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -43013,7 +43188,7 @@ var fallbackValues$x = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$6
+  backgroundColor: backgroundColor$7
 };
 
 /*
@@ -43062,9 +43237,9 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$x, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$B, "default"));
 
-var backgroundColor$7 = {
+var backgroundColor$8 = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -43072,8 +43247,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$y = {
-  backgroundColor: backgroundColor$7,
+var fallbackValues$C = {
+  backgroundColor: backgroundColor$8,
   shadowColor: shadowColor
 };
 
@@ -43113,7 +43288,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$y, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$C, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -43169,7 +43344,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$y, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$C, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -43222,15 +43397,15 @@ var TitleModule = function TitleModule(_ref) {
 
 var color$a = "#15749D";
 var hoverColor$4 = "#116285";
-var activeColor$5 = "#0E506D";
-var linkColor$3 = "#3176AA";
+var activeColor$6 = "#0E506D";
+var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$z = {
+var fallbackValues$D = {
   color: color$a,
   hoverColor: hoverColor$4,
-  activeColor: activeColor$5,
-  linkColor: linkColor$3,
+  activeColor: activeColor$6,
+  linkColor: linkColor$4,
   fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus
 };
@@ -43338,7 +43513,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$z);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$D);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -44134,7 +44309,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, backButton, !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
 };
 
-var backgroundColor$8 = {
+var backgroundColor$9 = {
   "default": "transparent",
   small: "transparent"
 };
@@ -44150,14 +44325,14 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$A = {
-  backgroundColor: backgroundColor$8,
+var fallbackValues$E = {
+  backgroundColor: backgroundColor$9,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$w = ["amount"],
+var _excluded$y = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -44302,7 +44477,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$w);
+        rest = _objectWithoutProperties(_ref5, _excluded$y);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -44401,9 +44576,9 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$A, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$E, "default");
 
-var linkColor$4 = {
+var linkColor$5 = {
   "default": "#3176AA"
 };
 var fontSize$a = {
@@ -44418,8 +44593,8 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$B = {
-  linkColor: linkColor$4,
+var fallbackValues$F = {
+  linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
   fontWeight: fontWeight$7,
@@ -44477,7 +44652,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$B, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$F, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -44911,7 +45086,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$C = {
+var fallbackValues$G = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -45130,7 +45305,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$C);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$G);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -45427,7 +45602,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$D = {
+var fallbackValues$H = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -45506,12 +45681,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$D);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$H);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$E = {
+var fallbackValues$I = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -45567,13 +45742,13 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$E);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$I);
 
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$5 = {
+var linkColor$6 = {
   "default": "#3176AA",
   footer: "#ffffff"
 };
@@ -45598,9 +45773,9 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$F = {
-  backgroundColor: backgroundColor$9,
-  linkColor: linkColor$5,
+var fallbackValues$J = {
+  backgroundColor: backgroundColor$a,
+  linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
@@ -45660,7 +45835,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$F, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$J, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -45730,17 +45905,64 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var titleColor$1 = BRIGHT_GREY;
+var textColor$3 = BRIGHT_GREY;
+var titleWeight = FONT_WEIGHT_BOLD;
+var imageBackgroundColor = INFO_BLUE;
+var fallbackValues$K = {
+  textColor: textColor$3,
+  titleColor: titleColor$1,
+  titleWeight: titleWeight,
+  imageBackgroundColor: imageBackgroundColor
+};
+
+var WelcomeCard = function WelcomeCard(_ref) {
+  var themeValues = _ref.themeValues,
+      title = _ref.title,
+      text = _ref.text,
+      buttonText = _ref.buttonText,
+      url = _ref.url,
+      imageSrc = _ref.imageSrc,
+      newTab = _ref.newTab;
+  return /*#__PURE__*/React.createElement(Card$1, null, imageSrc && /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    style: {
+      background: "".concat(themeValues.imageBackgroundColor),
+      objectFit: "none",
+      height: "150px"
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    padding: "24px"
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    variant: "small",
+    color: themeValues.titleColor,
+    weight: themeValues.titleWeight
+  }, title), /*#__PURE__*/React.createElement(Paragraph$1, {
+    color: themeValues.textColor
+  }, text), url && buttonText && /*#__PURE__*/React.createElement(Box, {
+    extraStyles: "margin-top: 4rem; padding: 0"
+  }, /*#__PURE__*/React.createElement(ButtonWithLink, {
+    extraStyles: "margin: 0; width: 100%",
+    linkExtraStyles: "text-decoration:none",
+    url: url,
+    text: buttonText,
+    newTab: newTab
+  }))));
+};
+
+var WelcomeCard$1 = themeComponent(WelcomeCard, "WelcomeCard", fallbackValues$K);
+
 var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
-var headerBackgroundColor = BRIGHT_GREY;
-var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$G = {
+var headerBackgroundColor$1 = BRIGHT_GREY;
+var imageBackgroundColor$1 = MATISSE_BLUE;
+var fallbackValues$L = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
-  headerBackgroundColor: headerBackgroundColor,
-  imageBackgroundColor: imageBackgroundColor
+  headerBackgroundColor: headerBackgroundColor$1,
+  imageBackgroundColor: imageBackgroundColor$1
 };
 
 var WelcomeImage = styled.img.withConfig({
@@ -45782,7 +46004,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$G));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$L));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -45955,7 +46177,7 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$H = {
+var fallbackValues$M = {
   pageBackground: pageBackground
 };
 
@@ -46002,7 +46224,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$H));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$M));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -46044,7 +46266,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$H));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$M));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -46057,7 +46279,9 @@ var CenterSingle$2 = function CenterSingle(_ref) {
       _ref$maxWidth = _ref.maxWidth,
       maxWidth = _ref$maxWidth === void 0 ? "75rem" : _ref$maxWidth,
       _ref$gutters = _ref.gutters,
-      gutters = _ref$gutters === void 0 ? "2rem" : _ref$gutters;
+      gutters = _ref$gutters === void 0 ? "2rem" : _ref$gutters,
+      _ref$fillPageVertical = _ref.fillPageVertical,
+      fillPageVertical = _ref$fillPageVertical === void 0 ? false : _ref$fillPageVertical;
   var themeContext = useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
@@ -46067,7 +46291,10 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     childGap: "0",
-    fillCenter: true
+    fillCenter: true,
+    style: {
+      minHeight: fillPageVertical ? "100vh" : "initial"
+    }
   }, header ? header : /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }), /*#__PURE__*/React.createElement(Box, {
@@ -46084,7 +46311,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$H));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$M));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -46138,7 +46365,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$H));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$M));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -46209,7 +46436,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$H));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$M));
 
 
 
@@ -46249,5 +46476,5 @@ var index$5 = /*#__PURE__*/Object.freeze({
   useFocusInvalidInput: useFocusInvalidInput
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CardWithHeader$1 as CardWithHeader, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeCard$1 as WelcomeCard, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map