@thecb/components 6.3.1-beta.2 → 6.3.1-beta.5

package/dist/index.cjs.js

@@ -6338,7 +6338,7 @@ var general = /*#__PURE__*/Object.freeze({
   throttle: throttle
 });
 
-var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
+var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
 
 var Text = function Text(_ref) {
   var themeValues = _ref.themeValues,
@@ -6356,6 +6356,8 @@ var Text = function Text(_ref) {
       as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "p" : _ref$variant,
       rest = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
@@ -6369,7 +6371,8 @@ var Text = function Text(_ref) {
     onClick: onClick,
     onKeyPress: onKeyPress,
     "data-qa": dataQa,
-    $textWrap: textWrap
+    $textWrap: textWrap,
+    $variant: variant
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
@@ -22393,53 +22396,6 @@ var DisplayBox = function DisplayBox(_ref) {
 
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$h);
 
-var DisplayCard = function DisplayCard(_ref) {
-  var title = _ref.title,
-      item = _ref.item,
-      buttonText = _ref.buttonText,
-      buttonAction = _ref.buttonAction,
-      url = _ref.url,
-      _ref$link = _ref.link,
-      link = _ref$link === void 0 ? false : _ref$link;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 16px"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0rem"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 8px 0"
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "pL",
-    color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px"
-  }, title)), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "24px",
-    borderSize: "1px",
-    borderRadius: "4px",
-    background: WHITE,
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    color: CHARADE_GREY
-  }, item), link ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
-    text: buttonText,
-    url: url,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    text: buttonText,
-    action: buttonAction,
-    variant: "smallGhost",
-    dataQa: buttonText,
-    extraStyles: "min-width: 0;"
-  }) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
-};
-
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -22718,6 +22674,284 @@ var FormattedInput = function FormattedInput(_ref) {
   }));
 };
 
+var formatDelimiter = "_";
+var phoneFormats = ["", "_", "__", "(___) ", "(___) _", "(___) __", "(___) ___-", "(___) ___-_", "(___) ___-__", "(___) ___-___", "(___) ___-____"];
+var zipFormats = ["", "_", "__", "___", "____", "_____", "______", "_____-__", "_____-___", "_____-____"];
+var creditCardFormats = ["", "_", "__", "___", "____", "____ _", "____ __", "____ ___", "____ ____", "____ ____ _", "____ ____ __", "____ ____ ___", "____ ____ ____", "____ ____ ____ _", "____ ____ ____ __", "____ ____ ____ ___", "____ ____ ____ ____"];
+var moneyFormats = ["", "$0.0_", "$0.__", "$_.__", "$__.__", "$___.__", "$_,___.__", "$__,___.__", "$___,___.__", "$_,___,___.__", "$__,___,___.__", "$___,___,___.__", "$_,___,___,___.__", "$__,___,___,___.__", "$___,___,___,___.__", "$_,___,___,___,___.__"];
+var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+var zipFormat = createFormat(zipFormats, formatDelimiter);
+var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
+var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
+var phoneFormat = createFormat(phoneFormats, formatDelimiter);
+var moneyFormat = createFormat(moneyFormats, formatDelimiter);
+
+var formats = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  formatDelimiter: formatDelimiter,
+  phoneFormats: phoneFormats,
+  moneyFormats: moneyFormats,
+  expirationDateFormats: expirationDateFormats,
+  zipFormat: zipFormat,
+  creditCardFormat: creditCardFormat,
+  expirationDateFormat: expirationDateFormat,
+  phoneFormat: phoneFormat,
+  moneyFormat: moneyFormat
+});
+
+var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
+  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  // Only move focus when "hasErrors" is true
+  // "hasErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  // Reset errors, if provided, resets the error state tracking in order to properly re-run
+  React.useEffect(function () {
+    if (hasErrors) {
+      var _inputsWithErrors$;
+
+      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+      inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
+    }
+
+    return function () {
+      return resetHasErrors(false);
+    };
+  });
+};
+
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+var useOutsideClickHook$1 = function useOutsideClickHook(handler) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+  }, [ref]);
+  return ref;
+};
+
+
+
+var index$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  formats: formats,
+  general: general,
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput,
+  useOutsideClick: useOutsideClickHook$1
+});
+
+var hoverColor$4 = "#116285";
+var activeColor$4 = "#0E506D";
+var popoverTriggerColor = "#15749D";
+var fallbackValues$i = {
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$4,
+  popoverTriggerColor: popoverTriggerColor
+};
+
+var Popover = function Popover(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$triggerText = _ref.triggerText,
+      triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? "" : _ref$content,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+      Icon = _ref.icon,
+      _ref$iconHelpText = _ref.iconHelpText,
+      iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+      _ref$popoverID = _ref.popoverID,
+      popoverID = _ref$popoverID === void 0 ? 0 : _ref$popoverID,
+      _ref$popoverFocus = _ref.popoverFocus,
+      popoverFocus = _ref$popoverFocus === void 0 ? false : _ref$popoverFocus,
+      extraStyles = _ref.extraStyles,
+      textExtraStyles = _ref.textExtraStyles,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "auto" : _ref$height,
+      position = _ref.position,
+      arrowPosition = _ref.arrowPosition;
+  var hoverColor = themeValues.hoverColor,
+      activeColor = themeValues.activeColor,
+      popoverTriggerColor = themeValues.popoverTriggerColor;
+
+  var _ref2 = position !== null && position !== void 0 ? position : {},
+      _ref2$top = _ref2.top,
+      top = _ref2$top === void 0 ? "-110px" : _ref2$top,
+      _ref2$right = _ref2.right,
+      right = _ref2$right === void 0 ? "auto" : _ref2$right,
+      _ref2$bottom = _ref2.bottom,
+      bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
+      _ref2$left = _ref2.left,
+      left = _ref2$left === void 0 ? "-225px" : _ref2$left;
+
+  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
+      _ref3$arrowTop = _ref3.arrowTop,
+      arrowTop = _ref3$arrowTop === void 0 ? "auto" : _ref3$arrowTop,
+      _ref3$arrowRight = _ref3.arrowRight,
+      arrowRight = _ref3$arrowRight === void 0 ? "10px" : _ref3$arrowRight,
+      _ref3$arrowBottom = _ref3.arrowBottom,
+      arrowBottom = _ref3$arrowBottom === void 0 ? "-8px" : _ref3$arrowBottom,
+      _ref3$arrowLeft = _ref3.arrowLeft,
+      arrowLeft = _ref3$arrowLeft === void 0 ? "auto" : _ref3$arrowLeft;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverOpen = _useState2[0],
+      togglePopover = _useState2[1];
+
+  var handleTogglePopover = function handleTogglePopover(popoverState) {
+    if (popoverOpen !== popoverState) {
+      togglePopover(popoverState);
+    }
+  };
+
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: function action() {
+      return noop;
+    },
+    onFocus: function onFocus() {
+      handleTogglePopover(true);
+    },
+    onBlur: function onBlur() {
+      handleTogglePopover(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === 27) {
+        handleTogglePopover(false);
+      }
+    },
+    onTouchStart: function onTouchStart() {
+      return handleTogglePopover(true);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleTogglePopover(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleTogglePopover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleTogglePopover(false);
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    id: "btnPopover".concat(popoverID),
+    "aria-expanded": popoverOpen,
+    "aria-labelledby": "btnPopover".concat(popoverID, "_info Disclosure").concat(popoverID),
+    "aria-describedby": "Disclosure".concat(popoverID),
+    "aria-controls": "Disclosed".concat(popoverID),
+    ref: triggerRef
+  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    id: "btnPopover".concat(popoverID, "_info")
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: popoverTriggerColor,
+    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    background: "white",
+    borderRadius: "4px",
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    id: "Disclosed".concat(popoverID),
+    role: "region",
+    "aria-describedby": "Disclosure".concat(popoverID),
+    tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, "\n          ")
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: absolute; content: \"\"; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ".concat(arrowBottom, "; right: ").concat(arrowRight, "; top: ").concat(arrowTop, "; left: ").concat(arrowLeft, ";")
+  })));
+};
+
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$i);
+
+var DisplayCard = function DisplayCard(_ref) {
+  var title = _ref.title,
+      item = _ref.item,
+      buttonText = _ref.buttonText,
+      buttonAction = _ref.buttonAction,
+      url = _ref.url,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? false : _ref$link,
+      helpText = _ref.helpText,
+      _ref$hasPopover = _ref.hasPopover,
+      hasPopover = _ref$hasPopover === void 0 ? false : _ref$hasPopover,
+      _ref$popoverTriggerTe = _ref.popoverTriggerText,
+      popoverTriggerText = _ref$popoverTriggerTe === void 0 ? "" : _ref$popoverTriggerTe,
+      _ref$popoverContent = _ref.popoverContent,
+      popoverContent = _ref$popoverContent === void 0 ? "" : _ref$popoverContent,
+      popoverExtraStyles = _ref.popoverExtraStyles,
+      popoverTextExtraStyles = _ref.popoverTextExtraStyles;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 16px"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0rem"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 8px 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "pL",
+    color: CHARADE_GREY,
+    extraStyles: "letter-spacing: 0.29px"
+  }, title), hasPopover && /*#__PURE__*/React__default.createElement(Popover$1, {
+    triggerText: popoverTriggerText,
+    content: popoverContent,
+    popoverExtraStyles: popoverExtraStyles,
+    popoverTextExtraStyles: popoverTextExtraStyles
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "24px",
+    borderSize: "1px",
+    borderRadius: "4px",
+    background: WHITE,
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: CHARADE_GREY
+  }, item), link ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+    text: buttonText,
+    url: url,
+    variant: "smallGhost",
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
+  }) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: buttonText,
+    action: buttonAction,
+    variant: "smallGhost",
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
+  }) : helpText ? /*#__PURE__*/React__default.createElement(Text$1, {
+    color: STORM_GREY,
+    extraStyles: "font-style: italic;"
+  }, helpText) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
+};
+
 var linkColor$2 = {
   "default": "".concat(MATISSE_BLUE),
   disabled: "".concat(MATISSE_BLUE)
@@ -22767,7 +23001,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$i = {
+var fallbackValues$j = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -22989,7 +23223,7 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$i, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$j, "default");
 
 var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
@@ -23045,7 +23279,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$i, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$j, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -23069,7 +23303,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   })));
 };
 
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$i, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$j, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -23083,7 +23317,7 @@ var color$7 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$j = {
+var fallbackValues$k = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$7
@@ -23126,11 +23360,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$j, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$k, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$k = {
+var fallbackValues$l = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -23196,7 +23430,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$k);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$l);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -23278,7 +23512,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$l = {
+var fallbackValues$m = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -23320,7 +23554,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$l, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$m, "h1");
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -23394,7 +23628,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$m = {
+var fallbackValues$n = {
   fontWeight: fontWeight$4
 };
 
@@ -23422,7 +23656,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$m, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$n, "default");
 
 var weightTitle = {
   "default": "600",
@@ -23432,7 +23666,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -23461,10 +23695,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$n, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$o, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$o = {
+var fallbackValues$p = {
   color: color$8
 };
 
@@ -23503,7 +23737,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$o);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$p);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -23769,7 +24003,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$p = {
+var fallbackValues$q = {
   color: color$9,
   height: height$1
 };
@@ -23862,12 +24096,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$p, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$q, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$q = {
+var fallbackValues$r = {
   backgroundColor: backgroundColor$4
 };
 
@@ -23895,12 +24129,12 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$q, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
 
-var activeColor$4 = "".concat(MATISSE_BLUE);
+var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$r = {
-  activeColor: activeColor$4,
+var fallbackValues$s = {
+  activeColor: activeColor$5,
   inactiveColor: inactiveColor
 };
 
@@ -23989,12 +24223,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$r);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$s);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$s = {
+var fallbackValues$t = {
   border: border$2
 };
 
@@ -24069,7 +24303,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   })))));
 };
 
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$s, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$t, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -24077,7 +24311,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -24094,7 +24328,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$t, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$u, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -34678,7 +34912,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$u = {
+var fallbackValues$v = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -34853,7 +35087,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$u);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$v);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -34899,58 +35133,136 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
 };
 
 var backgroundColor$5 = WHITE;
-var fallbackValues$v = {
-  backgroundColor: backgroundColor$5
+var imageBackgroundColor = INFO_BLUE;
+var headerBackgroundColor = STORM_GREY;
+var headerColor = WHITE;
+var fallbackValues$w = {
+  backgroundColor: backgroundColor$5,
+  imageBackgroundColor: imageBackgroundColor,
+  headerBackgroundColor: headerBackgroundColor,
+  headerColor: headerColor
 };
 
-var _excluded$w = ["themeValues", "variant", "children", "extraStyles"];
+var CardImage = styled__default.img.withConfig({
+  displayName: "CardImagestyled__CardImage",
+  componentId: "sc-ug7kyn-0"
+})(["background:", ";object-fit:", ";height:", ";"], function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor;
+}, function (_ref2) {
+  var objectFit = _ref2.objectFit;
+  return objectFit;
+}, function (_ref3) {
+  var height = _ref3.height;
+  return height;
+});
+
+var titleColor = BRIGHT_GREY;
+var titleWeight = FONT_WEIGHT_BOLD;
+var fallbackValues$x = _defineProperty({
+  titleColor: titleColor,
+  titleWeight: titleWeight
+}, "titleWeight", titleWeight);
 
-var CardVariantSwitcher$1 = function CardVariantSwitcher(_ref) {
-  var variant = _ref.variant,
-      children = _ref.children;
-  return variant === "vertical" ? /*#__PURE__*/React__default.createElement(React.Fragment, null, children) : /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "width: 100%"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0",
-    maxWidth: "100%",
-    fullHeight: true
-  }, children));
+var CardText = function CardText(_ref) {
+  var text = _ref.text,
+      titleText = _ref.titleText,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
+      themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Stack, null, titleText && /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: titleVariant,
+    color: themeValues.titleColor,
+    weight: themeValues === null || themeValues === void 0 ? void 0 : themeValues.titleWeight
+  }, titleText), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    color: themeValues.textColor
+  }, text)));
 };
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$x);
 
-var Card = function Card(_ref2) {
-  var themeValues = _ref2.themeValues,
-      variant = _ref2.variant,
-      children = _ref2.children,
-      extraStyles = _ref2.extraStyles,
-      props = _objectWithoutProperties(_ref2, _excluded$w);
+var CardHeader = function CardHeader(_ref) {
+  var headerText = _ref.headerText,
+      headerColor = _ref.headerColor,
+      headerVariant = _ref.headerVariant,
+      backgroundColor = _ref.backgroundColor,
+      padding = _ref.padding,
+      borderRadius = _ref.borderRadius;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: padding,
+    background: backgroundColor,
+    borderRadius: "".concat(borderRadius, " ").concat(borderRadius, " 0 0")
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: headerVariant,
+    color: headerColor
+  }, headerText));
+};
 
-  return /*#__PURE__*/React__default.createElement(BoxWithShadow$1, _extends({
+var Card = function Card(_ref) {
+  var themeValues = _ref.themeValues,
+      children = _ref.children,
+      extraStyles = _ref.extraStyles,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "276px" : _ref$width,
+      text = _ref.text,
+      titleText = _ref.titleText,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
+      imgSrc = _ref.imgSrc,
+      _ref$imgHeight = _ref.imgHeight,
+      imgHeight = _ref$imgHeight === void 0 ? "150px" : _ref$imgHeight,
+      _ref$imgObjectFit = _ref.imgObjectFit,
+      imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
+      headerText = _ref.headerText,
+      _ref$headerVariant = _ref.headerVariant,
+      headerVariant = _ref$headerVariant === void 0 ? "small" : _ref$headerVariant,
+      _ref$borderRadius = _ref.borderRadius,
+      borderRadius = _ref$borderRadius === void 0 ? "4px" : _ref$borderRadius,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  var numberOfChildren = children.length + (imgSrc ? 1 : 0) + (text ? 1 : 0) + (headerText ? 1 : 0);
+  return /*#__PURE__*/React__default.createElement(BoxWithShadow$1, {
     variant: "baseStandard",
     background: themeValues.backgroundColor,
-    borderRadius: "4px",
+    borderRadius: borderRadius,
     padding: "0",
     margin: "0",
-    maxWidth: variant !== "vertical" ? "100%" : "276px",
-    minHeight: "100%",
-    minWidth: variant !== "vertical" && "276px",
+    minWidth: width,
     extraStyles: extraStyles
-  }, props), /*#__PURE__*/React__default.createElement(Cover, {
-    singleChild: true,
-    fillCenter: true
-  }, /*#__PURE__*/React__default.createElement(CardVariantSwitcher$1, {
-    variant: variant
-  }, children)));
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    fullHeight: true,
+    childGap: "0",
+    bottomItem: numberOfChildren
+  }, headerText && /*#__PURE__*/React__default.createElement(CardHeader, {
+    headerText: headerText,
+    headerColor: themeValues.headerColor,
+    headerVariant: headerVariant,
+    backgroundColor: themeValues.headerBackgroundColor,
+    borderRadius: borderRadius,
+    padding: padding
+  }), imgSrc && /*#__PURE__*/React__default.createElement(CardImage, {
+    height: imgHeight,
+    objectFit: imgObjectFit,
+    backgroundColor: themeValues.imageBackgroundColor,
+    src: imgSrc
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: padding
+  }, text && /*#__PURE__*/React__default.createElement(CardText$1, {
+    titleText: titleText,
+    text: text,
+    titleVariant: titleVariant
+  }), children))));
 };
 
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$v);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$w);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$5 = MATISSE_BLUE;
+var activeColor$6 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$w = {
+var fallbackValues$y = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$5,
+  activeColor: activeColor$6,
   linkColor: linkColor$3
 };
 
@@ -34981,7 +35293,7 @@ var NavTab = function NavTab(_ref) {
   }, label));
 };
 
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$w);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$y);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -36760,31 +37072,6 @@ const createFormState = formConfig => ({
   mapStateToProps: mapStateToProps
 });
 
-var formatDelimiter = "_";
-var phoneFormats = ["", "_", "__", "(___) ", "(___) _", "(___) __", "(___) ___-", "(___) ___-_", "(___) ___-__", "(___) ___-___", "(___) ___-____"];
-var zipFormats = ["", "_", "__", "___", "____", "_____", "______", "_____-__", "_____-___", "_____-____"];
-var creditCardFormats = ["", "_", "__", "___", "____", "____ _", "____ __", "____ ___", "____ ____", "____ ____ _", "____ ____ __", "____ ____ ___", "____ ____ ____", "____ ____ ____ _", "____ ____ ____ __", "____ ____ ____ ___", "____ ____ ____ ____"];
-var moneyFormats = ["", "$0.0_", "$0.__", "$_.__", "$__.__", "$___.__", "$_,___.__", "$__,___.__", "$___,___.__", "$_,___,___.__", "$__,___,___.__", "$___,___,___.__", "$_,___,___,___.__", "$__,___,___,___.__", "$___,___,___,___.__", "$_,___,___,___,___.__"];
-var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
-var zipFormat = createFormat(zipFormats, formatDelimiter);
-var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
-var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
-var phoneFormat = createFormat(phoneFormats, formatDelimiter);
-var moneyFormat = createFormat(moneyFormats, formatDelimiter);
-
-var formats = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  formatDelimiter: formatDelimiter,
-  phoneFormats: phoneFormats,
-  moneyFormats: moneyFormats,
-  expirationDateFormats: expirationDateFormats,
-  zipFormat: zipFormat,
-  creditCardFormat: creditCardFormat,
-  expirationDateFormat: expirationDateFormat,
-  phoneFormat: phoneFormat,
-  moneyFormat: moneyFormat
-});
-
 var AddressForm = function AddressForm(_ref) {
   var _zipErrorMessages;
 
@@ -36932,39 +37219,6 @@ 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", "variant"];
-
-var CardWithHeader = function CardWithHeader(_ref) {
-  var themeValues = _ref.themeValues,
-      children = _ref.children,
-      header = _ref.header,
-      extraStyles = _ref.extraStyles,
-      variant = _ref.variant,
-      props = _objectWithoutProperties(_ref, _excluded$x);
-
-  return /*#__PURE__*/React__default.createElement(Card$1, _extends({
-    extraStyles: extraStyles
-  }, props), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "24px",
-    background: themeValues.headerBackgroundColor,
-    extraStyles: "\n        border-radius: 4px 4px 0 0;\n        "
-  }, /*#__PURE__*/React__default.createElement(Title$1, {
-    variant: "small",
-    color: themeValues.headerTextColor
-  }, header)), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "24px"
-  }, children));
-};
-
-var CardWithHeader$1 = themeComponent(CardWithHeader, "CardWithHeader", fallbackValues$x);
-
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var _newPasswordErrorMess;
 
@@ -37102,11 +37356,11 @@ ChangePasswordForm.reducer = reducer$1;
 ChangePasswordForm.mapStateToProps = mapStateToProps$2;
 ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 
-var titleColor = "#292A33";
+var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$y = {
-  titleColor: titleColor,
+var fallbackValues$z = {
+  titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
 };
@@ -37232,7 +37486,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$y);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$z);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -37638,7 +37892,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$z = {
+var fallbackValues$A = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -37670,7 +37924,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }));
 };
 
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$z);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$A);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var _EmailErrorMessages;
@@ -37722,7 +37976,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
 var backgroundColor$6 = "#182848";
-var fallbackValues$A = {
+var fallbackValues$B = {
   textColor: textColor$2,
   backgroundColor: backgroundColor$6
 };
@@ -37779,7 +38033,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$A));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$B));
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -43187,7 +43441,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$B = {
+var fallbackValues$C = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -43246,7 +43500,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$B, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$C, "default"));
 
 var backgroundColor$8 = {
   profile: "#3b414d",
@@ -43256,7 +43510,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$C = {
+var fallbackValues$D = {
   backgroundColor: backgroundColor$8,
   shadowColor: shadowColor
 };
@@ -43297,7 +43551,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$C, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$D, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -43353,7 +43607,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$C, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$D, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -43405,15 +43659,15 @@ var TitleModule = function TitleModule(_ref) {
 };
 
 var color$a = "#15749D";
-var hoverColor$4 = "#116285";
-var activeColor$6 = "#0E506D";
+var hoverColor$5 = "#116285";
+var activeColor$7 = "#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$D = {
+var fallbackValues$E = {
   color: color$a,
-  hoverColor: hoverColor$4,
-  activeColor: activeColor$6,
+  hoverColor: hoverColor$5,
+  activeColor: activeColor$7,
   linkColor: linkColor$4,
   fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus
@@ -43522,7 +43776,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$D);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$E);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -44334,14 +44588,14 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$E = {
+var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$y = ["amount"],
+var _excluded$w = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -44486,7 +44740,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$y);
+        rest = _objectWithoutProperties(_ref5, _excluded$w);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -44585,7 +44839,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$E, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$F, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -44602,7 +44856,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$F = {
+var fallbackValues$G = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -44661,7 +44915,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$F, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$G, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -45026,6 +45280,129 @@ PaymentFormCard$1.reducer = reducer$8;
 PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
 PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
 
+var DashboardIframe = styled__default.iframe.withConfig({
+  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
+  componentId: "sc-j0cucj-0"
+})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
+
+/**
+ * Component: PeriscopeDashboardIframe
+ *
+ * Used for rendering Citybase's periscope reporting dashboards in iframes.
+ * Receives action props to trigger a request on mount for the iframe's url.
+ * Receives a string prop if/when we receive the url result.
+ * And receives action props to emit errors from failed iframe loading.
+ *
+ * The logic and api client methods to handle requests/response,
+ * store the url, etc. should be provided from the app consuming this library.
+ *
+ * If the url request is pending, render a spinner.
+ * If the url request failed, render a UI error state.
+ **/
+
+var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
+var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
+
+var isValidMessage = function isValidMessage(message) {
+  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
+};
+
+var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
+  var url = _ref.url,
+      requestDashboardUrl = _ref.requestDashboardUrl,
+      periscopeDataPending = _ref.periscopeDataPending,
+      periscopeDataSuccess = _ref.periscopeDataSuccess,
+      periscopeDataFailure = _ref.periscopeDataFailure,
+      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
+      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure,
+      _ref$timerMS = _ref.timerMS,
+      timerMS = _ref$timerMS === void 0 ? 20000 : _ref$timerMS;
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var time = {
+    timer: null
+  };
+  React.useEffect(function () {
+    time.timer = setTimeout(function () {
+      if (!periscopeDataSuccess) {
+        periscopeDataRequestFailure();
+      }
+    }, timerMS);
+    return function () {
+      return clearTimeout(time.timer);
+    };
+  }, [periscopeDataSuccess]);
+
+  var Dashboard = function Dashboard(height) {
+    return function (url) {
+      return /*#__PURE__*/React__default.createElement(DashboardIframe, {
+        src: url,
+        width: "100%",
+        height: height,
+        "data-qa": "DashboardIframe",
+        onLoad: function onLoad() {
+          var iframe = document.querySelector("iframe");
+          iframe.style.display = "initial";
+        }
+      });
+    };
+  };
+
+  var validatePeriscope = function validatePeriscope(message) {
+    if (isValidMessage(message)) {
+      setHeight(message.data.dashboard_height + 100);
+
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
+    }
+  };
+
+  React.useLayoutEffect(function () {
+    window.addEventListener("message", validatePeriscope);
+    requestDashboardUrl();
+    return function () {
+      return window.removeEventListener("message", validatePeriscope);
+    };
+  }, [requestDashboardUrl]);
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(BoxWithShadow$1, {
+    padding: "0",
+    minWidth: "100%",
+    minHeight: "592px",
+    variant: "baseStandard",
+    background: "#fff",
+    borderRadius: "4px",
+    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
+  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Cover, {
+    minHeight: "100%",
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Spinner$2, {
+    size: "100"
+  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "64px"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 2rem"
+  }, /*#__PURE__*/React__default.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h3",
+    weight: "700"
+  }, "Something Went Wrong"), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
+};
+
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
 
@@ -45095,7 +45472,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$G = {
+var fallbackValues$H = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -45314,7 +45691,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$G);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$H);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -45611,7 +45988,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$H = {
+var fallbackValues$I = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -45690,12 +46067,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$H);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$I);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$I = {
+var fallbackValues$J = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -45751,7 +46128,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$I);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$J);
 
 var backgroundColor$a = {
   "default": "#ffffff",
@@ -45782,7 +46159,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$J = {
+var fallbackValues$K = {
   backgroundColor: backgroundColor$a,
   linkColor: linkColor$6,
   border: border$3,
@@ -45844,7 +46221,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$J, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$K, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -45914,56 +46291,6 @@ 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,
-      variant = _ref.variant;
-  return /*#__PURE__*/React__default.createElement(Card$1, {
-    variant: variant
-  }, imageSrc && /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement("img", {
-    src: imageSrc,
-    style: {
-      background: "".concat(themeValues.imageBackgroundColor),
-      objectFit: "none",
-      height: "150px"
-    }
-  })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "24px"
-  }, /*#__PURE__*/React__default.createElement(Title$1, {
-    variant: "small",
-    color: themeValues.titleColor,
-    weight: themeValues.titleWeight
-  }, title), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    color: themeValues.textColor
-  }, text), url && buttonText && /*#__PURE__*/React__default.createElement(Box, {
-    extraStyles: "margin-top: 4rem; padding: 0"
-  }, /*#__PURE__*/React__default.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";
@@ -46065,129 +46392,6 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
-var DashboardIframe = styled__default.iframe.withConfig({
-  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
-  componentId: "sc-j0cucj-0"
-})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
-
-/**
- * Component: PeriscopeDashboardIframe
- *
- * Used for rendering Citybase's periscope reporting dashboards in iframes.
- * Receives action props to trigger a request on mount for the iframe's url.
- * Receives a string prop if/when we receive the url result.
- * And receives action props to emit errors from failed iframe loading.
- *
- * The logic and api client methods to handle requests/response,
- * store the url, etc. should be provided from the app consuming this library.
- *
- * If the url request is pending, render a spinner.
- * If the url request failed, render a UI error state.
- **/
-
-var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
-var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
-
-var isValidMessage = function isValidMessage(message) {
-  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
-};
-
-var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
-  var url = _ref.url,
-      requestDashboardUrl = _ref.requestDashboardUrl,
-      periscopeDataPending = _ref.periscopeDataPending,
-      periscopeDataSuccess = _ref.periscopeDataSuccess,
-      periscopeDataFailure = _ref.periscopeDataFailure,
-      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
-      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure,
-      _ref$timerMS = _ref.timerMS,
-      timerMS = _ref$timerMS === void 0 ? 20000 : _ref$timerMS;
-
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  var time = {
-    timer: null
-  };
-  React.useEffect(function () {
-    time.timer = setTimeout(function () {
-      if (!periscopeDataSuccess) {
-        periscopeDataRequestFailure();
-      }
-    }, timerMS);
-    return function () {
-      return clearTimeout(time.timer);
-    };
-  }, [periscopeDataSuccess]);
-
-  var Dashboard = function Dashboard(height) {
-    return function (url) {
-      return /*#__PURE__*/React__default.createElement(DashboardIframe, {
-        src: url,
-        width: "100%",
-        height: height,
-        "data-qa": "DashboardIframe",
-        onLoad: function onLoad() {
-          var iframe = document.querySelector("iframe");
-          iframe.style.display = "initial";
-        }
-      });
-    };
-  };
-
-  var validatePeriscope = function validatePeriscope(message) {
-    if (isValidMessage(message)) {
-      setHeight(message.data.dashboard_height + 100);
-
-      if (!periscopeDataSuccess) {
-        clearTimeout(time.timer);
-        periscopeDataRequestSuccess();
-      }
-    }
-  };
-
-  React.useLayoutEffect(function () {
-    window.addEventListener("message", validatePeriscope);
-    requestDashboardUrl();
-    return function () {
-      return window.removeEventListener("message", validatePeriscope);
-    };
-  }, [requestDashboardUrl]);
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(BoxWithShadow$1, {
-    padding: "0",
-    minWidth: "100%",
-    minHeight: "592px",
-    variant: "baseStandard",
-    background: "#fff",
-    borderRadius: "4px",
-    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
-  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100%",
-    singleChild: true
-  }, /*#__PURE__*/React__default.createElement(Center, {
-    intrinsic: true
-  }, /*#__PURE__*/React__default.createElement(Spinner$2, {
-    size: "100"
-  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "64px"
-  }, /*#__PURE__*/React__default.createElement(Center, {
-    intrinsic: true
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 2rem"
-  }, /*#__PURE__*/React__default.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h3",
-    weight: "700"
-  }, "Something Went Wrong"), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "p",
-    extraStyles: "text-align: center;"
-  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "p",
-    extraStyles: "text-align: center;"
-  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
-};
-
 var pageBackground = "#FBFCFD";
 var fallbackValues$M = {
   pageBackground: pageBackground
@@ -46452,42 +46656,12 @@ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "
 
 
 
-var index$4 = /*#__PURE__*/Object.freeze({
+var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   colors: colors,
   fontWeights: style_constants
 });
 
-var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
-  var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-  // Only move focus when "hasErrors" is true
-  // "hasErrors" is managed by container page of form
-  // typically set to "true" on attempted form submission, if errors exist
-  // Reset errors, if provided, resets the error state tracking in order to properly re-run
-  React.useEffect(function () {
-    if (hasErrors) {
-      var _inputsWithErrors$;
-
-      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
-      inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
-    }
-
-    return function () {
-      return resetHasErrors(false);
-    };
-  });
-};
-
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  formats: formats,
-  general: general,
-  theme: themeUtils,
-  useFocusInvalidInput: useFocusInvalidInput
-});
-
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
 exports.AccountsIcon = AccountsIcon$1;
@@ -46507,7 +46681,6 @@ exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
 exports.Card = Card$1;
-exports.CardWithHeader = CardWithHeader$1;
 exports.CarrotIcon = CarrotIcon$1;
 exports.CashIcon = CashIcon;
 exports.Center = Center;
@@ -46601,6 +46774,7 @@ exports.PeriscopeDashboardIframe = PeriscopeDashboardIframe;
 exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;
+exports.Popover = Popover$1;
 exports.ProcessingFee = ProcessingFee$1;
 exports.ProfileIcon = ProfileIcon$1;
 exports.ProfileIconSmall = ProfileIconSmall$1;
@@ -46648,12 +46822,11 @@ exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;
 exports.WalletIcon = WalletIcon$1;
 exports.WarningIconXS = WarningIconXS;
-exports.WelcomeCard = WelcomeCard$1;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
 exports.cardRegistry = cardRegistry;
-exports.constants = index$4;
+exports.constants = index$5;
 exports.createPartialAmountFormState = createPartialAmountFormState;
-exports.util = index$5;
+exports.util = index$4;
 exports.withWindowSize = withWindowSize;
 //# sourceMappingURL=index.cjs.js.map