@copart/ops-tool-kit 1.10.3-alpha.1 → 1.10.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.10.3-alpha.1";
+const version$5 = "1.10.4-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -10448,7 +10448,7 @@ var flatten$1 = flatten;
  * @symb R.flip(f)(a, b, c) = f(b, a, c)
  */
 
-var flip$1 =
+var flip$2 =
 /*#__PURE__*/
 _curry1(function flip(fn) {
   return curryN$1(fn.length, function (a, b) {
@@ -10459,7 +10459,7 @@ _curry1(function flip(fn) {
   });
 });
 
-var flip$2 = flip$1;
+var flip$3 = flip$2;
 
 /**
  * Iterate over an input `object`, calling a provided function `fn` for each
@@ -30514,7 +30514,7 @@ 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 =
@@ -38160,6 +38160,11 @@ var AppBar$1 = function AppBar(props) {
       ideaNoteToken = _useState14[0],
       setIdeaNoteToken = _useState14[1];
 
+  var _useState15 = React.useState(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      viewPortHeight = _useState16[0],
+      setViewPortHeight = _useState16[1];
+
   var isLoggedOn = props.isLoggedOn,
       moduleName = props.moduleName,
       forceUpdate = props.forceUpdate,
@@ -38175,12 +38180,15 @@ var AppBar$1 = function AppBar(props) {
       showMihelpDot = props.showMihelpDot;
 
   var _useWindowSize = useWindowSize(),
-      width = _useWindowSize.width;
+      width = _useWindowSize.width,
+      height = _useWindowSize.height;
 
-  var _useState15 = React.useState(0),
-      _useState16 = _slicedToArray(_useState15, 2),
-      count = _useState16[0],
-      setCount = _useState16[1];
+  console.log('+++viewPortHeight==', viewPortHeight);
+
+  var _useState17 = React.useState(0),
+      _useState18 = _slicedToArray(_useState17, 2),
+      count = _useState18[0],
+      setCount = _useState18[1];
 
   var mihelpRef = React.useRef(null);
   var mihelpIconRef = React.useRef(null);
@@ -38192,6 +38200,11 @@ var AppBar$1 = function AppBar(props) {
       setNotificationsVisible(false);
     }
   }, [mihelpVisible]);
+  React.useEffect(function () {
+    if (isCalloutVisible) {
+      setViewPortHeight(height);
+    }
+  }, [isCalloutVisible]);
   React.useEffect(function () {
     if (ideaNoteVisible) {
       setMihelpVisible(false);
@@ -38322,6 +38335,28 @@ var AppBar$1 = function AppBar(props) {
     }
   };
 
+  var hasTouchSupport = function hasTouchSupport() {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  };
+
+  var handleCallOutDismiss = function handleCallOutDismiss() {
+    console.log('+++hasTouchSupport=', hasTouchSupport());
+
+    if (hasTouchSupport()) {
+      setTimeout(function () {
+        var newViewportHeight = window.innerHeight;
+
+        if (newViewportHeight < viewPortHeight) {
+          return;
+        } else {
+          setCalloutVisible(false);
+        }
+      }, 300);
+    } else {
+      setCalloutVisible(false);
+    }
+  };
+
   var stack = ((_window$toolkitEnv4 = window.toolkitEnv) === null || _window$toolkitEnv4 === void 0 ? void 0 : _window$toolkitEnv4.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
   return React__default["default"].createElement("div", {
     "data-e2e": "cc-AppBar",
@@ -38384,9 +38419,7 @@ var AppBar$1 = function AppBar(props) {
     role: "dialog",
     gapSpace: 0,
     target: "#".concat(calloutTarget),
-    onDismiss: function onDismiss() {
-      return setCalloutVisible(false);
-    },
+    onDismiss: handleCallOutDismiss,
     isBeakVisible: false
   }, React__default["default"].createElement("div", null, !stack || stack === 'c' ? React__default["default"].createElement(SettingsView$1, {
     onSave: onSave
@@ -38509,7 +38542,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,
@@ -38622,7 +38655,7 @@ var isSuspense = function (a) {
 };
 
 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;
@@ -43162,6 +43195,15 @@ 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;
@@ -43374,7 +43416,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.
@@ -43458,7 +43500,6 @@ const computePosition$1 = async (reference, floating, config) => {
       }
 
       i = -1;
-      continue;
     }
   }
 
@@ -43524,6 +43565,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -43542,7 +43584,7 @@ async function detectOverflow(state, options) {
  */
 
 
-const arrow = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
 
@@ -43603,7 +43645,7 @@ const arrow = options => ({
     // 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,
@@ -43619,6 +43661,117 @@ 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`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -43627,7 +43780,7 @@ const arrow = options => ({
  */
 
 
-const flip = function (options) {
+const flip$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -43750,6 +43903,229 @@ 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.
 
 
@@ -43765,8 +44141,7 @@ async function convertValueToCoords(state, options) {
   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
-
+  const rawValue = evaluate(options, state);
   let {
     mainAxis,
     crossAxis,
@@ -43813,15 +44188,27 @@ const offset = function (options) {
     options,
 
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
-      const diffCoords = await convertValueToCoords(state, options);
+      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
+        }
       };
     }
 
@@ -43834,7 +44221,7 @@ const offset = function (options) {
  */
 
 
-const shift = function (options) {
+const shift$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -43906,6 +44293,178 @@ 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)) {
@@ -43921,7 +44480,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) {
@@ -44180,9 +44739,10 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   if (domElement) {
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentIFrame = win.frameElement;
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
 
-    while (currentIFrame && offsetParent && offsetWin !== win) {
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle$1(currentIFrame);
@@ -44194,7 +44754,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       height *= iframeScale.y;
       x += left;
       y += top;
-      currentIFrame = getWindow(currentIFrame).frameElement;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
     }
   }
 
@@ -44206,16 +44767,30 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
+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);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
 
-  if (offsetParent === documentElement) {
+  if (offsetParent === documentElement || topLayer && isFixed) {
     return rect;
   }
 
@@ -44225,8 +44800,9 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   };
   let scale = createCoords(1);
   const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
 
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
@@ -44425,7 +45001,14 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  return getCssDimensions(element);
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
 }
 
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
@@ -44453,9 +45036,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     }
   }
 
+  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
   };
@@ -44478,7 +45063,7 @@ function getTrueOffsetParent(element, polyfill) {
 function getOffsetParent(element, polyfill) {
   const window = getWindow(element);
 
-  if (!isHTMLElement(element)) {
+  if (!isHTMLElement(element) || isTopLayer(element)) {
     return window;
   }
 
@@ -44495,20 +45080,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))
     }
   };
 };
@@ -44536,8 +45116,10 @@ function observeMove(element, onMove) {
   const root = getDocumentElement(element);
 
   function cleanup() {
+    var _io;
+
     clearTimeout(timeoutId);
-    io && io.disconnect();
+    (_io = io) == null || _io.disconnect();
     io = null;
   }
 
@@ -44658,7 +45240,9 @@ 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);
         });
       }
 
@@ -44692,12 +45276,14 @@ 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) {
@@ -44706,11 +45292,67 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 /**
- * 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.
+ * 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 given reference element.
+ */
 
 const computePosition = (reference, floating, options) => {
   // This caches the expensive `getClippingElementAncestors` function so that
@@ -44742,38 +45384,57 @@ 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 (arg) {
+        classes = appendClass(classes, parseValue(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;
-        }
+    return classes;
+  }
 
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes.push(key);
-          }
-        }
+  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) {
@@ -44802,78 +45463,32 @@ 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
@@ -44881,28 +45496,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`,
@@ -44911,17 +45526,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
     };
@@ -44939,8 +45554,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
     };
@@ -44960,9 +45575,72 @@ const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
     tooltipArrowStyles: {},
     place: o
   }));
-};
+},
+      A = (e, t) => !("CSS" in window && "supports" in window.CSS) || window.CSS.supports(e, t),
+      _ = (e, t, o) => {
+  let r = null;
 
-var $ = {
+  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",
@@ -44971,7 +45649,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",
@@ -44982,13 +45660,13 @@ var $ = {
   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,
@@ -44997,41 +45675,46 @@ 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
+  defaultIsOpen: G = !1,
+  setIsOpen: Z,
+  activeAnchor: J,
+  setActiveAnchor: Q,
+  border: ee,
+  opacity: te,
+  arrowColor: oe,
+  role: re = "tooltip"
 }) => {
-  var te;
-  const oe = React.useRef(null),
-        le = React.useRef(null),
-        re = React.useRef(null),
-        ne = React.useRef(null),
-        [ce, ie] = React.useState(v),
-        [se, ae] = React.useState({}),
-        [de, ue] = React.useState({}),
+  var le;
+  const ne = React.useRef(null),
+        ce = 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),
@@ -45040,13 +45723,13 @@ const I = ({
         {
     anchorRefs: Se,
     setActiveAnchor: Ee
-  } = k(r),
+  } = I(r),
         ge = React.useRef(!1),
-        [_e, Ae] = React.useState([]),
+        [Ae, _e] = React.useState([]),
         Oe = React.useRef(!1),
         Te = w || h.includes("click"),
-        ke = Te || (null == D ? void 0 : D.click) || (null == D ? void 0 : D.dblclick) || (null == D ? void 0 : D.mousedown),
-        Le = D ? { ...D
+        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,
@@ -45054,12 +45737,12 @@ const I = ({
     dblclick: !1,
     mousedown: !1
   };
-  !D && Te && Object.assign(Le, {
+  !q && Te && Object.assign(Ce, {
     mouseenter: !1,
     focus: !1,
     click: !0
   });
-  const Ce = q ? { ...q
+  const Le = H ? { ...H
   } : {
     mouseleave: !0,
     blur: !0,
@@ -45067,24 +45750,24 @@ const I = ({
     dblclick: !1,
     mouseup: !1
   };
-  !q && Te && Object.assign(Ce, {
+  !H && Te && Object.assign(Le, {
     mouseleave: !1,
     blur: !1
   });
-  const Re = H ? { ...H
+  const Re = M ? { ...M
   } : {
-    escape: I || !1,
-    scroll: B || !1,
-    resize: z || !1,
+    escape: $ || !1,
+    scroll: j || !1,
+    resize: D || !1,
     clickOutsideAnchor: ke || !1
   };
-  M && (Object.assign(Le, {
+  W && (Object.assign(Ce, {
     mouseenter: !1,
     focus: !1,
     click: !1,
     dblclick: !1,
     mousedown: !1
-  }), Object.assign(Ce, {
+  }), Object.assign(Le, {
     mouseleave: !1,
     blur: !1,
     click: !1,
@@ -45095,13 +45778,13 @@ const I = ({
     scroll: !1,
     resize: !1,
     clickOutsideAnchor: !1
-  })), C(() => (Oe.current = !0, () => {
+  })), L(() => (Oe.current = !0, () => {
     Oe.current = !1;
   }), []);
 
   const xe = e => {
     Oe.current && (e && fe(!0), setTimeout(() => {
-      Oe.current && (null == G || G(e), void 0 === Y && ve(e));
+      Oe.current && (null == Z || Z(e), void 0 === Y && ve(e));
     }, 10));
   };
 
@@ -45115,16 +45798,30 @@ const I = ({
       clearTimeout(e);
     };
   }, [Y]), React.useEffect(() => {
-    pe !== we.current && (we.current = pe, pe && (null == F || F()));
+    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 = _) => {
-    re.current && clearTimeout(re.current), re.current = setTimeout(() => {
+  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);
   },
-        $e = (e = A) => {
-    ne.current && clearTimeout(ne.current), ne.current = setTimeout(() => {
+        Ie = (e = O) => {
+    se.current && clearTimeout(se.current), se.current = setTimeout(() => {
       ge.current || xe(!1);
     }, e);
   },
@@ -45132,22 +45829,22 @@ const I = ({
     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 Ee({
+    if (!(null == o ? void 0 : o.isConnected)) return Q(null), void Ee({
       current: null
     });
-    _ ? Ne() : xe(!0), Z(o), Ee({
+    A ? $e() : xe(!0), Q(o), Ee({
       current: o
-    }), ne.current && clearTimeout(ne.current);
+    }), se.current && clearTimeout(se.current);
   },
-        Ie = () => {
-    R ? $e(A || 100) : A ? $e() : xe(!1), re.current && clearTimeout(re.current);
+        Be = () => {
+    N ? Ie(O || 100) : O ? Ie() : xe(!1), ie.current && clearTimeout(ie.current);
   },
-        Be = ({
+        ze = ({
     x: e,
     y: t
   }) => {
     var o;
-    const l = {
+    const r = {
       getBoundingClientRect: () => ({
         x: e,
         y: t,
@@ -45159,78 +45856,83 @@ const I = ({
         bottom: t
       })
     };
-    N({
+    g({
       place: null !== (o = null == ye ? void 0 : ye.place) && void 0 !== o ? o : v,
       offset: m,
-      elementReference: l,
-      tooltipReference: oe.current,
-      tooltipArrowReference: le.current,
+      elementReference: r,
+      tooltipReference: ne.current,
+      tooltipArrowReference: ce.current,
       strategy: b,
       middlewares: S,
-      border: J
+      border: ee
     }).then(e => {
-      Object.keys(e.tooltipStyles).length && ae(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ue(e.tooltipArrowStyles), ie(e.place);
+      Ne(e);
     });
   },
-        ze = e => {
+        De = e => {
     if (!e) return;
     const t = e,
           o = {
       x: t.clientX,
       y: t.clientY
     };
-    Be(o), be.current = o;
+    ze(o), be.current = o;
   },
-        De = e => {
+        qe = e => {
     var t;
     if (!pe) return;
     const o = e.target;
-    if (null === (t = oe.current) || void 0 === t ? void 0 : t.contains(o)) return;
-    [document.querySelector(`[id='${u}']`), ..._e].some(e => null == e ? void 0 : e.contains(o)) || (xe(!1), re.current && clearTimeout(re.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);
+  },
+        Pe = () => {
+    He.cancel(), Me();
   },
-        qe = g(je, 50, !0),
-        He = g(Ie, 50, !0),
-        Me = React.useCallback(() => {
+        Ve = React.useCallback(() => {
     var e, t;
-    const o = null !== (e = null == ye ? void 0 : ye.position) && void 0 !== e ? e : P;
-    o ? Be(o) : O ? be.current && Be(be.current) : (null == V ? void 0 : V.isConnected) && N({
+    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: oe.current,
-      tooltipArrowReference: le.current,
+      elementReference: J,
+      tooltipReference: ne.current,
+      tooltipArrowReference: ce.current,
       strategy: b,
       middlewares: S,
-      border: J
+      border: ee
     }).then(e => {
-      Oe.current && (Object.keys(e.tooltipStyles).length && ae(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ue(e.tooltipArrowStyles), ie(e.place));
+      Oe.current && Ne(e);
     });
-  }, [pe, V, U, W, v, null == ye ? void 0 : ye.place, m, b, P, null == ye ? void 0 : ye.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(Se);
-
-    _e.forEach(e => {
+    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 = () => {
+    const l = () => {
       xe(!1);
     },
-          n = x(V),
-          c = x(oe.current);
+          n = C(J),
+          c = C(ne.current);
 
-    Re.scroll && (window.addEventListener("scroll", r), null == n || n.addEventListener("scroll", r), null == c || c.addEventListener("scroll", r));
+    Re.scroll && (window.addEventListener("scroll", l), null == n || n.addEventListener("scroll", l), null == c || c.addEventListener("scroll", l));
     let i = null;
-    Re.resize ? window.addEventListener("resize", r) : V && oe.current && (i = autoUpdate(V, oe.current, Me, {
+    Re.resize ? window.addEventListener("resize", l) : J && ne.current && (i = autoUpdate(J, ne.current, Ve, {
       ancestorResize: !0,
       elementResize: !0,
       layoutShift: !0
@@ -45240,67 +45942,67 @@ const I = ({
       "Escape" === e.key && xe(!1);
     };
 
-    Re.escape && window.addEventListener("keydown", s), Re.clickOutsideAnchor && window.addEventListener("click", De);
+    Re.escape && window.addEventListener("keydown", s), Re.clickOutsideAnchor && window.addEventListener("click", qe);
 
     const a = [],
-          d = e => {
-      pe || je(e);
+          u = e => {
+      pe && (null == e ? void 0 : e.target) === J || je(e);
     },
-          p = () => {
-      pe && Ie();
+          p = e => {
+      pe && (null == e ? void 0 : e.target) === J && Be();
     },
           v = ["mouseenter", "mouseleave", "focus", "blur"],
           m = ["click", "dblclick", "mousedown", "mouseup"];
 
-    Object.entries(Le).forEach(([e, t]) => {
+    Object.entries(Ce).forEach(([e, t]) => {
       t && (v.includes(e) ? a.push({
         event: e,
-        listener: qe
+        listener: We
       }) : m.includes(e) && a.push({
         event: e,
-        listener: d
+        listener: u
       }));
-    }), Object.entries(Ce).forEach(([e, t]) => {
+    }), Object.entries(Le).forEach(([e, t]) => {
       t && (v.includes(e) ? a.push({
         event: e,
-        listener: He
+        listener: Pe
       }) : m.includes(e) && a.push({
         event: e,
         listener: p
       }));
-    }), O && a.push({
-      event: "mousemove",
-      listener: ze
+    }), k && a.push({
+      event: "pointermove",
+      listener: De
     });
 
     const y = () => {
       ge.current = !0;
     },
           h = () => {
-      ge.current = !1, Ie();
+      ge.current = !1, Be();
     };
 
-    return R && !ke && (null === (e = oe.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = oe.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;
-      Re.scroll && (window.removeEventListener("scroll", r), null == n || n.removeEventListener("scroll", r), null == c || c.removeEventListener("scroll", r)), Re.resize ? window.removeEventListener("resize", r) : null == i || i(), Re.clickOutsideAnchor && window.removeEventListener("click", De), Re.escape && window.removeEventListener("keydown", s), R && !ke && (null === (e = oe.current) || void 0 === e || e.removeEventListener("mouseenter", y), null === (t = oe.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, Me, me, Se, _e, D, q, H, Te]), 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 == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
     !o && r && (o = `[data-tooltip-id='${r}']`);
@@ -45309,65 +46011,69 @@ const I = ({
             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)) && (fe(!1), xe(!1), Z(null), re.current && clearTimeout(re.current), ne.current && clearTimeout(ne.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) && Ae(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 == ye ? void 0 : ye.anchorSelect, V]), React.useEffect(() => {
-    Me();
-  }, [Me]), 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(() => {
-      Me();
+      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}']`),
-          o = [..._e, t];
-    V && o.includes(V) || Z(null !== (e = _e[0]) && void 0 !== e ? e : t);
-  }, [u, _e, V]), React.useEffect(() => () => {
-    re.current && clearTimeout(re.current), ne.current && clearTimeout(ne.current);
-  }, []), React.useEffect(() => {
+    const t = document.querySelector(`[id='${d}']`),
+          o = [...Ae, t];
+    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 == 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));
-      Ae(e);
+
+      _e(e);
     } catch (e) {
-      Ae([]);
+      _e([]);
     }
-  }, [r, p, null == ye ? void 0 : ye.anchorSelect]);
-  const We = null !== (te = null == ye ? void 0 : ye.content) && void 0 !== te ? te : U,
-        Pe = pe && Object.keys(se).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 {
@@ -45375,214 +46081,219 @@ const I = ({
       } catch (t) {
         return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`);
       }
-      he(null != e ? e : null), (null == e ? void 0 : e.delay) ? Ne(e.delay) : xe(!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) ? $e(e.delay) : xe(!1);
+      (null == e ? void 0 : e.delay) ? Ie(e.delay) : xe(!1);
     },
-    activeAnchor: V,
-    place: ce,
-    isOpen: Boolean(me && !T && We && Pe)
-  })), me && !T && We ? 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: "tooltip",
-    className: classnames("react-tooltip", $.tooltip, j.tooltip, j[d], n, `react-tooltip__place-${ce}`, $[Pe ? "show" : "closing"], Pe ? "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 => {
-      pe || "opacity" !== e.propertyName || (fe(!1), he(null), null == K || K());
+      ae.current && clearTimeout(ae.current), pe || "opacity" !== e.propertyName || (fe(!1), he(null), null == K || K());
     },
-    style: { ...W,
-      ...se,
-      opacity: void 0 !== Q && Pe ? Q : void 0
+    style: { ...P,
+      ...ue.tooltipStyles,
+      opacity: void 0 !== te && Ke ? te : void 0
     },
-    ref: oe
-  }, We, React__default["default"].createElement(E, {
-    className: classnames("react-tooltip-arrow", $.arrow, j.arrow, s, L && $.noArrow),
-    style: { ...de,
-      background: ee ? `linear-gradient(to right bottom, transparent 50%, ${ee} 50%)` : void 0
+    ref: ne
+  }, Fe, React__default["default"].createElement(E, {
+    className: classnames("react-tooltip-arrow", B.arrow, z.arrow, i, x && B.noArrow),
+    style: { ...ue.tooltipArrowStyles,
+      background: oe ? `linear-gradient(to right bottom, transparent 50%, ${oe} 50%)` : void 0
     },
-    ref: le
+    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
-}, Y) => {
-  const [G, V] = React.useState(n),
-        [Z, J] = React.useState(s),
-        [Q, ee] = React.useState(v),
-        [te, oe] = React.useState(p),
-        [le, re] = React.useState(m),
-        [ne, ce] = React.useState(E),
-        [ie, se] = React.useState(g),
-        [ae, de] = React.useState(_),
-        [ue, pe] = React.useState(A),
-        [ve, me] = React.useState(f),
-        [fe, ye] = React.useState(h),
-        [he, we] = React.useState(b),
-        [be, Se] = React.useState(null),
-        Ee = React.useRef(M),
+  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),
+        [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: ge,
-    activeAnchor: _e
-  } = k(t),
-        Ae = 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;
   }, {}),
-        Oe = e => {
+        Re = e => {
     const t = {
       place: e => {
         var t;
-        ee(null !== (t = e) && void 0 !== t ? t : v);
+        re(null !== (t = e) && void 0 !== t ? t : v);
       },
       content: e => {
-        V(null != e ? e : n);
+        Q(null != e ? e : c);
       },
       html: e => {
-        J(null != e ? e : s);
+        te(null != e ? e : i);
       },
       variant: e => {
         var t;
-        oe(null !== (t = e) && void 0 !== t ? t : p);
+        ne(null !== (t = e) && void 0 !== t ? t : p);
       },
       offset: e => {
-        re(null === e ? m : Number(e));
+        ie(null === e ? m : Number(e));
       },
       wrapper: e => {
         var t;
-        me(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(" ");
-        ye(null != t ? t : h);
+        be(null != t ? t : w);
       },
       "position-strategy": e => {
         var t;
-        we(null !== (t = e) && void 0 !== t ? t : b);
+        Ee(null !== (t = e) && void 0 !== t ? t : S);
       },
       "delay-show": e => {
-        ce(null === e ? E : Number(e));
+        ae(null === e ? g : Number(e));
       },
       "delay-hide": e => {
-        se(null === e ? g : Number(e));
+        de(null === e ? _ : Number(e));
       },
       float: e => {
-        de(null === e ? _ : "true" === e);
+        ve(null === e ? O : "true" === e);
       },
       hidden: e => {
-        pe(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(() => {
-    V(n);
-  }, [n]), React.useEffect(() => {
-    J(s);
-  }, [s]), React.useEffect(() => {
-    ee(v);
+    Q(c);
+  }, [c]), React.useEffect(() => {
+    te(i);
+  }, [i]), React.useEffect(() => {
+    re(v);
   }, [v]), React.useEffect(() => {
-    oe(p);
+    ne(p);
   }, [p]), React.useEffect(() => {
-    re(m);
+    ie(m);
   }, [m]), React.useEffect(() => {
-    ce(E);
-  }, [E]), React.useEffect(() => {
-    se(g);
+    ae(g);
   }, [g]), React.useEffect(() => {
     de(_);
   }, [_]), React.useEffect(() => {
-    pe(A);
-  }, [A]), React.useEffect(() => {
-    we(b);
-  }, [b]), React.useEffect(() => {
-    Ee.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(ge);
-    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 != be ? be : c) && void 0 !== e ? e : _e.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 = Ae(i);
-        Oe(o);
+        const o = Le(i);
+        Re(o);
       });
     }),
           a = {
@@ -45592,76 +46303,78 @@ const I = ({
     };
 
     if (i) {
-      const e = Ae(i);
-      Oe(e), s.observe(i, a);
+      const e = Le(i);
+      Re(e), s.observe(i, a);
     }
 
     return () => {
       s.disconnect();
     };
-  }, [ge, _e, be, 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 Te = y;
-  const ke = React.useRef(null);
+  let xe = h;
+  const Ne = React.useRef(null);
 
   if (a) {
     const t = a({
-      content: null != G ? G : null,
-      activeAnchor: be
+      content: (null == _e ? void 0 : _e.getAttribute("data-tooltip-content")) || J || null,
+      activeAnchor: _e
     });
-    Te = t ? React__default["default"].createElement("div", {
-      ref: ke,
+    xe = t ? React__default["default"].createElement("div", {
+      ref: Ne,
       className: "react-tooltip-content-wrapper"
     }, t) : null;
-  } else G && (Te = G);
+  } else J && (xe = J);
 
-  Z && (Te = React__default["default"].createElement(B, {
-    content: Z
+  ee && (xe = React__default["default"].createElement(q, {
+    content: ee
   }));
-  const Le = {
-    forwardRef: Y,
+  const $e = {
+    forwardRef: Z,
     id: t,
-    anchorId: l,
-    anchorSelect: r,
-    className: d,
-    classNameArrow: u,
-    content: Te,
-    contentWrapperRef: ke,
-    place: Q,
-    variant: te,
-    offset: le,
-    wrapper: ve,
-    events: fe,
-    openOnClick: w,
-    positionStrategy: he,
-    middlewares: S,
-    delayShow: ne,
-    delayHide: ie,
-    float: ae,
-    hidden: ue,
-    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: be,
-    setActiveAnchor: e => Se(e)
-  };
-  return React__default["default"].createElement(I, { ...Le
+    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(D, { ...$e
   });
 });
 
@@ -45788,7 +46501,7 @@ function ContextualHelp(_ref) {
       color: '#1d5ab9',
       cursor: 'default'
     }
-  })), React__default["default"].createElement(D, {
+  })), React__default["default"].createElement(H, {
     anchorSelect: "#helpSnippet1",
     clickable: true,
     className: "utilities_ContextualHelp_ContextualHelp--snippet",