@thecb/components 9.2.0-beta.1 → 9.2.0-beta.11

package/dist/index.cjs.js

@@ -4961,7 +4961,7 @@ to the one generated by name-that-color.
 var BLACK = "#000000";
 var TRANSPARENT = "transparent";
 var LINK_WATER = "#FEFEFE";
-var WHITE$1 = "#FFFFFF";
+var WHITE = "#FFFFFF";
 var SOLITUDE_WHITE = "#EBEDF1";
 var SEASHELL_WHITE = "#F1F1F1";
 var ALABASTER_WHITE = "#F7F7F7";
@@ -5051,7 +5051,8 @@ var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
 
-var ERROR_COLOR = RAZZMATAZZ_RED; // These colors are sequestered so that the alert component can reference them // by type of alert
+var ERROR_COLOR = RAZZMATAZZ_RED;
+var ERROR_BACKGROUND_COLOR = "#FFF4F8"; // These colors are sequestered so that the alert component can reference them // by type of alert
 
 var ALERT_COLORS = {
   warn: {
@@ -5105,7 +5106,7 @@ var colors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   BLACK: BLACK,
   TRANSPARENT: TRANSPARENT,
-  WHITE: WHITE$1,
+  WHITE: WHITE,
   LINK_WATER: LINK_WATER,
   SOLITUDE_WHITE: SOLITUDE_WHITE,
   SEASHELL_WHITE: SEASHELL_WHITE,
@@ -5182,7 +5183,8 @@ var colors = /*#__PURE__*/Object.freeze({
   RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   PILL_COLORS: PILL_COLORS,
-  ERROR_COLOR: ERROR_COLOR
+  ERROR_COLOR: ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
 });
 
 var TextSpan = styled__default.span.withConfig({
@@ -12606,18 +12608,18 @@ var padding = {
   whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: WHITE$1,
+  primary: WHITE,
   secondary: MATISSE_BLUE,
   back: MATISSE_BLUE,
-  smallPrimary: WHITE$1,
+  smallPrimary: WHITE,
   smallSecondary: MATISSE_BLUE,
   smallGhost: MATISSE_BLUE,
   ghost: MATISSE_BLUE,
   tertiary: MATISSE_BLUE,
-  danger: WHITE$1,
+  danger: WHITE,
   dangerSecondary: ERROR_COLOR,
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12700,7 +12702,7 @@ var border = {
   tertiary: "none",
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
-  whiteSecondary: "2px solid " + WHITE$1,
+  whiteSecondary: "2px solid " + WHITE,
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverBackgroundColor = {
@@ -12732,18 +12734,18 @@ var hoverBorderColor = {
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverColor = {
-  primary: WHITE$1,
+  primary: WHITE,
   secondary: SAPPHIRE_BLUE,
   back: SAPPHIRE_BLUE,
-  smallPrimary: WHITE$1,
+  smallPrimary: WHITE,
   smallSecondary: SAPPHIRE_BLUE,
   smallGhost: SAPPHIRE_BLUE,
   ghost: SAPPHIRE_BLUE,
   tertiary: SAPPHIRE_BLUE,
-  danger: WHITE$1,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var activeBackgroundColor = {
   primary: PEACOCK_BLUE,
@@ -12774,18 +12776,18 @@ var activeBorderColor = {
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var activeColor = {
-  primary: WHITE$1,
+  primary: WHITE,
   secondary: MATISSE_BLUE,
   back: PEACOCK_BLUE,
-  smallPrimary: WHITE$1,
+  smallPrimary: WHITE,
   smallSecondary: PEACOCK_BLUE,
   smallGhost: PEACOCK_BLUE,
   ghost: PEACOCK_BLUE,
   tertiary: PEACOCK_BLUE,
-  danger: WHITE$1,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -12984,9 +12986,9 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
 };
 
 var primaryColor = {
-  info: "".concat(WHITE$1),
-  success: "".concat(WHITE$1),
-  error: "".concat(WHITE$1)
+  info: "".concat(WHITE),
+  success: "".concat(WHITE),
+  error: "".concat(WHITE)
 };
 var accentColor = {
   info: "".concat(BRIGHT_GREY),
@@ -13001,7 +13003,7 @@ var subIconColor = {
 var singleIconColor = {
   primary: "".concat(MATISSE_BLUE),
   secondary: "".concat(BRIGHT_GREY),
-  darkMode: "".concat(WHITE$1)
+  darkMode: "".concat(WHITE)
 };
 var fallbackValues$2 = {
   primaryColor: primaryColor,
@@ -18309,7 +18311,7 @@ var IconChevron = function IconChevron(_ref) {
     fillRule: "evenodd"
   }, /*#__PURE__*/React__default.createElement("mask", {
     id: "icon-chevron-mask-2",
-    fill: WHITE$1
+    fill: WHITE
   }, /*#__PURE__*/React__default.createElement("use", {
     xlinkHref: "#icon-chevron-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
@@ -18362,7 +18364,7 @@ var IconValid = function IconValid(_ref) {
   var _ref$bgFill = _ref.bgFill,
       bgFill = _ref$bgFill === void 0 ? FOREST_GREEN : _ref$bgFill,
       _ref$iconFill = _ref.iconFill,
-      iconFill = _ref$iconFill === void 0 ? WHITE$1 : _ref$iconFill,
+      iconFill = _ref$iconFill === void 0 ? WHITE : _ref$iconFill,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? "18" : _ref$width,
       _ref$height = _ref.height,
@@ -18414,7 +18416,7 @@ var IconInvalid = function IconInvalid(_ref) {
   var _ref$bgFill = _ref.bgFill,
       bgFill = _ref$bgFill === void 0 ? RAZZMATAZZ_RED : _ref$bgFill,
       _ref$iconFill = _ref.iconFill,
-      iconFill = _ref$iconFill === void 0 ? WHITE$1 : _ref$iconFill,
+      iconFill = _ref$iconFill === void 0 ? WHITE : _ref$iconFill,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? "18" : _ref$width,
       _ref$height = _ref.height,
@@ -21837,7 +21839,7 @@ var Paragraph = function Paragraph(_ref) {
 
 var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$b, "p");
 
-var backgroundColor$1 = WHITE$1;
+var backgroundColor$1 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
 var fallbackValues$c = {
   backgroundColor: backgroundColor$1,
@@ -22030,10 +22032,10 @@ var textColor = {
   "default": "".concat(CHARADE_GREY)
 };
 var disabledCheckColor = {
-  "default": "".concat(WHITE$1, ";")
+  "default": "".concat(WHITE, ";")
 };
 var checkColor = {
-  "default": "".concat(WHITE$1, ";")
+  "default": "".concat(WHITE, ";")
 };
 var errorStyles = {
   "default": "border: 1px solid ".concat(RED, ";")
@@ -22051,7 +22053,7 @@ var checkedStyles = {
   "default": "\n  background: ".concat(MATISSE_BLUE, ";    \n  border: 1px solid ").concat(MATISSE_BLUE, ";\n")
 };
 var defaultStyles = {
-  "default": "\n  background: ".concat(WHITE$1, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
+  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var fallbackValues$d = {
   backgroundColor: backgroundColor$2,
@@ -22204,14 +22206,14 @@ var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$d, "default
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
-  disabled: "".concat(WHITE$1)
+  disabled: "".concat(WHITE)
 };
 var listItemColor = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(STORM_GREY)
 };
 var listItemBackgroundColor = {
-  "default": "".concat(WHITE$1),
+  "default": "".concat(WHITE),
   disabled: "".concat(ATHENS_GREY)
 };
 var listItemBorderColor = {
@@ -23713,7 +23715,7 @@ var IconWrapper = styled__default.div.withConfig({
 var DropdownContentWrapper = styled__default.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
-})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE$1, function (_ref2) {
+})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE, function (_ref2) {
   var widthFitOptions = _ref2.widthFitOptions;
   return widthFitOptions ? "fit-content" : "100%";
 }, function (_ref3) {
@@ -23726,7 +23728,7 @@ var DropdownItemWrapper = styled__default.li.withConfig({
 })(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
-  return selected ? themeValues.selectedColor : WHITE$1;
+  return selected ? themeValues.selectedColor : WHITE;
 }, function (_ref5) {
   var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
@@ -23734,12 +23736,12 @@ var DropdownItemWrapper = styled__default.li.withConfig({
   var selected = _ref6.selected,
       disabled = _ref6.disabled,
       themeValues = _ref6.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE$1 : themeValues.hoverColor;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE$1 : themeValues.hoverColor;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
 
 var Dropdown = function Dropdown(_ref8) {
@@ -23993,7 +23995,7 @@ var Dropdown = function Dropdown(_ref8) {
   }, [filteredOptions]);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    background: isOpen ? themeValues.hoverColor : WHITE$1,
+    background: isOpen ? themeValues.hoverColor : WHITE,
     extraStyles: "position: relative;",
     minWidth: "100%",
     onClick: function onClick() {
@@ -24019,7 +24021,7 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-expanded": isOpen,
     "aria-required": options.required,
     "aria-invalid": ariaInvalid,
-    background: isOpen ? themeValues.hoverColor : WHITE$1,
+    background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
@@ -24092,7 +24094,7 @@ var Dropdown = function Dropdown(_ref8) {
       }
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
-      color: choice.value === value ? WHITE$1 : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
+      color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
       extraStyles: "padding-left: 16px;\n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                      white-space: nowrap;\n                      overflow: hidden;\n                      text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
@@ -24128,13 +24130,13 @@ var linkColor$1 = {
   disabled: "".concat(MATISSE_BLUE)
 };
 var formBackgroundColor = {
-  "default": "".concat(WHITE$1),
-  disabled: "".concat(WHITE$1),
+  "default": "".concat(WHITE),
+  disabled: "".concat(WHITE),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
 var inputBackgroundColor = {
-  "default": "".concat(WHITE$1),
+  "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
 var color$6 = {
@@ -25181,7 +25183,7 @@ var Detail = function Detail(_ref) {
 
 var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
-var backgroundColor$3 = WHITE$1;
+var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
 var fallbackValues$i = {
   backgroundColor: backgroundColor$3,
@@ -25209,6 +25211,346 @@ var DisplayBox = function DisplayBox(_ref) {
 
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
 
+/* 
+  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 = function useOutsideClickHook(handler) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+  }, [ref]);
+  return ref;
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+var useToastNotification = function useToastNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
+  var _useState = React.useState(initialToastState),
+      _useState2 = _slicedToArray(_useState, 2),
+      toastState = _useState2[0],
+      setToastState = _useState2[1];
+
+  React.useEffect(function () {
+    if (toastState.isOpen) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+        variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
+
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
+};
+
+
+
+var index$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  useOutsideClick: useOutsideClickHook,
+  useScrollTo: useScrollTo,
+  useToastNotification: useToastNotification
+});
+
+var hoverColor$4 = "#116285";
+var activeColor$4 = "#0E506D";
+var popoverTriggerColor = "#15749D";
+var fallbackValues$j = {
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$4,
+  popoverTriggerColor: popoverTriggerColor
+};
+
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid ").concat(borderColor);
+
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
+
+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,
+      _ref$arrowDirection = _ref.arrowDirection,
+      arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+      _ref$transform = _ref.transform,
+      transform = _ref$transform === void 0 ? "none" : _ref$transform,
+      buttonExtraStyles = _ref.buttonExtraStyles,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+      popoverExtraStyles = _ref.popoverExtraStyles;
+  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();
+  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,
+    extraStyles: buttonExtraStyles
+  }, 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: backgroundColor,
+    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          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+  })));
+};
+
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
+
+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))))));
+};
+
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -25487,356 +25829,18 @@ 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 renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
-  var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
-  var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
-  var ACTIVE = "ACTIVE";
-  var EXPIRING_SOON = "EXPIRING_SOON";
-  var EXPIRED = "EXPIRED";
-  var textMargin = textAlign === "right" ? "auto" : "0";
-
-  switch (expirationStatus) {
-    case ACTIVE:
-      return /*#__PURE__*/React__default.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: ASH_GREY,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Exp Date ", expireDate);
-
-    case EXPIRING_SOON:
-      return /*#__PURE__*/React__default.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: FIRE_YELLOW,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Expiring Soon ", expireDate);
-
-    case EXPIRED:
-      return /*#__PURE__*/React__default.createElement(Text$1, {
-        as: as,
-        variant: "pXS",
-        color: ASH_GREY,
-        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
-      }, "Expired");
-  }
-};
-
-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,
-  renderCardStatus: renderCardStatus
-});
-
-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 = 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
-});
-
-var hoverColor$4 = "#116285";
-var activeColor$4 = "#0E506D";
-var popoverTriggerColor = "#15749D";
-var fallbackValues$j = {
-  hoverColor: hoverColor$4,
-  activeColor: activeColor$4,
-  popoverTriggerColor: popoverTriggerColor
-};
-
-var arrowBorder = function arrowBorder(borderColor, direction) {
-  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
-  var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid ").concat(borderColor);
-
-  if (direction == "down") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
-  } else if (direction == "up") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
-  } else if (direction == "left") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
-  } else if (direction == "right") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
-  }
-};
-
-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,
-      _ref$arrowDirection = _ref.arrowDirection,
-      arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
-      _ref$transform = _ref.transform,
-      transform = _ref$transform === void 0 ? "none" : _ref$transform,
-      buttonExtraStyles = _ref.buttonExtraStyles,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
-      popoverExtraStyles = _ref.popoverExtraStyles;
-  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();
-  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,
-    extraStyles: buttonExtraStyles
-  }, 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: backgroundColor,
-    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          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
-  })));
-};
-
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
-
-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$1,
-    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)
 };
 var formBackgroundColor$1 = {
-  "default": "".concat(WHITE$1),
-  disabled: "".concat(WHITE$1),
+  "default": "".concat(WHITE),
+  disabled: "".concat(WHITE),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
 var inputBackgroundColor$1 = {
-  "default": "".concat(WHITE$1),
+  "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
 var color$7 = {
@@ -26291,6 +26295,66 @@ var fallbackValues$n = {
   autopayTextColor: autopayTextColor$1
 };
 
+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 renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
+  var textAlign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
+  var as = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "span";
+  var ACTIVE = "ACTIVE";
+  var EXPIRING_SOON = "EXPIRING_SOON";
+  var EXPIRED = "EXPIRED";
+  var textMargin = textAlign === "right" ? "auto" : "0";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Exp Date ", expireDate);
+
+    case EXPIRING_SOON:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: FIRE_YELLOW,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expiring Soon ", expireDate);
+
+    case EXPIRED:
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        as: as,
+        variant: "pXS",
+        color: ASH_GREY,
+        extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
+      }, "Expired");
+  }
+};
+
+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,
+  renderCardStatus: renderCardStatus
+});
+
 var CreditCardWrapper = styled__default.div.withConfig({
   displayName: "FormattedCreditCard__CreditCardWrapper",
   componentId: "sc-s0ta5l-0"
@@ -27109,7 +27173,7 @@ var Placeholder = function Placeholder(_ref2) {
 var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
 
 var backgroundColor$4 = {
-  "default": "".concat(WHITE$1)
+  "default": "".concat(WHITE)
 };
 var fallbackValues$t = {
   backgroundColor: backgroundColor$4
@@ -38030,7 +38094,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 
 var onBackground = "".concat(MATISSE_BLUE);
 var disabledBackground = "".concat(IRON_GREY);
-var white = "".concat(WHITE$1);
+var white = "".concat(WHITE);
 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");
@@ -38214,7 +38278,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);
 
 var background$2 = "".concat(ATHENS_GREY);
-var white$1 = "".concat(WHITE$1);
+var white$1 = "".concat(WHITE);
 var black = "#000";
 var focusBorder = "".concat(MATISSE_BLUE);
 var themeValues = {
@@ -38256,10 +38320,10 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$5 = WHITE$1;
+var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
-var headerColor = WHITE$1;
+var headerColor = WHITE;
 var fallbackValues$z = {
   backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
@@ -41135,7 +41199,7 @@ var EditableListItem = styled__default.div.withConfig({
   componentId: "sc-10ehkz7-0"
 })(["box-sizing:border-box;background:", ";border-color:", ";height:", ";display:flex;justify-content:space-between;align-items:center;padding:1.5rem;:not(:last-child),:not(:first-child){box-shadow:inset 0px -1px 0px 0px rgb(202,206,216);}:first-child{border-top-left-radius:3px;border-top-right-radius:3px;}:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:none;}"], function (_ref) {
   var disabled = _ref.disabled;
-  return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE$1;
+  return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE;
 }, GHOST_GREY, function (_ref2) {
   var listItemSize = _ref2.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
@@ -46702,7 +46766,7 @@ var Modal$1 = function Modal(_ref) {
       _ref$closeButtonText = _ref.closeButtonText,
       closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
       _ref$modalHeaderBg = _ref.modalHeaderBg,
-      modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE$1 : _ref$modalHeaderBg,
+      modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
       _ref$modalBodyBg = _ref.modalBodyBg,
       modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
       _ref$useDangerButton = _ref.useDangerButton,
@@ -46886,9 +46950,9 @@ var borderRadius = {
   small: "0.25rem"
 };
 var backgroundColor$a = {
-  "default": WHITE$1,
-  largeTitle: WHITE$1,
-  small: WHITE$1
+  "default": WHITE,
+  largeTitle: WHITE,
+  small: WHITE
 };
 var fallbackValues$J = {
   fontSize: fontSize$9,
@@ -47668,7 +47732,7 @@ var Obligation = function Obligation(_ref) {
     border: "1px solid ".concat(GRECIAN_GREY),
     borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    background: WHITE$1,
+    background: WHITE,
     padding: isMobile ? "16px" : "24px 16px"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "14px"
@@ -47944,10 +48008,10 @@ var createPartialAmountFormValidators = function createPartialAmountFormValidato
   return validators;
 };
 
-var arrowColor = WHITE$1;
+var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
-var activeBackgroundColor$2 = WHITE$1;
+var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$M = {
   activeColor: activeColor$9,
@@ -48816,43 +48880,6 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   })))));
 };
 
-/* 
-  Hook that takes an ID selector for an element on the screen
-  And optionally values for top position, left position, smooth behavior
-  Finds element on screen and scrolls it to the provided coordinates
-
-  (string, number, number, string, number) => undefined;
-*/
-var useScrollTo = function useScrollTo(id) {
-  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
-  var delay = arguments.length > 4 ? arguments[4] : undefined;
-  var scrollItem;
-
-  if (delay) {
-    setTimeout(function () {
-      var _scrollItem;
-
-      scrollItem = document.getElementById(id);
-      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    }, delay);
-  } else {
-    var _scrollItem2;
-
-    scrollItem = document.getElementById(id);
-    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
-      top: top,
-      left: left,
-      behavior: behavior
-    });
-  }
-};
-
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
       showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -49598,7 +49625,7 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var headingBackgroundColor$1 = "".concat(WHITE$1);
+var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GREY_CHATEAU);
@@ -49944,7 +49971,7 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     padding: "0",
     width: isMobile ? "auto" : "576px",
     borderRadius: "4px",
-    background: WHITE$1,
+    background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
     background: GRECIAN_GREY,
@@ -50067,7 +50094,7 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     padding: "0",
     width: isMobile ? "auto" : "576px",
     borderRadius: "4px",
-    background: WHITE$1,
+    background: WHITE,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React__default.createElement(Box, {
     background: GRECIAN_GREY,
@@ -50137,7 +50164,7 @@ var Tab = function Tab(_ref) {
     onClick: onClick,
     margin: "0 0 -1px 0",
     padding: "0.5rem 0.75rem",
-    background: activeTab === label ? WHITE$1 : GRECIAN_GREY,
+    background: activeTab === label ? WHITE : GRECIAN_GREY,
     extraStyles: "cursor: pointer; flex-grow: 1; text-align: center; ".concat(activeTab === label ? "list-style: none;" : "")
   }, /*#__PURE__*/React__default.createElement(Text$1, null, label));
 };
@@ -50290,18 +50317,18 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
-var CloseIconWrapper = styled__default.div.withConfig({
-  displayName: "ToastNotification__CloseIconWrapper",
-  componentId: "sc-116yflm-0"
-})(["min-height:24px;min-width:24px;display:flex;margin:16px;justify-content:center;align-items:center;cursor:pointer;"]);
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
 };
 
 var ToastNotification = function ToastNotification(_ref) {
-  var _ref$message = _ref.message,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
+      _ref$message = _ref.message,
       message = _ref$message === void 0 ? "" : _ref$message,
+      toastOpen = _ref.toastOpen,
+      closeToastNotification = _ref.closeToastNotification,
       extraStyles = _ref.extraStyles,
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? "112px" : _ref$minWidth,
@@ -50309,36 +50336,34 @@ var ToastNotification = function ToastNotification(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? "56px" : _ref$height,
-      closeToastNotification = _ref.closeToastNotification,
-      toastOpen = _ref.toastOpen,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
+      _ref$childGap = _ref.childGap,
+      childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/React__default.createElement(Box, {
     onClick: closeToastNotification,
-    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_COLOR : WHITE,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_BACKGROUND_COLOR : WHITE,
     minWidth: minWidth,
     minHeight: height && parseInt(height) < 100 ? height : "100px",
     height: height ? height : "auto",
     tabIndex: toastOpen ? "-1" : "0",
-    padding: "0",
+    padding: "0rem 1rem",
     borderRadius: "4px",
     boxShadow: "0px 4px 4px rgba(41, 42, 51, 0.15), 0px 1px 7px rgba(41, 42, 51, 0.2), 0px 7px 12px rgba(41, 42, 51, 0.15)",
-    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n    ")
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
-    childGap: "0"
-  }, variant === "success" && /*#__PURE__*/React__default.createElement(SuccessfulIconSmall, null), variant === "error" && /*#__PURE__*/React__default.createElement(ErroredIcon, null), /*#__PURE__*/React__default.createElement(Box, {
+    childGap: childGap
+  }, variant === "success" && /*#__PURE__*/React__default.createElement(SuccessfulIconMedium, null), variant === "error" && /*#__PURE__*/React__default.createElement(ErroredIcon, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1rem 0",
     maxWidth: maxWidth
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "word-break: break-word;"
-  }, message)), /*#__PURE__*/React__default.createElement(CloseIconWrapper, null, /*#__PURE__*/React__default.createElement(IconQuitLarge, null))));
+  }, message)), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";
-var fontColor$1 = WHITE$1;
+var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
@@ -50402,7 +50427,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
       _ref$buttonVariant = _ref.buttonVariant,
       buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
   return /*#__PURE__*/React__default.createElement(Box, {
-    background: WHITE$1,
+    background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
     padding: 0,
     borderRadius: "4px"
@@ -50709,6 +50734,38 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
+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$6 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  formats: formats,
+  general: general,
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput,
+  useOutsideClick: useOutsideClickHook,
+  useToastNotification: useToastNotification
+});
+
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
 exports.AccountsIcon = AccountsIcon$1;
@@ -50920,6 +50977,7 @@ exports.cardRegistry = cardRegistry;
 exports.constants = index$5;
 exports.createPartialAmountFormState = createPartialAmountFormState;
 exports.createPartialAmountFormValidators = createPartialAmountFormValidators;
-exports.util = index$4;
+exports.hooks = index$4;
+exports.util = index$6;
 exports.withWindowSize = withWindowSize;
 //# sourceMappingURL=index.cjs.js.map