@trackunit/react-components 0.1.156 → 0.1.158

package/index.esm.js

@@ -2,8 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
-import { rentalStatusPalette, color } from '@trackunit/ui-design-tokens';
+import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
+import { iconNames } from '@trackunit/ui-icons';
+import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
+import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
@@ -399,7 +401,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
         size: "large",
     },
 });
-const cvaIconComponent = cvaMerge([], {
+cvaMerge([], {
     variants: {
         iconType: {
             solid: "fill-current stroke-transparent",
@@ -407,7 +409,7 @@ const cvaIconComponent = cvaMerge([], {
         },
     },
 });
-const cvaLoadingDot = cvaMerge([
+cvaMerge([
     "relative",
     "aspect-square",
     "after:content-['']",
@@ -422,30 +424,27 @@ const cvaLoadingDot = cvaMerge([
     "after:opacity-50",
 ]);
 
+const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
+const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
- * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
     const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
-    let IconComponent = null;
-    if (HeroIconsArray.find(icon => icon === name)) {
-        IconComponent = heroIconLookup(name, correctIconType);
-    }
-    else if (TrackunitSolidIconsArray.find(icon => icon === name) ||
-        TrackunitOutlineIconsArray.find(icon => icon === name)) {
-        IconComponent = trackunitIconLookup(name, correctIconType);
-    }
-    if (!IconComponent) {
+    const iconName = iconNames[name];
+    if (!iconName) {
         return null;
     }
-    return (jsx(React.Suspense, { fallback: jsx("span", { className: cvaLoadingDot(), "data-testid": dataTestId }), children: jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: cvaIconComponent({
-                    iconType: correctIconType,
-                }), style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) }) }));
+    const href = {
+        solid: `${IconSpriteSolid}#${iconName}`,
+        outline: `${IconSpriteOutline}#${iconName}`,
+    };
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType] }) }) }));
 };
 
 /**
@@ -455,7 +454,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "StarIcon", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
+    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
 };
 
 const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
@@ -597,13 +596,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon, { name: "ExclamationTriangleIcon", color: "danger" });
+                return jsx(Icon, { name: "ExclamationTriangle", color: "danger" });
             case "warning":
-                return jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
+                return jsx(Icon, { name: "ExclamationCircle", color: "warning" });
             case "success":
-                return jsx(Icon, { name: "CheckCircleIcon", color: "success" });
+                return jsx(Icon, { name: "CheckCircle", color: "success" });
             default:
-                return jsx(Icon, { name: "InformationCircleIcon" });
+                return jsx(Icon, { name: "InformationCircle" });
         }
     };
     const getButtonColor = () => {
@@ -623,7 +622,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
         }
     }, [ref, autoScroll]);
     const layout = inline ? "inline" : "default";
-    return (jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxs("div", { className: cvaAlertDetails(), children: [jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
+    return (jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxs("div", { className: cvaAlertDetails(), children: [jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsx(Button$1, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button$1, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
 };
 
 const cvaBadge = cvaMerge([
@@ -855,7 +854,7 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) }));
+    return (jsx(DensityContainer, { dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading && (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })), children] }), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" }))] }) }));
 };
 
 function useMountedState() {
@@ -1194,7 +1193,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layo
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure$1();
@@ -1860,7 +1859,7 @@ function _typeof$2(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "func
  * //=> Sun Jul 02 1995 00:00:00
  */
 
-function max$2(dirtyDatesArray) {
+function max$1(dirtyDatesArray) {
   requiredArgs(1, arguments);
   var datesArray; // `dirtyDatesArray` is Array, Set or Map, or object with custom `forEach` method
 
@@ -1908,7 +1907,7 @@ function _typeof$1(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "func
  * //=> Wed Feb 11 1987 00:00:00
  */
 
-function min$2(dirtyDatesArray) {
+function min$1(dirtyDatesArray) {
   requiredArgs(1, arguments);
   var datesArray; // `dirtyDatesArray` is Array, Set or Map, or object with custom `forEach` method
 
@@ -13920,10 +13919,10 @@ function getNextFocus(focusedDay, options) {
     };
     var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
     if (direction === 'before' && fromDate) {
-        newFocusedDay = max$2([fromDate, newFocusedDay]);
+        newFocusedDay = max$1([fromDate, newFocusedDay]);
     }
     else if (direction === 'after' && toDate) {
-        newFocusedDay = min$2([toDate, newFocusedDay]);
+        newFocusedDay = min$1([toDate, newFocusedDay]);
     }
     var isFocusable = true;
     if (modifiers) {
@@ -14785,330 +14784,68 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
     return (jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
 };
 
-function getAlignment(placement) {
-  return placement.split('-')[1];
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
 }
-
-function getLengthFromAxis(axis) {
-  return axis === 'y' ? 'height' : 'width';
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
 }
-
 function getSide(placement) {
   return placement.split('-')[0];
 }
-
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
-}
-
-function computeCoordsFromPlacement(_ref, placement, rtl) {
-  let {
-    reference,
-    floating
-  } = _ref;
-  const commonX = reference.x + reference.width / 2 - floating.width / 2;
-  const commonY = reference.y + reference.height / 2 - floating.height / 2;
-  const mainAxis = getMainAxisFromPlacement(placement);
-  const length = getLengthFromAxis(mainAxis);
-  const commonAlign = reference[length] / 2 - floating[length] / 2;
-  const side = getSide(placement);
-  const isVertical = mainAxis === 'x';
-  let coords;
-  switch (side) {
-    case 'top':
-      coords = {
-        x: commonX,
-        y: reference.y - floating.height
-      };
-      break;
-    case 'bottom':
-      coords = {
-        x: commonX,
-        y: reference.y + reference.height
-      };
-      break;
-    case 'right':
-      coords = {
-        x: reference.x + reference.width,
-        y: commonY
-      };
-      break;
-    case 'left':
-      coords = {
-        x: reference.x - floating.width,
-        y: commonY
-      };
-      break;
-    default:
-      coords = {
-        x: reference.x,
-        y: reference.y
-      };
-  }
-  switch (getAlignment(placement)) {
-    case 'start':
-      coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
-    case 'end':
-      coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
-  }
-  return coords;
-}
-
-/**
- * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
- *
- * This export does not have any `platform` interface logic. You will need to
- * write one for the platform you are using Floating UI with.
- */
-const computePosition$1 = async (reference, floating, config) => {
-  const {
-    placement = 'bottom',
-    strategy = 'absolute',
-    middleware = [],
-    platform
-  } = config;
-  const validMiddleware = middleware.filter(Boolean);
-  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
-  if (process.env.NODE_ENV !== "production") {
-    if (platform == null) {
-      console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
-    }
-    if (validMiddleware.filter(_ref => {
-      let {
-        name
-      } = _ref;
-      return name === 'autoPlacement' || name === 'flip';
-    }).length > 1) {
-      throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement` middleware', 'detected. This will lead to an infinite loop. Ensure only one of', 'either has been passed to the `middleware` array.'].join(' '));
-    }
-    if (!reference || !floating) {
-      console.error(['Floating UI: The reference and/or floating element was not defined', 'when `computePosition()` was called. Ensure that both elements have', 'been created and can be measured.'].join(' '));
-    }
-  }
-  let rects = await platform.getElementRects({
-    reference,
-    floating,
-    strategy
-  });
-  let {
-    x,
-    y
-  } = computeCoordsFromPlacement(rects, placement, rtl);
-  let statefulPlacement = placement;
-  let middlewareData = {};
-  let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
-    const {
-      name,
-      fn
-    } = validMiddleware[i];
-    const {
-      x: nextX,
-      y: nextY,
-      data,
-      reset
-    } = await fn({
-      x,
-      y,
-      initialPlacement: placement,
-      placement: statefulPlacement,
-      strategy,
-      middlewareData,
-      rects,
-      platform,
-      elements: {
-        reference,
-        floating
-      }
-    });
-    x = nextX != null ? nextX : x;
-    y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
-    };
-    if (process.env.NODE_ENV !== "production") {
-      if (resetCount > 50) {
-        console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
-      }
-    }
-    if (reset && resetCount <= 50) {
-      resetCount++;
-      if (typeof reset === 'object') {
-        if (reset.placement) {
-          statefulPlacement = reset.placement;
-        }
-        if (reset.rects) {
-          rects = reset.rects === true ? await platform.getElementRects({
-            reference,
-            floating,
-            strategy
-          }) : reset.rects;
-        }
-        ({
-          x,
-          y
-        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
-      }
-      i = -1;
-      continue;
-    }
-  }
-  return {
-    x,
-    y,
-    placement: statefulPlacement,
-    strategy,
-    middlewareData
-  };
-};
-
-function expandPaddingObject(padding) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
-  };
-}
-
-function getSideObjectFromPadding(padding) {
-  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
-    top: padding,
-    right: padding,
-    bottom: padding,
-    left: padding
-  };
+function getAlignment(placement) {
+  return placement.split('-')[1];
 }
-
-function rectToClientRect(rect) {
-  return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  };
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
 }
-
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = options;
-  const paddingObject = getSideObjectFromPadding(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    ...rects.floating,
-    x,
-    y
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  if (process.env.NODE_ENV !== "production") ;
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
 }
-
-const min$1 = Math.min;
-const max$1 = Math.max;
-
-function within(min$1$1, value, max$1$1) {
-  return max$1(min$1$1, min$1(value, max$1$1));
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
 }
-
-const oppositeSideMap = {
-  left: 'right',
-  right: 'left',
-  bottom: 'top',
-  top: 'bottom'
-};
-function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
 }
-
 function getAlignmentSides(placement, rects, rtl) {
   if (rtl === void 0) {
     rtl = false;
   }
   const alignment = getAlignment(placement);
-  const mainAxis = getMainAxisFromPlacement(placement);
-  const length = getLengthFromAxis(mainAxis);
-  let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
   if (rects.reference[length] > rects.floating[length]) {
     mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
   }
-  return {
-    main: mainAlignmentSide,
-    cross: getOppositePlacement(mainAlignmentSide)
-  };
-}
-
-const oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
-function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
 }
-
 function getExpandedPlacements(placement) {
   const oppositePlacement = getOppositePlacement(placement);
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
-
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
 function getSideList(side, isStart, rtl) {
   const lr = ['left', 'right'];
   const rl = ['right', 'left'];
@@ -15137,6 +14874,494 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   }
   return list;
 }
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  // Browsers without `ShadowRoot` support.
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isContainingBlock(element) {
+  const webkit = isWebKit();
+  const css = getComputedStyle$1(element);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
+
+function activeElement(doc) {
+  let activeElement = doc.activeElement;
+  while (((_activeElement = activeElement) == null ? void 0 : (_activeElement$shadow = _activeElement.shadowRoot) == null ? void 0 : _activeElement$shadow.activeElement) != null) {
+    var _activeElement, _activeElement$shadow;
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode && child.getRootNode();
+
+  // First, attempt with faster native method
+  if (parent.contains(child)) {
+    return true;
+  }
+
+  // then fallback to custom implementation with Shadow DOM support
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      // @ts-ignore
+      next = next.parentNode || next.host;
+    }
+  }
+
+  // Give up, the result is false
+  return false;
+}
+// Avoid Chrome DevTools blue warning.
+function getPlatform() {
+  const uaData = navigator.userAgentData;
+  if (uaData != null && uaData.platform) {
+    return uaData.platform;
+  }
+  return navigator.platform;
+}
+function getUserAgent() {
+  const uaData = navigator.userAgentData;
+  if (uaData && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(_ref => {
+      let {
+        brand,
+        version
+      } = _ref;
+      return brand + "/" + version;
+    }).join(' ');
+  }
+  return navigator.userAgent;
+}
+
+// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+function isVirtualClick(event) {
+  if (event.mozInputSource === 0 && event.isTrusted) {
+    return true;
+  }
+  const androidRe = /Android/i;
+  if ((androidRe.test(getPlatform()) || androidRe.test(getUserAgent())) && event.pointerType) {
+    return event.type === 'click' && event.buttons === 1;
+  }
+  return event.detail === 0 && !event.pointerType;
+}
+function isVirtualPointerEvent(event) {
+  return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType !== 'mouse' ||
+  // iOS VoiceOver returns 0.333• for width/height.
+  event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0;
+}
+function isSafari() {
+  // Chrome DevTools does not complain about navigator.vendor
+  return /apple/i.test(navigator.vendor);
+}
+function isMouseLikePointerType(pointerType, strict) {
+  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+  const values = ['mouse', 'pen'];
+  if (!strict) {
+    values.push('', undefined);
+  }
+  return values.includes(pointerType);
+}
+function isReactEvent(event) {
+  return 'nativeEvent' in event;
+}
+function isRootElement(element) {
+  return element.matches('html,body');
+}
+function getDocument(node) {
+  return (node == null ? void 0 : node.ownerDocument) || document;
+}
+function isEventTargetWithin(event, node) {
+  if (node == null) {
+    return false;
+  }
+  if ('composedPath' in event) {
+    return event.composedPath().includes(node);
+  }
+
+  // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
+  const e = event;
+  return e.target != null && node.contains(e.target);
+}
+function getTarget(event) {
+  if ('composedPath' in event) {
+    return event.composedPath()[0];
+  }
+
+  // TS thinks `event` is of type never as it assumes all browsers support
+  // `composedPath()`, but browsers without shadow DOM don't.
+  return event.target;
+}
+const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
+function isTypeableElement(element) {
+  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+function stopEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain positioning strategy.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+      continue;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -15169,7 +15394,7 @@ const flip = function (options) {
         fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const side = getSide(placement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
@@ -15185,11 +15410,8 @@ const flip = function (options) {
         overflows.push(overflow[side]);
       }
       if (checkCrossAxis) {
-        const {
-          main,
-          cross
-        } = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[main], overflow[cross]);
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
       }
       overflowsData = [...overflowsData, {
         placement,
@@ -15248,7 +15470,9 @@ const flip = function (options) {
   };
 };
 
-async function convertValueToCoords(state, value) {
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+async function convertValueToCoords(state, options) {
   const {
     placement,
     platform,
@@ -15257,10 +15481,10 @@ async function convertValueToCoords(state, value) {
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
-  const isVertical = getMainAxisFromPlacement(placement) === 'x';
+  const isVertical = getSideAxis(placement) === 'y';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value(state) : value;
+  const rawValue = evaluate(options, state);
 
   // eslint-disable-next-line prefer-const
   let {
@@ -15296,19 +15520,19 @@ async function convertValueToCoords(state, value) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (value) {
-  if (value === void 0) {
-    value = 0;
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
   }
   return {
     name: 'offset',
-    options: value,
+    options,
     async fn(state) {
       const {
         x,
         y
       } = state;
-      const diffCoords = await convertValueToCoords(state, value);
+      const diffCoords = await convertValueToCoords(state, options);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -15318,10 +15542,6 @@ const offset = function (value) {
   };
 };
 
-function getCrossAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -15356,14 +15576,14 @@ const shift = function (options) {
           }
         },
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const coords = {
         x,
         y
       };
       const overflow = await detectOverflow(state, detectOverflowOptions);
-      const mainAxis = getMainAxisFromPlacement(getSide(placement));
-      const crossAxis = getCrossAxis(mainAxis);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
       if (checkMainAxis) {
@@ -15371,14 +15591,14 @@ const shift = function (options) {
         const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
         const min = mainAxisCoord + overflow[minSide];
         const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = within(min, mainAxisCoord, max);
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === 'y' ? 'top' : 'left';
         const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
         const min = crossAxisCoord + overflow[minSide];
         const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = within(min, crossAxisCoord, max);
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -15419,12 +15639,11 @@ const size = function (options) {
       const {
         apply = () => {},
         ...detectOverflowOptions
-      } = options;
+      } = evaluate(options, state);
       const overflow = await detectOverflow(state, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
-      const axis = getMainAxisFromPlacement(placement);
-      const isXAxis = axis === 'x';
+      const isYAxis = getSideAxis(placement) === 'y';
       const {
         width,
         height
@@ -15440,26 +15659,25 @@ const size = function (options) {
       }
       const overflowAvailableHeight = height - overflow[heightSide];
       const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if (isXAxis) {
-        availableWidth = min$1(
-        // Maximum clipping viewport width
-        width - overflow.right - overflow.left, overflowAvailableWidth);
+      if (isYAxis) {
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        availableHeight = min$1(
-        // Maximum clipping viewport height
-        height - overflow.bottom - overflow.top, overflowAvailableHeight);
-      }
-      if (!state.middlewareData.shift && !alignment) {
-        const xMin = max$1(overflow.left, 0);
-        const xMax = max$1(overflow.right, 0);
-        const yMin = max$1(overflow.top, 0);
-        const yMax = max$1(overflow.bottom, 0);
-        if (isXAxis) {
-          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right));
+        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$1(overflow.top, overflow.bottom));
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
         }
       }
       await apply({
@@ -15480,106 +15698,13 @@ const size = function (options) {
   };
 };
 
-function getWindow$1(node) {
-  var _node$ownerDocument;
-  return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-
-function getComputedStyle$1(element) {
-  return getWindow$1(element).getComputedStyle(element);
-}
-
-function isNode(value) {
-  return value instanceof getWindow$1(value).Node;
-}
-function getNodeName(node) {
-  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
-}
-
-let uaString;
-function getUAString() {
-  if (uaString) {
-    return uaString;
-  }
-  const uaData = navigator.userAgentData;
-  if (uaData && Array.isArray(uaData.brands)) {
-    uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
-    return uaString;
-  }
-  return navigator.userAgent;
-}
-
-function isHTMLElement$1(value) {
-  return value instanceof getWindow$1(value).HTMLElement;
-}
-function isElement$1(value) {
-  return value instanceof getWindow$1(value).Element;
-}
-function isShadowRoot$1(node) {
-  // Browsers without `ShadowRoot` support.
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-  const OwnElement = getWindow$1(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
-}
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
-}
-function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
-}
-function isContainingBlock(element) {
-  // TODO: Try to use feature detection here instead.
-  const isFirefox = /firefox/i.test(getUAString());
-  const css = getComputedStyle$1(element);
-  const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
-
-  // This is non-exhaustive but covers the most common CSS properties that
-  // create a containing block.
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
-    // Add type check for old browsers.
-    const contain = css.contain;
-    return contain != null ? contain.includes(value) : false;
-  });
-}
-
-/**
- * Determines whether or not `.getBoundingClientRect()` is affected by visual
- * viewport offsets. In Safari, the `x`/`y` offsets are values relative to the
- * visual viewport, while in other engines, they are values relative to the
- * layout viewport.
- */
-function isClientRectVisualViewportBased() {
-  // TODO: Try to use feature detection here instead. Feature detection for
-  // this can fail in various ways, making the userAgent check the most
-  // reliable:
-  // • Always-visible scrollbar or not
-  // • Width of <html>
-
-  // Is Safari.
-  return /^((?!chrome|android).)*safari/i.test(getUAString());
-}
-function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
-}
-
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width);
-  let height = parseFloat(css.height);
-  const hasOffset = isHTMLElement$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
   const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
@@ -15590,31 +15715,27 @@ function getCssDimensions(element) {
   return {
     width,
     height,
-    fallback: shouldFallback
+    $: shouldFallback
   };
 }
 
 function unwrapElement(element) {
-  return !isElement$1(element) ? element.contextElement : element;
+  return !isElement(element) ? element.contextElement : element;
 }
 
-const FALLBACK_SCALE = {
-  x: 1,
-  y: 1
-};
 function getScale(element) {
   const domElement = unwrapElement(element);
-  if (!isHTMLElement$1(domElement)) {
-    return FALLBACK_SCALE;
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
   }
   const rect = domElement.getBoundingClientRect();
   const {
     width,
     height,
-    fallback
+    $
   } = getCssDimensions(domElement);
-  let x = (fallback ? round(rect.width) : rect.width) / width;
-  let y = (fallback ? round(rect.height) : rect.height) / height;
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
 
   // 0, NaN, or Infinity should always fallback to 1.
 
@@ -15630,8 +15751,28 @@ function getScale(element) {
   };
 }
 
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
-  var _win$visualViewport, _win$visualViewport2;
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -15640,39 +15781,38 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale = FALLBACK_SCALE;
+  let scale = createCoords(1);
   if (includeScale) {
     if (offsetParent) {
-      if (isElement$1(offsetParent)) {
+      if (isElement(offsetParent)) {
         scale = getScale(offsetParent);
       }
     } else {
       scale = getScale(element);
     }
   }
-  const win = domElement ? getWindow$1(domElement) : window;
-  const addVisualOffsets = isClientRectVisualViewportBased() && isFixedStrategy;
-  let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
-  let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
   if (domElement) {
-    const win = getWindow$1(domElement);
-    const offsetWin = offsetParent && isElement$1(offsetParent) ? getWindow$1(offsetParent) : offsetParent;
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentIFrame = win.frameElement;
     while (currentIFrame && offsetParent && offsetWin !== win) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
-      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += iframeRect.x;
-      y += iframeRect.y;
-      currentIFrame = getWindow$1(currentIFrame).frameElement;
+      x += left;
+      y += top;
+      currentIFrame = getWindow(currentIFrame).frameElement;
     }
   }
   return rectToClientRect({
@@ -15683,30 +15823,13 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-function getDocumentElement(node) {
-  return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
-}
-
-function getNodeScroll(element) {
-  if (isElement$1(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
-  };
-}
-
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     rect,
     offsetParent,
     strategy
   } = _ref;
-  const isOffsetParentAnElement = isHTMLElement$1(offsetParent);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
   if (offsetParent === documentElement) {
     return rect;
@@ -15715,19 +15838,13 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale = {
-    x: 1,
-    y: 1
-  };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
-    if (isHTMLElement$1(offsetParent)) {
+    if (isHTMLElement(offsetParent)) {
       const offsetRect = getBoundingClientRect(offsetParent);
       scale = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -15742,6 +15859,10 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   };
 }
 
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
 function getWindowScrollBarX(element) {
   // If <html> has a CSS width greater than the viewport, then this will be
   // incorrect for RTL.
@@ -15769,51 +15890,8 @@ function getDocumentRect(element) {
   };
 }
 
-function getParentNode(node) {
-  if (getNodeName(node) === 'html') {
-    return node;
-  }
-  const result =
-  // Step into the shadow DOM of the parent of a slotted node.
-  node.assignedSlot ||
-  // DOM Element detected.
-  node.parentNode ||
-  // ShadowRoot detected.
-  isShadowRoot$1(node) && node.host ||
-  // Fallback.
-  getDocumentElement(node);
-  return isShadowRoot$1(result) ? result.host : result;
-}
-
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    // `getParentNode` will never return a `Document` due to the fallback
-    // check, so it's either the <html> or <body> element.
-    return parentNode.ownerDocument.body;
-  }
-  if (isHTMLElement$1(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-
-function getOverflowAncestors(node, list) {
-  var _node$ownerDocument;
-  if (list === void 0) {
-    list = [];
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow$1(scrollableAncestor);
-  if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
-}
-
 function getViewportRect(element, strategy) {
-  const win = getWindow$1(element);
+  const win = getWindow(element);
   const html = getDocumentElement(element);
   const visualViewport = win.visualViewport;
   let width = html.clientWidth;
@@ -15823,7 +15901,7 @@ function getViewportRect(element, strategy) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    const visualViewportBased = isClientRectVisualViewportBased();
+    const visualViewportBased = isWebKit();
     if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
@@ -15842,10 +15920,7 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement$1(element) ? getScale(element) : {
-    x: 1,
-    y: 1
-  };
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -15863,22 +15938,25 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
     rect = getViewportRect(element, strategy);
   } else if (clippingAncestor === 'document') {
     rect = getDocumentRect(getDocumentElement(element));
-  } else if (isElement$1(clippingAncestor)) {
+  } else if (isElement(clippingAncestor)) {
     rect = getInnerBoundingClientRect(clippingAncestor, strategy);
   } else {
-    const mutableRect = {
-      ...clippingAncestor
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
     };
-    if (isClientRectVisualViewportBased()) {
-      var _win$visualViewport, _win$visualViewport2;
-      const win = getWindow$1(element);
-      mutableRect.x -= ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0;
-      mutableRect.y -= ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0;
-    }
-    rect = mutableRect;
   }
   return rectToClientRect(rect);
 }
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -15888,27 +15966,25 @@ function getClippingElementAncestors(element, cache) {
   if (cachedResult) {
     return cachedResult;
   }
-  let result = getOverflowAncestors(element).filter(el => isElement$1(el) && getNodeName(el) !== 'body');
+  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
   const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  while (isElement$1(currentNode) && !isLastTraversableNode(currentNode)) {
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
-    const containingBlock = isContainingBlock(currentNode);
-    const shouldIgnoreCurrentNode = computedStyle.position === 'fixed';
-    if (shouldIgnoreCurrentNode) {
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
-      if (shouldDropCurrentNode) {
-        // Drop non-containing blocks.
-        result = result.filter(ancestor => ancestor !== currentNode);
-      } else {
-        // Record last containing block for next iteration.
-        currentContainingBlockComputedStyle = computedStyle;
-      }
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -15948,8 +16024,38 @@ function getDimensions(element) {
   return getCssDimensions(element);
 }
 
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement$1(element) || getComputedStyle$1(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -15957,23 +16063,12 @@ function getTrueOffsetParent(element, polyfill) {
   }
   return element.offsetParent;
 }
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement$1(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
-    }
-  }
-  return null;
-}
 
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
-  const window = getWindow$1(element);
-  if (!isHTMLElement$1(element)) {
+  const window = getWindow(element);
+  if (!isHTMLElement(element)) {
     return window;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
@@ -15986,67 +16081,115 @@ function getOffsetParent(element, polyfill) {
   return offsetParent || getContainingBlock(element) || window;
 }
 
-function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
-  const isOffsetParentAnElement = isHTMLElement$1(offsetParent);
-  const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
-  let scroll = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  const offsets = {
-    x: 0,
-    y: 0
-  };
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
-    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
-    }
-    if (isHTMLElement$1(offsetParent)) {
-      const offsetRect = getBoundingClientRect(offsetParent, true);
-      offsets.x = offsetRect.x + offsetParent.clientLeft;
-      offsets.y = offsetRect.y + offsetParent.clientTop;
-    } else if (documentElement) {
-      offsets.x = getWindowScrollBarX(documentElement);
-    }
-  }
+const getElementRects = async function (_ref) {
+  let {
+    reference,
+    floating,
+    strategy
+  } = _ref;
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
   return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
-    width: rect.width,
-    height: rect.height
+    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      ...(await getDimensionsFn(floating))
+    }
   };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
-  getClippingRect,
   convertOffsetParentRelativeRectToViewportRelativeRect,
-  isElement: isElement$1,
-  getDimensions,
-  getOffsetParent,
   getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
   getScale,
-  async getElementRects(_ref) {
-    let {
-      reference,
-      floating,
-      strategy
-    } = _ref;
-    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
-    const getDimensionsFn = this.getDimensions;
-    return {
-      reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
-      floating: {
-        x: 0,
-        y: 0,
-        ...(await getDimensionsFn(floating))
-      }
-    };
-  },
-  getClientRects: element => Array.from(element.getClientRects()),
-  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
+  isElement,
+  isRTL
 };
 
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
 /**
  * Automatically updates the position of the floating element when necessary.
  * Should only be called when the floating element is mounted on the DOM or
@@ -16060,29 +16203,41 @@ function autoUpdate(reference, floating, update, options) {
     options = {};
   }
   const {
-    ancestorScroll: _ancestorScroll = true,
+    ancestorScroll = true,
     ancestorResize = true,
-    elementResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
     animationFrame = false
   } = options;
-  const ancestorScroll = _ancestorScroll && !animationFrame;
-  const ancestors = ancestorScroll || ancestorResize ? [...(isElement$1(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
       passive: true
     });
     ancestorResize && ancestor.addEventListener('resize', update);
   });
-  let observer = null;
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
   if (elementResize) {
-    observer = new ResizeObserver(() => {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          resizeObserver && resizeObserver.observe(floating);
+        });
+      }
       update();
     });
-    isElement$1(reference) && !animationFrame && observer.observe(reference);
-    if (!isElement$1(reference) && reference.contextElement && !animationFrame) {
-      observer.observe(reference.contextElement);
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
     }
-    observer.observe(floating);
+    resizeObserver.observe(floating);
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -16099,13 +16254,13 @@ function autoUpdate(reference, floating, update, options) {
   }
   update();
   return () => {
-    var _observer;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
     });
-    (_observer = observer) == null ? void 0 : _observer.disconnect();
-    observer = null;
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
     if (animationFrame) {
       cancelAnimationFrame(frameId);
     }
@@ -16168,7 +16323,7 @@ function deepEqual(a, b) {
       return false;
     }
     for (i = length; i-- !== 0;) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
         return false;
       }
     }
@@ -16186,6 +16341,19 @@ function deepEqual(a, b) {
   return a !== a && b !== b;
 }
 
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
 function useLatestRef$1(value) {
   const ref = React.useRef(value);
   index$1(() => {
@@ -16207,12 +16375,17 @@ function useFloating$1(options) {
     strategy = 'absolute',
     middleware = [],
     platform,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
     whileElementsMounted,
     open
   } = options;
   const [data, setData] = React.useState({
-    x: null,
-    y: null,
+    x: 0,
+    y: 0,
     strategy,
     placement,
     middlewareData: {},
@@ -16222,25 +16395,27 @@ function useFloating$1(options) {
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const referenceRef = React.useRef(null);
-  const floatingRef = React.useRef(null);
-  const dataRef = React.useRef(data);
-  const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
-  const platformRef = useLatestRef$1(platform);
-  const [reference, _setReference] = React.useState(null);
-  const [floating, _setFloating] = React.useState(null);
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
   const setReference = React.useCallback(node => {
-    if (referenceRef.current !== node) {
+    if (node != referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
-  }, []);
+  }, [_setReference]);
   const setFloating = React.useCallback(node => {
-    if (floatingRef.current !== node) {
+    if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
     }
-  }, []);
+  }, [_setFloating]);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
+  const platformRef = useLatestRef$1(platform);
   const update = React.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
@@ -16283,14 +16458,16 @@ function useFloating$1(options) {
     };
   }, []);
   index$1(() => {
-    if (reference && floating) {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
       if (whileElementsMountedRef.current) {
-        return whileElementsMountedRef.current(reference, floating, update);
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
       } else {
         update();
       }
     }
-  }, [reference, floating, update, whileElementsMountedRef]);
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
   const refs = React.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
@@ -16298,147 +16475,44 @@ function useFloating$1(options) {
     setFloating
   }), [setReference, setFloating]);
   const elements = React.useMemo(() => ({
-    reference,
-    floating
-  }), [reference, floating]);
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
+    };
+    if (!elements.floating) {
+      return initialStyles;
+    }
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...(getDPR(elements.floating) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy,
+      left: x,
+      top: y
+    };
+  }, [strategy, transform, elements.floating, data.x, data.y]);
   return React.useMemo(() => ({
     ...data,
     update,
     refs,
     elements,
-    reference: setReference,
-    floating: setFloating
-  }), [data, update, refs, elements, setReference, setFloating]);
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
 }
 
-var getDefaultParent = function (originalTarget) {
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
-    return sampleTarget.ownerDocument.body;
-};
-var counterMap = new WeakMap();
-var uncontrolledNodes = new WeakMap();
-var markerMap = {};
-var lockCount = 0;
-var unwrapHost = function (node) {
-    return node && (node.host || unwrapHost(node.parentNode));
-};
-var correctTargets = function (parent, targets) {
-    return targets.map(function (target) {
-        if (parent.contains(target)) {
-            return target;
-        }
-        var correctedTarget = unwrapHost(target);
-        if (correctedTarget && parent.contains(correctedTarget)) {
-            return correctedTarget;
-        }
-        console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
-        return null;
-    }).filter(function (x) { return Boolean(x); });
-};
-/**
- * Marks everything except given node(or nodes) as aria-hidden
- * @param {Element | Element[]} originalTarget - elements to keep on the page
- * @param [parentNode] - top element, defaults to document.body
- * @param {String} [markerName] - a special attribute to mark every node
- * @param {String} [controlAttribute] - html Attribute to control
- * @return {Undo} undo command
- */
-var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
-    var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-    if (!markerMap[markerName]) {
-        markerMap[markerName] = new WeakMap();
-    }
-    var markerCounter = markerMap[markerName];
-    var hiddenNodes = [];
-    var elementsToKeep = new Set();
-    var elementsToStop = new Set(targets);
-    var keep = function (el) {
-        if (!el || elementsToKeep.has(el)) {
-            return;
-        }
-        elementsToKeep.add(el);
-        keep(el.parentNode);
-    };
-    targets.forEach(keep);
-    var deep = function (parent) {
-        if (!parent || elementsToStop.has(parent)) {
-            return;
-        }
-        Array.prototype.forEach.call(parent.children, function (node) {
-            if (elementsToKeep.has(node)) {
-                deep(node);
-            }
-            else {
-                var attr = node.getAttribute(controlAttribute);
-                var alreadyHidden = attr !== null && attr !== 'false';
-                var counterValue = (counterMap.get(node) || 0) + 1;
-                var markerValue = (markerCounter.get(node) || 0) + 1;
-                counterMap.set(node, counterValue);
-                markerCounter.set(node, markerValue);
-                hiddenNodes.push(node);
-                if (counterValue === 1 && alreadyHidden) {
-                    uncontrolledNodes.set(node, true);
-                }
-                if (markerValue === 1) {
-                    node.setAttribute(markerName, 'true');
-                }
-                if (!alreadyHidden) {
-                    node.setAttribute(controlAttribute, 'true');
-                }
-            }
-        });
-    };
-    deep(parentNode);
-    elementsToKeep.clear();
-    lockCount++;
-    return function () {
-        hiddenNodes.forEach(function (node) {
-            var counterValue = counterMap.get(node) - 1;
-            var markerValue = markerCounter.get(node) - 1;
-            counterMap.set(node, counterValue);
-            markerCounter.set(node, markerValue);
-            if (!counterValue) {
-                if (!uncontrolledNodes.has(node)) {
-                    node.removeAttribute(controlAttribute);
-                }
-                uncontrolledNodes.delete(node);
-            }
-            if (!markerValue) {
-                node.removeAttribute(markerName);
-            }
-        });
-        lockCount--;
-        if (!lockCount) {
-            // clear
-            counterMap = new WeakMap();
-            counterMap = new WeakMap();
-            uncontrolledNodes = new WeakMap();
-            markerMap = {};
-        }
-    };
-};
-/**
- * Marks everything except given node(or nodes) as aria-hidden
- * @param {Element | Element[]} originalTarget - elements to keep on the page
- * @param [parentNode] - top element, defaults to document.body
- * @param {String} [markerName] - a special attribute to mark every node
- * @return {Undo} undo command
- */
-var hideOthers = function (originalTarget, parentNode, markerName) {
-    if (markerName === void 0) { markerName = 'data-aria-hidden'; }
-    var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-    var activeParentNode = parentNode || getDefaultParent(originalTarget);
-    if (!activeParentNode) {
-        return function () { return null; };
-    }
-    // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
-    targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
-    return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
-};
-
 /*!
 * tabbable 6.0.1
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -16861,8 +16935,53 @@ var tabbable = function tabbable(el, options) {
   return sortByOrder(candidates);
 };
 
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * @see https://floating-ui.com/docs/useMergeRefs
+ */
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return value => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          ref.current = value;
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+let rafId = 0;
+function enqueueFocus(el, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    preventScroll = false,
+    cancelPrevious = true,
+    sync = false
+  } = options;
+  cancelPrevious && cancelAnimationFrame(rafId);
+  const exec = () => el == null ? void 0 : el.focus({
+    preventScroll
+  });
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+}
+
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -16876,8 +16995,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
-
 let serverHandoffComplete = false;
 let count = 0;
 const genId = () => "floating-ui-" + count++;
@@ -16933,105 +17050,8 @@ const useFloatingParentNodeId = () => {
 };
 const useFloatingTree = () => React.useContext(FloatingTreeContext);
 
-function getDocument(node) {
-  return (node == null ? void 0 : node.ownerDocument) || document;
-}
-
-// Avoid Chrome DevTools blue warning.
-function getPlatform() {
-  const uaData = navigator.userAgentData;
-  if (uaData != null && uaData.platform) {
-    return uaData.platform;
-  }
-  return navigator.platform;
-}
-function getUserAgent() {
-  const uaData = navigator.userAgentData;
-  if (uaData && Array.isArray(uaData.brands)) {
-    return uaData.brands.map(_ref => {
-      let {
-        brand,
-        version
-      } = _ref;
-      return brand + "/" + version;
-    }).join(' ');
-  }
-  return navigator.userAgent;
-}
-
-function getWindow(value) {
-  return getDocument(value).defaultView || window;
-}
-function isElement(value) {
-  return value ? value instanceof getWindow(value).Element : false;
-}
-function isHTMLElement(value) {
-  return value ? value instanceof getWindow(value).HTMLElement : false;
-}
-function isShadowRoot(node) {
-  // Browsers without `ShadowRoot` support
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-  const OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
-}
-
-// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
-function isVirtualClick(event) {
-  if (event.mozInputSource === 0 && event.isTrusted) {
-    return true;
-  }
-  const androidRe = /Android/i;
-  if ((androidRe.test(getPlatform()) || androidRe.test(getUserAgent())) && event.pointerType) {
-    return event.type === 'click' && event.buttons === 1;
-  }
-  return event.detail === 0 && !event.pointerType;
-}
-function isVirtualPointerEvent(event) {
-  return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType !== 'mouse' ||
-  // iOS VoiceOver returns 0.333• for width/height.
-  event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0;
-}
-function isSafari() {
-  // Chrome DevTools does not complain about navigator.vendor
-  return /apple/i.test(navigator.vendor);
-}
-function isMouseLikePointerType(pointerType, strict) {
-  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
-  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
-  const values = ['mouse', 'pen'];
-  if (!strict) {
-    values.push('', undefined);
-  }
-  return values.includes(pointerType);
-}
-
-function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode && child.getRootNode();
-
-  // First, attempt with faster native method
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      // @ts-ignore
-      next = next.parentNode || next.host;
-    }
-  }
-
-  // Give up, the result is false
-  return false;
+function createAttribute(name) {
+  return "data-floating-ui-" + name;
 }
 
 function useLatestRef(value) {
@@ -17042,7 +17062,7 @@ function useLatestRef(value) {
   return ref;
 }
 
-const safePolygonIdentifier = 'data-floating-ui-safe-polygon';
+const safePolygonIdentifier = /*#__PURE__*/createAttribute('safe-polygon');
 function getDelay(value, prop, pointerType) {
   if (pointerType && !isMouseLikePointerType(pointerType)) {
     return 0;
@@ -17057,7 +17077,7 @@ function getDelay(value, prop, pointerType) {
  * CSS `:hover`.
  * @see https://floating-ui.com/docs/useHover
  */
-const useHover$1 = function (context, props) {
+function useHover$1(context, props) {
   if (props === void 0) {
     props = {};
   }
@@ -17117,9 +17137,9 @@ const useHover$1 = function (context, props) {
     if (!enabled || !handleCloseRef.current || !open) {
       return;
     }
-    function onLeave() {
+    function onLeave(event) {
       if (isHoverOpen()) {
-        onOpenChange(false);
+        onOpenChange(false, event);
       }
     }
     const html = getDocument(floating).documentElement;
@@ -17128,17 +17148,17 @@ const useHover$1 = function (context, props) {
       html.removeEventListener('mouseleave', onLeave);
     };
   }, [floating, open, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
-  const closeWithDelay = React.useCallback(function (runElseBranch) {
+  const closeWithDelay = React.useCallback(function (event, runElseBranch) {
     if (runElseBranch === void 0) {
       runElseBranch = true;
     }
     const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
     if (closeDelay && !handlerRef.current) {
       clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => onOpenChange(false), closeDelay);
+      timeoutRef.current = setTimeout(() => onOpenChange(false, event), closeDelay);
     } else if (runElseBranch) {
       clearTimeout(timeoutRef.current);
-      onOpenChange(false);
+      onOpenChange(false, event);
     }
   }, [delayRef, onOpenChange]);
   const cleanupMouseMoveHandler = React.useCallback(() => {
@@ -17170,14 +17190,13 @@ const useHover$1 = function (context, props) {
       if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
         return;
       }
-      dataRef.current.openEvent = event;
       const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
       if (openDelay) {
         timeoutRef.current = setTimeout(() => {
-          onOpenChange(true);
+          onOpenChange(true, event);
         }, openDelay);
       } else {
-        onOpenChange(true);
+        onOpenChange(true, event);
       }
     }
     function onMouseLeave(event) {
@@ -17200,7 +17219,8 @@ const useHover$1 = function (context, props) {
           onClose() {
             clearPointerEvents();
             cleanupMouseMoveHandler();
-            closeWithDelay();
+            // Should the event expose that it was closed by `safePolygon`?
+            closeWithDelay(event);
           }
         });
         const handler = handlerRef.current;
@@ -17216,7 +17236,7 @@ const useHover$1 = function (context, props) {
       // consistently.
       const shouldClose = pointerTypeRef.current === 'touch' ? !contains(floating, event.relatedTarget) : true;
       if (shouldClose) {
-        closeWithDelay();
+        closeWithDelay(event);
       }
     }
 
@@ -17235,7 +17255,7 @@ const useHover$1 = function (context, props) {
         onClose() {
           clearPointerEvents();
           cleanupMouseMoveHandler();
-          closeWithDelay();
+          closeWithDelay(event);
         }
       })(event);
     }
@@ -17302,7 +17322,7 @@ const useHover$1 = function (context, props) {
       clearTimeout(restTimeoutRef.current);
       clearPointerEvents();
     };
-  }, [enabled, cleanupMouseMoveHandler, clearPointerEvents]);
+  }, [enabled, domReference, cleanupMouseMoveHandler, clearPointerEvents]);
   return React.useMemo(() => {
     if (!enabled) {
       return {};
@@ -17314,14 +17334,14 @@ const useHover$1 = function (context, props) {
       reference: {
         onPointerDown: setPointerRef,
         onPointerEnter: setPointerRef,
-        onMouseMove() {
+        onMouseMove(event) {
           if (open || restMs === 0) {
             return;
           }
           clearTimeout(restTimeoutRef.current);
           restTimeoutRef.current = setTimeout(() => {
             if (!blockMouseMoveRef.current) {
-              onOpenChange(true);
+              onOpenChange(true, event.nativeEvent);
             }
           }, restMs);
         }
@@ -17330,51 +17350,18 @@ const useHover$1 = function (context, props) {
         onMouseEnter() {
           clearTimeout(timeoutRef.current);
         },
-        onMouseLeave() {
+        onMouseLeave(event) {
           events.emit('dismiss', {
             type: 'mouseLeave',
             data: {
               returnFocus: false
             }
           });
-          closeWithDelay(false);
+          closeWithDelay(event.nativeEvent, false);
         }
       }
     };
   }, [events, enabled, restMs, open, onOpenChange, closeWithDelay]);
-};
-
-/**
- * Find the real active element. Traverses into shadowRoots.
- */
-function activeElement(doc) {
-  let activeElement = doc.activeElement;
-  while (((_activeElement = activeElement) == null ? void 0 : (_activeElement$shadow = _activeElement.shadowRoot) == null ? void 0 : _activeElement$shadow.activeElement) != null) {
-    var _activeElement, _activeElement$shadow;
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-}
-
-let rafId = 0;
-function enqueueFocus(el, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    preventScroll = false,
-    cancelPrevious = true,
-    sync = false
-  } = options;
-  cancelPrevious && cancelAnimationFrame(rafId);
-  const exec = () => el == null ? void 0 : el.focus({
-    preventScroll
-  });
-  if (sync) {
-    exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
-  }
 }
 
 function getAncestors(nodes, id) {
@@ -17410,24 +17397,107 @@ function getChildren(nodes, id) {
   return allChildren;
 }
 
-function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
+// Modified to add conditional `aria-hidden` support:
+// https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
+let counterMap = /*#__PURE__*/new WeakMap();
+let uncontrolledElementsSet = /*#__PURE__*/new WeakSet();
+let markerMap = {};
+let lockCount = 0;
+const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
+const correctElements = (parent, targets) => targets.map(target => {
+  if (parent.contains(target)) {
+    return target;
   }
-
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
-  return event.target;
-}
-
-const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
-function isTypeableElement(element) {
-  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+  const correctedTarget = unwrapHost(target);
+  if (parent.contains(correctedTarget)) {
+    return correctedTarget;
+  }
+  return null;
+}).filter(x => x != null);
+function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
+  const markerName = 'data-floating-ui-inert';
+  const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const elementsToKeep = new Set();
+  const elementsToStop = new Set(avoidElements);
+  const hiddenElements = [];
+  if (!markerMap[markerName]) {
+    markerMap[markerName] = new WeakMap();
+  }
+  const markerCounter = markerMap[markerName];
+  avoidElements.forEach(keep);
+  deep(body);
+  elementsToKeep.clear();
+  function keep(el) {
+    if (!el || elementsToKeep.has(el)) {
+      return;
+    }
+    elementsToKeep.add(el);
+    el.parentNode && keep(el.parentNode);
+  }
+  function deep(parent) {
+    if (!parent || elementsToStop.has(parent)) {
+      return;
+    }
+    Array.prototype.forEach.call(parent.children, node => {
+      if (elementsToKeep.has(node)) {
+        deep(node);
+      } else {
+        const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
+        const alreadyHidden = attr !== null && attr !== 'false';
+        const counterValue = (counterMap.get(node) || 0) + 1;
+        const markerValue = (markerCounter.get(node) || 0) + 1;
+        counterMap.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenElements.push(node);
+        if (counterValue === 1 && alreadyHidden) {
+          uncontrolledElementsSet.add(node);
+        }
+        if (markerValue === 1) {
+          node.setAttribute(markerName, '');
+        }
+        if (!alreadyHidden && controlAttribute) {
+          node.setAttribute(controlAttribute, 'true');
+        }
+      }
+    });
+  }
+  lockCount++;
+  return () => {
+    hiddenElements.forEach(element => {
+      const counterValue = (counterMap.get(element) || 0) - 1;
+      const markerValue = (markerCounter.get(element) || 0) - 1;
+      counterMap.set(element, counterValue);
+      markerCounter.set(element, markerValue);
+      if (!counterValue) {
+        if (!uncontrolledElementsSet.has(element) && controlAttribute) {
+          element.removeAttribute(controlAttribute);
+        }
+        uncontrolledElementsSet.delete(element);
+      }
+      if (!markerValue) {
+        element.removeAttribute(markerName);
+      }
+    });
+    lockCount--;
+    if (!lockCount) {
+      counterMap = new WeakMap();
+      counterMap = new WeakMap();
+      uncontrolledElementsSet = new WeakSet();
+      markerMap = {};
+    }
+  };
 }
-
-function stopEvent(event) {
-  event.preventDefault();
-  event.stopPropagation();
+function markOthers(avoidElements, ariaHidden, inert) {
+  if (ariaHidden === void 0) {
+    ariaHidden = false;
+  }
+  if (inert === void 0) {
+    inert = false;
+  }
+  const body = getDocument(avoidElements[0]).body;
+  return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
 }
 
 const getTabbableOptions = () => ({
@@ -17517,20 +17587,20 @@ const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref)
       document.removeEventListener('keydown', setActiveElementOnTab);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    ref: ref,
-    tabIndex: 0
+  const restProps = {
+    ref,
+    tabIndex: 0,
     // Role is only for VoiceOver
-    ,
-    role: role,
-    "aria-hidden": role ? undefined : true,
-    "data-floating-ui-focus-guard": "",
+    role,
+    'aria-hidden': role ? undefined : true,
+    [createAttribute('focus-guard')]: '',
     style: HIDDEN_STYLES
-  }));
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, restProps));
 });
 
 const PortalContext = /*#__PURE__*/React.createContext(null);
-const useFloatingPortalNode = function (_temp) {
+function useFloatingPortalNode(_temp) {
   let {
     id,
     root
@@ -17538,20 +17608,39 @@ const useFloatingPortalNode = function (_temp) {
   const [portalNode, setPortalNode] = React.useState(null);
   const uniqueId = useId();
   const portalContext = usePortalContext();
+  const data = React.useMemo(() => ({
+    id,
+    root,
+    portalContext,
+    uniqueId
+  }), [id, root, portalContext, uniqueId]);
+  const dataRef = React.useRef();
   index(() => {
+    return () => {
+      portalNode == null ? void 0 : portalNode.remove();
+    };
+  }, [portalNode, data]);
+  index(() => {
+    if (dataRef.current === data) return;
+    dataRef.current = data;
+    const {
+      id,
+      root,
+      portalContext,
+      uniqueId
+    } = data;
     const existingIdRoot = id ? document.getElementById(id) : null;
-    const attr = 'data-floating-ui-portal';
+    const attr = createAttribute('portal');
     if (existingIdRoot) {
       const subRoot = document.createElement('div');
       subRoot.id = uniqueId;
       subRoot.setAttribute(attr, '');
       existingIdRoot.appendChild(subRoot);
       setPortalNode(subRoot);
-      return () => {
-        subRoot.remove();
-      };
     } else {
-      let container = (portalContext == null ? void 0 : portalContext.portalNode) || root || document.body;
+      let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
+      if (container && !isElement(container)) container = container.current;
+      container = container || document.body;
       let idWrapper = null;
       if (id) {
         idWrapper = document.createElement('div');
@@ -17561,25 +17650,19 @@ const useFloatingPortalNode = function (_temp) {
       const subRoot = document.createElement('div');
       subRoot.id = uniqueId;
       subRoot.setAttribute(attr, '');
-      setPortalNode(subRoot);
       container = idWrapper || container;
       container.appendChild(subRoot);
-      return () => {
-        var _idWrapper;
-        subRoot.remove();
-        (_idWrapper = idWrapper) == null ? void 0 : _idWrapper.remove();
-      };
+      setPortalNode(subRoot);
     }
-  }, [id, root, portalContext, uniqueId]);
+  }, [data]);
   return portalNode;
-};
-
+}
 /**
  * Portals the floating element into a given container element — by default,
  * outside of the app root and into the body.
  * @see https://floating-ui.com/docs/FloatingPortal
  */
-const FloatingPortal = _ref => {
+function FloatingPortal(_ref) {
   let {
     children,
     id,
@@ -17600,7 +17683,9 @@ const FloatingPortal = _ref => {
   // rendered.
   !!focusManagerState &&
   // Guards are only for non-modal focus management.
-  !focusManagerState.modal && !!(root || portalNode) && preserveTabOrder;
+  !focusManagerState.modal &&
+  // Don't render if unmount is transitioning.
+  focusManagerState.open && preserveTabOrder && !!(root || portalNode);
 
   // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
   React.useEffect(() => {
@@ -17662,11 +17747,11 @@ const FloatingPortal = _ref => {
       } else {
         const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
         nextTabbable == null ? void 0 : nextTabbable.focus();
-        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false));
+        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent));
       }
     }
   }));
-};
+}
 const usePortalContext = () => React.useContext(PortalContext);
 
 const VisuallyHiddenDismiss = /*#__PURE__*/React.forwardRef(function VisuallyHiddenDismiss(props, ref) {
@@ -17681,18 +17766,19 @@ const VisuallyHiddenDismiss = /*#__PURE__*/React.forwardRef(function VisuallyHid
  * Provides focus management for the floating element.
  * @see https://floating-ui.com/docs/FloatingFocusManager
  */
-function FloatingFocusManager(_ref) {
-  let {
+function FloatingFocusManager(props) {
+  const {
     context,
     children,
+    disabled = false,
     order = ['content'],
-    guards = true,
+    guards: _guards = true,
     initialFocus = 0,
     returnFocus = true,
     modal = true,
     visuallyHiddenDismiss = false,
     closeOnFocusOut = true
-  } = _ref;
+  } = props;
   const {
     open,
     refs,
@@ -17705,12 +17791,14 @@ function FloatingFocusManager(_ref) {
       floating
     }
   } = context;
+
+  // Force the guards to be rendered if the `inert` attribute is not supported.
+  const guards = supportsInert() ? _guards : true;
   const orderRef = useLatestRef(order);
   const initialFocusRef = useLatestRef(initialFocus);
   const returnFocusRef = useLatestRef(returnFocus);
   const tree = useFloatingTree();
   const portalContext = usePortalContext();
-  const [tabbableContentLength, setTabbableContentLength] = React.useState(null);
 
   // Controlled by `useListNavigation`.
   const ignoreInitialFocus = typeof initialFocus === 'number' && initialFocus < 0;
@@ -17726,7 +17814,7 @@ function FloatingFocusManager(_ref) {
   // aria-hidden should be applied to all nodes still. Further, the visually
   // hidden dismiss button should only appear at the end of the list, not the
   // start.
-  const isTypeableCombobox = domReference && domReference.getAttribute('role') === 'combobox' && isTypeableElement(domReference);
+  const isUntrappedTypeableCombobox = domReference && domReference.getAttribute('role') === 'combobox' && isTypeableElement(domReference) && ignoreInitialFocus;
   const getTabbableContent = React.useCallback(function (container) {
     if (container === void 0) {
       container = floating;
@@ -17746,13 +17834,11 @@ function FloatingFocusManager(_ref) {
     }).filter(Boolean).flat();
   }, [domReference, floating, orderRef, getTabbableContent]);
   React.useEffect(() => {
-    if (!modal) {
-      return;
-    }
+    if (disabled || !modal) return;
     function onKeyDown(event) {
       if (event.key === 'Tab') {
         // The focus guards have nothing to focus, so we need to stop the event.
-        if (getTabbableContent().length === 0 && !isTypeableCombobox) {
+        if (contains(floating, activeElement(getDocument(floating))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           stopEvent(event);
         }
         const els = getTabbableElements();
@@ -17776,11 +17862,9 @@ function FloatingFocusManager(_ref) {
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
-  }, [domReference, floating, modal, orderRef, refs, isTypeableCombobox, getTabbableContent, getTabbableElements]);
+  }, [disabled, domReference, floating, modal, orderRef, refs, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
   React.useEffect(() => {
-    if (!closeOnFocusOut) {
-      return;
-    }
+    if (disabled || !closeOnFocusOut) return;
 
     // In Safari, buttons lose focus when pressing them.
     function handlePointerDown() {
@@ -17791,22 +17875,24 @@ function FloatingFocusManager(_ref) {
     }
     function handleFocusOutside(event) {
       const relatedTarget = event.relatedTarget;
-      const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute('data-floating-ui-focus-guard') || tree && (getChildren(tree.nodesRef.current, nodeId).find(node => {
-        var _node$context, _node$context2;
-        return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
-      }) || getAncestors(tree.nodesRef.current, nodeId).find(node => {
-        var _node$context3, _node$context4;
-        return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
-      })));
-
-      // Focus did not move inside the floating tree, and there are no tabbable
-      // portal guards to handle closing.
-      if (relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
-      // Fix React 18 Strict Mode returnFocus due to double rendering.
-      relatedTarget !== previouslyFocusedElementRef.current) {
-        preventReturnFocusRef.current = true;
-        onOpenChange(false);
-      }
+      queueMicrotask(() => {
+        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute('focus-guard')) || tree && (getChildren(tree.nodesRef.current, nodeId).find(node => {
+          var _node$context, _node$context2;
+          return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
+        }) || getAncestors(tree.nodesRef.current, nodeId).find(node => {
+          var _node$context3, _node$context4;
+          return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
+        })));
+
+        // Focus did not move inside the floating tree, and there are no tabbable
+        // portal guards to handle closing.
+        if (relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
+        // Fix React 18 Strict Mode returnFocus due to double rendering.
+        relatedTarget !== previouslyFocusedElementRef.current) {
+          preventReturnFocusRef.current = true;
+          onOpenChange(false, event);
+        }
+      });
     }
     if (floating && isHTMLElement(domReference)) {
       domReference.addEventListener('focusout', handleFocusOutside);
@@ -17818,63 +17904,46 @@ function FloatingFocusManager(_ref) {
         !modal && floating.removeEventListener('focusout', handleFocusOutside);
       };
     }
-  }, [domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
+  }, [disabled, domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
   React.useEffect(() => {
     var _portalContext$portal;
+    if (disabled) return;
+
     // Don't hide portals nested within the parent portal.
-    const portalNodes = Array.from((portalContext == null ? void 0 : (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll('[data-floating-ui-portal]')) || []);
-    function getDismissButtons() {
-      return [startDismissButtonRef.current, endDismissButtonRef.current].filter(Boolean);
-    }
-    if (floating && modal) {
-      const insideNodes = [floating, ...portalNodes, ...getDismissButtons()];
-      const cleanup = hideOthers(orderRef.current.includes('reference') || isTypeableCombobox ? insideNodes.concat(domReference || []) : insideNodes);
+    const portalNodes = Array.from((portalContext == null ? void 0 : (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute('portal') + "]")) || []);
+    if (floating) {
+      const insideElements = [floating, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, orderRef.current.includes('reference') || isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+      const cleanup = modal ? markOthers(insideElements, guards, !guards) : markOthers(insideElements);
       return () => {
         cleanup();
       };
     }
-  }, [domReference, floating, modal, orderRef, portalContext, isTypeableCombobox]);
-  React.useEffect(() => {
-    if (modal && !guards && floating) {
-      const tabIndexValues = [];
-      const options = getTabbableOptions();
-      const allTabbable = tabbable(getDocument(floating).body, options);
-      const floatingTabbable = getTabbableElements();
-
-      // Exclude all tabbable elements that are part of the order
-      const elements = allTabbable.filter(el => !floatingTabbable.includes(el));
-      elements.forEach((el, i) => {
-        tabIndexValues[i] = el.getAttribute('tabindex');
-        el.setAttribute('tabindex', '-1');
-      });
-      return () => {
-        elements.forEach((el, i) => {
-          const value = tabIndexValues[i];
-          if (value == null) {
-            el.removeAttribute('tabindex');
-          } else {
-            el.setAttribute('tabindex', value);
-          }
-        });
-      };
-    }
-  }, [floating, modal, guards, getTabbableElements]);
+  }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
   index(() => {
-    if (!floating) return;
+    if (disabled || !floating) return;
     const doc = getDocument(floating);
+    const previouslyFocusedElement = activeElement(doc);
+
+    // Wait for any layout effect state setters to execute to set `tabIndex`.
+    queueMicrotask(() => {
+      const focusableElements = getTabbableElements(floating);
+      const initialFocusValue = initialFocusRef.current;
+      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
+      const focusAlreadyInsideFloatingEl = contains(floating, previouslyFocusedElement);
+      if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
+        enqueueFocus(elToFocus, {
+          preventScroll: elToFocus === floating
+        });
+      }
+    });
+  }, [disabled, open, floating, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
+  index(() => {
+    if (disabled || !floating) return;
     let preventReturnFocusScroll = false;
+    const doc = getDocument(floating);
     const previouslyFocusedElement = activeElement(doc);
     const contextData = dataRef.current;
-    const initialFocusValue = initialFocusRef.current;
     previouslyFocusedElementRef.current = previouslyFocusedElement;
-    const focusableElements = getTabbableElements(floating);
-    const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
-
-    // If the `useListNavigation` hook is active, always ignore `initialFocus`
-    // because it has its own handling of the initial focus.
-    !ignoreInitialFocus && open && enqueueFocus(elToFocus, {
-      preventScroll: elToFocus === floating
-    });
 
     // Dismissing via outside press should always ignore `returnFocus` to
     // prevent unwanted scrolling.
@@ -17907,8 +17976,6 @@ function FloatingFocusManager(_ref) {
       if (
       // eslint-disable-next-line react-hooks/exhaustive-deps
       returnFocusRef.current && isHTMLElement(previouslyFocusedElementRef.current) && !preventReturnFocusRef.current) {
-        // `isPointerDownRef.current` to avoid the focus ring from appearing on
-        // the reference element when click-toggling it.
         enqueueFocus(previouslyFocusedElementRef.current, {
           // When dismissing nested floating elements, by the time the rAF has
           // executed, the menus will all have been unmounted. When they try
@@ -17919,49 +17986,58 @@ function FloatingFocusManager(_ref) {
         });
       }
     };
-  }, [open, floating, getTabbableElements, returnFocusRef, initialFocusRef, dataRef, refs, events, ignoreInitialFocus, tree, nodeId]);
+  }, [disabled, floating, returnFocusRef, dataRef, refs, events, tree, nodeId]);
 
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
   index(() => {
-    if (!portalContext) return;
+    if (disabled || !portalContext) return;
     portalContext.setFocusManagerState({
-      ...context,
       modal,
-      closeOnFocusOut
-      // Not concerned about the <RT> generic type.
+      closeOnFocusOut,
+      open,
+      onOpenChange,
+      refs
     });
-
     return () => {
       portalContext.setFocusManagerState(null);
     };
-  }, [portalContext, modal, closeOnFocusOut, context]);
+  }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
   index(() => {
-    if (ignoreInitialFocus || !floating) return;
-    function setState() {
-      if (activeElement(getDocument(floating)) !== refs.domReference.current) {
-        setTabbableContentLength(getTabbableContent().length);
-      }
-    }
-    setState();
-    if (typeof MutationObserver === 'function') {
-      const observer = new MutationObserver(setState);
+    if (disabled) return;
+    if (floating && typeof MutationObserver === 'function' && !ignoreInitialFocus) {
+      const handleMutation = () => {
+        const tabIndex = floating.getAttribute('tabindex');
+        if (orderRef.current.includes('floating') || activeElement(getDocument(floating)) !== refs.domReference.current && getTabbableContent().length === 0) {
+          if (tabIndex !== '0') {
+            floating.setAttribute('tabindex', '0');
+          }
+        } else if (tabIndex !== '-1') {
+          floating.setAttribute('tabindex', '-1');
+        }
+      };
+      handleMutation();
+      const observer = new MutationObserver(handleMutation);
       observer.observe(floating, {
         childList: true,
-        subtree: true
+        subtree: true,
+        attributes: true
       });
       return () => {
         observer.disconnect();
       };
     }
-  }, [floating, getTabbableContent, ignoreInitialFocus, refs]);
-  const shouldRenderGuards = guards && (isInsidePortal || modal) && !isTypeableCombobox;
+  }, [disabled, floating, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
   function renderDismissButton(location) {
-    return visuallyHiddenDismiss && modal ? /*#__PURE__*/React.createElement(VisuallyHiddenDismiss, {
+    if (disabled || !visuallyHiddenDismiss || !modal) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(VisuallyHiddenDismiss, {
       ref: location === 'start' ? startDismissButtonRef : endDismissButtonRef,
-      onClick: () => onOpenChange(false)
-    }, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss') : null;
+      onClick: event => onOpenChange(false, event.nativeEvent)
+    }, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss');
   }
+  const shouldRenderGuards = !disabled && guards && !isUntrappedTypeableCombobox && (isInsidePortal || modal);
   return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
     "data-type": "inside",
     ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
@@ -17980,9 +18056,7 @@ function FloatingFocusManager(_ref) {
         }
       }
     }
-  }), isTypeableCombobox ? null : renderDismissButton('start'), /*#__PURE__*/React.cloneElement(children, tabbableContentLength === 0 || order.includes('floating') ? {
-    tabIndex: 0
-  } : {}), renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
+  }), !isUntrappedTypeableCombobox && renderDismissButton('start'), children, renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
     "data-type": "inside",
     ref: portalContext == null ? void 0 : portalContext.afterInsideRef,
     onFocus: event => {
@@ -18014,7 +18088,7 @@ function isSpaceIgnored(element) {
  * Opens or closes the floating element when clicking the reference element.
  * @see https://floating-ui.com/docs/useClick
  */
-const useClick = function (context, props) {
+function useClick(context, props) {
   if (props === void 0) {
     props = {};
   }
@@ -18034,10 +18108,9 @@ const useClick = function (context, props) {
     keyboardHandlers = true
   } = props;
   const pointerTypeRef = React.useRef();
+  const didKeyDownRef = React.useRef(false);
   return React.useMemo(() => {
-    if (!enabled) {
-      return {};
-    }
+    if (!enabled) return {};
     return {
       reference: {
         onPointerDown(event) {
@@ -18055,16 +18128,13 @@ const useClick = function (context, props) {
           if (eventOption === 'click') {
             return;
           }
-          if (open) {
-            if (toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
-              onOpenChange(false);
-            }
+          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+            onOpenChange(false, event.nativeEvent);
           } else {
             // Prevent stealing focus from the floating element
             event.preventDefault();
-            onOpenChange(true);
+            onOpenChange(true, event.nativeEvent);
           }
-          dataRef.current.openEvent = event.nativeEvent;
         },
         onClick(event) {
           if (eventOption === 'mousedown' && pointerTypeRef.current) {
@@ -18074,63 +18144,52 @@ const useClick = function (context, props) {
           if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
             return;
           }
-          if (open) {
-            if (toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
-              onOpenChange(false);
-            }
+          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
+            onOpenChange(false, event.nativeEvent);
           } else {
-            onOpenChange(true);
+            onOpenChange(true, event.nativeEvent);
           }
-          dataRef.current.openEvent = event.nativeEvent;
         },
         onKeyDown(event) {
           pointerTypeRef.current = undefined;
-          if (!keyboardHandlers) {
-            return;
-          }
-          if (isButtonTarget(event)) {
+          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
             return;
           }
           if (event.key === ' ' && !isSpaceIgnored(domReference)) {
             // Prevent scrolling
             event.preventDefault();
+            didKeyDownRef.current = true;
           }
           if (event.key === 'Enter') {
-            if (open) {
-              if (toggle) {
-                onOpenChange(false);
-              }
+            if (open && toggle) {
+              onOpenChange(false, event.nativeEvent);
             } else {
-              onOpenChange(true);
+              onOpenChange(true, event.nativeEvent);
             }
           }
         },
         onKeyUp(event) {
-          if (!keyboardHandlers) {
-            return;
-          }
-          if (isButtonTarget(event) || isSpaceIgnored(domReference)) {
+          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
             return;
           }
-          if (event.key === ' ') {
-            if (open) {
-              if (toggle) {
-                onOpenChange(false);
-              }
+          if (event.key === ' ' && didKeyDownRef.current) {
+            didKeyDownRef.current = false;
+            if (open && toggle) {
+              onOpenChange(false, event.nativeEvent);
             } else {
-              onOpenChange(true);
+              onOpenChange(true, event.nativeEvent);
             }
           }
         }
       }
     };
   }, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);
-};
+}
 
 // `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
 const useInsertionEffect = React[/*#__PURE__*/'useInsertionEffect'.toString()];
 const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
-function useEvent(callback) {
+function useEffectEvent(callback) {
   const ref = React.useRef(() => {
     if (process.env.NODE_ENV !== "production") {
       throw new Error('Cannot call an event handler while rendering.');
@@ -18147,26 +18206,6 @@ function useEvent(callback) {
   }, []);
 }
 
-/**
- * Check whether the event.target is within the provided node. Uses event.composedPath if available for custom element support.
- *
- * @param event The event whose target/composedPath to check
- * @param node The node to check against
- * @returns Whether the event.target/composedPath is within the node.
- */
-function isEventTargetWithin(event, node) {
-  if (node == null) {
-    return false;
-  }
-  if ('composedPath' in event) {
-    return event.composedPath().includes(node);
-  }
-
-  // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
-  const e = event;
-  return e.target != null && node.contains(e.target);
-}
-
 const bubbleHandlerKeys = {
   pointerdown: 'onPointerDown',
   mousedown: 'onMouseDown',
@@ -18189,7 +18228,7 @@ const normalizeBubblesProp = bubbles => {
  * the user presses the `escape` key or outside of the floating element.
  * @see https://floating-ui.com/docs/useDismiss
  */
-const useDismiss = function (context, props) {
+function useDismiss(context, props) {
   if (props === void 0) {
     props = {};
   }
@@ -18217,14 +18256,14 @@ const useDismiss = function (context, props) {
   } = props;
   const tree = useFloatingTree();
   const nested = useFloatingParentNodeId() != null;
-  const outsidePressFn = useEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
+  const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
   const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
   const insideReactTreeRef = React.useRef(false);
   const {
     escapeKeyBubbles,
     outsidePressBubbles
   } = normalizeBubblesProp(bubbles);
-  const closeOnEscapeKeyDown = useEvent(event => {
+  const closeOnEscapeKeyDown = useEffectEvent(event => {
     if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
       return;
     }
@@ -18253,9 +18292,9 @@ const useDismiss = function (context, props) {
         }
       }
     });
-    onOpenChange(false);
+    onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event);
   });
-  const closeOnPressOutside = useEvent(event => {
+  const closeOnPressOutside = useEffectEvent(event => {
     // Given developers can stop the propagation of the synthetic event,
     // we can only be confident with a positive value.
     const insideReactTree = insideReactTreeRef.current;
@@ -18267,6 +18306,28 @@ const useDismiss = function (context, props) {
       return;
     }
     const target = getTarget(event);
+    const inertSelector = "[" + createAttribute('inert') + "]";
+    const markers = getDocument(floating).querySelectorAll(inertSelector);
+    let targetRootAncestor = isElement(target) ? target : null;
+    while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
+      const nextParent = getParentNode(targetRootAncestor);
+      if (nextParent === getDocument(floating).body || !isElement(nextParent)) {
+        break;
+      } else {
+        targetRootAncestor = nextParent;
+      }
+    }
+
+    // Check if the click occurred on a third-party element injected after the
+    // floating element rendered.
+    if (markers.length && isElement(target) && !isRootElement(target) &&
+    // Clicked on a direct ancestor (e.g. FloatingOverlay).
+    !contains(target, floating) &&
+    // If the target root element contains none of the markers, then the
+    // element was injected after the floating element rendered.
+    Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {
+      return;
+    }
 
     // Check if the click occurred on the scrollbar
     if (isHTMLElement(target) && floating) {
@@ -18281,7 +18342,7 @@ const useDismiss = function (context, props) {
       // check for. Plus, for modal dialogs with backdrops, it is more
       // important that the backdrop is checked but not so much the window.
       if (canScrollY) {
-        const isRTL = getWindow(floating).getComputedStyle(target).direction === 'rtl';
+        const isRTL = getComputedStyle$1(target).direction === 'rtl';
         if (isRTL) {
           xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
         }
@@ -18319,7 +18380,7 @@ const useDismiss = function (context, props) {
         } : isVirtualClick(event) || isVirtualPointerEvent(event)
       }
     });
-    onOpenChange(false);
+    onOpenChange(false, event);
   });
   React.useEffect(() => {
     if (!open || !enabled) {
@@ -18327,8 +18388,8 @@ const useDismiss = function (context, props) {
     }
     dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
     dataRef.current.__outsidePressBubbles = outsidePressBubbles;
-    function onScroll() {
-      onOpenChange(false);
+    function onScroll(event) {
+      onOpenChange(false, event);
     }
     const doc = getDocument(floating);
     escapeKey && doc.addEventListener('keydown', closeOnEscapeKeyDown);
@@ -18374,7 +18435,7 @@ const useDismiss = function (context, props) {
     return {
       reference: {
         onKeyDown: closeOnEscapeKeyDown,
-        [bubbleHandlerKeys[referencePressEvent]]: () => {
+        [bubbleHandlerKeys[referencePressEvent]]: event => {
           if (referencePress) {
             events.emit('dismiss', {
               type: 'referencePress',
@@ -18382,7 +18443,7 @@ const useDismiss = function (context, props) {
                 returnFocus: false
               }
             });
-            onOpenChange(false);
+            onOpenChange(false, event.nativeEvent);
           }
         }
       },
@@ -18394,91 +18455,19 @@ const useDismiss = function (context, props) {
       }
     };
   }, [enabled, events, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
-};
-
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- * @see https://floating-ui.com/docs/useMergeRefs
- */
-function useMergeRefs(refs) {
-  return React.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
-      return null;
-    }
-    return value => {
-      refs.forEach(ref => {
-        if (typeof ref === 'function') {
-          ref(value);
-        } else if (ref != null) {
-          ref.current = value;
-        }
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
 }
 
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-const useRole = function (context, props) {
-  if (props === void 0) {
-    props = {};
-  }
-  const {
-    open,
-    floatingId
-  } = context;
-  const {
-    enabled = true,
-    role = 'dialog'
-  } = props;
-  const referenceId = useId();
-  return React.useMemo(() => {
-    const floatingProps = {
-      id: floatingId,
-      role
-    };
-    if (!enabled) {
-      return {};
-    }
-    if (role === 'tooltip') {
-      return {
-        reference: {
-          'aria-describedby': open ? floatingId : undefined
-        },
-        floating: floatingProps
-      };
-    }
-    return {
-      reference: {
-        'aria-expanded': open ? 'true' : 'false',
-        'aria-haspopup': role === 'alertdialog' ? 'dialog' : role,
-        'aria-controls': open ? floatingId : undefined,
-        ...(role === 'listbox' && {
-          role: 'combobox'
-        }),
-        ...(role === 'menu' && {
-          id: referenceId
-        })
-      },
-      floating: {
-        ...floatingProps,
-        ...(role === 'menu' && {
-          'aria-labelledby': referenceId
-        })
-      }
-    };
-  }, [enabled, role, open, floatingId, referenceId]);
-};
+let devMessageSet;
+if (process.env.NODE_ENV !== "production") {
+  devMessageSet = /*#__PURE__*/new Set();
+}
 
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/react
  */
 function useFloating(options) {
+  var _options$elements2;
   if (options === void 0) {
     options = {};
   }
@@ -18487,13 +18476,32 @@ function useFloating(options) {
     onOpenChange: unstable_onOpenChange,
     nodeId
   } = options;
+  if (process.env.NODE_ENV !== "production") {
+    var _options$elements;
+    const err = 'Floating UI: Cannot pass a virtual element to the ' + '`elements.reference` option, as it must be a real DOM element. ' + 'Use `refs.setPositionReference` instead.';
+    if ((_options$elements = options.elements) != null && _options$elements.reference && !isElement(options.elements.reference)) {
+      var _devMessageSet;
+      if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(err))) {
+        var _devMessageSet2;
+        (_devMessageSet2 = devMessageSet) == null ? void 0 : _devMessageSet2.add(err);
+        console.error(err);
+      }
+    }
+  }
+  const [_domReference, setDomReference] = React.useState(null);
+  const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
   const position = useFloating$1(options);
   const tree = useFloatingTree();
+  const onOpenChange = useEffectEvent((open, event) => {
+    if (open) {
+      dataRef.current.openEvent = event;
+    }
+    unstable_onOpenChange == null ? void 0 : unstable_onOpenChange(open, event);
+  });
   const domReferenceRef = React.useRef(null);
   const dataRef = React.useRef({});
   const events = React.useState(() => createPubSub())[0];
   const floatingId = useId();
-  const [domReference, setDomReference] = React.useState(null);
   const setPositionReference = React.useCallback(node => {
     const positionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -18527,7 +18535,6 @@ function useFloating(options) {
     ...position.elements,
     domReference: domReference
   }), [position.elements, domReference]);
-  const onOpenChange = useEvent(unstable_onOpenChange);
   const context = React.useMemo(() => ({
     ...position,
     refs,
@@ -18549,10 +18556,8 @@ function useFloating(options) {
     ...position,
     context,
     refs,
-    elements,
-    reference: setReference,
-    positionReference: setPositionReference
-  }), [position, refs, elements, context, setReference, setPositionReference]);
+    elements
+  }), [position, refs, elements, context]);
 }
 
 function mergeProps(userProps, propsList, elementKey) {
@@ -18591,7 +18596,14 @@ function mergeProps(userProps, propsList, elementKey) {
     }, {})
   };
 }
-const useInteractions = function (propsList) {
+
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/react#interaction-hooks
+ */
+function useInteractions(propsList) {
   if (propsList === void 0) {
     propsList = [];
   }
@@ -18616,7 +18628,63 @@ const useInteractions = function (propsList) {
     getFloatingProps,
     getItemProps
   }), [getReferenceProps, getFloatingProps, getItemProps]);
-};
+}
+
+/**
+ * Adds base screen reader props to the reference and floating elements for a
+ * given floating element `role`.
+ * @see https://floating-ui.com/docs/useRole
+ */
+function useRole(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    floatingId
+  } = context;
+  const {
+    enabled = true,
+    role = 'dialog'
+  } = props;
+  const referenceId = useId();
+  return React.useMemo(() => {
+    const floatingProps = {
+      id: floatingId,
+      role
+    };
+    if (!enabled) {
+      return {};
+    }
+    if (role === 'tooltip') {
+      return {
+        reference: {
+          'aria-describedby': open ? floatingId : undefined
+        },
+        floating: floatingProps
+      };
+    }
+    return {
+      reference: {
+        'aria-expanded': open ? 'true' : 'false',
+        'aria-haspopup': role === 'alertdialog' ? 'dialog' : role,
+        'aria-controls': open ? floatingId : undefined,
+        ...(role === 'listbox' && {
+          role: 'combobox'
+        }),
+        ...(role === 'menu' && {
+          id: referenceId
+        })
+      },
+      floating: {
+        ...floatingProps,
+        ...(role === 'menu' && {
+          'aria-labelledby': referenceId
+        })
+      }
+    };
+  }, [enabled, role, open, floatingId, referenceId]);
+}
 
 /**
  * The hook that powers the Popover component.
@@ -18754,7 +18822,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button$1, { color: color, size: size, className: className, prefix: jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
+    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button$1, { color: color, size: size, className: className, prefix: jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
 };
 
 /**
@@ -36803,7 +36871,7 @@ const cvaMoreMenu = cvaMerge(["p-4"]);
  */
 const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     size: "medium",
-    name: "EllipsisHorizontalIcon",
+    name: "EllipsisHorizontal",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -37226,7 +37294,7 @@ const Tag = React.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false } = _a; __rest$1(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "disabled"]);
     return (jsxs("span", { className: cvaTag({ className, size, color, layout: Boolean(onClose) ? "withIcon" : "default" }), "data-testid": dataTestId && `${dataTestId}-tag`, ref: ref, children: [children, Boolean(onClose) && !disabled && (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
+            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
 const cvaTip = cvaMerge("flex transition text-slate-300 hover:text-slate-500");
@@ -37250,7 +37318,7 @@ const cvaTipContent = cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center tex
  * @returns {JSX.Element} Tip component
  */
 const Tip = ({ children, iconProps, dataTestId, className, placement = "bottom", mode = "dark", link, }) => {
-    return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircleIcon" }) })) : null] }) })] }) }));
+    return (jsx("span", { "data-testid": dataTestId, className: cvaTip({ className }), children: jsxs(Popover, { placement: placement, activation: { click: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": dataTestId && `${dataTestId}-trigger`, children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) }) }), jsx(PopoverContent, { children: jsxs("div", { className: cvaTipContent({ color: mode }), children: [jsx("div", { children: typeof children === "string" ? jsx("p", { children: children }) : children }), link ? (jsx("a", { href: link, children: jsx(Icon, { name: "ArrowRightCircle" }) })) : null] }) })] }) }));
 };
 
 const cvaPageHeader = cvaMerge([
@@ -37288,7 +37356,7 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
-    return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
+    return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -37337,9 +37405,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount && getTranslatedCount(pageCount) })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -38921,7 +38989,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "Calendar", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick(), children: [jsx("div", { className: cvaTimelineDot(), children: dot }), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {
@@ -39064,4 +39132,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };