@indico-data/design-system 2.34.2 → 2.34.4

package/lib/index.esm.js

@@ -1176,8 +1176,8 @@ const size$2 = function (options) {
   };
 };
 
-function getNodeName$2(node) {
-  if (isNode$1(node)) {
+function getNodeName$3(node) {
+  if (isNode$2(node)) {
     return (node.nodeName || '').toLowerCase();
   }
   // Mocked nodes in testing environments may not be instances of Node. By
@@ -1189,17 +1189,17 @@ function getWindow$3(node) {
   var _node$ownerDocument;
   return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
-function getDocumentElement$2(node) {
+function getDocumentElement$3(node) {
   var _ref;
-  return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+  return (_ref = (isNode$2(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
 }
-function isNode$1(value) {
+function isNode$2(value) {
   return value instanceof Node || value instanceof getWindow$3(value).Node;
 }
 function isElement$3(value) {
   return value instanceof Element || value instanceof getWindow$3(value).Element;
 }
-function isHTMLElement$2(value) {
+function isHTMLElement$3(value) {
   return value instanceof HTMLElement || value instanceof getWindow$3(value).HTMLElement;
 }
 function isShadowRoot$3(value) {
@@ -1215,11 +1215,11 @@ function isOverflowElement$1(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle$3(element);
+  } = getComputedStyle$4(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement$2(element) {
-  return ['table', 'td', 'th'].includes(getNodeName$2(element));
+  return ['table', 'td', 'th'].includes(getNodeName$3(element));
 }
 function isTopLayer$1(element) {
   return [':popover-open', ':modal'].some(selector => {
@@ -1232,20 +1232,20 @@ function isTopLayer$1(element) {
 }
 function isContainingBlock$1(elementOrCss) {
   const webkit = isWebKit$1();
-  const css = isElement$3(elementOrCss) ? getComputedStyle$3(elementOrCss) : elementOrCss;
+  const css = isElement$3(elementOrCss) ? getComputedStyle$4(elementOrCss) : elementOrCss;
 
   // 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$2(element) {
-  let currentNode = getParentNode$2(element);
-  while (isHTMLElement$2(currentNode) && !isLastTraversableNode$1(currentNode)) {
+  let currentNode = getParentNode$3(element);
+  while (isHTMLElement$3(currentNode) && !isLastTraversableNode$2(currentNode)) {
     if (isContainingBlock$1(currentNode)) {
       return currentNode;
     } else if (isTopLayer$1(currentNode)) {
       return null;
     }
-    currentNode = getParentNode$2(currentNode);
+    currentNode = getParentNode$3(currentNode);
   }
   return null;
 }
@@ -1253,10 +1253,10 @@ function isWebKit$1() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
-function isLastTraversableNode$1(node) {
-  return ['html', 'body', '#document'].includes(getNodeName$2(node));
+function isLastTraversableNode$2(node) {
+  return ['html', 'body', '#document'].includes(getNodeName$3(node));
 }
-function getComputedStyle$3(element) {
+function getComputedStyle$4(element) {
   return getWindow$3(element).getComputedStyle(element);
 }
 function getNodeScroll$2(element) {
@@ -1271,8 +1271,8 @@ function getNodeScroll$2(element) {
     scrollTop: element.scrollY
   };
 }
-function getParentNode$2(node) {
-  if (getNodeName$2(node) === 'html') {
+function getParentNode$3(node) {
+  if (getNodeName$3(node) === 'html') {
     return node;
   }
   const result =
@@ -1283,15 +1283,15 @@ function getParentNode$2(node) {
   // ShadowRoot detected.
   isShadowRoot$3(node) && node.host ||
   // Fallback.
-  getDocumentElement$2(node);
+  getDocumentElement$3(node);
   return isShadowRoot$3(result) ? result.host : result;
 }
 function getNearestOverflowAncestor$1(node) {
-  const parentNode = getParentNode$2(node);
-  if (isLastTraversableNode$1(parentNode)) {
+  const parentNode = getParentNode$3(node);
+  if (isLastTraversableNode$2(parentNode)) {
     return node.ownerDocument ? node.ownerDocument.body : node.body;
   }
-  if (isHTMLElement$2(parentNode) && isOverflowElement$1(parentNode)) {
+  if (isHTMLElement$3(parentNode) && isOverflowElement$1(parentNode)) {
     return parentNode;
   }
   return getNearestOverflowAncestor$1(parentNode);
@@ -1318,12 +1318,12 @@ function getFrameElement(win) {
 }
 
 function getCssDimensions$1(element) {
-  const css = getComputedStyle$3(element);
+  const css = getComputedStyle$4(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$2(element);
+  const hasOffset = isHTMLElement$3(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
   const shouldFallback = round$2(width) !== offsetWidth || round$2(height) !== offsetHeight;
@@ -1344,7 +1344,7 @@ function unwrapElement$1(element) {
 
 function getScale$1(element) {
   const domElement = unwrapElement$1(element);
-  if (!isHTMLElement$2(domElement)) {
+  if (!isHTMLElement$3(domElement)) {
     return createCoords$1(1);
   }
   const rect = domElement.getBoundingClientRect();
@@ -1423,7 +1423,7 @@ function getBoundingClientRect$2(element, includeScale, isFixedStrategy, offsetP
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale$1(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle$3(currentIFrame);
+      const css = getComputedStyle$4(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;
@@ -1452,7 +1452,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect$1(_ref) {
     strategy
   } = _ref;
   const isFixed = strategy === 'fixed';
-  const documentElement = getDocumentElement$2(offsetParent);
+  const documentElement = getDocumentElement$3(offsetParent);
   const topLayer = elements ? isTopLayer$1(elements.floating) : false;
   if (offsetParent === documentElement || topLayer && isFixed) {
     return rect;
@@ -1463,12 +1463,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect$1(_ref) {
   };
   let scale = createCoords$1(1);
   const offsets = createCoords$1(0);
-  const isOffsetParentAnElement = isHTMLElement$2(offsetParent);
+  const isOffsetParentAnElement = isHTMLElement$3(offsetParent);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName$2(offsetParent) !== 'body' || isOverflowElement$1(documentElement)) {
+    if (getNodeName$3(offsetParent) !== 'body' || isOverflowElement$1(documentElement)) {
       scroll = getNodeScroll$2(offsetParent);
     }
-    if (isHTMLElement$2(offsetParent)) {
+    if (isHTMLElement$3(offsetParent)) {
       const offsetRect = getBoundingClientRect$2(offsetParent);
       scale = getScale$1(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -1490,20 +1490,20 @@ function getClientRects$1(element) {
 function getWindowScrollBarX$2(element) {
   // If <html> has a CSS width greater than the viewport, then this will be
   // incorrect for RTL.
-  return getBoundingClientRect$2(getDocumentElement$2(element)).left + getNodeScroll$2(element).scrollLeft;
+  return getBoundingClientRect$2(getDocumentElement$3(element)).left + getNodeScroll$2(element).scrollLeft;
 }
 
 // Gets the entire size of the scrollable document area, even extending outside
 // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
 function getDocumentRect$2(element) {
-  const html = getDocumentElement$2(element);
+  const html = getDocumentElement$3(element);
   const scroll = getNodeScroll$2(element);
   const body = element.ownerDocument.body;
   const width = max$3(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
   const height = max$3(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX$2(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle$3(body).direction === 'rtl') {
+  if (getComputedStyle$4(body).direction === 'rtl') {
     x += max$3(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1516,7 +1516,7 @@ function getDocumentRect$2(element) {
 
 function getViewportRect$2(element, strategy) {
   const win = getWindow$3(element);
-  const html = getDocumentElement$2(element);
+  const html = getDocumentElement$3(element);
   const visualViewport = win.visualViewport;
   let width = html.clientWidth;
   let height = html.clientHeight;
@@ -1544,7 +1544,7 @@ function getInnerBoundingClientRect$2(element, strategy) {
   const clientRect = getBoundingClientRect$2(element, true, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement$2(element) ? getScale$1(element) : createCoords$1(1);
+  const scale = isHTMLElement$3(element) ? getScale$1(element) : createCoords$1(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
@@ -1561,7 +1561,7 @@ function getClientRectFromClippingAncestor$1(element, clippingAncestor, strategy
   if (clippingAncestor === 'viewport') {
     rect = getViewportRect$2(element, strategy);
   } else if (clippingAncestor === 'document') {
-    rect = getDocumentRect$2(getDocumentElement$2(element));
+    rect = getDocumentRect$2(getDocumentElement$3(element));
   } else if (isElement$3(clippingAncestor)) {
     rect = getInnerBoundingClientRect$2(clippingAncestor, strategy);
   } else {
@@ -1575,11 +1575,11 @@ function getClientRectFromClippingAncestor$1(element, clippingAncestor, strategy
   return rectToClientRect$2(rect);
 }
 function hasFixedPositionAncestor$1(element, stopNode) {
-  const parentNode = getParentNode$2(element);
-  if (parentNode === stopNode || !isElement$3(parentNode) || isLastTraversableNode$1(parentNode)) {
+  const parentNode = getParentNode$3(element);
+  if (parentNode === stopNode || !isElement$3(parentNode) || isLastTraversableNode$2(parentNode)) {
     return false;
   }
-  return getComputedStyle$3(parentNode).position === 'fixed' || hasFixedPositionAncestor$1(parentNode, stopNode);
+  return getComputedStyle$4(parentNode).position === 'fixed' || hasFixedPositionAncestor$1(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1590,14 +1590,14 @@ function getClippingElementAncestors$1(element, cache) {
   if (cachedResult) {
     return cachedResult;
   }
-  let result = getOverflowAncestors$1(element, [], false).filter(el => isElement$3(el) && getNodeName$2(el) !== 'body');
+  let result = getOverflowAncestors$1(element, [], false).filter(el => isElement$3(el) && getNodeName$3(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle$3(element).position === 'fixed';
-  let currentNode = elementIsFixed ? getParentNode$2(element) : element;
+  const elementIsFixed = getComputedStyle$4(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode$3(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  while (isElement$3(currentNode) && !isLastTraversableNode$1(currentNode)) {
-    const computedStyle = getComputedStyle$3(currentNode);
+  while (isElement$3(currentNode) && !isLastTraversableNode$2(currentNode)) {
+    const computedStyle = getComputedStyle$4(currentNode);
     const currentNodeIsContaining = isContainingBlock$1(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1610,7 +1610,7 @@ function getClippingElementAncestors$1(element, cache) {
       // Record last containing block for next iteration.
       currentContainingBlockComputedStyle = computedStyle;
     }
-    currentNode = getParentNode$2(currentNode);
+    currentNode = getParentNode$3(currentNode);
   }
   cache.set(element, result);
   return result;
@@ -1656,8 +1656,8 @@ function getDimensions$1(element) {
 }
 
 function getRectRelativeToOffsetParent$1(element, offsetParent, strategy) {
-  const isOffsetParentAnElement = isHTMLElement$2(offsetParent);
-  const documentElement = getDocumentElement$2(offsetParent);
+  const isOffsetParentAnElement = isHTMLElement$3(offsetParent);
+  const documentElement = getDocumentElement$3(offsetParent);
   const isFixed = strategy === 'fixed';
   const rect = getBoundingClientRect$2(element, true, isFixed, offsetParent);
   let scroll = {
@@ -1666,7 +1666,7 @@ function getRectRelativeToOffsetParent$1(element, offsetParent, strategy) {
   };
   const offsets = createCoords$1(0);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName$2(offsetParent) !== 'body' || isOverflowElement$1(documentElement)) {
+    if (getNodeName$3(offsetParent) !== 'body' || isOverflowElement$1(documentElement)) {
       scroll = getNodeScroll$2(offsetParent);
     }
     if (isOffsetParentAnElement) {
@@ -1688,11 +1688,11 @@ function getRectRelativeToOffsetParent$1(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned$1(element) {
-  return getComputedStyle$3(element).position === 'static';
+  return getComputedStyle$4(element).position === 'static';
 }
 
 function getTrueOffsetParent$2(element, polyfill) {
-  if (!isHTMLElement$2(element) || getComputedStyle$3(element).position === 'fixed') {
+  if (!isHTMLElement$3(element) || getComputedStyle$4(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1708,13 +1708,13 @@ function getOffsetParent$2(element, polyfill) {
   if (isTopLayer$1(element)) {
     return win;
   }
-  if (!isHTMLElement$2(element)) {
-    let svgOffsetParent = getParentNode$2(element);
-    while (svgOffsetParent && !isLastTraversableNode$1(svgOffsetParent)) {
+  if (!isHTMLElement$3(element)) {
+    let svgOffsetParent = getParentNode$3(element);
+    while (svgOffsetParent && !isLastTraversableNode$2(svgOffsetParent)) {
       if (isElement$3(svgOffsetParent) && !isStaticPositioned$1(svgOffsetParent)) {
         return svgOffsetParent;
       }
-      svgOffsetParent = getParentNode$2(svgOffsetParent);
+      svgOffsetParent = getParentNode$3(svgOffsetParent);
     }
     return win;
   }
@@ -1722,7 +1722,7 @@ function getOffsetParent$2(element, polyfill) {
   while (offsetParent && isTableElement$2(offsetParent) && isStaticPositioned$1(offsetParent)) {
     offsetParent = getTrueOffsetParent$2(offsetParent, polyfill);
   }
-  if (offsetParent && isLastTraversableNode$1(offsetParent) && isStaticPositioned$1(offsetParent) && !isContainingBlock$1(offsetParent)) {
+  if (offsetParent && isLastTraversableNode$2(offsetParent) && isStaticPositioned$1(offsetParent) && !isContainingBlock$1(offsetParent)) {
     return win;
   }
   return offsetParent || getContainingBlock$2(element) || win;
@@ -1744,12 +1744,12 @@ const getElementRects$1 = async function (data) {
 };
 
 function isRTL$1(element) {
-  return getComputedStyle$3(element).direction === 'rtl';
+  return getComputedStyle$4(element).direction === 'rtl';
 }
 
 const platform$1 = {
   convertOffsetParentRelativeRectToViewportRelativeRect: convertOffsetParentRelativeRectToViewportRelativeRect$1,
-  getDocumentElement: getDocumentElement$2,
+  getDocumentElement: getDocumentElement$3,
   getClippingRect: getClippingRect$2,
   getOffsetParent: getOffsetParent$2,
   getElementRects: getElementRects$1,
@@ -1764,7 +1764,7 @@ const platform$1 = {
 function observeMove$1(element, onMove) {
   let io = null;
   let timeoutId;
-  const root = getDocumentElement$2(element);
+  const root = getDocumentElement$3(element);
   function cleanup() {
     var _io;
     clearTimeout(timeoutId);
@@ -2092,7 +2092,7 @@ function useLatestRef(value) {
  * Provides data to position a floating element.
  * @see https://floating-ui.com/docs/useFloating
  */
-function useFloating(options) {
+function useFloating$1(options) {
   if (options === void 0) {
     options = {};
   }
@@ -20964,7 +20964,7 @@ const DisplayFormError = ({ message }) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "className"]);
+    var { name, placeholder, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
@@ -20973,7 +20973,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -21001,7 +21001,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
 const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
+    var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => {
@@ -21010,7 +21010,7 @@ const PasswordInput = React__default.forwardRef((_a, ref) => {
     const inputClasses = classNames('password-input', {
         error: hasErrors,
     }, 'password-input--has-icon');
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledPasswordInput = withLabel(PasswordInput);
 
@@ -21062,13 +21062,32 @@ const Card = (_a) => {
     return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
 };
 
+function getNodeName$2(node) {
+  if (isNode$1(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
 function getWindow$2(node) {
   var _node$ownerDocument;
   return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
+function getDocumentElement$2(node) {
+  var _ref;
+  return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode$1(value) {
+  return value instanceof Node || value instanceof getWindow$2(value).Node;
+}
 function isElement$2(value) {
   return value instanceof Element || value instanceof getWindow$2(value).Element;
 }
+function isHTMLElement$2(value) {
+  return value instanceof HTMLElement || value instanceof getWindow$2(value).HTMLElement;
+}
 function isShadowRoot$2(value) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
@@ -21076,6 +21095,27 @@ function isShadowRoot$2(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow$2(value).ShadowRoot;
 }
+function isLastTraversableNode$1(node) {
+  return ['html', 'body', '#document'].includes(getNodeName$2(node));
+}
+function getComputedStyle$3(element) {
+  return getWindow$2(element).getComputedStyle(element);
+}
+function getParentNode$2(node) {
+  if (getNodeName$2(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$2(node) && node.host ||
+  // Fallback.
+  getDocumentElement$2(node);
+  return isShadowRoot$2(result) ? result.host : result;
+}
 
 function activeElement(doc) {
   let activeElement = doc.activeElement;
@@ -21115,9 +21155,46 @@ 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'];
+  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$2(element) && element.matches(TYPEABLE_SELECTOR);
+}
 
 /*!
 * tabbable 6.2.0
@@ -21702,6 +21779,25 @@ const SafeReact = {
   ...React$1
 };
 
+const useInsertionEffect = SafeReact.useInsertionEffect;
+const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
+function useEffectEvent(callback) {
+  const ref = React$1.useRef(() => {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error('Cannot call an event handler while rendering.');
+    }
+  });
+  useSafeInsertionEffect(() => {
+    ref.current = callback;
+  });
+  return React$1.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return ref.current == null ? void 0 : ref.current(...args);
+  }, []);
+}
+
 var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
 
 function _extends$1() {
@@ -21746,12 +21842,81 @@ const useReactId = SafeReact.useId;
  * @see https://floating-ui.com/docs/react-utils#useid
  */
 const useId$1 = useReactId || useFloatingId;
-if (process.env.NODE_ENV !== "production") ;
+
+let devMessageSet;
+if (process.env.NODE_ENV !== "production") {
+  devMessageSet = /*#__PURE__*/new Set();
+}
+function error() {
+  var _devMessageSet3;
+  for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    messages[_key2] = arguments[_key2];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
+    var _devMessageSet4;
+    (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
+    console.error(message);
+  }
+}
+
+function createPubSub() {
+  const map = new Map();
+  return {
+    emit(event, data) {
+      var _map$get;
+      (_map$get = map.get(event)) == null || _map$get.forEach(handler => handler(data));
+    },
+    on(event, listener) {
+      map.set(event, [...(map.get(event) || []), listener]);
+    },
+    off(event, listener) {
+      var _map$get2;
+      map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter(l => l !== listener)) || []);
+    }
+  };
+}
+
+const FloatingNodeContext = /*#__PURE__*/React$1.createContext(null);
+const FloatingTreeContext = /*#__PURE__*/React$1.createContext(null);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+const useFloatingParentNodeId = () => {
+  var _React$useContext;
+  return ((_React$useContext = React$1.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
+};
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+const useFloatingTree = () => React$1.useContext(FloatingTreeContext);
 
 function createAttribute(name) {
   return "data-floating-ui-" + name;
 }
 
+function getChildren(nodes, id) {
+  let allChildren = nodes.filter(node => {
+    var _node$context;
+    return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
+  });
+  let currentChildren = allChildren;
+  while (currentChildren.length) {
+    currentChildren = nodes.filter(node => {
+      var _currentChildren;
+      return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some(n => {
+        var _node$context2;
+        return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
+      });
+    });
+    allChildren = allChildren.concat(currentChildren);
+  }
+  return allChildren;
+}
+
 const getTabbableOptions = () => ({
   getShadowRoot: true,
   displayCheck:
@@ -22016,22 +22181,599 @@ function FloatingPortal(props) {
 }
 const usePortalContext = () => React$1.useContext(PortalContext);
 
-const useClickOutside = (ref, handler) => {
-    useEffect(() => {
-        const listener = (e) => {
-            if (!ref.current || ref.current.contains(e.target)) {
-                return;
-            }
-            handler(e);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
+function isButtonTarget(event) {
+  return isHTMLElement$2(event.target) && event.target.tagName === 'BUTTON';
+}
+function isSpaceIgnored(element) {
+  return isTypeableElement(element);
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    keyboardHandlers = true
+  } = props;
+  const pointerTypeRef = React$1.useRef();
+  const didKeyDownRef = React$1.useRef(false);
+  const reference = React$1.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0) return;
+      if (eventOption === 'click') return;
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        // Prevent stealing focus from the floating element
+        event.preventDefault();
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onClick(event) {
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerTypeRef.current) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onKeyDown(event) {
+      pointerTypeRef.current = undefined;
+      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 && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    },
+    onKeyUp(event) {
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+        return;
+      }
+      if (event.key === ' ' && didKeyDownRef.current) {
+        didKeyDownRef.current = false;
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    }
+  }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, toggle]);
+  return React$1.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+}
+
+const bubbleHandlerKeys = {
+  pointerdown: 'onPointerDown',
+  mousedown: 'onMouseDown',
+  click: 'onClick'
+};
+const captureHandlerKeys = {
+  pointerdown: 'onPointerDownCapture',
+  mousedown: 'onMouseDownCapture',
+  click: 'onClickCapture'
 };
+const normalizeProp = normalizable => {
+  var _normalizable$escapeK, _normalizable$outside;
+  return {
+    escapeKey: typeof normalizable === 'boolean' ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
+    outsidePress: typeof normalizable === 'boolean' ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
+  };
+};
+/**
+ * Closes the floating element when a dismissal is requested — by default, when
+ * the user presses the `escape` key or outside of the floating element.
+ * @see https://floating-ui.com/docs/useDismiss
+ */
+function useDismiss(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    elements,
+    dataRef
+  } = context;
+  const {
+    enabled = true,
+    escapeKey = true,
+    outsidePress: unstable_outsidePress = true,
+    outsidePressEvent = 'pointerdown',
+    referencePress = false,
+    referencePressEvent = 'pointerdown',
+    ancestorScroll = false,
+    bubbles,
+    capture
+  } = props;
+  const tree = useFloatingTree();
+  const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
+  const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
+  const insideReactTreeRef = React$1.useRef(false);
+  const endedOrStartedInsideRef = React$1.useRef(false);
+  const {
+    escapeKey: escapeKeyBubbles,
+    outsidePress: outsidePressBubbles
+  } = normalizeProp(bubbles);
+  const {
+    escapeKey: escapeKeyCapture,
+    outsidePress: outsidePressCapture
+  } = normalizeProp(capture);
+  const closeOnEscapeKeyDown = useEffectEvent(event => {
+    var _dataRef$current$floa;
+    if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
+      return;
+    }
+    const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (!escapeKeyBubbles) {
+      event.stopPropagation();
+      if (children.length > 0) {
+        let shouldDismiss = true;
+        children.forEach(child => {
+          var _child$context;
+          if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
+            shouldDismiss = false;
+            return;
+          }
+        });
+        if (!shouldDismiss) {
+          return;
+        }
+      }
+    }
+    onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, 'escape-key');
+  });
+  const closeOnEscapeKeyDownCapture = useEffectEvent(event => {
+    var _getTarget2;
+    const callback = () => {
+      var _getTarget;
+      closeOnEscapeKeyDown(event);
+      (_getTarget = getTarget(event)) == null || _getTarget.removeEventListener('keydown', callback);
+    };
+    (_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);
+  });
+  const closeOnPressOutside = useEffectEvent(event => {
+    var _dataRef$current$floa2;
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = insideReactTreeRef.current;
+    insideReactTreeRef.current = false;
+
+    // When click outside is lazy (`click` event), handle dragging.
+    // Don't close if:
+    // - The click started inside the floating element.
+    // - The click ended inside the floating element.
+    const endedOrStartedInside = endedOrStartedInsideRef.current;
+    endedOrStartedInsideRef.current = false;
+    if (outsidePressEvent === 'click' && endedOrStartedInside) {
+      return;
+    }
+    if (insideReactTree) {
+      return;
+    }
+    if (typeof outsidePress === 'function' && !outsidePress(event)) {
+      return;
+    }
+    const target = getTarget(event);
+    const inertSelector = "[" + createAttribute('inert') + "]";
+    const markers = getDocument(elements.floating).querySelectorAll(inertSelector);
+    let targetRootAncestor = isElement$2(target) ? target : null;
+    while (targetRootAncestor && !isLastTraversableNode$1(targetRootAncestor)) {
+      const nextParent = getParentNode$2(targetRootAncestor);
+      if (isLastTraversableNode$1(nextParent) || !isElement$2(nextParent)) {
+        break;
+      }
+      targetRootAncestor = nextParent;
+    }
+
+    // Check if the click occurred on a third-party element injected after the
+    // floating element rendered.
+    if (markers.length && isElement$2(target) && !isRootElement(target) &&
+    // Clicked on a direct ancestor (e.g. FloatingOverlay).
+    !contains$1(target, elements.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$1(targetRootAncestor, marker))) {
+      return;
+    }
+
+    // Check if the click occurred on the scrollbar
+    if (isHTMLElement$2(target) && floating) {
+      // In Firefox, `target.scrollWidth > target.clientWidth` for inline
+      // elements.
+      const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+      const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+      let xCond = canScrollY && event.offsetX > target.clientWidth;
+
+      // In some browsers it is possible to change the <body> (or window)
+      // scrollbar to the left side, but is very rare and is difficult to
+      // 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 = getComputedStyle$3(target).direction === 'rtl';
+        if (isRTL) {
+          xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
+        }
+      }
+      if (xCond || canScrollX && event.offsetY > target.clientHeight) {
+        return;
+      }
+    }
+    const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
+    const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
+      var _node$context;
+      return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
+    });
+    if (isEventTargetWithin(event, elements.floating) || isEventTargetWithin(event, elements.domReference) || targetIsInsideChildren) {
+      return;
+    }
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (children.length > 0) {
+      let shouldDismiss = true;
+      children.forEach(child => {
+        var _child$context2;
+        if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
+          shouldDismiss = false;
+          return;
+        }
+      });
+      if (!shouldDismiss) {
+        return;
+      }
+    }
+    onOpenChange(false, event, 'outside-press');
+  });
+  const closeOnPressOutsideCapture = useEffectEvent(event => {
+    var _getTarget4;
+    const callback = () => {
+      var _getTarget3;
+      closeOnPressOutside(event);
+      (_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
+    };
+    (_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
+  });
+  React$1.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
+    dataRef.current.__outsidePressBubbles = outsidePressBubbles;
+    function onScroll(event) {
+      onOpenChange(false, event, 'ancestor-scroll');
+    }
+    const doc = getDocument(elements.floating);
+    escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+    outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+    let ancestors = [];
+    if (ancestorScroll) {
+      if (isElement$2(elements.domReference)) {
+        ancestors = getOverflowAncestors$1(elements.domReference);
+      }
+      if (isElement$2(elements.floating)) {
+        ancestors = ancestors.concat(getOverflowAncestors$1(elements.floating));
+      }
+      if (!isElement$2(elements.reference) && elements.reference && elements.reference.contextElement) {
+        ancestors = ancestors.concat(getOverflowAncestors$1(elements.reference.contextElement));
+      }
+    }
+
+    // Ignore the visual viewport for scrolling dismissal (allow pinch-zoom)
+    ancestors = ancestors.filter(ancestor => {
+      var _doc$defaultView;
+      return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
+    });
+    ancestors.forEach(ancestor => {
+      ancestor.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    });
+    return () => {
+      escapeKey && doc.removeEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+      outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+      ancestors.forEach(ancestor => {
+        ancestor.removeEventListener('scroll', onScroll);
+      });
+    };
+  }, [dataRef, elements, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
+  React$1.useEffect(() => {
+    insideReactTreeRef.current = false;
+  }, [outsidePress, outsidePressEvent]);
+  const reference = React$1.useMemo(() => ({
+    onKeyDown: closeOnEscapeKeyDown,
+    [bubbleHandlerKeys[referencePressEvent]]: event => {
+      if (referencePress) {
+        onOpenChange(false, event.nativeEvent, 'reference-press');
+      }
+    }
+  }), [closeOnEscapeKeyDown, onOpenChange, referencePress, referencePressEvent]);
+  const floating = React$1.useMemo(() => ({
+    onKeyDown: closeOnEscapeKeyDown,
+    onMouseDown() {
+      endedOrStartedInsideRef.current = true;
+    },
+    onMouseUp() {
+      endedOrStartedInsideRef.current = true;
+    },
+    [captureHandlerKeys[outsidePressEvent]]: () => {
+      insideReactTreeRef.current = true;
+    }
+  }), [closeOnEscapeKeyDown, outsidePressEvent]);
+  return React$1.useMemo(() => enabled ? {
+    reference,
+    floating
+  } : {}, [enabled, reference, floating]);
+}
+
+function useFloatingRootContext(options) {
+  const {
+    open = false,
+    onOpenChange: onOpenChangeProp,
+    elements: elementsProp
+  } = options;
+  const floatingId = useId$1();
+  const dataRef = React$1.useRef({});
+  const [events] = React$1.useState(() => createPubSub());
+  const nested = useFloatingParentNodeId() != null;
+  if (process.env.NODE_ENV !== "production") {
+    const optionDomReference = elementsProp.reference;
+    if (optionDomReference && !isElement$2(optionDomReference)) {
+      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
+    }
+  }
+  const [positionReference, setPositionReference] = React$1.useState(elementsProp.reference);
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    dataRef.current.openEvent = open ? event : undefined;
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
+  });
+  const refs = React$1.useMemo(() => ({
+    setPositionReference
+  }), []);
+  const elements = React$1.useMemo(() => ({
+    reference: positionReference || elementsProp.reference || null,
+    floating: elementsProp.floating || null,
+    domReference: elementsProp.reference
+  }), [positionReference, elementsProp.reference, elementsProp.floating]);
+  return React$1.useMemo(() => ({
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  }), [open, onOpenChange, elements, events, floatingId, refs]);
+}
+
+/**
+ * Provides data to position a floating element and context to add interactions.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    nodeId
+  } = options;
+  const internalRootContext = useFloatingRootContext({
+    ...options,
+    elements: {
+      reference: null,
+      floating: null,
+      ...options.elements
+    }
+  });
+  const rootContext = options.rootContext || internalRootContext;
+  const computedElements = rootContext.elements;
+  const [_domReference, setDomReference] = React$1.useState(null);
+  const [positionReference, _setPositionReference] = React$1.useState(null);
+  const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
+  const domReference = optionDomReference || _domReference;
+  const domReferenceRef = React$1.useRef(null);
+  const tree = useFloatingTree();
+  index(() => {
+    if (domReference) {
+      domReferenceRef.current = domReference;
+    }
+  }, [domReference]);
+  const position = useFloating$1({
+    ...options,
+    elements: {
+      ...computedElements,
+      ...(positionReference && {
+        reference: positionReference
+      })
+    }
+  });
+  const setPositionReference = React$1.useCallback(node => {
+    const computedPositionReference = isElement$2(node) ? {
+      getBoundingClientRect: () => node.getBoundingClientRect(),
+      contextElement: node
+    } : node;
+    // Store the positionReference in state if the DOM reference is specified externally via the
+    // `elements.reference` option. This ensures that it won't be overridden on future renders.
+    _setPositionReference(computedPositionReference);
+    position.refs.setReference(computedPositionReference);
+  }, [position.refs]);
+  const setReference = React$1.useCallback(node => {
+    if (isElement$2(node) || node === null) {
+      domReferenceRef.current = node;
+      setDomReference(node);
+    }
+
+    // Backwards-compatibility for passing a virtual element to `reference`
+    // after it has set the DOM reference.
+    if (isElement$2(position.refs.reference.current) || position.refs.reference.current === null ||
+    // Don't allow setting virtual elements using the old technique back to
+    // `null` to support `positionReference` + an unstable `reference`
+    // callback ref.
+    node !== null && !isElement$2(node)) {
+      position.refs.setReference(node);
+    }
+  }, [position.refs]);
+  const refs = React$1.useMemo(() => ({
+    ...position.refs,
+    setReference,
+    setPositionReference,
+    domReference: domReferenceRef
+  }), [position.refs, setReference, setPositionReference]);
+  const elements = React$1.useMemo(() => ({
+    ...position.elements,
+    domReference: domReference
+  }), [position.elements, domReference]);
+  const context = React$1.useMemo(() => ({
+    ...position,
+    ...rootContext,
+    refs,
+    elements,
+    nodeId
+  }), [position, refs, elements, nodeId, rootContext]);
+  index(() => {
+    rootContext.dataRef.current.floatingContext = context;
+    const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
+    if (node) {
+      node.context = context;
+    }
+  });
+  return React$1.useMemo(() => ({
+    ...position,
+    context,
+    refs,
+    elements
+  }), [position, refs, elements, context]);
+}
+
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+function mergeProps(userProps, propsList, elementKey) {
+  const map = new Map();
+  const isItem = elementKey === 'item';
+  let domUserProps = userProps;
+  if (isItem && userProps) {
+    const {
+      [ACTIVE_KEY]: _,
+      [SELECTED_KEY]: __,
+      ...validProps
+    } = userProps;
+    domUserProps = validProps;
+  }
+  return {
+    ...(elementKey === 'floating' && {
+      tabIndex: -1
+    }),
+    ...domUserProps,
+    ...propsList.map(value => {
+      const propsOrGetProps = value ? value[elementKey] : null;
+      if (typeof propsOrGetProps === 'function') {
+        return userProps ? propsOrGetProps(userProps) : null;
+      }
+      return propsOrGetProps;
+    }).concat(userProps).reduce((acc, props) => {
+      if (!props) {
+        return acc;
+      }
+      Object.entries(props).forEach(_ref => {
+        let [key, value] = _ref;
+        if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+          return;
+        }
+        if (key.indexOf('on') === 0) {
+          if (!map.has(key)) {
+            map.set(key, []);
+          }
+          if (typeof value === 'function') {
+            var _map$get;
+            (_map$get = map.get(key)) == null || _map$get.push(value);
+            acc[key] = function () {
+              var _map$get2;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);
+            };
+          }
+        } else {
+          acc[key] = value;
+        }
+      });
+      return acc;
+    }, {})
+  };
+}
+/**
+ * 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/useInteractions
+ */
+function useInteractions(propsList) {
+  if (propsList === void 0) {
+    propsList = [];
+  }
+  const referenceDeps = propsList.map(key => key == null ? void 0 : key.reference);
+  const floatingDeps = propsList.map(key => key == null ? void 0 : key.floating);
+  const itemDeps = propsList.map(key => key == null ? void 0 : key.item);
+  const getReferenceProps = React$1.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  referenceDeps);
+  const getFloatingProps = React$1.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  floatingDeps);
+  const getItemProps = React$1.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  itemDeps);
+  return React$1.useMemo(() => ({
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  }), [getReferenceProps, getFloatingProps, getItemProps]);
+}
 
 const defaultOptions$1 = {
     placement: 'bottom-start',
@@ -22053,18 +22795,14 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     if (!isValidElement(trigger) || !isValidElement(content)) {
         throw new Error('Both children of FloatUI must be valid React elements.');
     }
-    const { x, y, strategy, refs } = useFloating(Object.assign({ elements: {
+    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: setIsOpen, elements: {
             reference: referenceElementRef.current,
-        } }, floatingOptions));
-    useClickOutside(floatUIContentRef, () => setIsOpen(false));
-    const tooltipContent = (jsx("div", { 
-        // Used to position the floating element relative to the reference element
-        ref: refs.setFloating, style: {
-            position: strategy,
-            top: y !== null && y !== void 0 ? y : 0,
-            left: x !== null && x !== void 0 ? x : 0,
-        }, role: "dialog", "aria-label": ariaLabel, className: "floatui-container", children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) }));
-    return (jsxs(Fragment, { children: [jsx("div", { ref: referenceElementRef, onClick: () => setIsOpen(!isOpen), children: trigger }), isOpen &&
+        } }));
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+    const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: "floatui-container", children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
                 (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
 }
 
@@ -43875,5 +44613,5 @@ const Pill = (_a) => {
     return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, arrow$4 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, color as colorUtils, computePosition$2 as computePosition, detectOverflow$2 as detectOverflow, flip$4 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$3 as hide, inline, limitShift, number as numberUtils, offset$4 as offset, platform$1 as platform, shift$2 as shift, size, string as stringUtils, useFloating };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, FloatUI, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, arrow$4 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, color as colorUtils, computePosition$2 as computePosition, detectOverflow$2 as detectOverflow, flip$4 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$3 as hide, inline, limitShift, number as numberUtils, offset$4 as offset, platform$1 as platform, shift$2 as shift, size, string as stringUtils, useFloating$1 as useFloating };
 //# sourceMappingURL=index.esm.js.map