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

package/dist/index.cjs.js

@@ -25211,668 +25211,622 @@ var DisplayBox = function DisplayBox(_ref) {
 
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$2.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties$1(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+/* 
+  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)
 
-  var key, i;
+  See popover component for implementation
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+*/
 
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
+var useOutsideClickHook = function useOutsideClickHook(handler) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+  }, [ref]);
+  return ref;
+};
 
-  return target;
-}
+/* 
+  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
 
-function _slicedToArray$1(arr, i) {
-  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
-}
+  (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;
 
-function _toConsumableArray$1(arr) {
-  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
-}
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
 
-function _arrayWithoutHoles$1(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
 
-    return arr2;
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
   }
-}
-
-function _arrayWithHoles$1(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray$1(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-}
+};
 
-function _iterableToArrayLimit$1(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
 
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
+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;
 
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+  var _useState = React.useState(initialToastState),
+      _useState2 = _slicedToArray(_useState, 2),
+      toastState = _useState2[0],
+      setToastState = _useState2[1];
 
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
+  React.useEffect(function () {
+    if (toastState.isOpen) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
     }
-  }
-
-  return _arr;
-}
+  }, [timeout, toastState.isOpen]);
 
-function _nonIterableSpread$1() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
-}
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+        variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
 
-function _nonIterableRest$1() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
 
-var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
-  return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
 };
-var format$1 = function format(formatter) {
-  return function (value) {
-    var usedFormat = formatter.formats[value.length];
 
-    if (!usedFormat) {
-      return value;
-    }
 
-    var formatPieces = usedFormat.split(formatter.formatChar);
-    var valuePieces = value.split("");
-    var zipped = formatPieces.map(function (v, i) {
-      return v + (valuePieces[i] || "");
-    });
-    return zipped.join("");
-  };
-};
 
-var countDelims = function countDelims(formatter, index) {
-  var count = 0;
-  var format = formatter.formats[index];
-  if (!format) return 0;
-  formatter.uniqueDelimiters.forEach(function (delim) {
-    return count += format.split(delim).length - 1;
-  });
-  return count;
+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 unformat = function unformat(formatter) {
-  return function (formattedValue, formatIndex) {
-    if (formatIndex >= formatter.formats.length) {
-      return formattedValue;
-    }
+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);
 
-    var format = formatter.formats[formatIndex];
-    return formattedValue.split("").filter(function (_, i) {
-      return !(format[i] != formatter.formatChar);
-    }).join("");
-  };
-};
-var inject = function inject(baseString) {
-  return function (start, end, newString) {
-    return baseString.substring(0, start) + newString + baseString.substring(end);
-  };
+  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 formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
-  var maxFormatExceeded = rawValue.length >= formatter.formats.length;
 
-  if (maxFormatExceeded) {
-    return formattedIndex;
-  } else {
-    var formatString = formatter.formats[rawValue.length];
-    var beforeString = formatString.slice(0, formattedIndex);
-    return beforeString.split("").filter(function (c) {
-      return c === formatter.formatChar;
-    }).length;
-  }
-};
-var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex, rawValue, formatter, del) {
-  var maxFormatExceeded = rawValue.length >= formatter.formats.length; // If forced to stay formatted, offset by delims - 1
-  // This is done so the component doesn't assume that any added chars will be kept
-  // (i.e. if an external constraint is applied)
+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;
 
-  if (maxFormatExceeded) {
-    var delims = countDelims(formatter, rawValue.length - 1);
-    return delims > 0 && !del ? rawIndex + delims - 1 : rawIndex;
-  } else {
-    return formatter.formats[rawValue.length].split(formatter.formatChar).slice(0, rawIndex).reduce(function (acc, curr) {
-      return curr.length + acc;
-    }, 0) + rawIndex;
-  }
-};
+  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 createFormat = function createFormat(formats, formatChar) {
-  return {
-    uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
-    formats: formats,
-    formatChar: formatChar
+  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 FormattedInput = function FormattedInput(_ref) {
-  var value = _ref.value,
-      formatter = _ref.formatter,
-      _onChange = _ref.onChange,
-      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
 
-  var inputEl = React.useRef(null);
+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 _useState = React.useState({
-    selectionStart: 0,
-    selectionEnd: 0,
-    rawValue: value,
-    "delete": false,
-    formattedValue: format$1(formatter)(value)
-  }),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  React.useLayoutEffect(function () {
-    // A lot of the work here is cursor manipulation
-    if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  });
-  return React__default.createElement("input", _extends$2({}, props, {
-    ref: inputEl,
-    value: format$1(formatter)(value),
-    onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange, including if user is hitting delete
-      setState({
-        rawValue: value,
-        selectionStart: event.target.selectionStart,
-        selectionEnd: event.target.selectionEnd,
-        "delete": event.key === "Backspace" || event.key === "Delete",
-        formattedValue: event.target.value
-      });
-    },
-    onChange: function onChange(event) {
-      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-       * old unformatted value.
-       */
-      var injectionLength = event.target.value.length - state.formattedValue.length;
-      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
-      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
-      // Need to find where to put it
 
-      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
-      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
-      // Using the relevant format string, strips away chars not marked with the formatChar
+    return target;
+  };
 
-      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+  return _extends$2.apply(this, arguments);
+}
 
-      var injectIntoOldValue = inject(unformattedOldValue);
-      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
-      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-      // Applied by useLayoutEffect
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
-      setState({
-        selectionStart: newFormattedCursorPosition,
-        selectionEnd: newFormattedCursorPosition,
-        rawValue: state.rawValue,
-        "delete": false,
-        formattedValue: state.formattedValue
-      }); // Apply the external onChange function to the raw underlying string
-      // This is where the user generally updates the input value
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
 
-      if (_onChange) {
-        _onChange(unformattedNewValue);
-      }
-    }
-  }));
-};
+  return target;
+}
 
-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";
+function _objectWithoutProperties$1(source, excluded) {
+  if (source == null) return {};
 
-  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);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
 
-    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);
+  var key, i;
 
-    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");
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
-};
 
-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
-});
+  return target;
+}
 
-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$;
+function _slicedToArray$1(arr, i) {
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
+}
 
-      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();
-    }
+function _toConsumableArray$1(arr) {
+  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
+}
 
-    return function () {
-      return resetHasErrors(false);
-    };
-  });
-};
+function _arrayWithoutHoles$1(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[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)
+    return arr2;
+  }
+}
 
-  See popover component for implementation
+function _arrayWithHoles$1(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-*/
+function _iterableToArray$1(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
 
-var useOutsideClickHook = function useOutsideClickHook(handler) {
-  var ref = React.useRef();
-  React.useEffect(function () {
-  }, [ref]);
-  return ref;
-};
+function _iterableToArrayLimit$1(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
 
-var initialToastState = {
-  isOpen: false,
-  variant: "",
-  message: ""
-};
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
 
-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;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
-  var _useState = React.useState(initialToastState),
-      _useState2 = _slicedToArray(_useState, 2),
-      toastState = _useState2[0],
-      setToastState = _useState2[1];
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
 
-  React.useEffect(function () {
-    if (toastState.isOpen) {
-      setTimeout(function () {
-        setToastState(initialToastState);
-      }, timeout);
+  return _arr;
+}
+
+function _nonIterableSpread$1() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _nonIterableRest$1() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
+  return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
+};
+var format$1 = function format(formatter) {
+  return function (value) {
+    var usedFormat = formatter.formats[value.length];
+
+    if (!usedFormat) {
+      return value;
     }
-  }, [timeout, toastState.isOpen]);
 
-  var showToast = function showToast(_ref2) {
-    var message = _ref2.message,
-        variant = _ref2.variant;
-    return setToastState({
-      isOpen: true,
-      variant: variant,
-      message: message
+    var formatPieces = usedFormat.split(formatter.formatChar);
+    var valuePieces = value.split("");
+    var zipped = formatPieces.map(function (v, i) {
+      return v + (valuePieces[i] || "");
     });
-  };
-
-  var hideToast = function hideToast() {
-    return setToastState(initialToastState);
-  };
-
-  return {
-    isToastOpen: toastState.isOpen,
-    toastVariant: toastState.variant,
-    toastMessage: toastState.message,
-    showToast: showToast,
-    hideToast: hideToast
+    return zipped.join("");
   };
 };
 
+var countDelims = function countDelims(formatter, index) {
+  var count = 0;
+  var format = formatter.formats[index];
+  if (!format) return 0;
+  formatter.uniqueDelimiters.forEach(function (delim) {
+    return count += format.split(delim).length - 1;
+  });
+  return count;
+};
 
+var unformat = function unformat(formatter) {
+  return function (formattedValue, formatIndex) {
+    if (formatIndex >= formatter.formats.length) {
+      return formattedValue;
+    }
 
-var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  formats: formats,
-  general: general,
-  theme: themeUtils,
-  useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook,
-  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 format = formatter.formats[formatIndex];
+    return formattedValue.split("").filter(function (_, i) {
+      return !(format[i] != formatter.formatChar);
+    }).join("");
+  };
 };
+var inject = function inject(baseString) {
+  return function (start, end, newString) {
+    return baseString.substring(0, start) + newString + baseString.substring(end);
+  };
+};
+var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
+  var maxFormatExceeded = rawValue.length >= formatter.formats.length;
 
-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);
+  if (maxFormatExceeded) {
+    return formattedIndex;
+  } else {
+    var formatString = formatter.formats[rawValue.length];
+    var beforeString = formatString.slice(0, formattedIndex);
+    return beforeString.split("").filter(function (c) {
+      return c === formatter.formatChar;
+    }).length;
   }
 };
+var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex, rawValue, formatter, del) {
+  var maxFormatExceeded = rawValue.length >= formatter.formats.length; // If forced to stay formatted, offset by delims - 1
+  // This is done so the component doesn't assume that any added chars will be kept
+  // (i.e. if an external constraint is applied)
 
-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;
+  if (maxFormatExceeded) {
+    var delims = countDelims(formatter, rawValue.length - 1);
+    return delims > 0 && !del ? rawIndex + delims - 1 : rawIndex;
+  } else {
+    return formatter.formats[rawValue.length].split(formatter.formatChar).slice(0, rawIndex).reduce(function (acc, curr) {
+      return curr.length + acc;
+    }, 0) + rawIndex;
+  }
+};
 
-  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 createFormat = function createFormat(formats, formatChar) {
+  return {
+    uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
+    formats: formats,
+    formatChar: formatChar
+  };
+};
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      popoverOpen = _useState2[0],
-      togglePopover = _useState2[1];
+var FormattedInput = function FormattedInput(_ref) {
+  var value = _ref.value,
+      formatter = _ref.formatter,
+      _onChange = _ref.onChange,
+      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-  var handleTogglePopover = function handleTogglePopover(popoverState) {
-    if (popoverOpen !== popoverState) {
-      togglePopover(popoverState);
-    }
-  };
+  var inputEl = React.useRef(null);
 
-  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 _useState = React.useState({
+    selectionStart: 0,
+    selectionEnd: 0,
+    rawValue: value,
+    "delete": false,
+    formattedValue: format$1(formatter)(value)
+  }),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
 
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
+  React.useLayoutEffect(function () {
+    // A lot of the work here is cursor manipulation
+    if (inputEl.current && inputEl.current === document.activeElement) {
+      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
+    }
+  });
+  return React__default.createElement("input", _extends$2({}, props, {
+    ref: inputEl,
+    value: format$1(formatter)(value),
+    onKeyDown: function onKeyDown(event) {
+      // Keep track of the state of the input before onChange, including if user is hitting delete
+      setState({
+        rawValue: value,
+        selectionStart: event.target.selectionStart,
+        selectionEnd: event.target.selectionEnd,
+        "delete": event.key === "Backspace" || event.key === "Delete",
+        formattedValue: event.target.value
+      });
+    },
+    onChange: function onChange(event) {
+      /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
+       * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+       * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+       * old unformatted value.
+       */
+      var injectionLength = event.target.value.length - state.formattedValue.length;
+      var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
+      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
+      // Need to find where to put it
 
-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 rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
+      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
+      // Using the relevant format string, strips away chars not marked with the formatChar
+
+      var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+      var injectIntoOldValue = inject(unformattedOldValue);
+      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
+      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+      // Applied by useLayoutEffect
+
+      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
+      setState({
+        selectionStart: newFormattedCursorPosition,
+        selectionEnd: newFormattedCursorPosition,
+        rawValue: state.rawValue,
+        "delete": false,
+        formattedValue: state.formattedValue
+      }); // Apply the external onChange function to the raw underlying string
+      // This is where the user generally updates the input value
+
+      if (_onChange) {
+        _onChange(unformattedNewValue);
+      }
+    }
+  }));
 };
 
 var linkColor$2 = {
@@ -26341,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"
@@ -48866,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,
@@ -50757,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;
@@ -50968,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