@thecb/components 11.8.0-beta.2 → 11.8.0-beta.3

package/dist/index.esm.js

@@ -25190,873 +25190,287 @@ var DisplayBox = function DisplayBox(_ref) {
 };
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$l);
 
-/* 
-  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
-
-*/
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var useOutsideClickHook = function useOutsideClickHook(handler) {
-  var ref = useRef();
-  useEffect$1(function () {
-    var handleOutsideClick = function handleOutsideClick(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        handler();
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
-    };
-    document.addEventListener("click", handleOutsideClick, true);
-    return function () {
-      document.removeEventListener("click", handleOutsideClick, true);
-    };
-  }, [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
+    return target;
+  };
 
-  (string, number, number, string, number) => undefined;
-*/
+  return _extends$2.apply(this, arguments);
+}
 
-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 || _scrollItem.scrollTo({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    }, delay);
-  } else {
-    var _scrollItem2;
-    scrollItem = document.getElementById(id);
-    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 || _scrollItem2.scrollTo({
-      top: top,
-      left: left,
-      behavior: behavior
-    });
+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];
   }
-};
 
-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 = useState(initialToastState),
-    _useState2 = _slicedToArray(_useState, 2),
-    toastState = _useState2[0],
-    setToastState = _useState2[1];
-  useEffect$1(function () {
-    if (toastState.isOpen && timeout > 0) {
-      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
-  };
-};
+  return target;
+}
 
-function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
-  useEffect$1(function () {
-    if (condition) {
-      addValidator(validatorFn());
+function _objectWithoutProperties$1(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+
+  var key, i;
+
+  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];
     }
-    return function () {
-      // Remove validator when component unmounts
-      removeValidator(validatorFn());
-    };
-  }, [condition, addValidator, removeValidator]);
+  }
+
+  return target;
 }
 
-/**
- * A custom hook to dynamically load the Cloudflare Turnstile script.
- *
- * @param {string} verifyURL - The URL of the Turnstile verification script.
- */
-var useTurnstileScript = function useTurnstileScript(verifyURL) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    scriptLoaded = _useState2[0],
-    setScriptLoaded = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scriptError = _useState4[0],
-    setScriptError = _useState4[1];
-  var handleScriptError = function handleScriptError() {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
-  useEffect$1(function () {
-    if (typeof window === "undefined") {
-      setScriptLoaded(false);
-      return;
-    }
-    if (window.turnstile && window.turnstile.render) {
-      setScriptLoaded(true);
-      return;
-    }
-    var script = document.createElement("script");
-    script.src = "".concat(verifyURL, "?render=explicit");
-    script.onload = function () {
-      setScriptLoaded(true);
-    };
-    script.onerror = function () {
-      handleScriptError();
-    };
-    script.onabort = function () {
-      handleScriptError();
-    };
-    script.defer = true;
-    document.getElementsByTagName("head")[0].appendChild(script);
-    return function () {
-      setScriptLoaded(false);
-      setScriptError(false);
-    };
-  }, [verifyURL]);
-  return {
-    scriptLoaded: scriptLoaded,
-    scriptError: scriptError
-  };
-};
+function _slicedToArray$1(arr, i) {
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
+}
 
+function _toConsumableArray$1(arr) {
+  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
+}
 
+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];
 
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  useOutsideClick: useOutsideClickHook,
-  useScrollTo: useScrollTo,
-  useToastNotification: useToastNotification,
-  useConditionallyAddValidator: useConditionallyAddValidator,
-  useTurnstileScript: useTurnstileScript
-});
+    return arr2;
+  }
+}
 
-var hoverColor$4 = "#116285";
-var activeColor$5 = "#0E506D";
-var popoverTriggerColor = "#15749D";
-var fallbackValues$m = {
-  hoverColor: hoverColor$4,
-  activeColor: activeColor$5,
-  popoverTriggerColor: popoverTriggerColor
-};
+function _arrayWithHoles$1(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-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);
+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 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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    popoverOpen = _useState2[0],
-    togglePopover = _useState2[1];
-  var handleTogglePopover = function handleTogglePopover(popoverState) {
-    if (popoverOpen !== popoverState) {
-      togglePopover(popoverState);
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      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;
+    }
+  }
+
+  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;
+    }
+
+    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 triggerRef = useOutsideClickHook(function () {
-    return handleTogglePopover(false);
+};
+
+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 /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "position: relative; ".concat(extraStyles)
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: function action() {
-      return noop$1;
-    },
-    onFocus: function onFocus() {
-      handleTogglePopover(true);
-    },
-    onBlur: function onBlur() {
-      handleTogglePopover(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === ESCAPE) {
-        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          ")
-  })));
+  return count;
 };
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$m);
 
-var hoverColor$5 = "#116285";
-var activeColor$6 = "#0E506D";
-var tooltipTriggerColor = "#15749D";
-var fallbackValues$n = {
-  hoverColor: hoverColor$5,
-  activeColor: activeColor$6,
-  tooltipTriggerColor: tooltipTriggerColor
+var unformat = function unformat(formatter) {
+  return function (formattedValue, formatIndex) {
+    if (formatIndex >= formatter.formats.length) {
+      return formattedValue;
+    }
+
+    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$1 = 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 Tooltip = function Tooltip(_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$hasIconTrigger = _ref.hasIconTrigger,
-    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
-    _ref$IconTrigger = _ref.IconTrigger,
-    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
-    _ref$iconHelpText = _ref.iconHelpText,
-    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
-    _ref$tooltipID = _ref.tooltipID,
-    tooltipID = _ref$tooltipID === void 0 ? 0 : _ref$tooltipID,
-    extraStyles = _ref.extraStyles,
-    _ref$textExtraStyles = _ref.textExtraStyles,
-    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _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,
-    tooltipExtraStyles = _ref.tooltipExtraStyles;
-  var hoverColor = themeValues.hoverColor,
-    activeColor = themeValues.activeColor,
-    tooltipTriggerColor = themeValues.tooltipTriggerColor;
-  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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipOpen = _useState2[0],
-    setTooltipOpen = _useState2[1];
-  var handleToggleTooltip = function handleToggleTooltip(tooltipState) {
-    if (tooltipOpen !== tooltipState) {
-      setTooltipOpen(tooltipState);
-    }
-  };
-  var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
-      handleToggleTooltip(false);
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "position: relative; ".concat(extraStyles)
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: function action() {
-      return noop$1;
-    },
-    onFocus: function onFocus() {
-      return handleToggleTooltip(true);
-    },
-    onBlur: function onBlur() {
-      return handleToggleTooltip(false);
-    },
-    onKeyDown: handleKeyboardEvent,
-    onTouchStart: function onTouchStart() {
-      return handleToggleTooltip(true);
-    },
-    onTouchEnd: function onTouchEnd() {
-      return handleToggleTooltip(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return handleToggleTooltip(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleToggleTooltip(false);
-    },
-    contentOverride: true,
-    variant: "smallGhost",
-    tabIndex: "0",
-    "aria-describedby": tooltipID,
-    extraStyles: buttonExtraStyles
-  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconTrigger, {
-    stroke: BLACK
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    srOnly: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: 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: tooltipID,
-    role: "tooltip",
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(tooltipOpen ? "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(tooltipExtraStyles, ";\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$1(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 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)
+
+  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 Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$n);
 
-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,
-    linkText = _ref.linkText,
-    linkURL = _ref.linkURL,
-    _ref$linkExtraStyles = _ref.linkExtraStyles,
-    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles,
-    helpText = _ref.helpText,
-    _ref$hasTooltip = _ref.hasTooltip,
-    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
-    _ref$tooltipTriggerTe = _ref.tooltipTriggerText,
-    tooltipTriggerText = _ref$tooltipTriggerTe === void 0 ? "" : _ref$tooltipTriggerTe,
-    _ref$tooltipContent = _ref.tooltipContent,
-    tooltipContent = _ref$tooltipContent === void 0 ? "" : _ref$tooltipContent,
-    _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? {
-      top: "auto",
-      bottom: "calc(100% + 0.25rem)",
-      left: "auto",
-      right: "0"
-    } : _ref$tooltipPosition,
-    _ref$tooltipArrowPosi = _ref.tooltipArrowPosition,
-    tooltipArrowPosition = _ref$tooltipArrowPosi === void 0 ? {
-      arrowBottom: "-0.5rem",
-      arrowRight: "0.625rem",
-      arrowTop: "auto",
-      arrowLeft: "auto"
-    } : _ref$tooltipArrowPosi,
-    tooltipArrowDirection = _ref.tooltipArrowDirection,
-    tooltipExtraStyles = _ref.tooltipExtraStyles,
-    _ref$tooltipTextExtra = _ref.tooltipTextExtraStyles,
-    tooltipTextExtraStyles = _ref$tooltipTextExtra === void 0 ? "max-width: 300px;" : _ref$tooltipTextExtra,
-    _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
-  }), hasTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    triggerText: tooltipTriggerText,
-    content: tooltipContent,
-    textExtraStyles: tooltipTextExtraStyles,
-    position: tooltipPosition,
-    arrowPosition: tooltipArrowPosition,
-    arrowDirection: tooltipArrowDirection,
-    tooltipExtraStyles: tooltipExtraStyles
-  }))), /*#__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), linkText && linkURL && /*#__PURE__*/React__default.createElement(Link, {
-    to: linkURL,
-    extraStyles: linkExtraStyles
-  }, linkText), 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(Fragment$1, null))))));
+var createFormat = function createFormat(formats, formatChar) {
+  return {
+    uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
+    formats: formats,
+    formatChar: formatChar
+  };
 };
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var FormattedInput = function FormattedInput(_ref) {
+  var value = _ref.value,
+      formatter = _ref.formatter,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+  var _useState = useState(format$1(formatter)(value)),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      formattedValue = _useState2[0],
+      setFormattedValue = _useState2[1];
 
-    return target;
-  };
+  var inputEl = useRef(null);
+  var stateRefs = useRef({
+    selectionStart: 0,
+    selectionEnd: 0,
+    isDelete: false,
+    rawValue: ''
+  });
+  useLayoutEffect(function () {
+    // A lot of the work here is cursor manipulation
+    if (inputEl.current && inputEl.current === document.activeElement) {
+      inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
+    }
+  }, [stateRefs]);
 
-  return _extends$2.apply(this, arguments);
-}
+  var handleChange = function handleChange(event) {
+    var deleteKeyPressed = stateRefs.current.isDelete;
+    var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+    if (maxFormatExceeded && !deleteKeyPressed) {
+      return;
+    }
+    /* 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.
+    */
 
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
 
-  return target;
-}
+    var injectionLength = event.target.value.length - formattedValue.length;
+    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
+    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
+    // Need to find where to put it
 
-function _objectWithoutProperties$1(source, excluded) {
-  if (source == null) return {};
+    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
+    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
+    // Using the relevant format string, strips away chars not marked with the formatChar
 
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var unformattedOldValue = unformat(formatter)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
 
-  var key, i;
+    var injectIntoOldValue = inject(unformattedOldValue);
+    var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
+    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
+    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+    // Applied by useLayoutEffect
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
+    var formattedNewValue = format$1(formatter)(unformattedNewValue);
+    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
+    // This is where the user generally updates the input value
 
-    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];
+    if (onChange) {
+      onChange(unformattedNewValue);
     }
-  }
-
-  return target;
-}
+  };
 
-function _slicedToArray$1(arr, i) {
-  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
-}
-
-function _toConsumableArray$1(arr) {
-  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
-}
-
-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];
-
-    return arr2;
-  }
-}
-
-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 _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      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;
-    }
-  }
-
-  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;
-    }
-
-    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 unformat = function unformat(formatter) {
-  return function (formattedValue, formatIndex) {
-    if (formatIndex >= formatter.formats.length) {
-      return formattedValue;
-    }
-
-    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;
-
-  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)
-
-  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 createFormat = function createFormat(formats, formatChar) {
-  return {
-    uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
-    formats: formats,
-    formatChar: formatChar
-  };
-};
-
-var FormattedInput = function FormattedInput(_ref) {
-  var value = _ref.value,
-      formatter = _ref.formatter,
-      onChange = _ref.onChange,
-      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
-
-  var _useState = useState(format$1(formatter)(value)),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      formattedValue = _useState2[0],
-      setFormattedValue = _useState2[1];
-
-  var inputEl = useRef(null);
-  var stateRefs = useRef({
-    selectionStart: 0,
-    selectionEnd: 0,
-    isDelete: false,
-    rawValue: ''
-  });
-  useLayoutEffect(function () {
-    // A lot of the work here is cursor manipulation
-    if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
-    }
-  }, [stateRefs]);
-
-  var handleChange = function handleChange(event) {
-    var deleteKeyPressed = stateRefs.current.isDelete;
-    var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
-
-    if (maxFormatExceeded && !deleteKeyPressed) {
-      return;
-    }
-    /* 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 - formattedValue.length;
-    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
-    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
-    // Need to find where to put it
-
-    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
-    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.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)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
-
-    var injectIntoOldValue = inject(unformattedOldValue);
-    var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
-    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-    // Applied by useLayoutEffect
-
-    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
-    var formattedNewValue = format$1(formatter)(unformattedNewValue);
-    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
-    // This is where the user generally updates the input value
-
-    if (onChange) {
-      onChange(unformattedNewValue);
-    }
-  };
-
-  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
-      stateRefs.current = {
-        isDelete: event.key === "Backspace" || event.key === "Delete",
-        selectionStart: event.target.selectionStart,
-        selectionEnd: event.target.selectionEnd,
-        rawValue: value
-      };
-    },
-    onChange: handleChange
-  }));
-};
+  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
+      stateRefs.current = {
+        isDelete: event.key === "Backspace" || event.key === "Delete",
+        selectionStart: event.target.selectionStart,
+        selectionEnd: event.target.selectionEnd,
+        rawValue: value
+      };
+    },
+    onChange: handleChange
+  }));
+};
 
 var linkColor$2 = {
   "default": "".concat(MATISSE_BLUE),
@@ -26107,7 +25521,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$o = {
+var fallbackValues$m = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -26364,7 +25778,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$o, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
 
 var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
@@ -26412,7 +25826,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$o, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$m, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -26433,7 +25847,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$o, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$m, "default");
 
 var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
 var TextareaField = styled.textarea.withConfig({
@@ -26569,7 +25983,7 @@ var FormTextarea = function FormTextarea(_ref8) {
     extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
   })));
 };
-var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$o, "default");
+var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$m, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -26583,7 +25997,7 @@ var color$9 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$p = {
+var fallbackValues$n = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$9
@@ -26625,11 +26039,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$p, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$q = {
+var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -26667,11 +26081,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$q);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$r = {
+var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26763,7 +26177,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$r);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
 var Hamburger = styled.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26844,7 +26258,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$s = {
+var fallbackValues$q = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26883,7 +26297,7 @@ var Heading = function Heading(_ref) {
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$s, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$q, "h1");
 
 var Image = styled.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26939,7 +26353,7 @@ var ImageBox = function ImageBox(_ref) {
 };
 
 var color$a = "#15749D";
-var fallbackValues$t = {
+var fallbackValues$r = {
   color: color$a
 };
 
@@ -27005,7 +26419,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: strokeWidth
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$t);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -27097,7 +26511,7 @@ var fontWeight$5 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$u = {
+var fallbackValues$s = {
   fontWeight: fontWeight$5
 };
 
@@ -27156,7 +26570,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$u, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
 
 var weightTitle = {
   "default": "600",
@@ -27166,7 +26580,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$v = {
+var fallbackValues$t = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27214,7 +26628,7 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$v, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27474,7 +26888,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$w = {
+var fallbackValues$u = {
   color: color$b,
   height: height$1
 };
@@ -27616,12 +27030,12 @@ var Placeholder = function Placeholder(_ref4) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$w, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$u, "default");
 
 var backgroundColor$5 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$x = {
+var fallbackValues$v = {
   backgroundColor: backgroundColor$5
 };
 
@@ -27648,13 +27062,13 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$x, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$v, "default");
 
-var activeColor$7 = MATISSE_BLUE;
+var activeColor$5 = MATISSE_BLUE;
 var disabledColor$1 = MANATEE_GREY;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$y = {
-  activeColor: activeColor$7,
+var fallbackValues$w = {
+  activeColor: activeColor$5,
   disabledColor: disabledColor$1,
   inactiveBorderColor: inactiveBorderColor
 };
@@ -27740,12 +27154,12 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     borderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$y);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$w);
 
-var activeColor$8 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor$1 = "".concat(STORM_GREY);
-var fallbackValues$z = {
-  activeColor: activeColor$8,
+var fallbackValues$x = {
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor$1
 };
 
@@ -27853,11 +27267,11 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$z);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$x);
 
 var searchIconColor = WHITE;
 var searchIconBackgroundColor = MATISSE_BLUE;
-var fallbackValues$A = {
+var fallbackValues$y = {
   searchIconColor: searchIconColor,
   searchIconBackgroundColor: searchIconBackgroundColor
 };
@@ -27955,12 +27369,12 @@ var Search = function Search(_ref) {
     size: 24
   })));
 };
-var Search$1 = themeComponent(Search, "Search", fallbackValues$A);
+var Search$1 = themeComponent(Search, "Search", fallbackValues$y);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$B = {
+var fallbackValues$z = {
   border: border$2
 };
 
@@ -28033,7 +27447,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$B, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$z, "default");
 
 var borderColor$4 = {
   "default": "".concat(GREY_CHATEAU)
@@ -28041,7 +27455,7 @@ var borderColor$4 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$C = {
+var fallbackValues$A = {
   borderColor: borderColor$4,
   borderSize: borderSize
 };
@@ -28059,7 +27473,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$C, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$A, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -38654,7 +38068,7 @@ var white = "".concat(WHITE);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  > div {\n    flex-direction: row;\n  }\n";
 var leftLabelStyles = "\n  > div {\n    flex-direction: row-reverse;\n  }\n";
-var fallbackValues$D = {
+var fallbackValues$B = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   disabledBackgroundLight: disabledBackgroundLight,
@@ -38826,7 +38240,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     padding: "0"
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$D);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$B);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -38873,7 +38287,7 @@ var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var contentBackgroundColor = INFO_BLUE;
-var fallbackValues$E = {
+var fallbackValues$C = {
   backgroundColor: backgroundColor$6,
   contentBackgroundColor: contentBackgroundColor,
   imageBackgroundColor: imageBackgroundColor,
@@ -38898,7 +38312,7 @@ var CardImage = styled.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$F = {
+var fallbackValues$D = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -38943,7 +38357,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$F);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$D);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39059,14 +38473,14 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$E);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$C);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$9 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$G = {
+var fallbackValues$E = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$9,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -39093,7 +38507,7 @@ var NavTab = function NavTab(_ref) {
     extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0;\n        ")
   }, label));
 };
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$G);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$E);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39221,7 +38635,7 @@ var backgroundColor$7 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$H = {
+var fallbackValues$F = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$6,
   fontColor: fontColor,
@@ -39301,7 +38715,7 @@ var Module = function Module(_ref) {
     boxShadow: themeValues.boxShadow
   }, children)));
 };
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$F, "default"));
 
 var WalletName = function WalletName(_ref) {
   var mainText = _ref.mainText,
@@ -40281,7 +39695,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$8 = "#ebeffb";
-var fallbackValues$I = {
+var fallbackValues$G = {
   backgroundColor: backgroundColor$8
 };
 
@@ -40330,7 +39744,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$I);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40452,177 +39866,510 @@ var formConfig$1 = {
     validators: [required(), matchesField("newPassword")]
   }
 };
-var _createFormState$1 = createFormState(formConfig$1),
-  reducer$1 = _createFormState$1.reducer,
-  mapStateToProps$2 = _createFormState$1.mapStateToProps,
-  mapDispatchToProps$1 = _createFormState$1.mapDispatchToProps;
+var _createFormState$1 = createFormState(formConfig$1),
+  reducer$1 = _createFormState$1.reducer,
+  mapStateToProps$2 = _createFormState$1.mapStateToProps,
+  mapDispatchToProps$1 = _createFormState$1.mapDispatchToProps;
+
+ChangePasswordForm.reducer = reducer$1;
+ChangePasswordForm.mapStateToProps = mapStateToProps$2;
+ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
+
+var titleColor$1 = "#292A33";
+var headingBackgroundColor = "transparent";
+var bodyBackgroundColor = "transparent";
+var fallbackValues$H = {
+  titleColor: titleColor$1,
+  headingBackgroundColor: headingBackgroundColor,
+  bodyBackgroundColor: bodyBackgroundColor
+};
+
+var CollapsibleSection = function CollapsibleSection(_ref) {
+  var _label$replaceAll;
+  var isOpen = _ref.isOpen,
+    toggleSection = _ref.toggleSection,
+    themeValues = _ref.themeValues,
+    isMobile = _ref.isMobile,
+    supportsTouch = _ref.supportsTouch,
+    title = _ref.title,
+    customPadding = _ref.customPadding,
+    _ref$initiallyOpen = _ref.initiallyOpen,
+    initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
+    _ref$openHeight = _ref.openHeight,
+    openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+    children = _ref.children,
+    _ref$customTitle = _ref.customTitle,
+    customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle,
+    _ref$stackTitle = _ref.stackTitle,
+    stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
+    stackTitleContent = _ref.stackTitleContent,
+    _ref$sectionGap = _ref.sectionGap,
+    sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "" : _ref$name,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 1 : _ref$index,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === ENTER) {
+      toggleSection();
+    }
+  };
+  var numChildren = typeof children === "Array" ? children.length : 1;
+  var label = name !== "" ? name : !customTitle ? title : "collapsible section";
+  var id = "".concat(label === null || label === void 0 || (_label$replaceAll = label.replaceAll) === null || _label$replaceAll === void 0 || (_label$replaceAll = _label$replaceAll.call(label, " ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
+  var wrapper = {
+    open: {
+      height: openHeight,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: 0.15
+      }
+    },
+    closed: {
+      height: 0,
+      transition: {
+        duration: 0.3,
+        ease: [0.04, 0.62, 0.23, 0.98],
+        staggerChildren: 0.15,
+        staggerDirection: -1,
+        delay: numChildren * 0.35
+      }
+    }
+  };
+  var icon = {
+    open: {
+      rotate: "90deg"
+    },
+    closed: {
+      rotate: "0deg"
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Motion, {
+    padding: "0",
+    hoverStyles: "outline: none;",
+    animate: isOpen ? "open" : "closed",
+    positionTransition: true
+  }, stackTitle && /*#__PURE__*/React__default.createElement(Fragment$1, null, stackTitleContent), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: isOpen && !isMobile ? sectionGap : "0rem"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    role: "heading",
+    "aria-label": label,
+    "aria-level": 3
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: customPadding ? customPadding : "0",
+    background: themeValues.headingBackgroundColor,
+    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
+    key: "header",
+    hoverStyles: "cursor: pointer;",
+    tabIndex: "0",
+    onKeyDown: handleKeyDown,
+    extraStyles: "z-index: 25; ".concat(extraStyles),
+    role: "button",
+    "aria-expanded": isOpen.toString(),
+    "aria-controls": id,
+    id: "".concat(id, "-button")
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
+  }, customTitle ? /*#__PURE__*/React__default.createElement(Box, {
+    width: "calc(100% - 36px)",
+    padding: "0px"
+  }, title) : /*#__PURE__*/React__default.createElement(Title$1, {
+    weight: FONT_WEIGHT_SEMIBOLD,
+    color: themeValues.titleColor,
+    as: "h6",
+    variant: "small"
+  }, title), /*#__PURE__*/React__default.createElement(Motion, {
+    variants: icon,
+    extraStyles: "display: flex; align-items: center;"
+  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null))))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    initial: false
+  }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
+    padding: "0",
+    background: themeValues.bodyBackgroundColor,
+    key: "content",
+    positionTransition: true,
+    initial: initiallyOpen ? "open" : "closed",
+    exit: "closed",
+    variants: wrapper,
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;",
+    id: "".concat(id, "-content"),
+    role: "region",
+    "aria-labelledby": "".concat(id, "-button")
+  }, children))));
+};
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
+
+var ClipboardIcon = function ClipboardIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_1104_623",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "2",
+    width: "16",
+    height: "18"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z",
+    fill: themeValues.singleIconColor
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_1104_623)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: themeValues.singleIconColor
+  })));
+};
+var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
+
+/* 
+  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 = useRef();
+  useEffect$1(function () {
+    var handleOutsideClick = function handleOutsideClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick, true);
+    return function () {
+      document.removeEventListener("click", handleOutsideClick, true);
+    };
+  }, [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 || _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === 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 = useState(initialToastState),
+    _useState2 = _slicedToArray(_useState, 2),
+    toastState = _useState2[0],
+    setToastState = _useState2[1];
+  useEffect$1(function () {
+    if (toastState.isOpen && timeout > 0) {
+      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
+  };
+};
+
+function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
+  useEffect$1(function () {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return function () {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+var useTurnstileScript = function useTurnstileScript(verifyURL) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    scriptLoaded = _useState2[0],
+    setScriptLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scriptError = _useState4[0],
+    setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
+  useEffect$1(function () {
+    if (typeof window === "undefined") {
+      setScriptLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setScriptLoaded(true);
+      return;
+    }
+    var script = document.createElement("script");
+    script.src = "".concat(verifyURL, "?render=explicit");
+    script.onload = function () {
+      setScriptLoaded(true);
+    };
+    script.onerror = function () {
+      handleScriptError();
+    };
+    script.onabort = function () {
+      handleScriptError();
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+    return function () {
+      setScriptLoaded(false);
+      setScriptError(false);
+    };
+  }, [verifyURL]);
+  return {
+    scriptLoaded: scriptLoaded,
+    scriptError: scriptError
+  };
+};
 
-ChangePasswordForm.reducer = reducer$1;
-ChangePasswordForm.mapStateToProps = mapStateToProps$2;
-ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 
-var titleColor$1 = "#292A33";
-var headingBackgroundColor = "transparent";
-var bodyBackgroundColor = "transparent";
-var fallbackValues$J = {
-  titleColor: titleColor$1,
-  headingBackgroundColor: headingBackgroundColor,
-  bodyBackgroundColor: bodyBackgroundColor
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  useOutsideClick: useOutsideClickHook,
+  useScrollTo: useScrollTo,
+  useToastNotification: useToastNotification,
+  useConditionallyAddValidator: useConditionallyAddValidator,
+  useTurnstileScript: useTurnstileScript
+});
+
+var hoverColor$4 = "#116285";
+var activeColor$8 = "#0E506D";
+var popoverTriggerColor = "#15749D";
+var fallbackValues$I = {
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$8,
+  popoverTriggerColor: popoverTriggerColor
 };
 
-var CollapsibleSection = function CollapsibleSection(_ref) {
-  var _label$replaceAll;
-  var isOpen = _ref.isOpen,
-    toggleSection = _ref.toggleSection,
-    themeValues = _ref.themeValues,
-    isMobile = _ref.isMobile,
-    supportsTouch = _ref.supportsTouch,
-    title = _ref.title,
-    customPadding = _ref.customPadding,
-    _ref$initiallyOpen = _ref.initiallyOpen,
-    initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
-    _ref$openHeight = _ref.openHeight,
-    openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
-    children = _ref.children,
-    _ref$customTitle = _ref.customTitle,
-    customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle,
-    _ref$stackTitle = _ref.stackTitle,
-    stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
-    stackTitleContent = _ref.stackTitleContent,
-    _ref$sectionGap = _ref.sectionGap,
-    sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? "" : _ref$name,
-    _ref$index = _ref.index,
-    index = _ref$index === void 0 ? 1 : _ref$index,
-    _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === ENTER) {
-      toggleSection();
+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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverOpen = _useState2[0],
+    togglePopover = _useState2[1];
+  var handleTogglePopover = function handleTogglePopover(popoverState) {
+    if (popoverOpen !== popoverState) {
+      togglePopover(popoverState);
     }
   };
-  var numChildren = typeof children === "Array" ? children.length : 1;
-  var label = name !== "" ? name : !customTitle ? title : "collapsible section";
-  var id = "".concat(label === null || label === void 0 || (_label$replaceAll = label.replaceAll) === null || _label$replaceAll === void 0 || (_label$replaceAll = _label$replaceAll.call(label, " ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
-  var wrapper = {
-    open: {
-      height: openHeight,
-      transition: {
-        duration: 0.3,
-        ease: [0.04, 0.62, 0.23, 0.98],
-        staggerChildren: 0.15
-      }
+  var triggerRef = useOutsideClickHook(function () {
+    return handleTogglePopover(false);
+  });
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: function action() {
+      return noop$1;
     },
-    closed: {
-      height: 0,
-      transition: {
-        duration: 0.3,
-        ease: [0.04, 0.62, 0.23, 0.98],
-        staggerChildren: 0.15,
-        staggerDirection: -1,
-        delay: numChildren * 0.35
+    onFocus: function onFocus() {
+      handleTogglePopover(true);
+    },
+    onBlur: function onBlur() {
+      handleTogglePopover(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === ESCAPE) {
+        handleTogglePopover(false);
       }
-    }
-  };
-  var icon = {
-    open: {
-      rotate: "90deg"
     },
-    closed: {
-      rotate: "0deg"
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(Motion, {
-    padding: "0",
-    hoverStyles: "outline: none;",
-    animate: isOpen ? "open" : "closed",
-    positionTransition: true
-  }, stackTitle && /*#__PURE__*/React__default.createElement(Fragment$1, null, stackTitleContent), /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: isOpen && !isMobile ? sectionGap : "0rem"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    role: "heading",
-    "aria-label": label,
-    "aria-level": 3
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: customPadding ? customPadding : "0",
-    background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
-    key: "header",
-    hoverStyles: "cursor: pointer;",
-    tabIndex: "0",
-    onKeyDown: handleKeyDown,
-    extraStyles: "z-index: 25; ".concat(extraStyles),
-    role: "button",
-    "aria-expanded": isOpen.toString(),
-    "aria-controls": id,
-    id: "".concat(id, "-button")
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center"
-  }, customTitle ? /*#__PURE__*/React__default.createElement(Box, {
-    width: "calc(100% - 36px)",
-    padding: "0px"
-  }, title) : /*#__PURE__*/React__default.createElement(Title$1, {
-    weight: FONT_WEIGHT_SEMIBOLD,
-    color: themeValues.titleColor,
-    as: "h6",
-    variant: "small"
-  }, title), /*#__PURE__*/React__default.createElement(Motion, {
-    variants: icon,
-    extraStyles: "display: flex; align-items: center;"
-  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null))))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
-    initial: false
-  }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
-    padding: "0",
-    background: themeValues.bodyBackgroundColor,
-    key: "content",
-    positionTransition: true,
-    initial: initiallyOpen ? "open" : "closed",
-    exit: "closed",
-    variants: wrapper,
-    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;",
-    id: "".concat(id, "-content"),
-    role: "region",
-    "aria-labelledby": "".concat(id, "-button")
-  }, children))));
-};
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$J);
-
-var ClipboardIcon = function ClipboardIcon(_ref) {
-  var themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("mask", {
-    id: "mask0_1104_623",
-    style: {
-      maskType: "alpha"
+    onTouchStart: function onTouchStart() {
+      return handleTogglePopover(true);
     },
-    maskUnits: "userSpaceOnUse",
-    x: "4",
-    y: "2",
-    width: "16",
-    height: "18"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z",
-    fill: themeValues.singleIconColor
-  })), /*#__PURE__*/React__default.createElement("g", {
-    mask: "url(#mask0_1104_623)"
-  }, /*#__PURE__*/React__default.createElement("rect", {
-    width: "24",
-    height: "24",
-    fill: themeValues.singleIconColor
+    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 ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$I);
 
 /*
 This component will render `content` and a clipboard icon.
@@ -41169,7 +40916,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$K = {
+var fallbackValues$J = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41200,7 +40947,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$K);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$J);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41247,7 +40994,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$9 = "#182848";
-var fallbackValues$L = {
+var fallbackValues$K = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$9
 };
@@ -41306,7 +41053,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$L);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$K);
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -45764,7 +45511,7 @@ var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
-var fallbackValues$M = {
+var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$2,
@@ -45899,7 +45646,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$M, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -45971,7 +45718,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$N = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
@@ -46011,7 +45758,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$N, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$M, "profile");
 
 var menuVariants = {
   invisible: {
@@ -46063,7 +45810,7 @@ var NavMenuMobile = function NavMenuMobile(_ref3) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$N, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$M, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -46676,7 +46423,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
-var fallbackValues$O = {
+var fallbackValues$N = {
   iconColor: iconColor
 };
 
@@ -47017,7 +46764,7 @@ var Obligation = function Obligation(_ref) {
   }))));
   return isLoading ? loadingObligation : inactive ? inactiveObligation : activeObligation;
 };
-var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$O);
+var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
 
 var weightTitle$1 = {
   "default": "600",
@@ -47027,7 +46774,7 @@ var detailVariant$1 = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   weightTitle: weightTitle$1,
   detailVariant: detailVariant$1
 };
@@ -47084,7 +46831,7 @@ var PartialAmountField = function PartialAmountField(_ref) {
 function arePropsEqual(prevProps, nextProps) {
   return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
 }
-var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$P, "default"), arePropsEqual);
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$O, "default"), arePropsEqual);
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
@@ -47188,9 +46935,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
-var activeColor$a = MATISSE_BLUE;
-var fallbackValues$Q = {
-  activeColor: activeColor$a,
+var activeColor$9 = MATISSE_BLUE;
+var fallbackValues$P = {
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47383,7 +47130,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$Q);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$P);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47484,7 +47231,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$R = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -47853,7 +47600,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$R, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$Q, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -47873,7 +47620,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$S = {
+var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -47937,7 +47684,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$S, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$R, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -47972,7 +47719,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$T = {
+var fallbackValues$S = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48044,7 +47791,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$T, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$S, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -48816,7 +48563,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$U = {
+var fallbackValues$T = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49151,9 +48898,9 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$U);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
 
-var fallbackValues$V = {
+var fallbackValues$U = {
   primaryColor: ROYAL_BLUE_VIVID,
   secondaryColor: CHARADE_GREY
 };
@@ -49264,7 +49011,7 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, "or Log In")))));
 };
-var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$V));
+var RegistrationBanner$1 = withWindowSize(themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues$U));
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49384,13 +49131,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$W = {
+var fallbackValues$V = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49505,13 +49252,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$X = {
+var fallbackValues$W = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$X, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$W, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49560,7 +49307,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$Y = {
+var fallbackValues$X = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49655,12 +49402,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Y);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$X);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$Z = {
+var fallbackValues$Y = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49719,7 +49466,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Z);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Y);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49840,7 +49587,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$_ = {
+var fallbackValues$Z = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49885,7 +49632,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$_));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Z));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49945,7 +49692,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$$ = {
+var fallbackValues$_ = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50012,15 +49759,15 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$$);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$_);
 
-var hoverColor$6 = "#116285";
-var activeColor$b = "#0E506D";
+var hoverColor$5 = "#116285";
+var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$10 = {
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$b,
+var fallbackValues$$ = {
+  hoverColor: hoverColor$5,
+  activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
   backgroundColor: backgroundColor$e
 };
@@ -50154,13 +49901,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$10);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$$);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$11 = {
+var fallbackValues$10 = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -50862,7 +50609,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$11);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
 
 var TextWrapStyles = css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
 var Container$1 = styled(Box).withConfig({
@@ -51064,7 +50811,7 @@ var justifyContent = {
     desktop: "center"
   }
 };
-var fallbackValues$12 = {
+var fallbackValues$11 = {
   // Colors
   heroPrimaryColor: heroPrimaryColor,
   heroTextColor: heroTextColor,
@@ -51271,7 +51018,7 @@ var HeroImage = function HeroImage(_ref) {
     theme: themeValues
   }, description)))));
 };
-var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$12, "v1"));
+var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
 
 var TurnstileWidgetContainer = styled(Box).withConfig({
   displayName: "TurnstileWidget__TurnstileWidgetContainer",
@@ -51414,6 +51161,153 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
+var hoverColor$6 = "#116285";
+var activeColor$b = "#0E506D";
+var tooltipTriggerColor = "#15749D";
+var fallbackValues$12 = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$b,
+  tooltipTriggerColor: tooltipTriggerColor
+};
+
+var arrowBorder$1 = 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 Tooltip = function Tooltip(_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$hasIconTrigger = _ref.hasIconTrigger,
+    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
+    _ref$IconTrigger = _ref.IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+    _ref$tooltipID = _ref.tooltipID,
+    tooltipID = _ref$tooltipID === void 0 ? 0 : _ref$tooltipID,
+    extraStyles = _ref.extraStyles,
+    _ref$textExtraStyles = _ref.textExtraStyles,
+    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _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,
+    tooltipExtraStyles = _ref.tooltipExtraStyles;
+  var hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor,
+    tooltipTriggerColor = themeValues.tooltipTriggerColor;
+  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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipOpen = _useState2[0],
+    setTooltipOpen = _useState2[1];
+  var handleToggleTooltip = function handleToggleTooltip(tooltipState) {
+    if (tooltipOpen !== tooltipState) {
+      setTooltipOpen(tooltipState);
+    }
+  };
+  var handleKeyboardEvent = function handleKeyboardEvent(e) {
+    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+      handleToggleTooltip(false);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(extraStyles)
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: function action() {
+      return noop$1;
+    },
+    onFocus: function onFocus() {
+      return handleToggleTooltip(true);
+    },
+    onBlur: function onBlur() {
+      return handleToggleTooltip(false);
+    },
+    onKeyDown: handleKeyboardEvent,
+    onTouchStart: function onTouchStart() {
+      return handleToggleTooltip(true);
+    },
+    onTouchEnd: function onTouchEnd() {
+      return handleToggleTooltip(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleToggleTooltip(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleToggleTooltip(false);
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    "aria-describedby": tooltipID,
+    extraStyles: buttonExtraStyles
+  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    stroke: BLACK
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
+    extraStyles: 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: tooltipID,
+    role: "tooltip",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(tooltipOpen ? "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(tooltipExtraStyles, ";\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$1(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 Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$12);
+
 var pageBackground = "#FBFCFD";
 var fallbackValues$13 = {
   pageBackground: pageBackground
@@ -51746,5 +51640,5 @@ var index$2 = /*#__PURE__*/Object.freeze({
   useLogoutTimers: useLogoutTimers
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmExSmallIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankGenericSmallIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, CashSmallIcon, CashieringImage, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DiscoverSmallIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormTextarea$1 as FormTextarea, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GenericSmallIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, MasterCardSmallIcon, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, Tooltip$1 as Tooltip, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TurnstileWidget, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VisaSmallIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WireSmallIcon, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmExSmallIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankGenericSmallIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, CashSmallIcon, CashieringImage, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DiscoverSmallIcon, DisplayBox$1 as DisplayBox, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormTextarea$1 as FormTextarea, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GenericSmallIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, MasterCardSmallIcon, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, Tooltip$1 as Tooltip, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TurnstileWidget, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VisaSmallIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WireSmallIcon, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map