@copart/ops-tool-kit 1.10.0-alpha.23 → 1.10.0-alpha.25

package/dist/ops-tool-kit.js

@@ -33,7 +33,7 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$f = "@copart/ops-tool-kit";
-const version$5 = "1.10.0-alpha.23";
+const version$5 = "1.10.0-alpha.25";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -113,7 +113,8 @@ const dependencies$1 = {
   "storage-changed": "^2.0.0",
   warning: "^4.0.1",
   "@wordpress/block-library": "5.0.1",
-  websocket: "^1.0.34"
+  websocket: "^1.0.34",
+  "react-tooltip": "^5.20.0"
 };
 const jest = {
   setupTestFrameworkScriptFile: "./jest/setup.js",
@@ -3940,32 +3941,32 @@ var runtime = createCommonjsModule(function (module) {
 
 // This method of obtaining a reference to the global object needs to be
 // kept identical to the way it is obtained in runtime.js
-var g$1 = (function() {
+var g$2 = (function() {
   return this || (typeof self === "object" && self);
 })() || Function("return this")();
 
 // Use `getOwnPropertyNames` because not all browsers support calling
 // `hasOwnProperty` on the global `self` object in a worker. See #183.
-var hadRuntime = g$1.regeneratorRuntime &&
-  Object.getOwnPropertyNames(g$1).indexOf("regeneratorRuntime") >= 0;
+var hadRuntime = g$2.regeneratorRuntime &&
+  Object.getOwnPropertyNames(g$2).indexOf("regeneratorRuntime") >= 0;
 
 // Save the old regeneratorRuntime in case it needs to be restored later.
-var oldRuntime = hadRuntime && g$1.regeneratorRuntime;
+var oldRuntime = hadRuntime && g$2.regeneratorRuntime;
 
 // Force reevalutation of runtime.js.
-g$1.regeneratorRuntime = undefined;
+g$2.regeneratorRuntime = undefined;
 
 var runtimeModule = runtime;
 
 if (hadRuntime) {
   // Restore the original runtime.
-  g$1.regeneratorRuntime = oldRuntime;
+  g$2.regeneratorRuntime = oldRuntime;
 } else {
   // Remove the global property added by runtime.js.
   try {
-    delete g$1.regeneratorRuntime;
+    delete g$2.regeneratorRuntime;
   } catch(e) {
-    g$1.regeneratorRuntime = undefined;
+    g$2.regeneratorRuntime = undefined;
   }
 }
 
@@ -4602,13 +4603,13 @@ function nonStandardBrowserEnv() {
 
 var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
 
-function E() {
+function E$1() {
   this.message = 'String contains an invalid character';
 }
 
-E.prototype = new Error();
-E.prototype.code = 5;
-E.prototype.name = 'InvalidCharacterError';
+E$1.prototype = new Error();
+E$1.prototype.code = 5;
+E$1.prototype.name = 'InvalidCharacterError';
 
 function btoa$2(input) {
   var str = String(input);
@@ -4623,7 +4624,7 @@ function btoa$2(input) {
     charCode = str.charCodeAt(idx += 3 / 4);
 
     if (charCode > 0xFF) {
-      throw new E();
+      throw new E$1();
     }
 
     block = block << 8 | charCode;
@@ -10442,7 +10443,7 @@ var flatten$1 = flatten;
  * @symb R.flip(f)(a, b, c) = f(b, a, c)
  */
 
-var flip =
+var flip$1 =
 /*#__PURE__*/
 _curry1(function flip(fn) {
   return curryN$1(fn.length, function (a, b) {
@@ -10453,7 +10454,7 @@ _curry1(function flip(fn) {
   });
 });
 
-var flip$1 = flip;
+var flip$2 = flip$1;
 
 /**
  * Iterate over an input `object`, calling a provided function `fn` for each
@@ -17194,7 +17195,7 @@ try {
  */
 
 
-function getWindow(rootElement) {
+function getWindow$1(rootElement) {
   if (_isSSR || typeof _window === 'undefined') {
     return undefined;
   } else {
@@ -17351,7 +17352,7 @@ function () {
     var _this = this;
 
     var immediateId = 0;
-    var win = getWindow(targetElement);
+    var win = getWindow$1(targetElement);
 
     if (!this._isDisposed) {
       if (!this._immediateIds) {
@@ -17390,7 +17391,7 @@ function () {
 
 
   Async.prototype.clearImmediate = function (id, targetElement) {
-    var win = getWindow(targetElement);
+    var win = getWindow$1(targetElement);
 
     if (this._immediateIds && this._immediateIds[id]) {
       /* tslint:disable:ban-native-functions */
@@ -17682,7 +17683,7 @@ function () {
     var _this = this;
 
     var animationFrameId = 0;
-    var win = getWindow(targetElement);
+    var win = getWindow$1(targetElement);
 
     if (!this._isDisposed) {
       if (!this._animationFrameIds) {
@@ -17714,7 +17715,7 @@ function () {
   };
 
   Async.prototype.cancelAnimationFrame = function (id, targetElement) {
-    var win = getWindow(targetElement);
+    var win = getWindow$1(targetElement);
 
     if (this._animationFrameIds && this._animationFrameIds[id]) {
       /* tslint:disable:ban-native-functions */
@@ -18208,7 +18209,7 @@ function findScrollableParent(startingElement) {
 
   if (!el || el === doc.body) {
     // tslint:disable-next-line:no-any
-    el = getWindow(startingElement);
+    el = getWindow$1(startingElement);
   }
 
   return el;
@@ -18428,7 +18429,7 @@ function () {
 function _getGlobalSettings() {
   var _a;
 
-  var win = getWindow();
+  var win = getWindow$1();
   var globalObj = win || {};
 
   if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {
@@ -19026,7 +19027,7 @@ function classNamesFunction(options) {
     }
 
     if (styleCalcCount > (options.cacheSize || MAX_CACHE_COUNT)) {
-      var win = getWindow();
+      var win = getWindow$1();
 
       if ((_b = (_a = win) === null || _a === void 0 ? void 0 : _a.FabricConfig) === null || _b === void 0 ? void 0 : _b.enableClassNameCacheFullWarning) {
         console.warn("Styles are being recalculated too frequently. Cache miss rate is " + styleCalcCount + "/" + getClassNamesCount + "."); // tslint:disable-next-line:no-console
@@ -19850,7 +19851,7 @@ function focusAsync(element) {
     }
 
     targetToFocusOnNextRepaint = element;
-    var win = getWindow(element);
+    var win = getWindow$1(element);
 
     if (win) {
       // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
@@ -19911,7 +19912,7 @@ function getElementIndexPath(fromElement, toElement) {
 var CURRENT_ID_PROPERTY = '__currentId__';
 var DEFAULT_ID_STRING = 'id__'; // tslint:disable-next-line:no-any
 
-var _global = getWindow() || {};
+var _global = getWindow$1() || {};
 
 if (_global[CURRENT_ID_PROPERTY] === undefined) {
   _global[CURRENT_ID_PROPERTY] = 0;
@@ -20191,7 +20192,7 @@ var IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';
  */
 
 function setFocusVisibility(enabled, target) {
-  var win = target ? getWindow(target) : getWindow();
+  var win = target ? getWindow$1(target) : getWindow$1();
 
   if (win) {
     var classList = win.document.body.classList;
@@ -20240,7 +20241,7 @@ function setMountCounters(key, delta) {
 function useFocusRects(rootRef) {
   var _a;
 
-  var win = getWindow((_a = rootRef) === null || _a === void 0 ? void 0 : _a.current);
+  var win = getWindow$1((_a = rootRef) === null || _a === void 0 ? void 0 : _a.current);
   React__namespace.useEffect(function () {
     var _a;
 
@@ -20309,7 +20310,7 @@ function getItem$1(key) {
   var result = null;
 
   try {
-    var win = getWindow();
+    var win = getWindow$1();
     result = win ? win.localStorage.getItem(key) : null;
   } catch (e) {
     /* Eat the exception */
@@ -21043,7 +21044,7 @@ function _getFontBaseUrl() {
   var _a, _b, _c; // tslint:disable-next-line:no-any
 
 
-  var fabricConfig = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.FabricConfig;
+  var fabricConfig = (_a = getWindow$1()) === null || _a === void 0 ? void 0 : _a.FabricConfig;
   return _c = (_b = fabricConfig) === null || _b === void 0 ? void 0 : _b.fontBaseUrl, _c !== null && _c !== void 0 ? _c : DefaultBaseUrl;
 }
 /**
@@ -21211,7 +21212,7 @@ var _theme = createTheme({
 var ThemeSettingName = 'theme';
 
 if (!Customizations.getSettings([ThemeSettingName]).theme) {
-  var win = getWindow(); // tslint:disable-line:no-any
+  var win = getWindow$1(); // tslint:disable-line:no-any
 
   if ((_c = (_b = win) === null || _b === void 0 ? void 0 : _b.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
     _theme = createTheme(win.FabricConfig.theme);
@@ -22255,7 +22256,7 @@ function (_super) {
     if (this._root.current) {
       this._disposables.push(on(this._root.current, 'focus', this._onFocus, true), on(this._root.current, 'blur', this._onBlur, true));
 
-      var currentWindow = getWindow(this._root.current);
+      var currentWindow = getWindow$1(this._root.current);
 
       if (currentWindow) {
         this._disposables.push(on(currentWindow, 'keydown', this._onKeyDown));
@@ -22818,23 +22819,23 @@ function (_super) {
       if (typeof target === 'string') {
         var currentDoc = getDocument(currentElement);
         this._target = currentDoc ? currentDoc.querySelector(target) : null;
-        this._targetWindow = getWindow(currentElement);
+        this._targetWindow = getWindow$1(currentElement);
       } else if (!!target.stopPropagation) {
-        this._targetWindow = getWindow(target.target);
+        this._targetWindow = getWindow$1(target.target);
         this._target = target;
       } else if (!!target.getBoundingClientRect) {
         var targetElement = target;
-        this._targetWindow = getWindow(targetElement);
+        this._targetWindow = getWindow$1(targetElement);
         this._target = target;
       } else if (target.current !== undefined) {
         this._target = target.current;
-        this._targetWindow = getWindow(this._target); // HTMLImgElements can have x and y values. The check for it being a point must go last.
+        this._targetWindow = getWindow$1(this._target); // HTMLImgElements can have x and y values. The check for it being a point must go last.
       } else {
-        this._targetWindow = getWindow(currentElement);
+        this._targetWindow = getWindow$1(currentElement);
         this._target = target;
       }
     } else {
-      this._targetWindow = getWindow(currentElement);
+      this._targetWindow = getWindow$1(currentElement);
     }
   };
 
@@ -23910,7 +23911,7 @@ function (_super) {
     _allInstances[this._id] = this;
 
     if (root) {
-      this._windowElement = getWindow(root);
+      this._windowElement = getWindow$1(root);
       var parentElement = getParent(root, ALLOW_VIRTUAL_ELEMENTS);
 
       while (parentElement && parentElement !== this._getDocument().body && parentElement.nodeType === 1) {
@@ -27687,8 +27688,6 @@ var HelpSideBar = function HelpSideBar(_ref) {
   };
 
   var getArticles = function getArticles(type) {
-    console.log('+++getArticles type=', type);
-
     switch (type) {
       case contentType.RECOMMENDED_HELP_RESOURCES.type:
         return getRecommendedHelpArticles(helpContent);
@@ -30465,7 +30464,7 @@ function () {
 }();
 
 var filterRoles = function filterRoles(roles, invalidCodes) {
-  return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$1(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
+  return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$2(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
 };
 
 var SettingsView =
@@ -38433,27 +38432,27 @@ styleInject(css_248z$5);
  * LICENSE file in the root directory of this source tree.
  */
 
-var b = "function" === typeof Symbol && Symbol.for,
-    c = b ? Symbol.for("react.element") : 60103,
-    d = b ? Symbol.for("react.portal") : 60106,
-    e = b ? Symbol.for("react.fragment") : 60107,
-    f = b ? Symbol.for("react.strict_mode") : 60108,
-    g = b ? Symbol.for("react.profiler") : 60114,
-    h = b ? Symbol.for("react.provider") : 60109,
-    k = b ? Symbol.for("react.context") : 60110,
-    l = b ? Symbol.for("react.async_mode") : 60111,
-    m = b ? Symbol.for("react.concurrent_mode") : 60111,
-    n = b ? Symbol.for("react.forward_ref") : 60112,
-    p = b ? Symbol.for("react.suspense") : 60113,
-    q = b ? Symbol.for("react.suspense_list") : 60120,
-    r = b ? Symbol.for("react.memo") : 60115,
-    t = b ? Symbol.for("react.lazy") : 60116,
-    v = b ? Symbol.for("react.block") : 60121,
-    w = b ? Symbol.for("react.fundamental") : 60117,
-    x = b ? Symbol.for("react.responder") : 60118,
-    y = b ? Symbol.for("react.scope") : 60119;
-
-function z(a) {
+var b$1 = "function" === typeof Symbol && Symbol.for,
+    c = b$1 ? Symbol.for("react.element") : 60103,
+    d = b$1 ? Symbol.for("react.portal") : 60106,
+    e = b$1 ? Symbol.for("react.fragment") : 60107,
+    f$1 = b$1 ? Symbol.for("react.strict_mode") : 60108,
+    g$1 = b$1 ? Symbol.for("react.profiler") : 60114,
+    h$1 = b$1 ? Symbol.for("react.provider") : 60109,
+    k$1 = b$1 ? Symbol.for("react.context") : 60110,
+    l = b$1 ? Symbol.for("react.async_mode") : 60111,
+    m = b$1 ? Symbol.for("react.concurrent_mode") : 60111,
+    n = b$1 ? Symbol.for("react.forward_ref") : 60112,
+    p = b$1 ? Symbol.for("react.suspense") : 60113,
+    q$1 = b$1 ? Symbol.for("react.suspense_list") : 60120,
+    r = b$1 ? Symbol.for("react.memo") : 60115,
+    t = b$1 ? Symbol.for("react.lazy") : 60116,
+    v = b$1 ? Symbol.for("react.block") : 60121,
+    w$1 = b$1 ? Symbol.for("react.fundamental") : 60117,
+    x$1 = b$1 ? Symbol.for("react.responder") : 60118,
+    y = b$1 ? Symbol.for("react.scope") : 60119;
+
+function z$1(a) {
   if ("object" === typeof a && null !== a) {
     var u = a.$$typeof;
 
@@ -38463,18 +38462,18 @@ function z(a) {
           case l:
           case m:
           case e:
-          case g:
-          case f:
+          case g$1:
+          case f$1:
           case p:
             return a;
 
           default:
             switch (a = a && a.$$typeof, a) {
-              case k:
+              case k$1:
               case n:
               case t:
               case r:
-              case h:
+              case h$1:
                 return a;
 
               default:
@@ -38489,79 +38488,79 @@ function z(a) {
   }
 }
 
-function A(a) {
-  return z(a) === m;
+function A$1(a) {
+  return z$1(a) === m;
 }
 
 var AsyncMode = l;
 var ConcurrentMode = m;
-var ContextConsumer = k;
-var ContextProvider = h;
+var ContextConsumer = k$1;
+var ContextProvider = h$1;
 var Element$1 = c;
 var ForwardRef = n;
 var Fragment = e;
 var Lazy = t;
 var Memo = r;
 var Portal = d;
-var Profiler = g;
-var StrictMode = f;
+var Profiler = g$1;
+var StrictMode = f$1;
 var Suspense = p;
 
 var isAsyncMode = function (a) {
-  return A(a) || z(a) === l;
+  return A$1(a) || z$1(a) === l;
 };
 
-var isConcurrentMode = A;
+var isConcurrentMode = A$1;
 
 var isContextConsumer = function (a) {
-  return z(a) === k;
+  return z$1(a) === k$1;
 };
 
 var isContextProvider = function (a) {
-  return z(a) === h;
+  return z$1(a) === h$1;
 };
 
-var isElement = function (a) {
+var isElement$1 = function (a) {
   return "object" === typeof a && null !== a && a.$$typeof === c;
 };
 
 var isForwardRef = function (a) {
-  return z(a) === n;
+  return z$1(a) === n;
 };
 
 var isFragment = function (a) {
-  return z(a) === e;
+  return z$1(a) === e;
 };
 
 var isLazy = function (a) {
-  return z(a) === t;
+  return z$1(a) === t;
 };
 
 var isMemo = function (a) {
-  return z(a) === r;
+  return z$1(a) === r;
 };
 
 var isPortal = function (a) {
-  return z(a) === d;
+  return z$1(a) === d;
 };
 
 var isProfiler = function (a) {
-  return z(a) === g;
+  return z$1(a) === g$1;
 };
 
 var isStrictMode = function (a) {
-  return z(a) === f;
+  return z$1(a) === f$1;
 };
 
 var isSuspense = function (a) {
-  return z(a) === p;
+  return z$1(a) === p;
 };
 
 var isValidElementType = function (a) {
-  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f$1 || a === p || a === q$1 || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y || a.$$typeof === v);
 };
 
-var typeOf = z;
+var typeOf = z$1;
 
 var reactIs_production_min = {
 	AsyncMode: AsyncMode,
@@ -38581,7 +38580,7 @@ var reactIs_production_min = {
 	isConcurrentMode: isConcurrentMode,
 	isContextConsumer: isContextConsumer,
 	isContextProvider: isContextProvider,
-	isElement: isElement,
+	isElement: isElement$1,
 	isForwardRef: isForwardRef,
 	isFragment: isFragment,
 	isLazy: isLazy,
@@ -41741,7 +41740,9 @@ function attachHandlers(firebase, updateNotifications, updateAllFirebaseNotifica
   var today = getTodayDate();
   firebase.database().ref().child('ops-news').orderByChild('ends_at').startAt(today).on('value', function (snapshot) {
     compose(updateNotifications, filterNotificationsFireBase, mapNotifications, values$1)(snapshot.val());
-    compose(updateAllFirebaseNotificationsList, mapNotifications, values$1)(snapshot.val());
+    setTimeout(function () {
+      compose(updateAllFirebaseNotificationsList, mapNotifications, values$1)(snapshot.val());
+    }, 500);
   });
 }
 
@@ -42185,6 +42186,11 @@ var AppBar = function AppBar(_ref) {
       firebaseInitialized = _useState20[0],
       setFirebaseinitialized = _useState20[1];
 
+  var listOfAllNotificationsRef = React.useRef(listOfAllNotifications);
+  React.useEffect(function () {
+    listOfAllNotificationsRef.current = listOfAllNotifications;
+  }, [listOfAllNotifications]);
+
   var updateNotifications = function updateNotifications(newNotifications) {
     setNotifications(function (notifications) {
       return filterDuplicateAndSave(notifications, newNotifications);
@@ -42251,7 +42257,6 @@ var AppBar = function AppBar(_ref) {
         var _notification$newsTar;
 
         if (notification === null || notification === void 0 ? void 0 : (_notification$newsTar = notification.newsTarget) === null || _notification$newsTar === void 0 ? void 0 : _notification$newsTar.audience_value) {
-          removeNotification(notification);
           var startTime = moment.utc(notification.startsAt).local().format("YYYY-MM-DD HH:mm:ss");
           var currentDate = new Date();
 
@@ -42259,6 +42264,8 @@ var AppBar = function AppBar(_ref) {
             setListOfAllFirebaseNotifications(function (notifications) {
               return filterDuplicateAndSave(notifications, newNotifications);
             });
+          } else {
+            removeNotification(notification);
           }
         }
       });
@@ -42283,6 +42290,12 @@ var AppBar = function AppBar(_ref) {
       return !notificationIds.includes(notification.notificationId);
     });
     var filterednewNotifications = newNotifications.filter(function (notification) {
+      if (notification.isFirebase && listOfAllNotificationsRef.current.find(function (n) {
+        return n.notificationId === notification.notificationId;
+      })) {
+        return false;
+      }
+
       return !actionCompletedNotificationIds.includes(notification.notificationId);
     });
     return sortNotifications([].concat(_toConsumableArray(filterednewNotifications), _toConsumableArray(filteredNotifications)));
@@ -42391,7 +42404,7 @@ var AppBar = function AppBar(_ref) {
       if (listOfAllFirebaseNotifications.length) {
         compose(updateNotifications, filterNotificationsFireBase)(listOfAllFirebaseNotifications);
       }
-    }, 20000);
+    }, 21000);
     return function () {
       clearInterval(interval);
     };
@@ -42967,20 +42980,26 @@ AutoRefresh.defaultProps = {
   version: ''
 };
 
-var css_248z = ".utilities_ContextualHelp_ContextualHelp--snippet {\r\n  padding: 15px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--title {\r\n  font-size: 24px;\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  margin-bottom: 5px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  color: #1d5ab9;\r\n  border-top: 3px solid #ccc;\r\n  margin-top: 10px;\r\n  font-size: 14px;\r\n  padding-top: 10px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle p {\r\n  cursor: pointer;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle p i {\r\n  font-size: 10px;\r\n  color: #1d5ab9;\r\n  position: relative;\r\n  top: -3px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle.utilities_ContextualHelp_ContextualHelp--noLink {\r\n  justify-content: flex-end;\r\n}\r\n";
+var css_248z = ".utilities_ContextualHelp_ContextualHelp--snippetContainer .utilities_ContextualHelp_ContextualHelp--snippet {\r\n  padding: 5px;\r\n  background-color: #fff;\r\n  opacity: 1;\r\n  z-index: 999;\r\n  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--snippetContainer .utilities_ContextualHelp_ContextualHelp--snippet .utilities_ContextualHelp_ContextualHelp--snippet-arrow {\r\n  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--title {\r\n  font-size: 24px;\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  margin-bottom: 5px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  color: #1d5ab9;\r\n  border-top: 3px solid #ccc;\r\n  margin-top: 10px;\r\n  font-size: 14px;\r\n  padding-top: 10px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle p {\r\n  cursor: pointer;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle p i {\r\n  font-size: 10px;\r\n  color: #1d5ab9;\r\n  position: relative;\r\n  top: -3px;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--linkedArticle.utilities_ContextualHelp_ContextualHelp--noLink {\r\n  justify-content: flex-end;\r\n}\r\n.utilities_ContextualHelp_ContextualHelp--snippetContainer .utilities_ContextualHelp_ContextualHelp--snippetArticle {\r\n  background-color: #fff;\r\n  opacity: 1;\r\n  z-index: 999;\r\n  max-width: 400px;\r\n  min-width: 250px;\r\n  /* max-height: 500px; */\r\n  min-height: 200px;\r\n  overflow: auto;\r\n  padding: 15px;\r\n}\r\n";
 styleInject(css_248z);
 
 var _styleModuleImportMap = {
   "./ContextualHelp.css": {
+    "snippetContainer": "utilities_ContextualHelp_ContextualHelp--snippetContainer",
     "snippet": "utilities_ContextualHelp_ContextualHelp--snippet",
+    "snippet-arrow": "utilities_ContextualHelp_ContextualHelp--snippet-arrow",
     "title": "utilities_ContextualHelp_ContextualHelp--title",
     "linkedArticle": "utilities_ContextualHelp_ContextualHelp--linkedArticle",
-    "noLink": "utilities_ContextualHelp_ContextualHelp--noLink"
+    "noLink": "utilities_ContextualHelp_ContextualHelp--noLink",
+    "snippetArticle": "utilities_ContextualHelp_ContextualHelp--snippetArticle"
   }
 };
 
 function Snippet(_ref) {
-  var article = _ref.article;
+  var article = _ref.article,
+      setTooltipStyles = _ref.setTooltipStyles,
+      isMihelpEnabled = _ref.isMihelpEnabled,
+      articleRef = _ref.articleRef;
 
   var OpenLinkedArticle = function OpenLinkedArticle() {
     var _article$linkedArticl;
@@ -42999,8 +43018,20 @@ function Snippet(_ref) {
     });
   };
 
-  return React__default["default"].createElement("div", {
-    className: "utilities_ContextualHelp_ContextualHelp--snippet"
+  React.useEffect(function () {
+    setTooltipStyles();
+  }, []);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, !isMihelpEnabled ? React__default["default"].createElement("h3", {
+    style: {
+      color: 'rgba(224, 26, 26, 0.8)'
+    }
+  }, "Mihelp is not enabled for this app") : !article || !(article === null || article === void 0 ? void 0 : article.id) ? React__default["default"].createElement("h3", {
+    style: {
+      color: 'rgba(224, 26, 26, 0.8)'
+    }
+  }, "Article Not Found") : React__default["default"].createElement("div", {
+    className: "utilities_ContextualHelp_ContextualHelp--snippetArticle",
+    ref: articleRef
   }, React__default["default"].createElement("div", {
     className: "utilities_ContextualHelp_ContextualHelp--title"
   }, React__default["default"].createElement("span", {
@@ -43027,11 +43058,2416 @@ function Snippet(_ref) {
       color: '#1d5ab9',
       cursor: 'pointer'
     }
-  }))));
+  })))));
+}
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+
+    default:
+      return [];
+  }
+}
+
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+
+  return list;
+}
+
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+
+function rectToClientRect(rect) {
+  return { ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+
+  return coords;
+}
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain positioning strategy.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+
+
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = { ...middlewareData,
+      [name]: { ...middlewareData[name],
+        ...data
+      }
+    };
+
+    if (reset && resetCount <= 50) {
+      resetCount++;
+
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+
+      i = -1;
+      continue;
+    }
+  }
+
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+
+
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+
+  if (options === void 0) {
+    options = {};
+  }
+
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect((await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  })));
+  const rect = elementContext === 'floating' ? { ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+
+
+const arrow = options => ({
+  name: 'arrow',
+  options,
+
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements
+    } = state; // Since `element` is required, we don't Partial<> the type.
+
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+
+    if (element == null) {
+      return {};
+    }
+
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0; // DOM platform can return `window` as the `offsetParent`.
+
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+
+    const centerToReference = endDiff / 2 - startDiff / 2; // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding); // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max); // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. This stops `shift()` from taking action, but can
+    // be worked around by calling it again after the `arrow()` if desired.
+
+    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
+    return {
+      [axis]: coords[axis] - alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset + alignmentOffset
+      }
+    };
+  }
+
+});
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+
+
+const flip = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    name: 'flip',
+    options,
+
+    async fn(state) {
+      var _middlewareData$flip;
+
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const side = getSide(placement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }]; // One or more sides is overflowing.
+
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+
+        if (nextPlacement) {
+          // Try next placement and re-run the lifecycle.
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        } // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+
+
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement; // Otherwise fallback.
+
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$map$so;
+
+                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+
+                if (placement) {
+                  resetPlacement = placement;
+                }
+
+                break;
+              }
+
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+
+      return {};
+    }
+
+  };
+};
+// Derivable.
+
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state); // eslint-disable-next-line prefer-const
+
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+
+
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+
+  return {
+    name: 'offset',
+    options,
+
+    async fn(state) {
+      const {
+        x,
+        y
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+
+  };
+};
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+
+
+const shift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    name: 'shift',
+    options,
+
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+
+      const limitedCoords = limiter.fn({ ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return { ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      };
+    }
+
+  };
+};
+
+function getNodeName(node) {
+  if (isNode$1(node)) {
+    return (node.nodeName || '').toLowerCase();
+  } // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+
+
+  return '#document';
+}
+
+function getWindow(node) {
+  var _node$ownerDocument;
+
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+
+function getDocumentElement(node) {
+  var _ref;
+
+  return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+
+function isNode$1(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+
+function isShadowRoot(value) {
+  // Browsers without `ShadowRoot` support.
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+
+function isContainingBlock(element) {
+  const webkit = isWebKit();
+  const css = getComputedStyle$1(element); // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+
+  return null;
+}
+
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+
+  const result = // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot || // DOM Element detected.
+  node.parentNode || // ShadowRoot detected.
+  isShadowRoot(node) && node.host || // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+
+  return getNearestOverflowAncestor(parentNode);
+}
+
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height; // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets =
+/*#__PURE__*/
+createCoords(0);
+
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentIFrame = win.frameElement;
+
+    while (currentIFrame && offsetParent && offsetWin !== win) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentIFrame = getWindow(currentIFrame).frameElement;
+    }
+  }
+
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+
+  if (offsetParent === documentElement) {
+    return rect;
+  }
+
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+} // Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+
+
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+} // Returns the inner client rect, subtracting scrollbars if present.
+
+
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = { ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
+    };
+  }
+
+  return rectToClientRect(rect);
+}
+
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+} // A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+
+
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+
+  if (cachedResult) {
+    return cachedResult;
+  }
+
+  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+
+    currentNode = getParentNode(currentNode);
+  }
+
+  cache.set(element, result);
+  return result;
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+
+
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  return getCssDimensions(element);
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+
+  if (polyfill) {
+    return polyfill(element);
+  }
+
+  return element.offsetParent;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element, polyfill) {
+  const window = getWindow(element);
+
+  if (!isHTMLElement(element)) {
+    return window;
+  }
+
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+    return window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
 }
 
+const getElementRects = async function (_ref) {
+  let {
+    reference,
+    floating,
+    strategy
+  } = _ref;
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  return {
+    reference: getRectRelativeToOffsetParent(reference, (await getOffsetParentFn(floating)), strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      ...(await getDimensionsFn(floating))
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+}; // https://samthor.au/2021/observing-dom/
+
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+
+    if (!skip) {
+      onMove();
+    }
+
+    if (!width || !height) {
+      return;
+    }
+
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+
+      isFirstUpdate = false;
+    } // Older browsers don't support a `document` as the root and will throw an
+    // error.
+
+
+    try {
+      io = new IntersectionObserver(handleObserve, { ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+
+    io.observe(element);
+  }
+
+  refresh(true);
+  return cleanup;
+}
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+
+
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          resizeObserver && resizeObserver.observe(floating);
+        });
+      }
+
+      update();
+    });
+
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+
+    resizeObserver.observe(floating);
+  }
+
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+
+  if (animationFrame) {
+    frameLoop();
+  }
+
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+
+  update();
+  return () => {
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
+
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain CSS positioning
+ * strategy.
+ */
+
+
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = { ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, { ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/* global define */
+(function () {
+
+  var hasOwn = {}.hasOwnProperty;
+
+  function classNames() {
+    var classes = [];
+
+    for (var i = 0; i < arguments.length; i++) {
+      var arg = arguments[i];
+      if (!arg) continue;
+      var argType = typeof arg;
+
+      if (argType === 'string' || argType === 'number') {
+        classes.push(arg);
+      } else if (Array.isArray(arg)) {
+        if (arg.length) {
+          var inner = classNames.apply(null, arg);
+
+          if (inner) {
+            classes.push(inner);
+          }
+        }
+      } else if (argType === 'object') {
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+          classes.push(arg.toString());
+          continue;
+        }
+
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(key);
+          }
+        }
+      }
+    }
+
+    return classes.join(' ');
+  }
+
+  if (module.exports) {
+    classNames.default = classNames;
+    module.exports = classNames;
+  } else {
+    window.classNames = classNames;
+  }
+})();
+});
+
+/*
+* React Tooltip
+* {@link https://github.com/ReactTooltip/react-tooltip}
+* @copyright ReactTooltip Team
+* @license MIT
+*/
+const f = "react-tooltip-core-styles",
+      h = "react-tooltip-base-styles",
+      w = {
+  core: !1,
+  base: !1
+};
+
+function b({
+  css: e,
+  id: t = h,
+  type: r = "base",
+  ref: o
+}) {
+  var n, l;
+  if (!e || "undefined" == typeof document || w[r]) return;
+  if ("core" === r && "undefined" != typeof process && (null === (n = null === process || void 0 === process ? void 0 : process.env) || void 0 === n ? void 0 : n.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
+  if ("base" !== r && "undefined" != typeof process && (null === (l = null === process || void 0 === process ? void 0 : process.env) || void 0 === l ? void 0 : l.REACT_TOOLTIP_DISABLE_BASE_STYLES)) return;
+  "core" === r && (t = f), o || (o = {});
+  const {
+    insertAt: i
+  } = o;
+  if (document.getElementById(t)) return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);
+  const c = document.head || document.getElementsByTagName("head")[0],
+        s = document.createElement("style");
+  s.id = t, s.type = "text/css", "top" === i && c.firstChild ? c.insertBefore(s, c.firstChild) : c.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), w[r] = !0;
+}
+
+const E = (e, t, r) => {
+  let o = null;
+  return function (...n) {
+    const l = () => {
+      o = null, r || e.apply(this, n);
+    };
+
+    r && !o && (e.apply(this, n), o = setTimeout(l, t)), r || (o && clearTimeout(o), o = setTimeout(l, t));
+  };
+},
+      _ = "DEFAULT_TOOLTIP_ID",
+      g = {
+  anchorRefs: new Set(),
+  activeAnchor: {
+    current: null
+  },
+  attach: () => {},
+  detach: () => {},
+  setActiveAnchor: () => {}
+},
+      A = React.createContext({
+  getTooltipData: () => g
+});
+
+function L(e = _) {
+  return React.useContext(A).getTooltipData(e);
+}
+
+const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
+      N = e => {
+  if (!(e instanceof HTMLElement || e instanceof SVGElement)) return !1;
+  const t = getComputedStyle(e);
+  return ["overflow", "overflow-x", "overflow-y"].some(e => {
+    const r = t.getPropertyValue(e);
+    return "auto" === r || "scroll" === r;
+  });
+},
+      x = e => {
+  if (!e) return null;
+  let t = e.parentElement;
+
+  for (; t;) {
+    if (N(t)) return t;
+    t = t.parentElement;
+  }
+
+  return document.scrollingElement || document.documentElement;
+},
+      k = async ({
+  elementReference: e = null,
+  tooltipReference: t = null,
+  tooltipArrowReference: r = null,
+  place: o = "top",
+  offset: n = 10,
+  strategy: l = "absolute",
+  middlewares: i = [offset(Number(n)), flip(), shift({
+    padding: 5
+  })],
+  border: c
+}) => {
+  if (!e) return {
+    tooltipStyles: {},
+    tooltipArrowStyles: {},
+    place: o
+  };
+  if (null === t) return {
+    tooltipStyles: {},
+    tooltipArrowStyles: {},
+    place: o
+  };
+  const s = i;
+  return r ? (s.push(arrow({
+    element: r,
+    padding: 5
+  })), computePosition(e, t, {
+    placement: o,
+    strategy: l,
+    middleware: s
+  }).then(({
+    x: e,
+    y: t,
+    placement: r,
+    middlewareData: o
+  }) => {
+    var n, l;
+    const i = {
+      left: `${e}px`,
+      top: `${t}px`,
+      border: c
+    },
+          {
+      x: s,
+      y: a
+    } = null !== (n = o.arrow) && void 0 !== n ? n : {
+      x: 0,
+      y: 0
+    },
+          d = null !== (l = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[r.split("-")[0]]) && void 0 !== l ? l : "bottom",
+          u = c && {
+      top: {
+        borderBottom: c,
+        borderRight: c
+      },
+      right: {
+        borderBottom: c,
+        borderLeft: c
+      },
+      bottom: {
+        borderTop: c,
+        borderLeft: c
+      },
+      left: {
+        borderTop: c,
+        borderRight: c
+      }
+    }[r.split("-")[0]];
+    let p = 0;
+
+    if (c) {
+      const e = `${c}`.match(/(\d+)px/);
+      p = (null == e ? void 0 : e[1]) ? Number(e[1]) : 1;
+    }
+
+    return {
+      tooltipStyles: i,
+      tooltipArrowStyles: {
+        left: null != s ? `${s}px` : "",
+        top: null != a ? `${a}px` : "",
+        right: "",
+        bottom: "",
+        ...u,
+        [d]: `-${4 + p}px`
+      },
+      place: r
+    };
+  })) : computePosition(e, t, {
+    placement: "bottom",
+    strategy: l,
+    middleware: s
+  }).then(({
+    x: e,
+    y: t,
+    placement: r
+  }) => ({
+    tooltipStyles: {
+      left: `${e}px`,
+      top: `${t}px`
+    },
+    tooltipArrowStyles: {},
+    place: r
+  }));
+};
+
+var $ = "core-styles-module_tooltip__3vRRp",
+    C = "core-styles-module_fixed__pcSol",
+    I = "core-styles-module_arrow__cvMwQ",
+    B = "core-styles-module_noArrow__xock6",
+    j = "core-styles-module_clickable__ZuTTB",
+    D = "core-styles-module_show__Nt9eE",
+    H = {
+  tooltip: "styles-module_tooltip__mnnfp",
+  arrow: "styles-module_arrow__K0L3T",
+  dark: "styles-module_dark__xNqje",
+  light: "styles-module_light__Z6W-X",
+  success: "styles-module_success__A2AKt",
+  warning: "styles-module_warning__SCK0X",
+  error: "styles-module_error__JvumD",
+  info: "styles-module_info__BWdHW"
+};
+
+const z = ({
+  id: t,
+  className: n,
+  classNameArrow: l,
+  variant: s = "dark",
+  anchorId: a,
+  anchorSelect: d,
+  place: u = "top",
+  offset: p = 10,
+  events: v = ["hover"],
+  openOnClick: f = !1,
+  positionStrategy: h = "absolute",
+  middlewares: w,
+  wrapper: b,
+  delayShow: S = 0,
+  delayHide: _ = 0,
+  float: g = !1,
+  hidden: A = !1,
+  noArrow: T = !1,
+  clickable: O = !1,
+  closeOnEsc: N = !1,
+  closeOnScroll: z = !1,
+  closeOnResize: q = !1,
+  style: W,
+  position: M,
+  afterShow: P,
+  afterHide: F,
+  content: K,
+  contentWrapperRef: U,
+  isOpen: X,
+  setIsOpen: Y,
+  activeAnchor: V,
+  setActiveAnchor: Z,
+  border: G,
+  opacity: J
+}) => {
+  const Q = React.useRef(null),
+        ee = React.useRef(null),
+        te = React.useRef(null),
+        re = React.useRef(null),
+        [oe, ne] = React.useState(u),
+        [le, ie] = React.useState({}),
+        [ce, se] = React.useState({}),
+        [ae, de] = React.useState(!1),
+        [ue, pe] = React.useState(!1),
+        ve = React.useRef(!1),
+        me = React.useRef(null),
+        {
+    anchorRefs: ye,
+    setActiveAnchor: fe
+  } = L(t),
+        he = React.useRef(!1),
+        [we, be] = React.useState([]),
+        Se = React.useRef(!1),
+        Ee = f || v.includes("click");
+  R(() => (Se.current = !0, () => {
+    Se.current = !1;
+  }), []), React.useEffect(() => {
+    if (!ae) {
+      const e = setTimeout(() => {
+        pe(!1);
+      }, 150);
+      return () => {
+        clearTimeout(e);
+      };
+    }
+
+    return () => null;
+  }, [ae]);
+
+  const _e = e => {
+    Se.current && (e && pe(!0), setTimeout(() => {
+      Se.current && (null == Y || Y(e), void 0 === X && de(e));
+    }, 10));
+  };
+
+  React.useEffect(() => {
+    if (void 0 === X) return () => null;
+    X && pe(!0);
+    const e = setTimeout(() => {
+      de(X);
+    }, 10);
+    return () => {
+      clearTimeout(e);
+    };
+  }, [X]), React.useEffect(() => {
+    ae !== ve.current && (ve.current = ae, ae ? null == P || P() : null == F || F());
+  }, [ae]);
+
+  const ge = (e = _) => {
+    re.current && clearTimeout(re.current), re.current = setTimeout(() => {
+      he.current || _e(!1);
+    }, e);
+  },
+        Ae = e => {
+    var t;
+    if (!e) return;
+    const r = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
+    if (!(null == r ? void 0 : r.isConnected)) return Z(null), void fe({
+      current: null
+    });
+    S ? (te.current && clearTimeout(te.current), te.current = setTimeout(() => {
+      _e(!0);
+    }, S)) : _e(!0), Z(r), fe({
+      current: r
+    }), re.current && clearTimeout(re.current);
+  },
+        Te = () => {
+    O ? ge(_ || 100) : _ ? ge() : _e(!1), te.current && clearTimeout(te.current);
+  },
+        Le = ({
+    x: e,
+    y: t
+  }) => {
+    k({
+      place: u,
+      offset: p,
+      elementReference: {
+        getBoundingClientRect: () => ({
+          x: e,
+          y: t,
+          width: 0,
+          height: 0,
+          top: t,
+          left: e,
+          right: e,
+          bottom: t
+        })
+      },
+      tooltipReference: Q.current,
+      tooltipArrowReference: ee.current,
+      strategy: h,
+      middlewares: w,
+      border: G
+    }).then(e => {
+      Object.keys(e.tooltipStyles).length && ie(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), ne(e.place);
+    });
+  },
+        Oe = e => {
+    if (!e) return;
+    const t = e,
+          r = {
+      x: t.clientX,
+      y: t.clientY
+    };
+    Le(r), me.current = r;
+  },
+        Re = e => {
+    Ae(e), _ && ge();
+  },
+        Ne = e => {
+    var t;
+    [document.querySelector(`[id='${a}']`), ...we].some(t => null == t ? void 0 : t.contains(e.target)) || (null === (t = Q.current) || void 0 === t ? void 0 : t.contains(e.target)) || (_e(!1), te.current && clearTimeout(te.current));
+  },
+        xe = E(Ae, 50, !0),
+        ke = E(Te, 50, !0),
+        $e = React.useCallback(() => {
+    M ? Le(M) : g ? me.current && Le(me.current) : k({
+      place: u,
+      offset: p,
+      elementReference: V,
+      tooltipReference: Q.current,
+      tooltipArrowReference: ee.current,
+      strategy: h,
+      middlewares: w,
+      border: G
+    }).then(e => {
+      Se.current && (Object.keys(e.tooltipStyles).length && ie(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), ne(e.place));
+    });
+  }, [ae, V, K, W, u, p, h, M, g]);
+
+  React.useEffect(() => {
+    var e, t;
+    const r = new Set(ye);
+    we.forEach(e => {
+      r.add({
+        current: e
+      });
+    });
+    const o = document.querySelector(`[id='${a}']`);
+    o && r.add({
+      current: o
+    });
+
+    const n = () => {
+      _e(!1);
+    },
+          l = x(V),
+          i = x(Q.current);
+
+    z && (window.addEventListener("scroll", n), null == l || l.addEventListener("scroll", n), null == i || i.addEventListener("scroll", n));
+    let c = null;
+    q ? window.addEventListener("resize", n) : V && Q.current && (c = autoUpdate(V, Q.current, $e, {
+      ancestorResize: !0,
+      elementResize: !0,
+      layoutShift: !0
+    }));
+
+    const s = e => {
+      "Escape" === e.key && _e(!1);
+    };
+
+    N && window.addEventListener("keydown", s);
+    const d = [];
+    Ee ? (window.addEventListener("click", Ne), d.push({
+      event: "click",
+      listener: Re
+    })) : (d.push({
+      event: "mouseenter",
+      listener: xe
+    }, {
+      event: "mouseleave",
+      listener: ke
+    }, {
+      event: "focus",
+      listener: xe
+    }, {
+      event: "blur",
+      listener: ke
+    }), g && d.push({
+      event: "mousemove",
+      listener: Oe
+    }));
+
+    const u = () => {
+      he.current = !0;
+    },
+          p = () => {
+      he.current = !1, Te();
+    };
+
+    return O && !Ee && (null === (e = Q.current) || void 0 === e || e.addEventListener("mouseenter", u), null === (t = Q.current) || void 0 === t || t.addEventListener("mouseleave", p)), d.forEach(({
+      event: e,
+      listener: t
+    }) => {
+      r.forEach(r => {
+        var o;
+        null === (o = r.current) || void 0 === o || o.addEventListener(e, t);
+      });
+    }), () => {
+      var e, t;
+      z && (window.removeEventListener("scroll", n), null == l || l.removeEventListener("scroll", n), null == i || i.removeEventListener("scroll", n)), q ? window.removeEventListener("resize", n) : null == c || c(), Ee && window.removeEventListener("click", Ne), N && window.removeEventListener("keydown", s), O && !Ee && (null === (e = Q.current) || void 0 === e || e.removeEventListener("mouseenter", u), null === (t = Q.current) || void 0 === t || t.removeEventListener("mouseleave", p)), d.forEach(({
+        event: e,
+        listener: t
+      }) => {
+        r.forEach(r => {
+          var o;
+          null === (o = r.current) || void 0 === o || o.removeEventListener(e, t);
+        });
+      });
+    };
+  }, [V, $e, ue, ye, we, N, v]), React.useEffect(() => {
+    let e = null != d ? d : "";
+    !e && t && (e = `[data-tooltip-id='${t}']`);
+    const r = new MutationObserver(r => {
+      const o = [];
+      r.forEach(r => {
+        if ("attributes" === r.type && "data-tooltip-id" === r.attributeName) {
+          r.target.getAttribute("data-tooltip-id") === t && o.push(r.target);
+        }
+
+        if ("childList" === r.type && (V && [...r.removedNodes].some(e => {
+          var t;
+          return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (pe(!1), _e(!1), Z(null), te.current && clearTimeout(te.current), re.current && clearTimeout(re.current), !0);
+        }), e)) try {
+          const t = [...r.addedNodes].filter(e => 1 === e.nodeType);
+          o.push(...t.filter(t => t.matches(e))), o.push(...t.flatMap(t => [...t.querySelectorAll(e)]));
+        } catch (e) {}
+      }), o.length && be(e => [...e, ...o]);
+    });
+    return r.observe(document.body, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["data-tooltip-id"]
+    }), () => {
+      r.disconnect();
+    };
+  }, [t, d, V]), React.useEffect(() => {
+    $e();
+  }, [$e]), React.useEffect(() => {
+    if (!(null == U ? void 0 : U.current)) return () => null;
+    const e = new ResizeObserver(() => {
+      $e();
+    });
+    return e.observe(U.current), () => {
+      e.disconnect();
+    };
+  }, [K, null == U ? void 0 : U.current]), React.useEffect(() => {
+    var e;
+    const t = document.querySelector(`[id='${a}']`),
+          r = [...we, t];
+    V && r.includes(V) || Z(null !== (e = we[0]) && void 0 !== e ? e : t);
+  }, [a, we, V]), React.useEffect(() => () => {
+    te.current && clearTimeout(te.current), re.current && clearTimeout(re.current);
+  }, []), React.useEffect(() => {
+    let e = d;
+    if (!e && t && (e = `[data-tooltip-id='${t}']`), e) try {
+      const t = Array.from(document.querySelectorAll(e));
+      be(t);
+    } catch (e) {
+      be([]);
+    }
+  }, [t, d]);
+  const Ce = !A && K && ae && Object.keys(le).length > 0;
+  return ue ? React__default["default"].createElement(b, {
+    id: t,
+    role: "tooltip",
+    className: classnames("react-tooltip", $, H.tooltip, H[s], n, `react-tooltip__place-${oe}`, {
+      "react-tooltip__show": Ce,
+      [D]: Ce,
+      [C]: "fixed" === h,
+      [j]: O
+    }),
+    style: { ...W,
+      ...le,
+      opacity: void 0 !== J && Ce ? J : void 0
+    },
+    ref: Q
+  }, K, React__default["default"].createElement(b, {
+    className: classnames("react-tooltip-arrow", I, H.arrow, l, {
+      [B]: T
+    }),
+    style: ce,
+    ref: ee
+  })) : null;
+},
+      q = ({
+  content: t
+}) => React__default["default"].createElement("span", {
+  dangerouslySetInnerHTML: {
+    __html: t
+  }
+}),
+      W = ({
+  id: t,
+  anchorId: o,
+  anchorSelect: n,
+  content: l,
+  html: s,
+  render: a,
+  className: d,
+  classNameArrow: u,
+  variant: p = "dark",
+  place: v = "top",
+  offset: m = 10,
+  wrapper: y = "div",
+  children: f = null,
+  events: h = ["hover"],
+  openOnClick: w = !1,
+  positionStrategy: b = "absolute",
+  middlewares: S,
+  delayShow: E = 0,
+  delayHide: _ = 0,
+  float: g = !1,
+  hidden: A = !1,
+  noArrow: T = !1,
+  clickable: O = !1,
+  closeOnEsc: R = !1,
+  closeOnScroll: N = !1,
+  closeOnResize: x = !1,
+  style: k,
+  position: $,
+  isOpen: C,
+  disableStyleInjection: I = !1,
+  border: B,
+  opacity: j,
+  setIsOpen: D,
+  afterShow: H,
+  afterHide: W
+}) => {
+  const [M, P] = React.useState(l),
+        [F, K] = React.useState(s),
+        [U, X] = React.useState(v),
+        [Y, V] = React.useState(p),
+        [Z, G] = React.useState(m),
+        [J, Q] = React.useState(E),
+        [ee, te] = React.useState(_),
+        [re, oe] = React.useState(g),
+        [ne, le] = React.useState(A),
+        [ie, ce] = React.useState(y),
+        [se, ae] = React.useState(h),
+        [de, ue] = React.useState(b),
+        [pe, ve] = React.useState(null),
+        me = React.useRef(I),
+        {
+    anchorRefs: ye,
+    activeAnchor: fe
+  } = L(t),
+        he = e => null == e ? void 0 : e.getAttributeNames().reduce((t, r) => {
+    var o;
+
+    if (r.startsWith("data-tooltip-")) {
+      t[r.replace(/^data-tooltip-/, "")] = null !== (o = null == e ? void 0 : e.getAttribute(r)) && void 0 !== o ? o : null;
+    }
+
+    return t;
+  }, {}),
+        we = e => {
+    const t = {
+      place: e => {
+        var t;
+        X(null !== (t = e) && void 0 !== t ? t : v);
+      },
+      content: e => {
+        P(null != e ? e : l);
+      },
+      html: e => {
+        K(null != e ? e : s);
+      },
+      variant: e => {
+        var t;
+        V(null !== (t = e) && void 0 !== t ? t : p);
+      },
+      offset: e => {
+        G(null === e ? m : Number(e));
+      },
+      wrapper: e => {
+        var t;
+        ce(null !== (t = e) && void 0 !== t ? t : y);
+      },
+      events: e => {
+        const t = null == e ? void 0 : e.split(" ");
+        ae(null != t ? t : h);
+      },
+      "position-strategy": e => {
+        var t;
+        ue(null !== (t = e) && void 0 !== t ? t : b);
+      },
+      "delay-show": e => {
+        Q(null === e ? E : Number(e));
+      },
+      "delay-hide": e => {
+        te(null === e ? _ : Number(e));
+      },
+      float: e => {
+        oe(null === e ? g : "true" === e);
+      },
+      hidden: e => {
+        le(null === e ? A : "true" === e);
+      }
+    };
+    Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, r]) => {
+      var o;
+      null === (o = t[e]) || void 0 === o || o.call(t, r);
+    });
+  };
+
+  React.useEffect(() => {
+    P(l);
+  }, [l]), React.useEffect(() => {
+    K(s);
+  }, [s]), React.useEffect(() => {
+    X(v);
+  }, [v]), React.useEffect(() => {
+    V(p);
+  }, [p]), React.useEffect(() => {
+    G(m);
+  }, [m]), React.useEffect(() => {
+    Q(E);
+  }, [E]), React.useEffect(() => {
+    te(_);
+  }, [_]), React.useEffect(() => {
+    oe(g);
+  }, [g]), React.useEffect(() => {
+    le(A);
+  }, [A]), React.useEffect(() => {
+    ue(b);
+  }, [b]), React.useEffect(() => {
+    me.current !== I && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
+  }, [I]), React.useEffect(() => {
+    "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", {
+      detail: {
+        disableCore: "core" === I,
+        disableBase: I
+      }
+    }));
+  }, []), React.useEffect(() => {
+    var e;
+    const r = new Set(ye);
+    let l = n;
+    if (!l && t && (l = `[data-tooltip-id='${t}']`), l) try {
+      document.querySelectorAll(l).forEach(e => {
+        r.add({
+          current: e
+        });
+      });
+    } catch (e) {
+      console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);
+    }
+    const i = document.querySelector(`[id='${o}']`);
+    if (i && r.add({
+      current: i
+    }), !r.size) return () => null;
+    const c = null !== (e = null != pe ? pe : i) && void 0 !== e ? e : fe.current,
+          s = new MutationObserver(e => {
+      e.forEach(e => {
+        var t;
+        if (!c || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
+        const r = he(c);
+        we(r);
+      });
+    }),
+          a = {
+      attributes: !0,
+      childList: !1,
+      subtree: !1
+    };
+
+    if (c) {
+      const e = he(c);
+      we(e), s.observe(c, a);
+    }
+
+    return () => {
+      s.disconnect();
+    };
+  }, [ye, fe, pe, o, n]), React.useEffect(() => {
+    (null == k ? void 0 : k.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), B && !CSS.supports("border", `${B}`) && console.warn(`[react-tooltip] "${B}" is not a valid \`border\`.`), (null == k ? void 0 : k.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), j && !CSS.supports("opacity", `${j}`) && console.warn(`[react-tooltip] "${j}" is not a valid \`opacity\`.`);
+  }, []);
+  let be = f;
+  const Se = React.useRef(null);
+
+  if (a) {
+    const t = a({
+      content: null != M ? M : null,
+      activeAnchor: pe
+    });
+    be = t ? React__default["default"].createElement("div", {
+      ref: Se,
+      className: "react-tooltip-content-wrapper"
+    }, t) : null;
+  } else M && (be = M);
+
+  F && (be = React__default["default"].createElement(q, {
+    content: F
+  }));
+  const Ee = {
+    id: t,
+    anchorId: o,
+    anchorSelect: n,
+    className: d,
+    classNameArrow: u,
+    content: be,
+    contentWrapperRef: Se,
+    place: U,
+    variant: Y,
+    offset: Z,
+    wrapper: ie,
+    events: se,
+    openOnClick: w,
+    positionStrategy: de,
+    middlewares: S,
+    delayShow: J,
+    delayHide: ee,
+    float: re,
+    hidden: ne,
+    noArrow: T,
+    clickable: O,
+    closeOnEsc: R,
+    closeOnScroll: N,
+    closeOnResize: x,
+    style: k,
+    position: $,
+    isOpen: C,
+    border: B,
+    opacity: j,
+    setIsOpen: D,
+    afterShow: H,
+    afterHide: W,
+    activeAnchor: pe,
+    setActiveAnchor: e => ve(e)
+  };
+  return React__default["default"].createElement(z, { ...Ee
+  });
+};
+
+"undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", e => {
+  e.detail.disableCore || b({
+    css: `:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9}.core-styles-module_tooltip__3vRRp{visibility:hidden;position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity 0.3s ease-out;will-change:opacity,visibility}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{visibility:visible;opacity:var(--rt-opacity)}`,
+    type: "core"
+  }), e.detail.disableBase || b({
+    css: `
+.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px;transform:rotate(45deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,
+    type: "base"
+  });
+});
+
 function ContextualHelp(_ref) {
   var id = _ref.id;
+  var snippetContainerRef = React.useRef();
+  var snippetRef = React.useRef();
+  var articleRef = React.useRef();
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -43053,6 +45489,32 @@ function ContextualHelp(_ref) {
     isMihelpEnabled && getArticle();
   }, []);
 
+  var setTooltipStyles = function setTooltipStyles() {
+    if (snippetRef.current && snippetContainerRef.current) {
+      var rect = snippetRef.current.getBoundingClientRect();
+      var topSpace = rect.top;
+      var bottomSpace = window.innerHeight - rect.bottom;
+      var maxHeight = Math.max(topSpace, bottomSpace);
+
+      if (articleRef.current) {
+        articleRef.current.style.maxHeight = "".concat(maxHeight - 45, "px");
+      }
+
+      setTimeout(function () {
+        var arrowEl = snippetContainerRef.current.querySelector('.snippet-arrow');
+        var tooltipEl = snippetContainerRef.current.querySelector('.react-tooltip');
+
+        if (tooltipEl.classList.toString().includes('react-tooltip__place-bottom')) {
+          arrowEl.style.borderLeft = '1px solid rgba(0, 0, 0, 0.2)';
+          arrowEl.style.borderTop = '1px solid rgba(0, 0, 0, 0.2)';
+        } else {
+          arrowEl.style.borderRight = '1px solid rgba(0, 0, 0, 0.2)';
+          arrowEl.style.borderBottom = '1px solid rgba(0, 0, 0, 0.2)';
+        }
+      }, 100);
+    }
+  };
+
   var getArticle =
   /*#__PURE__*/
   function () {
@@ -43099,18 +45561,12 @@ function ContextualHelp(_ref) {
     };
   }();
 
-  return React__default["default"].createElement("div", null, React__default["default"].createElement(coreComponents.Tooltip, {
-    content: !isMihelpEnabled ? React__default["default"].createElement("h3", {
-      style: {
-        color: 'rgba(224, 26, 26, 0.8)'
-      }
-    }, "Mihelp is not enabled for this app") : !article || !(article === null || article === void 0 ? void 0 : article.id) ? React__default["default"].createElement("h3", {
-      style: {
-        color: 'rgba(224, 26, 26, 0.8)'
-      }
-    }, "Article Not Found") : React__default["default"].createElement(Snippet, {
-      article: article
-    })
+  return React__default["default"].createElement("div", {
+    className: "utilities_ContextualHelp_ContextualHelp--snippetContainer",
+    ref: snippetContainerRef
+  }, React__default["default"].createElement("span", {
+    id: "helpSnippet1",
+    ref: snippetRef
   }, React__default["default"].createElement(coreComponents.Icon, {
     name: "help",
     variant: "material",
@@ -43119,6 +45575,16 @@ function ContextualHelp(_ref) {
       color: '#1d5ab9',
       cursor: 'default'
     }
+  })), React__default["default"].createElement(W, {
+    anchorSelect: "#helpSnippet1",
+    clickable: true,
+    className: "utilities_ContextualHelp_ContextualHelp--snippet",
+    classNameArrow: "snippet-arrow"
+  }, React__default["default"].createElement(Snippet, {
+    article: article,
+    setTooltipStyles: setTooltipStyles,
+    isMihelpEnabled: isMihelpEnabled,
+    articleRef: articleRef
   })));
 }