@copart/ops-tool-kit 1.11.3-alpha.1 → 1.11.4-alpha.1

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.11.3-alpha.1";
+const version$5 = "1.11.4-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -860,7 +860,7 @@ var b$1 = "function" === typeof Symbol && Symbol.for,
   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 = b$1 ? Symbol.for("react.suspense_list") : 60120,
+  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,
@@ -951,7 +951,7 @@ var isSuspense = function (a) {
   return z$1(a) === p;
 };
 var isValidElementType = function (a) {
-  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f || a === p || a === q || "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);
+  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f || 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$1;
 
@@ -8737,7 +8737,7 @@ var flatten$2 = flatten$1;
  *      R.flip(mergeThree)(1, 2, 3); //=> [2, 1, 3]
  * @symb R.flip(f)(a, b, c) = f(b, a, c)
  */
-var flip$1 = /*#__PURE__*/_curry1(function flip(fn) {
+var flip$2 = /*#__PURE__*/_curry1(function flip(fn) {
   return curryN$1(fn.length, function (a, b) {
     var args = Array.prototype.slice.call(arguments, 0);
     args[0] = b;
@@ -8745,7 +8745,7 @@ var flip$1 = /*#__PURE__*/_curry1(function flip(fn) {
     return fn.apply(this, args);
   });
 });
-var flip$2 = flip$1;
+var flip$3 = flip$2;
 
 /**
  * Iterate over an input `object`, calling a provided function `fn` for each
@@ -27359,7 +27359,7 @@ var getYardOptions = /*#__PURE__*/function () {
   };
 }();
 var filterRoles = function filterRoles(roles, invalidCodes) {
-  return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$2(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
+  return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$3(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
 };
 var SettingsView = /*#__PURE__*/function (_React$Component) {
   _inherits$2(SettingsView, _React$Component);
@@ -48438,8 +48438,9 @@ var NavigationBar = function NavigationBar(_ref2) {
     history = _ref2.history,
     getCounts = _ref2.getCounts,
     activeSubmenu = _ref2.activeSubmenu,
-    setActiveSubmenu = _ref2.setActiveSubmenu;
-  var withCounts = getCounts && typeof getCounts === 'function';
+    setActiveSubmenu = _ref2.setActiveSubmenu,
+    setShowNavigationCounts = _ref2.setShowNavigationCounts;
+  // const withCounts = getCounts && typeof getCounts === 'function'
   var navigateFunction = navigateTo || (history === null || history === void 0 ? void 0 : history.push) || defaultRedirect;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48461,6 +48462,10 @@ var NavigationBar = function NavigationBar(_ref2) {
     _useState10 = _slicedToArray(_useState9, 2),
     selected = _useState10[0],
     setSelected = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    withCounts = _useState12[0],
+    setWithCounts = _useState12[1];
   React.useEffect(function () {
     if (Array.isArray(navItems)) {
       var isValid = validateConfig(navItems);
@@ -48482,6 +48487,9 @@ var NavigationBar = function NavigationBar(_ref2) {
       setConfigValid(false);
     }
   }, []);
+  React.useEffect(function () {
+    setShowNavigationCounts(withCounts);
+  }, [withCounts]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseOver: function onMouseOver() {
       return setHover(true);
@@ -48501,8 +48509,10 @@ var NavigationBar = function NavigationBar(_ref2) {
     setActiveSubmenu: setActiveSubmenu,
     selected: selected,
     setSelected: setSelected,
-    getCounts: getCounts
-  }) : null, !isConfigValid ? /*#__PURE__*/React__default["default"].createElement("div", null, "Please check your navigation config") : null);
+    getCounts: getCounts,
+    setWithCounts: setWithCounts,
+    withCounts: withCounts
+  }) : null, isConfigValid === false ? /*#__PURE__*/React__default["default"].createElement("div", null, "Please check your navigation config") : null);
 };
 var NavigationMenu = function NavigationMenu(_ref3) {
   var navItems = _ref3.navItems,
@@ -48513,7 +48523,9 @@ var NavigationMenu = function NavigationMenu(_ref3) {
     setActiveSubmenu = _ref3.setActiveSubmenu,
     selected = _ref3.selected,
     setSelected = _ref3.setSelected,
-    getCounts = _ref3.getCounts;
+    getCounts = _ref3.getCounts,
+    setWithCounts = _ref3.setWithCounts,
+    withCounts = _ref3.withCounts;
   var redirectUrl = window.location.pathname;
   React.useEffect(function () {
     if (redirectUrl != "/") {
@@ -48554,7 +48566,9 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       selected: selected,
       setSelected: setSelected,
       redirectUrl: redirectUrl,
-      getCounts: getCounts
+      getCounts: getCounts,
+      setWithCounts: setWithCounts,
+      withCounts: withCounts
     });
   }));
 };
@@ -48567,7 +48581,9 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     navigateFunction = _ref4.navigateFunction,
     selected = _ref4.selected,
     setSelected = _ref4.setSelected,
-    getCounts = _ref4.getCounts;
+    getCounts = _ref4.getCounts,
+    setWithCounts = _ref4.setWithCounts,
+    withCounts = _ref4.withCounts;
   var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
   var shortName = navItem.shortName ? navItem.shortName.toUpperCase() : dotIcon;
   var nameText = isHover ? (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase() : shortName;
@@ -48581,7 +48597,7 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     icon: navItem.icon
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem"
-  }, nameText), navItem.count && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, nameText), navItem.hasOwnProperty("count") && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
   }, navItem.count)), /*#__PURE__*/React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
     return /*#__PURE__*/React__default["default"].createElement(NavigationMenuLevel2, {
@@ -48593,7 +48609,9 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
       activeSubmenu: activeSubmenu,
       setActiveSubmenu: setActiveSubmenu,
       navigateFunction: navigateFunction,
-      getCounts: getCounts
+      getCounts: getCounts,
+      setWithCounts: setWithCounts,
+      withCounts: withCounts
     });
   }) : null));
 };
@@ -48605,20 +48623,23 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     activeSubmenu = _ref5.activeSubmenu,
     setActiveSubmenu = _ref5.setActiveSubmenu,
     navigateFunction = _ref5.navigateFunction,
-    getCounts = _ref5.getCounts;
+    getCounts = _ref5.getCounts,
+    setWithCounts = _ref5.setWithCounts,
+    withCounts = _ref5.withCounts;
   var isMenuExpanded = activeSubmenu === navItem.fullRoute;
   var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
-  var _useState11 = React.useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    counts = _useState12[0],
-    setCounts = _useState12[1];
-  var _useState13 = React.useState(false),
+  var _useState13 = React.useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    countsLoading = _useState14[0],
-    setCountsLoading = _useState14[1];
+    counts = _useState14[0],
+    setCounts = _useState14[1];
+  var _useState15 = React.useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    countsLoading = _useState16[0],
+    setCountsLoading = _useState16[1];
   var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
   var isDisabled = typeof navItem.disabled === 'function' ? navItem.disabled() : navItem.disabled;
-  var withCounts = getCounts && typeof getCounts === 'function';
+  // const withCounts = getCounts && typeof getCounts === 'function'
+
   React.useEffect(function () {
     if (showCounts) {
       setCountsLoading(true);
@@ -48628,6 +48649,7 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
   var reloadCounts = function reloadCounts(menuItemName) {
     getCounts(menuItemName).then(function (result) {
       setCounts(result);
+      setWithCounts(!isEmpty$2(result));
       setCountsLoading(false);
     }).catch(function () {
       setCountsLoading(false);
@@ -48736,7 +48758,7 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
     icon: navItem.icon
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
-  }, navItem.name), (countsLoading || countText) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, navItem.name), (countsLoading || !isNil$1(countText)) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
   }, countsLoading ? /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
     size: "xxs"
@@ -48778,6 +48800,10 @@ var AppFrame = function AppFrame(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeSubmenu = _useState4[0],
     setActiveSubmenu = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showNavigationCounts = _useState6[0],
+    setShowNavigationCounts = _useState6[1];
   React.useEffect(function () {
     if (appBarMounted) {
       var event = new Event('localStorageChanged');
@@ -48793,7 +48819,8 @@ var AppFrame = function AppFrame(props) {
   var authGuardProps = _objectSpread2(_objectSpread2({}, props), {}, {
     setAppBarMounted: setAppBarMounted
   });
-  var showNavigationCounts = props.getCounts && typeof props.getCounts === 'function';
+
+  // const showNavigationCounts = props.getCounts && typeof props.getCounts === 'function'
   var navigationWidth = activeSubmenu && showNavigationCounts ? '100px' : '50px';
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppFrame",
@@ -48824,7 +48851,8 @@ var AppFrame = function AppFrame(props) {
     ,
     getCounts: props.getCounts,
     activeSubmenu: activeSubmenu,
-    setActiveSubmenu: setActiveSubmenu
+    setActiveSubmenu: setActiveSubmenu,
+    setShowNavigationCounts: setShowNavigationCounts
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginLeft: props.showNavigation ? navigationWidth : '0px'
@@ -49097,6 +49125,14 @@ function Snippet(_ref) {
   })))));
 }
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -49275,7 +49311,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
 
 /**
  * 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.
+ * next to a given reference element.
  *
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
@@ -49353,7 +49389,6 @@ const computePosition$1 = async (reference, floating, config) => {
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
       i = -1;
-      continue;
     }
   }
   return {
@@ -49416,6 +49451,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -49433,7 +49469,7 @@ async function detectOverflow(state, options) {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -49494,7 +49530,7 @@ const arrow = options => ({
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. To ensure `shift()` continues to take action,
     // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
@@ -49509,6 +49545,108 @@ const arrow = options => ({
     };
   }
 });
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -49516,7 +49654,7 @@ const arrow = options => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = function (options) {
+const flip$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -49624,9 +49762,208 @@ const flip = function (options) {
     }
   };
 };
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some(side => overflow[side] >= 0);
+}
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'hide',
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const {
+        strategy = 'referenceHidden',
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case 'referenceHidden':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              elementContext: 'reference'
+            });
+            const offsets = getSideOffsets(overflow, rects.reference);
+            return {
+              data: {
+                referenceHiddenOffsets: offsets,
+                referenceHidden: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        case 'escaped':
+          {
+            const overflow = await detectOverflow(state, {
+              ...detectOverflowOptions,
+              altBoundary: true
+            });
+            const offsets = getSideOffsets(overflow, rects.floating);
+            return {
+              data: {
+                escapedOffsets: offsets,
+                escaped: isAnySideFullyClipped(offsets)
+              }
+            };
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    }
+  };
+};
+function getBoundingRect(rects) {
+  const minX = min(...rects.map(rect => rect.left));
+  const minY = min(...rects.map(rect => rect.top));
+  const maxX = max(...rects.map(rect => rect.right));
+  const maxY = max(...rects.map(rect => rect.bottom));
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function getRectsByLine(rects) {
+  const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
+  const groups = [];
+  let prevRect = null;
+  for (let i = 0; i < sortedRects.length; i++) {
+    const rect = sortedRects[i];
+    if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
+      groups.push([rect]);
+    } else {
+      groups[groups.length - 1].push(rect);
+    }
+    prevRect = rect;
+  }
+  return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
+}
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+const inline = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'inline',
+    options,
+    async fn(state) {
+      const {
+        placement,
+        elements,
+        rects,
+        platform,
+        strategy
+      } = state;
+      // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
+      // ClientRect's bounds, despite the event listener being triggered. A
+      // padding of 2 seems to handle this issue.
+      const {
+        padding = 2,
+        x,
+        y
+      } = evaluate(options, state);
+      const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
+      const clientRects = getRectsByLine(nativeClientRects);
+      const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
+      const paddingObject = getPaddingObject(padding);
+      function getBoundingClientRect() {
+        // There are two rects and they are disjoined.
+        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
+          // Find the first rect in which the point is fully inside.
+          return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
+        }
+
+        // There are 2 or more connected rects.
+        if (clientRects.length >= 2) {
+          if (getSideAxis(placement) === 'y') {
+            const firstRect = clientRects[0];
+            const lastRect = clientRects[clientRects.length - 1];
+            const isTop = getSide(placement) === 'top';
+            const top = firstRect.top;
+            const bottom = lastRect.bottom;
+            const left = isTop ? firstRect.left : lastRect.left;
+            const right = isTop ? firstRect.right : lastRect.right;
+            const width = right - left;
+            const height = bottom - top;
+            return {
+              top,
+              bottom,
+              left,
+              right,
+              width,
+              height,
+              x: left,
+              y: top
+            };
+          }
+          const isLeftSide = getSide(placement) === 'left';
+          const maxRight = max(...clientRects.map(rect => rect.right));
+          const minLeft = min(...clientRects.map(rect => rect.left));
+          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
+          const top = measureRects[0].top;
+          const bottom = measureRects[measureRects.length - 1].bottom;
+          const left = minLeft;
+          const right = maxRight;
+          const width = right - left;
+          const height = bottom - top;
+          return {
+            top,
+            bottom,
+            left,
+            right,
+            width,
+            height,
+            x: left,
+            y: top
+          };
+        }
+        return fallback;
+      }
+      const resetRects = await platform.getElementRects({
+        reference: {
+          getBoundingClientRect
+        },
+        floating: elements.floating,
+        strategy
+      });
+      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
+        return {
+          reset: {
+            rects: resetRects
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
+
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -49640,8 +49977,6 @@ async function convertValueToCoords(state, options) {
   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,
@@ -49683,15 +50018,27 @@ const offset = function (options) {
     name: 'offset',
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };
@@ -49702,7 +50049,7 @@ const offset = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = function (options) {
+const shift$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -49770,6 +50117,156 @@ const shift = function (options) {
     }
   };
 };
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    options,
+    fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        middlewareData
+      } = state;
+      const {
+        offset = 0,
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const crossAxis = getSideAxis(placement);
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      const rawOffset = evaluate(offset, state);
+      const computedOffset = typeof rawOffset === 'number' ? {
+        mainAxis: rawOffset,
+        crossAxis: 0
+      } : {
+        mainAxis: 0,
+        crossAxis: 0,
+        ...rawOffset
+      };
+      if (checkMainAxis) {
+        const len = mainAxis === 'y' ? 'height' : 'width';
+        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+        if (mainAxisCoord < limitMin) {
+          mainAxisCoord = limitMin;
+        } else if (mainAxisCoord > limitMax) {
+          mainAxisCoord = limitMax;
+        }
+      }
+      if (checkCrossAxis) {
+        var _middlewareData$offse, _middlewareData$offse2;
+        const len = mainAxis === 'y' ? 'width' : 'height';
+        const isOriginSide = ['top', 'left'].includes(getSide(placement));
+        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        if (crossAxisCoord < limitMin) {
+          crossAxisCoord = limitMin;
+        } else if (crossAxisCoord > limitMax) {
+          crossAxisCoord = limitMax;
+        }
+      }
+      return {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      };
+    }
+  };
+};
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const overflowAvailableHeight = height - overflow[heightSide];
+      const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if (isYAxis) {
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
+      } else {
+        const maximumClippingHeight = height - overflow.top - overflow.bottom;
+        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
 
 function getNodeName(node) {
   if (isNode$1(node)) {
@@ -49782,7 +50279,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -49995,8 +50492,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   if (domElement) {
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentIFrame = win.frameElement;
-    while (currentIFrame && offsetParent && offsetWin !== win) {
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle$1(currentIFrame);
@@ -50008,7 +50506,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       height *= iframeScale.y;
       x += left;
       y += top;
-      currentIFrame = getWindow(currentIFrame).frameElement;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
     }
   }
   return rectToClientRect({
@@ -50018,15 +50517,27 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     y
   });
 }
+const topLayerSelectors = [':popover-open', ':modal'];
+function isTopLayer(floating) {
+  return topLayerSelectors.some(selector => {
+    try {
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
+    elements,
     rect,
     offsetParent,
     strategy
   } = _ref;
-  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const isFixed = strategy === 'fixed';
   const documentElement = getDocumentElement(offsetParent);
-  if (offsetParent === documentElement) {
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
     return rect;
   }
   let scroll = {
@@ -50035,7 +50546,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   };
   let scale = createCoords(1);
   const offsets = createCoords(0);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -50212,7 +50724,14 @@ function getClippingRect(_ref) {
   };
 }
 function getDimensions(element) {
-  return getCssDimensions(element);
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
 }
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
@@ -50236,9 +50755,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
   return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
+    x,
+    y,
     width: rect.width,
     height: rect.height
   };
@@ -50257,7 +50778,7 @@ function getTrueOffsetParent(element, polyfill) {
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
   const window = getWindow(element);
-  if (!isHTMLElement(element)) {
+  if (!isHTMLElement(element) || isTopLayer(element)) {
     return window;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
@@ -50269,20 +50790,15 @@ function getOffsetParent(element, polyfill) {
   }
   return offsetParent || getContainingBlock(element) || window;
 }
-const getElementRects = async function (_ref) {
-  let {
-    reference,
-    floating,
-    strategy
-  } = _ref;
+const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
   return {
-    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...(await getDimensionsFn(floating))
+      ...(await getDimensionsFn(data.floating))
     }
   };
 };
@@ -50308,8 +50824,9 @@ function observeMove(element, onMove) {
   let timeoutId;
   const root = getDocumentElement(element);
   function cleanup() {
+    var _io;
     clearTimeout(timeoutId);
-    io && io.disconnect();
+    (_io = io) == null || _io.disconnect();
     io = null;
   }
   function refresh(skip, threshold) {
@@ -50415,7 +50932,8 @@ function autoUpdate(reference, floating, update, options) {
         resizeObserver.unobserve(floating);
         cancelAnimationFrame(reobserveFrame);
         reobserveFrame = requestAnimationFrame(() => {
-          resizeObserver && resizeObserver.observe(floating);
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
         });
       }
       update();
@@ -50440,12 +50958,13 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
+    var _resizeObserver2;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
     });
-    cleanupIo && cleanupIo();
-    resizeObserver && resizeObserver.disconnect();
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
     resizeObserver = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
@@ -50453,10 +50972,66 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+autoPlacement;
+
+/**
+ * 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 = shift$1;
+
+/**
+ * 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 = flip$1;
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+size;
+
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+hide;
+
+/**
+ * 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 = arrow$1;
+
+/**
+ * Provides improved positioning for inline reference elements that can span
+ * over multiple lines, such as hyperlinks or range selections.
+ * @see https://floating-ui.com/docs/inline
+ */
+inline;
+
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+limitShift;
+
 /**
  * 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.
+ * next to a given reference element.
  */
 const computePosition = (reference, floating, options) => {
   // This caches the expensive `getClippingElementAncestors` function so that
@@ -50489,33 +51064,44 @@ var classnames = createCommonjsModule(function (module) {
 
   var hasOwn = {}.hasOwnProperty;
   function classNames() {
-    var classes = [];
+    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);
-          }
-        }
+      if (arg) {
+        classes = appendClass(classes, parseValue(arg));
+      }
+    }
+    return classes;
+  }
+  function parseValue(arg) {
+    if (typeof arg === 'string' || typeof arg === 'number') {
+      return arg;
+    }
+    if (typeof arg !== 'object') {
+      return '';
+    }
+    if (Array.isArray(arg)) {
+      return classNames.apply(null, arg);
+    }
+    if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+      return arg.toString();
+    }
+    var classes = '';
+    for (var key in arg) {
+      if (hasOwn.call(arg, key) && arg[key]) {
+        classes = appendClass(classes, key);
       }
     }
-    return classes.join(' ');
+    return classes;
+  }
+  function appendClass(value, newClass) {
+    if (!newClass) {
+      return value;
+    }
+    if (value) {
+      return value + ' ' + newClass;
+    }
+    return value + newClass;
   }
   if (module.exports) {
     classNames.default = classNames;
@@ -50542,72 +51128,31 @@ function S({
   css: e,
   id: t = w,
   type: o = "base",
-  ref: l
+  ref: r
 }) {
-  var r, n;
+  var l, n;
   if (!e || "undefined" == typeof document || b[o]) return;
-  if ("core" === o && "undefined" != typeof process && (null === (r = null === process || void 0 === process ? void 0 : process.env) || void 0 === r ? void 0 : r.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
+  if ("core" === o && "undefined" != typeof process && (null === (l = null === process || void 0 === process ? void 0 : process.env) || void 0 === l ? void 0 : l.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
   if ("base" !== o && "undefined" != typeof process && (null === (n = null === process || void 0 === process ? void 0 : process.env) || void 0 === n ? void 0 : n.REACT_TOOLTIP_DISABLE_BASE_STYLES)) return;
-  "core" === o && (t = h), l || (l = {});
+  "core" === o && (t = h), r || (r = {});
   const {
     insertAt: c
-  } = l;
+  } = r;
   if (document.getElementById(t)) return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);
   const i = document.head || document.getElementsByTagName("head")[0],
     s = document.createElement("style");
   s.id = t, s.type = "text/css", "top" === c && i.firstChild ? i.insertBefore(s, i.firstChild) : i.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), b[o] = !0;
 }
-const g = (e, t, o) => {
-    let l = null;
-    return function (...r) {
-      const n = () => {
-        l = null, o || e.apply(this, r);
-      };
-      o && !l && (e.apply(this, r), l = setTimeout(n, t)), o || (l && clearTimeout(l), l = setTimeout(n, t));
-    };
-  },
-  _ = "DEFAULT_TOOLTIP_ID",
-  A = {
-    anchorRefs: new Set(),
-    activeAnchor: {
-      current: null
-    },
-    attach: () => {},
-    detach: () => {},
-    setActiveAnchor: () => {}
-  },
-  O = React.createContext({
-    getTooltipData: () => A
-  });
-function k(e = _) {
-  return React.useContext(O).getTooltipData(e);
-}
-const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
-  R = e => {
-    if (!(e instanceof HTMLElement || e instanceof SVGElement)) return !1;
-    const t = getComputedStyle(e);
-    return ["overflow", "overflow-x", "overflow-y"].some(e => {
-      const o = t.getPropertyValue(e);
-      return "auto" === o || "scroll" === o;
-    });
-  },
-  x = e => {
-    if (!e) return null;
-    let t = e.parentElement;
-    for (; t;) {
-      if (R(t)) return t;
-      t = t.parentElement;
-    }
-    return document.scrollingElement || document.documentElement;
-  },
-  N = async ({
+const g = async ({
     elementReference: e = null,
     tooltipReference: t = null,
     tooltipArrowReference: o = null,
-    place: l = "top",
-    offset: r = 10,
+    place: r = "top",
+    offset: l = 10,
     strategy: n = "absolute",
-    middlewares: c = [offset(Number(r)), flip(), shift({
+    middlewares: c = [offset(Number(l)), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift({
       padding: 5
     })],
     border: i
@@ -50615,28 +51160,28 @@ const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
     if (!e) return {
       tooltipStyles: {},
       tooltipArrowStyles: {},
-      place: l
+      place: r
     };
     if (null === t) return {
       tooltipStyles: {},
       tooltipArrowStyles: {},
-      place: l
+      place: r
     };
     const s = c;
     return o ? (s.push(arrow({
       element: o,
       padding: 5
     })), computePosition(e, t, {
-      placement: l,
+      placement: r,
       strategy: n,
       middleware: s
     }).then(({
       x: e,
       y: t,
       placement: o,
-      middlewareData: l
+      middlewareData: r
     }) => {
-      var r, n;
+      var l, n;
       const c = {
           left: `${e}px`,
           top: `${t}px`,
@@ -50645,17 +51190,17 @@ const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
         {
           x: s,
           y: a
-        } = null !== (r = l.arrow) && void 0 !== r ? r : {
+        } = null !== (l = r.arrow) && void 0 !== l ? l : {
           x: 0,
           y: 0
         },
-        d = null !== (n = {
+        u = null !== (n = {
           top: "bottom",
           right: "left",
           bottom: "top",
           left: "right"
         }[o.split("-")[0]]) && void 0 !== n ? n : "bottom",
-        u = i && {
+        d = i && {
           borderBottom: i,
           borderRight: i
         };
@@ -50671,8 +51216,8 @@ const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
           top: null != a ? `${a}px` : "",
           right: "",
           bottom: "",
-          ...u,
-          [d]: `-${4 + p}px`
+          ...d,
+          [u]: `-${4 + p}px`
         },
         place: o
       };
@@ -50692,8 +51237,65 @@ const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
       tooltipArrowStyles: {},
       place: o
     }));
-  };
-var $ = {
+  },
+  A = (e, t) => !("CSS" in window && "supports" in window.CSS) || window.CSS.supports(e, t),
+  _ = (e, t, o) => {
+    let r = null;
+    const l = function (...l) {
+      const n = () => {
+        r = null, o || e.apply(this, l);
+      };
+      o && !r && (e.apply(this, l), r = setTimeout(n, t)), o || (r && clearTimeout(r), r = setTimeout(n, t));
+    };
+    return l.cancel = () => {
+      r && (clearTimeout(r), r = null);
+    }, l;
+  },
+  O = e => null !== e && !Array.isArray(e) && "object" == typeof e,
+  T = (e, t) => {
+    if (e === t) return !0;
+    if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, o) => T(e, t[o]));
+    if (Array.isArray(e) !== Array.isArray(t)) return !1;
+    if (!O(e) || !O(t)) return e === t;
+    const o = Object.keys(e),
+      r = Object.keys(t);
+    return o.length === r.length && o.every(o => T(e[o], t[o]));
+  },
+  k = e => {
+    if (!(e instanceof HTMLElement || e instanceof SVGElement)) return !1;
+    const t = getComputedStyle(e);
+    return ["overflow", "overflow-x", "overflow-y"].some(e => {
+      const o = t.getPropertyValue(e);
+      return "auto" === o || "scroll" === o;
+    });
+  },
+  C = e => {
+    if (!e) return null;
+    let t = e.parentElement;
+    for (; t;) {
+      if (k(t)) return t;
+      t = t.parentElement;
+    }
+    return document.scrollingElement || document.documentElement;
+  },
+  L = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
+  R = "DEFAULT_TOOLTIP_ID",
+  x = {
+    anchorRefs: new Set(),
+    activeAnchor: {
+      current: null
+    },
+    attach: () => {},
+    detach: () => {},
+    setActiveAnchor: () => {}
+  },
+  N = React.createContext({
+    getTooltipData: () => x
+  });
+function I(e = R) {
+  return React.useContext(N).getTooltipData(e);
+}
+var B = {
     tooltip: "core-styles-module_tooltip__3vRRp",
     fixed: "core-styles-module_fixed__pcSol",
     arrow: "core-styles-module_arrow__cvMwQ",
@@ -50702,7 +51304,7 @@ var $ = {
     show: "core-styles-module_show__Nt9eE",
     closing: "core-styles-module_closing__sGnxF"
   },
-  j = {
+  z = {
     tooltip: "styles-module_tooltip__mnnfp",
     arrow: "styles-module_arrow__K0L3T",
     dark: "styles-module_dark__xNqje",
@@ -50712,13 +51314,13 @@ var $ = {
     error: "styles-module_error__JvumD",
     info: "styles-module_info__BWdHW"
   };
-const I = ({
+const D = ({
     forwardRef: t,
     id: r,
-    className: n,
-    classNameArrow: s,
-    variant: d = "dark",
-    anchorId: u,
+    className: c,
+    classNameArrow: i,
+    variant: u = "dark",
+    anchorId: d,
     anchorSelect: p,
     place: v = "top",
     offset: m = 10,
@@ -50727,58 +51329,62 @@ const I = ({
     positionStrategy: b = "absolute",
     middlewares: S,
     wrapper: E,
-    delayShow: _ = 0,
-    delayHide: A = 0,
-    float: O = !1,
-    hidden: T = !1,
-    noArrow: L = !1,
-    clickable: R = !1,
-    closeOnEsc: I = !1,
-    closeOnScroll: B = !1,
-    closeOnResize: z = !1,
-    openEvents: D,
-    closeEvents: q,
-    globalCloseEvents: H,
-    imperativeModeOnly: M,
-    style: W,
-    position: P,
+    delayShow: A = 0,
+    delayHide: O = 0,
+    float: k = !1,
+    hidden: R = !1,
+    noArrow: x = !1,
+    clickable: N = !1,
+    closeOnEsc: $ = !1,
+    closeOnScroll: j = !1,
+    closeOnResize: D = !1,
+    openEvents: q,
+    closeEvents: H,
+    globalCloseEvents: M,
+    imperativeModeOnly: W,
+    style: P,
+    position: V,
     afterShow: F,
     afterHide: K,
     content: U,
     contentWrapperRef: X,
     isOpen: Y,
-    setIsOpen: G,
-    activeAnchor: V,
-    setActiveAnchor: Z,
-    border: J,
-    opacity: Q,
-    arrowColor: ee,
-    role: te = "tooltip"
+    defaultIsOpen: G = !1,
+    setIsOpen: Z,
+    activeAnchor: J,
+    setActiveAnchor: Q,
+    border: ee,
+    opacity: te,
+    arrowColor: oe,
+    role: re = "tooltip"
   }) => {
-    var oe;
-    const le = React.useRef(null),
-      re = React.useRef(null),
-      ne = React.useRef(null),
+    var le;
+    const ne = React.useRef(null),
       ce = React.useRef(null),
-      [ie, se] = React.useState(v),
-      [ae, de] = React.useState({}),
-      [ue, pe] = React.useState({}),
-      [ve, me] = React.useState(!1),
-      [fe, ye] = React.useState(!1),
-      [he, we] = React.useState(null),
-      be = React.useRef(!1),
-      Se = React.useRef(null),
+      ie = React.useRef(null),
+      se = React.useRef(null),
+      ae = React.useRef(null),
+      [ue, de] = React.useState({
+        tooltipStyles: {},
+        tooltipArrowStyles: {},
+        place: v
+      }),
+      [pe, ve] = React.useState(!1),
+      [me, fe] = React.useState(!1),
+      [ye, he] = React.useState(null),
+      we = React.useRef(!1),
+      be = React.useRef(null),
       {
-        anchorRefs: Ee,
-        setActiveAnchor: ge
-      } = k(r),
-      _e = React.useRef(!1),
-      [Ae, Oe] = React.useState([]),
-      Te = React.useRef(!1),
-      ke = w || h.includes("click"),
-      Le = ke || (null == D ? void 0 : D.click) || (null == D ? void 0 : D.dblclick) || (null == D ? void 0 : D.mousedown),
-      Ce = D ? {
-        ...D
+        anchorRefs: Se,
+        setActiveAnchor: Ee
+      } = I(r),
+      ge = React.useRef(!1),
+      [Ae, _e] = React.useState([]),
+      Oe = React.useRef(!1),
+      Te = w || h.includes("click"),
+      ke = Te || (null == q ? void 0 : q.click) || (null == q ? void 0 : q.dblclick) || (null == q ? void 0 : q.mousedown),
+      Ce = q ? {
+        ...q
       } : {
         mouseenter: !0,
         focus: !0,
@@ -50786,13 +51392,13 @@ const I = ({
         dblclick: !1,
         mousedown: !1
       };
-    !D && ke && Object.assign(Ce, {
+    !q && Te && Object.assign(Ce, {
       mouseenter: !1,
       focus: !1,
       click: !0
     });
-    const Re = q ? {
-      ...q
+    const Le = H ? {
+      ...H
     } : {
       mouseleave: !0,
       blur: !0,
@@ -50800,85 +51406,98 @@ const I = ({
       dblclick: !1,
       mouseup: !1
     };
-    !q && ke && Object.assign(Re, {
+    !H && Te && Object.assign(Le, {
       mouseleave: !1,
       blur: !1
     });
-    const xe = H ? {
-      ...H
+    const Re = M ? {
+      ...M
     } : {
-      escape: I || !1,
-      scroll: B || !1,
-      resize: z || !1,
-      clickOutsideAnchor: Le || !1
+      escape: $ || !1,
+      scroll: j || !1,
+      resize: D || !1,
+      clickOutsideAnchor: ke || !1
     };
-    M && (Object.assign(Ce, {
+    W && (Object.assign(Ce, {
       mouseenter: !1,
       focus: !1,
       click: !1,
       dblclick: !1,
       mousedown: !1
-    }), Object.assign(Re, {
+    }), Object.assign(Le, {
       mouseleave: !1,
       blur: !1,
       click: !1,
       dblclick: !1,
       mouseup: !1
-    }), Object.assign(xe, {
+    }), Object.assign(Re, {
       escape: !1,
       scroll: !1,
       resize: !1,
       clickOutsideAnchor: !1
-    })), C(() => (Te.current = !0, () => {
-      Te.current = !1;
+    })), L(() => (Oe.current = !0, () => {
+      Oe.current = !1;
     }), []);
-    const Ne = e => {
-      Te.current && (e && ye(!0), setTimeout(() => {
-        Te.current && (null == G || G(e), void 0 === Y && me(e));
+    const xe = e => {
+      Oe.current && (e && fe(!0), setTimeout(() => {
+        Oe.current && (null == Z || Z(e), void 0 === Y && ve(e));
       }, 10));
     };
     React.useEffect(() => {
       if (void 0 === Y) return () => null;
-      Y && ye(!0);
+      Y && fe(!0);
       const e = setTimeout(() => {
-        me(Y);
+        ve(Y);
       }, 10);
       return () => {
         clearTimeout(e);
       };
     }, [Y]), React.useEffect(() => {
-      ve !== be.current && (be.current = ve, ve && (null == F || F()));
-    }, [ve]);
-    const $e = (e = _) => {
-        ne.current && clearTimeout(ne.current), ne.current = setTimeout(() => {
-          Ne(!0);
+      if (pe !== we.current) if (ae.current && clearTimeout(ae.current), we.current = pe, pe) null == F || F();else {
+        const e = (e => {
+          const t = e.match(/^([\d.]+)(ms|s)$/);
+          if (!t) return 0;
+          const [, o, r] = t;
+          return Number(o) * ("ms" === r ? 1 : 1e3);
+        })(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));
+        ae.current = setTimeout(() => {
+          fe(!1), he(null), null == K || K();
+        }, e + 25);
+      }
+    }, [pe]);
+    const Ne = e => {
+        de(t => T(t, e) ? t : e);
+      },
+      $e = (e = A) => {
+        ie.current && clearTimeout(ie.current), me ? xe(!0) : ie.current = setTimeout(() => {
+          xe(!0);
         }, e);
       },
-      je = (e = A) => {
-        ce.current && clearTimeout(ce.current), ce.current = setTimeout(() => {
-          _e.current || Ne(!1);
+      Ie = (e = O) => {
+        se.current && clearTimeout(se.current), se.current = setTimeout(() => {
+          ge.current || xe(!1);
         }, e);
       },
-      Ie = e => {
+      je = e => {
         var t;
         if (!e) return;
         const o = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
-        if (!(null == o ? void 0 : o.isConnected)) return Z(null), void ge({
+        if (!(null == o ? void 0 : o.isConnected)) return Q(null), void Ee({
           current: null
         });
-        _ ? $e() : Ne(!0), Z(o), ge({
+        A ? $e() : xe(!0), Q(o), Ee({
           current: o
-        }), ce.current && clearTimeout(ce.current);
+        }), se.current && clearTimeout(se.current);
       },
       Be = () => {
-        R ? je(A || 100) : A ? je() : Ne(!1), ne.current && clearTimeout(ne.current);
+        N ? Ie(O || 100) : O ? Ie() : xe(!1), ie.current && clearTimeout(ie.current);
       },
       ze = ({
         x: e,
         y: t
       }) => {
         var o;
-        const l = {
+        const r = {
           getBoundingClientRect: () => ({
             x: e,
             y: t,
@@ -50890,17 +51509,17 @@ const I = ({
             bottom: t
           })
         };
-        N({
-          place: null !== (o = null == he ? void 0 : he.place) && void 0 !== o ? o : v,
+        g({
+          place: null !== (o = null == ye ? void 0 : ye.place) && void 0 !== o ? o : v,
           offset: m,
-          elementReference: l,
-          tooltipReference: le.current,
-          tooltipArrowReference: re.current,
+          elementReference: r,
+          tooltipReference: ne.current,
+          tooltipArrowReference: ce.current,
           strategy: b,
           middlewares: S,
-          border: J
+          border: ee
         }).then(e => {
-          Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place);
+          Ne(e);
         });
       },
       De = e => {
@@ -50910,182 +51529,192 @@ const I = ({
             x: t.clientX,
             y: t.clientY
           };
-        ze(o), Se.current = o;
+        ze(o), be.current = o;
       },
       qe = e => {
         var t;
-        if (!ve) return;
+        if (!pe) return;
         const o = e.target;
-        if (null === (t = le.current) || void 0 === t ? void 0 : t.contains(o)) return;
-        [document.querySelector(`[id='${u}']`), ...Ae].some(e => null == e ? void 0 : e.contains(o)) || (Ne(!1), ne.current && clearTimeout(ne.current));
+        if (!o.isConnected) return;
+        if (null === (t = ne.current) || void 0 === t ? void 0 : t.contains(o)) return;
+        [document.querySelector(`[id='${d}']`), ...Ae].some(e => null == e ? void 0 : e.contains(o)) || (xe(!1), ie.current && clearTimeout(ie.current));
+      },
+      He = _(je, 50, !0),
+      Me = _(Be, 50, !0),
+      We = e => {
+        Me.cancel(), He(e);
       },
-      He = g(Ie, 50, !0),
-      Me = g(Be, 50, !0),
-      We = React.useCallback(() => {
+      Pe = () => {
+        He.cancel(), Me();
+      },
+      Ve = React.useCallback(() => {
         var e, t;
-        const o = null !== (e = null == he ? void 0 : he.position) && void 0 !== e ? e : P;
-        o ? ze(o) : O ? Se.current && ze(Se.current) : (null == V ? void 0 : V.isConnected) && N({
-          place: null !== (t = null == he ? void 0 : he.place) && void 0 !== t ? t : v,
+        const o = null !== (e = null == ye ? void 0 : ye.position) && void 0 !== e ? e : V;
+        o ? ze(o) : k ? be.current && ze(be.current) : (null == J ? void 0 : J.isConnected) && g({
+          place: null !== (t = null == ye ? void 0 : ye.place) && void 0 !== t ? t : v,
           offset: m,
-          elementReference: V,
-          tooltipReference: le.current,
-          tooltipArrowReference: re.current,
+          elementReference: J,
+          tooltipReference: ne.current,
+          tooltipArrowReference: ce.current,
           strategy: b,
           middlewares: S,
-          border: J
+          border: ee
         }).then(e => {
-          Te.current && (Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place));
+          Oe.current && Ne(e);
         });
-      }, [ve, V, U, W, v, null == he ? void 0 : he.place, m, b, P, null == he ? void 0 : he.position, O]);
+      }, [pe, J, U, P, v, null == ye ? void 0 : ye.place, m, b, V, null == ye ? void 0 : ye.position, k]);
     React.useEffect(() => {
       var e, t;
-      const o = new Set(Ee);
+      const o = new Set(Se);
       Ae.forEach(e => {
         o.add({
           current: e
         });
       });
-      const l = document.querySelector(`[id='${u}']`);
-      l && o.add({
-        current: l
+      const r = document.querySelector(`[id='${d}']`);
+      r && o.add({
+        current: r
       });
-      const r = () => {
-          Ne(!1);
+      const l = () => {
+          xe(!1);
         },
-        n = x(V),
-        c = x(le.current);
-      xe.scroll && (window.addEventListener("scroll", r), null == n || n.addEventListener("scroll", r), null == c || c.addEventListener("scroll", r));
+        n = C(J),
+        c = C(ne.current);
+      Re.scroll && (window.addEventListener("scroll", l), null == n || n.addEventListener("scroll", l), null == c || c.addEventListener("scroll", l));
       let i = null;
-      xe.resize ? window.addEventListener("resize", r) : V && le.current && (i = autoUpdate(V, le.current, We, {
+      Re.resize ? window.addEventListener("resize", l) : J && ne.current && (i = autoUpdate(J, ne.current, Ve, {
         ancestorResize: !0,
         elementResize: !0,
         layoutShift: !0
       }));
       const s = e => {
-        "Escape" === e.key && Ne(!1);
+        "Escape" === e.key && xe(!1);
       };
-      xe.escape && window.addEventListener("keydown", s), xe.clickOutsideAnchor && window.addEventListener("click", qe);
+      Re.escape && window.addEventListener("keydown", s), Re.clickOutsideAnchor && window.addEventListener("click", qe);
       const a = [],
-        d = e => {
-          ve || Ie(e);
+        u = e => {
+          pe && (null == e ? void 0 : e.target) === J || je(e);
         },
-        p = () => {
-          ve && Be();
+        p = e => {
+          pe && (null == e ? void 0 : e.target) === J && Be();
         },
         v = ["mouseenter", "mouseleave", "focus", "blur"],
         m = ["click", "dblclick", "mousedown", "mouseup"];
       Object.entries(Ce).forEach(([e, t]) => {
         t && (v.includes(e) ? a.push({
           event: e,
-          listener: He
+          listener: We
         }) : m.includes(e) && a.push({
           event: e,
-          listener: d
+          listener: u
         }));
-      }), Object.entries(Re).forEach(([e, t]) => {
+      }), Object.entries(Le).forEach(([e, t]) => {
         t && (v.includes(e) ? a.push({
           event: e,
-          listener: Me
+          listener: Pe
         }) : m.includes(e) && a.push({
           event: e,
           listener: p
         }));
-      }), O && a.push({
-        event: "mousemove",
+      }), k && a.push({
+        event: "pointermove",
         listener: De
       });
       const y = () => {
-          _e.current = !0;
+          ge.current = !0;
         },
         h = () => {
-          _e.current = !1, Be();
+          ge.current = !1, Be();
         };
-      return R && !Le && (null === (e = le.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = le.current) || void 0 === t || t.addEventListener("mouseleave", h)), a.forEach(({
+      return N && !ke && (null === (e = ne.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = ne.current) || void 0 === t || t.addEventListener("mouseleave", h)), a.forEach(({
         event: e,
         listener: t
       }) => {
         o.forEach(o => {
-          var l;
-          null === (l = o.current) || void 0 === l || l.addEventListener(e, t);
+          var r;
+          null === (r = o.current) || void 0 === r || r.addEventListener(e, t);
         });
       }), () => {
         var e, t;
-        xe.scroll && (window.removeEventListener("scroll", r), null == n || n.removeEventListener("scroll", r), null == c || c.removeEventListener("scroll", r)), xe.resize ? window.removeEventListener("resize", r) : null == i || i(), xe.clickOutsideAnchor && window.removeEventListener("click", qe), xe.escape && window.removeEventListener("keydown", s), R && !Le && (null === (e = le.current) || void 0 === e || e.removeEventListener("mouseenter", y), null === (t = le.current) || void 0 === t || t.removeEventListener("mouseleave", h)), a.forEach(({
+        Re.scroll && (window.removeEventListener("scroll", l), null == n || n.removeEventListener("scroll", l), null == c || c.removeEventListener("scroll", l)), Re.resize ? window.removeEventListener("resize", l) : null == i || i(), Re.clickOutsideAnchor && window.removeEventListener("click", qe), Re.escape && window.removeEventListener("keydown", s), N && !ke && (null === (e = ne.current) || void 0 === e || e.removeEventListener("mouseenter", y), null === (t = ne.current) || void 0 === t || t.removeEventListener("mouseleave", h)), a.forEach(({
           event: e,
           listener: t
         }) => {
           o.forEach(o => {
-            var l;
-            null === (l = o.current) || void 0 === l || l.removeEventListener(e, t);
+            var r;
+            null === (r = o.current) || void 0 === r || r.removeEventListener(e, t);
           });
         });
       };
-    }, [V, We, fe, Ee, Ae, D, q, H, ke]), React.useEffect(() => {
+    }, [J, Ve, me, Se, Ae, q, H, M, Te, A, O]), React.useEffect(() => {
       var e, t;
-      let o = null !== (t = null !== (e = null == he ? void 0 : he.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
+      let o = null !== (t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
       !o && r && (o = `[data-tooltip-id='${r}']`);
       const l = new MutationObserver(e => {
         const t = [],
           l = [];
         e.forEach(e => {
           if ("attributes" === e.type && "data-tooltip-id" === e.attributeName) {
-            e.target.getAttribute("data-tooltip-id") === r && t.push(e.target);
+            e.target.getAttribute("data-tooltip-id") === r ? t.push(e.target) : e.oldValue === r && l.push(e.target);
           }
           if ("childList" === e.type) {
-            if (V) {
+            if (J) {
               const t = [...e.removedNodes].filter(e => 1 === e.nodeType);
               if (o) try {
                 l.push(...t.filter(e => e.matches(o))), l.push(...t.flatMap(e => [...e.querySelectorAll(o)]));
               } catch (e) {}
               t.some(e => {
                 var t;
-                return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (ye(!1), Ne(!1), Z(null), ne.current && clearTimeout(ne.current), ce.current && clearTimeout(ce.current), !0);
+                return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, J)) && (fe(!1), xe(!1), Q(null), ie.current && clearTimeout(ie.current), se.current && clearTimeout(se.current), !0);
               });
             }
             if (o) try {
-              const l = [...e.addedNodes].filter(e => 1 === e.nodeType);
-              t.push(...l.filter(e => e.matches(o))), t.push(...l.flatMap(e => [...e.querySelectorAll(o)]));
+              const r = [...e.addedNodes].filter(e => 1 === e.nodeType);
+              t.push(...r.filter(e => e.matches(o))), t.push(...r.flatMap(e => [...e.querySelectorAll(o)]));
             } catch (e) {}
           }
-        }), (t.length || l.length) && Oe(e => [...e.filter(e => !l.includes(e)), ...t]);
+        }), (t.length || l.length) && _e(e => [...e.filter(e => !l.includes(e)), ...t]);
       });
       return l.observe(document.body, {
         childList: !0,
         subtree: !0,
         attributes: !0,
-        attributeFilter: ["data-tooltip-id"]
+        attributeFilter: ["data-tooltip-id"],
+        attributeOldValue: !0
       }), () => {
         l.disconnect();
       };
-    }, [r, p, null == he ? void 0 : he.anchorSelect, V]), React.useEffect(() => {
-      We();
-    }, [We]), React.useEffect(() => {
+    }, [r, p, null == ye ? void 0 : ye.anchorSelect, J]), React.useEffect(() => {
+      Ve();
+    }, [Ve]), React.useEffect(() => {
       if (!(null == X ? void 0 : X.current)) return () => null;
       const e = new ResizeObserver(() => {
-        We();
+        setTimeout(() => Ve());
       });
       return e.observe(X.current), () => {
         e.disconnect();
       };
     }, [U, null == X ? void 0 : X.current]), React.useEffect(() => {
       var e;
-      const t = document.querySelector(`[id='${u}']`),
+      const t = document.querySelector(`[id='${d}']`),
         o = [...Ae, t];
-      V && o.includes(V) || Z(null !== (e = Ae[0]) && void 0 !== e ? e : t);
-    }, [u, Ae, V]), React.useEffect(() => () => {
-      ne.current && clearTimeout(ne.current), ce.current && clearTimeout(ce.current);
-    }, []), React.useEffect(() => {
+      J && o.includes(J) || Q(null !== (e = Ae[0]) && void 0 !== e ? e : t);
+    }, [d, Ae, J]), React.useEffect(() => (G && xe(!0), () => {
+      ie.current && clearTimeout(ie.current), se.current && clearTimeout(se.current);
+    }), []), React.useEffect(() => {
       var e;
-      let t = null !== (e = null == he ? void 0 : he.anchorSelect) && void 0 !== e ? e : p;
+      let t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p;
       if (!t && r && (t = `[data-tooltip-id='${r}']`), t) try {
         const e = Array.from(document.querySelectorAll(t));
-        Oe(e);
+        _e(e);
       } catch (e) {
-        Oe([]);
+        _e([]);
       }
-    }, [r, p, null == he ? void 0 : he.anchorSelect]);
-    const Pe = null !== (oe = null == he ? void 0 : he.content) && void 0 !== oe ? oe : U,
-      Fe = ve && Object.keys(ae).length > 0;
+    }, [r, p, null == ye ? void 0 : ye.anchorSelect]), React.useEffect(() => {
+      ie.current && (clearTimeout(ie.current), $e(A));
+    }, [A]);
+    const Fe = null !== (le = null == ye ? void 0 : ye.content) && void 0 !== le ? le : U,
+      Ke = pe && Object.keys(ue.tooltipStyles).length > 0;
     return React.useImperativeHandle(t, () => ({
       open: e => {
         if (null == e ? void 0 : e.anchorSelect) try {
@@ -51093,214 +51722,218 @@ const I = ({
         } catch (t) {
           return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`);
         }
-        we(null != e ? e : null), (null == e ? void 0 : e.delay) ? $e(e.delay) : Ne(!0);
+        he(null != e ? e : null), (null == e ? void 0 : e.delay) ? $e(e.delay) : xe(!0);
       },
       close: e => {
-        (null == e ? void 0 : e.delay) ? je(e.delay) : Ne(!1);
+        (null == e ? void 0 : e.delay) ? Ie(e.delay) : xe(!1);
       },
-      activeAnchor: V,
-      place: ie,
-      isOpen: Boolean(fe && !T && Pe && Fe)
-    })), fe && !T && Pe ? React__default["default"].createElement(E, {
+      activeAnchor: J,
+      place: ue.place,
+      isOpen: Boolean(me && !R && Fe && Ke)
+    })), me && !R && Fe ? React__default["default"].createElement(E, {
       id: r,
-      role: te,
-      className: classnames("react-tooltip", $.tooltip, j.tooltip, j[d], n, `react-tooltip__place-${ie}`, $[Fe ? "show" : "closing"], Fe ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && $.fixed, R && $.clickable),
+      role: re,
+      className: classnames("react-tooltip", B.tooltip, z.tooltip, z[u], c, `react-tooltip__place-${ue.place}`, B[Ke ? "show" : "closing"], Ke ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && B.fixed, N && B.clickable),
       onTransitionEnd: e => {
-        ve || "opacity" !== e.propertyName || (ye(!1), we(null), null == K || K());
+        ae.current && clearTimeout(ae.current), pe || "opacity" !== e.propertyName || (fe(!1), he(null), null == K || K());
       },
       style: {
-        ...W,
-        ...ae,
-        opacity: void 0 !== Q && Fe ? Q : void 0
+        ...P,
+        ...ue.tooltipStyles,
+        opacity: void 0 !== te && Ke ? te : void 0
       },
-      ref: le
-    }, Pe, React__default["default"].createElement(E, {
-      className: classnames("react-tooltip-arrow", $.arrow, j.arrow, s, L && $.noArrow),
+      ref: ne
+    }, Fe, React__default["default"].createElement(E, {
+      className: classnames("react-tooltip-arrow", B.arrow, z.arrow, i, x && B.noArrow),
       style: {
-        ...ue,
-        background: ee ? `linear-gradient(to right bottom, transparent 50%, ${ee} 50%)` : void 0
+        ...ue.tooltipArrowStyles,
+        background: oe ? `linear-gradient(to right bottom, transparent 50%, ${oe} 50%)` : void 0
       },
-      ref: re
+      ref: ce
     })) : null;
   },
-  B = ({
+  q = ({
     content: t
   }) => React__default["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: t
     }
   }),
-  z = (e, t) => !("CSS" in window && "supports" in window.CSS) || window.CSS.supports(e, t),
-  D = React__default["default"].forwardRef(({
+  H = React__default["default"].forwardRef(({
     id: t,
-    anchorId: l,
-    anchorSelect: r,
-    content: n,
-    html: s,
+    anchorId: r,
+    anchorSelect: n,
+    content: c,
+    html: i,
     render: a,
-    className: d,
-    classNameArrow: u,
+    className: u,
+    classNameArrow: d,
     variant: p = "dark",
     place: v = "top",
     offset: m = 10,
     wrapper: f = "div",
-    children: y = null,
-    events: h = ["hover"],
-    openOnClick: w = !1,
-    positionStrategy: b = "absolute",
-    middlewares: S,
-    delayShow: E = 0,
-    delayHide: g = 0,
-    float: _ = !1,
-    hidden: A = !1,
-    noArrow: O = !1,
-    clickable: T = !1,
+    children: h = null,
+    events: w = ["hover"],
+    openOnClick: b = !1,
+    positionStrategy: S = "absolute",
+    middlewares: E,
+    delayShow: g = 0,
+    delayHide: _ = 0,
+    float: O = !1,
+    hidden: T = !1,
+    noArrow: k = !1,
+    clickable: C = !1,
     closeOnEsc: L = !1,
-    closeOnScroll: C = !1,
-    closeOnResize: R = !1,
-    openEvents: x,
-    closeEvents: N,
-    globalCloseEvents: $,
-    imperativeModeOnly: j = !1,
-    style: D,
-    position: q,
-    isOpen: H,
-    disableStyleInjection: M = !1,
-    border: W,
-    opacity: P,
-    arrowColor: F,
-    setIsOpen: K,
-    afterShow: U,
-    afterHide: X,
-    role: Y = "tooltip"
-  }, G) => {
-    const [V, Z] = React.useState(n),
-      [J, Q] = React.useState(s),
-      [ee, te] = React.useState(v),
-      [oe, le] = React.useState(p),
-      [re, ne] = React.useState(m),
-      [ce, ie] = React.useState(E),
+    closeOnScroll: R = !1,
+    closeOnResize: x = !1,
+    openEvents: N,
+    closeEvents: $,
+    globalCloseEvents: j,
+    imperativeModeOnly: B = !1,
+    style: z,
+    position: H,
+    isOpen: M,
+    defaultIsOpen: W = !1,
+    disableStyleInjection: P = !1,
+    border: V,
+    opacity: F,
+    arrowColor: K,
+    setIsOpen: U,
+    afterShow: X,
+    afterHide: Y,
+    role: G = "tooltip"
+  }, Z) => {
+    const [J, Q] = React.useState(c),
+      [ee, te] = React.useState(i),
+      [oe, re] = React.useState(v),
+      [le, ne] = React.useState(p),
+      [ce, ie] = React.useState(m),
       [se, ae] = React.useState(g),
-      [de, ue] = React.useState(_),
-      [pe, ve] = React.useState(A),
-      [me, fe] = React.useState(f),
-      [ye, he] = React.useState(h),
-      [we, be] = React.useState(b),
-      [Se, Ee] = React.useState(null),
-      ge = React.useRef(M),
+      [ue, de] = React.useState(_),
+      [pe, ve] = React.useState(O),
+      [me, fe] = React.useState(T),
+      [ye, he] = React.useState(f),
+      [we, be] = React.useState(w),
+      [Se, Ee] = React.useState(S),
+      [ge, Ae] = React.useState(null),
+      [_e, Oe] = React.useState(null),
+      Te = React.useRef(P),
       {
-        anchorRefs: _e,
-        activeAnchor: Ae
-      } = k(t),
-      Oe = e => null == e ? void 0 : e.getAttributeNames().reduce((t, o) => {
-        var l;
+        anchorRefs: ke,
+        activeAnchor: Ce
+      } = I(t),
+      Le = e => null == e ? void 0 : e.getAttributeNames().reduce((t, o) => {
+        var r;
         if (o.startsWith("data-tooltip-")) {
-          t[o.replace(/^data-tooltip-/, "")] = null !== (l = null == e ? void 0 : e.getAttribute(o)) && void 0 !== l ? l : null;
+          t[o.replace(/^data-tooltip-/, "")] = null !== (r = null == e ? void 0 : e.getAttribute(o)) && void 0 !== r ? r : null;
         }
         return t;
       }, {}),
-      Te = e => {
+      Re = e => {
         const t = {
           place: e => {
             var t;
-            te(null !== (t = e) && void 0 !== t ? t : v);
+            re(null !== (t = e) && void 0 !== t ? t : v);
           },
           content: e => {
-            Z(null != e ? e : n);
+            Q(null != e ? e : c);
           },
           html: e => {
-            Q(null != e ? e : s);
+            te(null != e ? e : i);
           },
           variant: e => {
             var t;
-            le(null !== (t = e) && void 0 !== t ? t : p);
+            ne(null !== (t = e) && void 0 !== t ? t : p);
           },
           offset: e => {
-            ne(null === e ? m : Number(e));
+            ie(null === e ? m : Number(e));
           },
           wrapper: e => {
             var t;
-            fe(null !== (t = e) && void 0 !== t ? t : f);
+            he(null !== (t = e) && void 0 !== t ? t : f);
           },
           events: e => {
             const t = null == e ? void 0 : e.split(" ");
-            he(null != t ? t : h);
+            be(null != t ? t : w);
           },
           "position-strategy": e => {
             var t;
-            be(null !== (t = e) && void 0 !== t ? t : b);
+            Ee(null !== (t = e) && void 0 !== t ? t : S);
           },
           "delay-show": e => {
-            ie(null === e ? E : Number(e));
+            ae(null === e ? g : Number(e));
           },
           "delay-hide": e => {
-            ae(null === e ? g : Number(e));
+            de(null === e ? _ : Number(e));
           },
           float: e => {
-            ue(null === e ? _ : "true" === e);
+            ve(null === e ? O : "true" === e);
           },
           hidden: e => {
-            ve(null === e ? A : "true" === e);
+            fe(null === e ? T : "true" === e);
+          },
+          "class-name": e => {
+            Ae(e);
           }
         };
         Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, o]) => {
-          var l;
-          null === (l = t[e]) || void 0 === l || l.call(t, o);
+          var r;
+          null === (r = t[e]) || void 0 === r || r.call(t, o);
         });
       };
     React.useEffect(() => {
-      Z(n);
-    }, [n]), React.useEffect(() => {
-      Q(s);
-    }, [s]), React.useEffect(() => {
-      te(v);
+      Q(c);
+    }, [c]), React.useEffect(() => {
+      te(i);
+    }, [i]), React.useEffect(() => {
+      re(v);
     }, [v]), React.useEffect(() => {
-      le(p);
+      ne(p);
     }, [p]), React.useEffect(() => {
-      ne(m);
+      ie(m);
     }, [m]), React.useEffect(() => {
-      ie(E);
-    }, [E]), React.useEffect(() => {
       ae(g);
     }, [g]), React.useEffect(() => {
-      ue(_);
+      de(_);
     }, [_]), React.useEffect(() => {
-      ve(A);
-    }, [A]), React.useEffect(() => {
-      be(b);
-    }, [b]), React.useEffect(() => {
-      ge.current !== M && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
-    }, [M]), React.useEffect(() => {
+      ve(O);
+    }, [O]), React.useEffect(() => {
+      fe(T);
+    }, [T]), React.useEffect(() => {
+      Ee(S);
+    }, [S]), React.useEffect(() => {
+      Te.current !== P && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
+    }, [P]), React.useEffect(() => {
       "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", {
         detail: {
-          disableCore: "core" === M,
-          disableBase: M
+          disableCore: "core" === P,
+          disableBase: P
         }
       }));
     }, []), React.useEffect(() => {
       var e;
-      const o = new Set(_e);
-      let n = r;
-      if (!n && t && (n = `[data-tooltip-id='${t}']`), n) try {
-        document.querySelectorAll(n).forEach(e => {
+      const o = new Set(ke);
+      let l = n;
+      if (!l && t && (l = `[data-tooltip-id='${t}']`), l) try {
+        document.querySelectorAll(l).forEach(e => {
           o.add({
             current: e
           });
         });
       } catch (e) {
-        console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`);
+        console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);
       }
-      const c = document.querySelector(`[id='${l}']`);
+      const c = document.querySelector(`[id='${r}']`);
       if (c && o.add({
         current: c
       }), !o.size) return () => null;
-      const i = null !== (e = null != Se ? Se : c) && void 0 !== e ? e : Ae.current,
+      const i = null !== (e = null != _e ? _e : c) && void 0 !== e ? e : Ce.current,
         s = new MutationObserver(e => {
           e.forEach(e => {
             var t;
             if (!i || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
-            const o = Oe(i);
-            Te(o);
+            const o = Le(i);
+            Re(o);
           });
         }),
         a = {
@@ -51309,75 +51942,76 @@ const I = ({
           subtree: !1
         };
       if (i) {
-        const e = Oe(i);
-        Te(e), s.observe(i, a);
+        const e = Le(i);
+        Re(e), s.observe(i, a);
       }
       return () => {
         s.disconnect();
       };
-    }, [_e, Ae, Se, l, r]), React.useEffect(() => {
-      (null == D ? void 0 : D.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), W && !z("border", `${W}`) && console.warn(`[react-tooltip] "${W}" is not a valid \`border\`.`), (null == D ? void 0 : D.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), P && !z("opacity", `${P}`) && console.warn(`[react-tooltip] "${P}" is not a valid \`opacity\`.`);
+    }, [ke, Ce, _e, r, n]), React.useEffect(() => {
+      (null == z ? void 0 : z.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), V && !A("border", `${V}`) && console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`), (null == z ? void 0 : z.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), F && !A("opacity", `${F}`) && console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);
     }, []);
-    let ke = y;
-    const Le = React.useRef(null);
+    let xe = h;
+    const Ne = React.useRef(null);
     if (a) {
       const t = a({
-        content: null != V ? V : null,
-        activeAnchor: Se
+        content: (null == _e ? void 0 : _e.getAttribute("data-tooltip-content")) || J || null,
+        activeAnchor: _e
       });
-      ke = t ? React__default["default"].createElement("div", {
-        ref: Le,
+      xe = t ? React__default["default"].createElement("div", {
+        ref: Ne,
         className: "react-tooltip-content-wrapper"
       }, t) : null;
-    } else V && (ke = V);
-    J && (ke = React__default["default"].createElement(B, {
-      content: J
+    } else J && (xe = J);
+    ee && (xe = React__default["default"].createElement(q, {
+      content: ee
     }));
-    const Ce = {
-      forwardRef: G,
+    const $e = {
+      forwardRef: Z,
       id: t,
-      anchorId: l,
-      anchorSelect: r,
-      className: d,
-      classNameArrow: u,
-      content: ke,
-      contentWrapperRef: Le,
-      place: ee,
-      variant: oe,
-      offset: re,
-      wrapper: me,
-      events: ye,
-      openOnClick: w,
-      positionStrategy: we,
-      middlewares: S,
-      delayShow: ce,
-      delayHide: se,
-      float: de,
-      hidden: pe,
-      noArrow: O,
-      clickable: T,
+      anchorId: r,
+      anchorSelect: n,
+      className: classnames(u, ge),
+      classNameArrow: d,
+      content: xe,
+      contentWrapperRef: Ne,
+      place: oe,
+      variant: le,
+      offset: ce,
+      wrapper: ye,
+      events: we,
+      openOnClick: b,
+      positionStrategy: Se,
+      middlewares: E,
+      delayShow: se,
+      delayHide: ue,
+      float: pe,
+      hidden: me,
+      noArrow: k,
+      clickable: C,
       closeOnEsc: L,
-      closeOnScroll: C,
-      closeOnResize: R,
-      openEvents: x,
-      closeEvents: N,
-      globalCloseEvents: $,
-      imperativeModeOnly: j,
-      style: D,
-      position: q,
-      isOpen: H,
-      border: W,
-      opacity: P,
-      arrowColor: F,
-      setIsOpen: K,
-      afterShow: U,
-      afterHide: X,
-      activeAnchor: Se,
-      setActiveAnchor: e => Ee(e),
-      role: Y
+      closeOnScroll: R,
+      closeOnResize: x,
+      openEvents: N,
+      closeEvents: $,
+      globalCloseEvents: j,
+      imperativeModeOnly: B,
+      style: z,
+      position: H,
+      isOpen: M,
+      defaultIsOpen: W,
+      border: V,
+      opacity: F,
+      arrowColor: K,
+      setIsOpen: U,
+      afterShow: X,
+      afterHide: Y,
+      activeAnchor: _e,
+      setActiveAnchor: e => Oe(e),
+      role: G
     };
-    return React__default["default"].createElement(I, {
-      ...Ce
+    return React__default["default"].createElement(D, {
+      ...$e
     });
   });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", e => {
@@ -51481,7 +52115,7 @@ function ContextualHelp(_ref) {
       color: "#1d5ab9",
       fontSize: "22px"
     }
-  })), /*#__PURE__*/React__default["default"].createElement(D, {
+  })), /*#__PURE__*/React__default["default"].createElement(H, {
     anchorSelect: "#helpSnippet1",
     clickable: true,
     className: "utilities_ContextualHelp_ContextualHelp--snippet",