@indico-data/design-system 1.0.56 → 1.0.57

package/lib/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
 import * as React$1 from 'react';
-import React__default, { useState, useEffect, useRef, useCallback, useContext, useMemo, createContext, forwardRef, useLayoutEffect } from 'react';
+import React__default, { useState, useEffect, useRef, useCallback, useContext, useMemo, createContext, forwardRef, useLayoutEffect, useImperativeHandle } from 'react';
 import ReactSelect, { components } from 'react-select';
 import { Link, NavLink } from 'react-router-dom';
 import * as ReactDOM from 'react-dom';
@@ -104,7 +104,7 @@ const round10 = (value, exp) => {
   return decimalAdjust('round', value, exp);
 };
 
-const clamp = (value, min, max) => {
+const clamp$1 = (value, min, max) => {
   value = value < min ? min : value;
   value = value > max ? max : value;
   return value;
@@ -117,7 +117,7 @@ const numberWithCommas$1 = (x) => {
 const MATH = {
   decimalAdjust,
   round10,
-  clamp,
+  clamp: clamp$1,
   numberWithCommas: numberWithCommas$1,
 };
 
@@ -1749,7 +1749,7 @@ var classnames = {exports: {}};
 } (classnames));
 
 var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var y = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const StyledSection = styled.article `
   position: relative;
@@ -1760,7 +1760,7 @@ const StyledSection = styled.article `
 
 const Section = (props) => {
     const { className, style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSection, Object.assign({ className: classNames('Section', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSection, Object.assign({ className: y('Section', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 
 const StyledSectionBlock = styled.div `
@@ -1777,7 +1777,7 @@ const StyledSectionBlock = styled.div `
 
 const SectionBlock = (props) => {
     const { title, className, children, id, style = {} } = props, restOfProps = __rest$1(props, ["title", "className", "children", "id", "style"]);
-    return (jsxs(StyledSectionBlock, Object.assign({ className: classNames('SectionBlock', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: [title ? (jsx("header", { children: jsx("h3", { children: title }) })) : null, children, jsx("hr", { className: "section-bottom-border" })] })));
+    return (jsxs(StyledSectionBlock, Object.assign({ className: y('SectionBlock', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: [title ? (jsx("header", { children: jsx("h3", { children: title }) })) : null, children, jsx("hr", { className: "section-bottom-border" })] })));
 };
 
 const sectionSidePadding = '19px';
@@ -1796,7 +1796,7 @@ const StyledSectionBody = styled.div `
 
 const SectionBody = (props) => {
     const { className, style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSectionBody, Object.assign({ className: classNames('SectionBody', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSectionBody, Object.assign({ className: y('SectionBody', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 
 const StyledSectionHeader = styled.header `
@@ -1805,7 +1805,7 @@ const StyledSectionHeader = styled.header `
 
 const SectionHeader = (props) => {
     const { className, style, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
-    return (jsx(StyledSectionHeader, Object.assign({ className: classNames('SectionHeader', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
+    return (jsx(StyledSectionHeader, Object.assign({ className: y('SectionHeader', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
 SectionHeader.defaultProps = {
     className: '',
@@ -1949,7 +1949,7 @@ const StyledValidationError = styled.div `
 const BorderSelect = (props) => {
     const { className = '', disabled, horizontal, id, initialText, label, onChange, options, style = {}, value, validationErrors, } = props;
     const selectId = v4();
-    return (jsxs(StyledSelect$1, { className: classNames('Select', { horizontal }, className), "data-cy": props['data-cy'], id: id, style: style, children: [label && jsx("label", { htmlFor: selectId, children: label }), jsxs("div", { className: "select-container", children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
+    return (jsxs(StyledSelect$1, { className: y('Select', { horizontal }, className), "data-cy": props['data-cy'], id: id, style: style, children: [label && jsx("label", { htmlFor: selectId, children: label }), jsxs("div", { className: "select-container", children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
                                 const key = v4();
                                 return (jsx("option", { value: o.value, children: o.name }, key));
                             })] }), jsx(Icon, { name: "fa-caret-down", className: "selectCaret" })] }), validationErrors ? (jsx(StyledValidationError, { children: validationErrors.map((err, i) => {
@@ -2030,7 +2030,7 @@ const StyledSelect = styled.div `
 const Select = (props) => {
     const { id, className, disabled, initialText, onChange, options, size = 'medium', style = {}, value, variant, onClick, } = props;
     const selectId = v4();
-    return (jsx(StyledSelect, { className: className, "data-cy": props['data-cy'], id: id, style: style, children: jsxs("div", { className: classNames('Select__container', size, variant), onClick: (e) => (onClick ? onClick(e) : null), children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
+    return (jsx(StyledSelect, { className: className, "data-cy": props['data-cy'], id: id, style: style, children: jsxs("div", { className: y('Select__container', size, variant), onClick: (e) => (onClick ? onClick(e) : null), children: [jsxs("select", { onChange: onChange, value: value, disabled: disabled, id: selectId, children: [initialText && (jsx("option", { disabled: true, value: "", children: initialText })), options.map((o) => {
                             const key = v4();
                             return (jsx("option", { value: o.value, children: o.name }, key));
                         })] }), jsx(Icon, { className: "chevron", name: "chevron-down", size: size === 'small' ? [10] : [12] })] }) }));
@@ -2817,10 +2817,10 @@ const SectionTable = (props) => {
         }
     };
     const headers = Object.keys(props.tableObjects[0].content);
-    return (jsxs(StyledSectionTable, { className: classNames('SectionTable', props.className, { loading: props.loading }), "data-cy": props['data-cy'], id: props.id, children: [props.sortColumnHandler && props.sortedColumn && (jsx("div", { className: "mobile-sort", children: jsx(BorderSelect, { onChange: (e) => props.sortColumnHandler(e.target.value), value: props.sortedColumn, options: [].concat({ name: 'Choose Sorting Option', value: '' }, headers.map((item) => {
+    return (jsxs(StyledSectionTable, { className: y('SectionTable', props.className, { loading: props.loading }), "data-cy": props['data-cy'], id: props.id, children: [props.sortColumnHandler && props.sortedColumn && (jsx("div", { className: "mobile-sort", children: jsx(BorderSelect, { onChange: (e) => props.sortColumnHandler(e.target.value), value: props.sortedColumn, options: [].concat({ name: 'Choose Sorting Option', value: '' }, headers.map((item) => {
                         return { name: item, value: item };
                     })) }) })), jsxs("table", Object.assign({}, props.tableProps, { children: [jsx("thead", { children: jsxs("tr", { children: [props.tableObjects[0].rowAccordionContent ? jsx("th", { className: "action-column" }) : null, headers.map((header, i) => {
-                                    return (jsxs("th", { className: classNames({
+                                    return (jsxs("th", { className: y({
                                             'not-sortable': props.sortableHeaders && props.sortableHeaders.indexOf(header) === -1,
                                         }), onClick: () => {
                                             if (props.sortColumnHandler) {
@@ -2834,7 +2834,7 @@ const SectionTable = (props) => {
                                                 }
                                             }
                                         }, children: [props.headersContent ? props.headersContent[header] : header, ' ', props.sortedColumn === header && (jsx(Icon, { name: `fa-caret-${props.sortDirection}` }))] }, i));
-                                })] }) }), jsx("tbody", { className: classNames({ 'SectionTable--tbody-loading': props.loading }), children: props.loading
+                                })] }) }), jsx("tbody", { className: y({ 'SectionTable--tbody-loading': props.loading }), children: props.loading
                             ? Array.from({ length: 5 }, (x, i) => (jsx("tr", { children: props.tableObjects[0].rowAccordionContent ? (jsx("td", { colSpan: headers.length + 1 })) : (jsx("td", { colSpan: headers.length })) }, i)))
                             : props.tableObjects.map((obj, i) => {
                                 let rowStyle = obj.rowStyleCondition;
@@ -2842,7 +2842,7 @@ const SectionTable = (props) => {
                                     rowStyle = { [rowStyle.className]: rowStyle.condition };
                                 }
                                 if (obj.rowAccordionContent) {
-                                    return (jsx("tr", Object.assign({ className: classNames(rowStyle) }, props.rowProps, { children: jsx("td", { colSpan: headers.length + 1, style: { padding: '0' }, className: "outer-hover", children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "action-column", style: {
+                                    return (jsx("tr", Object.assign({ className: y(rowStyle) }, props.rowProps, { children: jsx("td", { colSpan: headers.length + 1, style: { padding: '0' }, className: "outer-hover", children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "action-column", style: {
                                                                         padding: '0',
                                                                         height: '1px',
                                                                         border: 'none',
@@ -2861,18 +2861,18 @@ const SectionTable = (props) => {
                                                                         return (jsx("td", Object.assign({ style: {
                                                                                 borderBottom: 'none',
                                                                             }, "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
-                                                                    })] }), jsx("tr", { className: classNames('row-option', {
+                                                                    })] }), jsx("tr", { className: y('row-option', {
                                                                     open: openRowOptions.indexOf(obj.id) !== -1,
                                                                 }), children: jsx("td", { className: "inner-table-cell", colSpan: headers.length + 1, children: obj.rowAccordionContent }) })] })] }) }) }), i));
                                 }
                                 else if (obj.lineItemLink) {
-                                    return (jsx("tr", Object.assign({ onClick: handleRowClick(obj.lineItemLink), className: classNames('hover', rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
+                                    return (jsx("tr", Object.assign({ onClick: handleRowClick(obj.lineItemLink), className: y('hover', rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
                                             var _a;
                                             return (jsx("td", Object.assign({ "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
                                         }) }), i));
                                 }
                                 else {
-                                    return (jsx("tr", Object.assign({ className: classNames(rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
+                                    return (jsx("tr", Object.assign({ className: y(rowStyle) }, props.rowProps, { children: Object.keys(obj.content).map((key, i) => {
                                             var _a;
                                             return (jsx("td", Object.assign({ "data-heading": headers[i], title: createTitle(obj.content[key]) }, (_a = props === null || props === void 0 ? void 0 : props.headingProps) === null || _a === void 0 ? void 0 : _a[headers === null || headers === void 0 ? void 0 : headers[i]], { children: obj.content[key] }), i));
                                         }) }), i));
@@ -3377,7 +3377,7 @@ const StyledButton = styled.button `
 
 function Button$1(props) {
     const { id, className, busy, children, disabled, onClick, onFocus, role, style, tabindex, type, variant = 'default' } = props, rest = __rest$1(props, ["id", "className", "busy", "children", "disabled", "onClick", "onFocus", "role", "style", "tabindex", "type", "variant"]);
-    return (jsxs(StyledButton, Object.assign({ "aria-disabled": busy, "aria-label": props['aria-label'], "aria-pressed": props['aria-pressed'], "aria-selected": props['aria-selected'], className: classNames(variant, className, {
+    return (jsxs(StyledButton, Object.assign({ "aria-disabled": busy, "aria-label": props['aria-label'], "aria-pressed": props['aria-pressed'], "aria-selected": props['aria-selected'], className: y(variant, className, {
             blue: variant === 'primary' || variant === 'cta',
             busy,
         }), "data-cy": props['data-cy'], disabled: disabled, id: id, onClick: busy ? undefined : onClick, onFocus: onFocus, role: role, style: style, tabIndex: tabindex, type: type || 'button' }, rest, { children: [busy && jsx(CircleSpinner, { size: "0.9em", style: { marginRight: '0.5em' } }), children] })));
@@ -3638,7 +3638,7 @@ function $8ae05eaa5c114e9c$export$7f54fc3180508a52(fn) {
     // @ts-ignore
     return (useCallback)((...args)=>{
         const f = ref.current;
-        return f(...args);
+        return f === null || f === void 0 ? void 0 : f(...args);
     }, []);
 }
 
@@ -3649,6 +3649,7 @@ function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
     // Store the function in a ref so we can always access the current version
     // which has the proper `value` in scope.
     let nextRef = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+        if (!effect.current) return;
         // Run the generator to the next yield.
         let newValue = effect.current.next();
         // If the generator is done, reset the effect.
@@ -3870,7 +3871,7 @@ function $7215afc6de606d6b$var$supportsPreventScroll() {
     if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
         $7215afc6de606d6b$var$supportsPreventScrollCached = false;
         try {
-            var focusElem = document.createElement("div");
+            let focusElem = document.createElement("div");
             focusElem.focus({
                 get preventScroll () {
                     $7215afc6de606d6b$var$supportsPreventScrollCached = true;
@@ -3884,9 +3885,9 @@ function $7215afc6de606d6b$var$supportsPreventScroll() {
     return $7215afc6de606d6b$var$supportsPreventScrollCached;
 }
 function $7215afc6de606d6b$var$getScrollableElements(element) {
-    var parent = element.parentNode;
-    var scrollableElements = [];
-    var rootScrollingElement = document.scrollingElement || document.documentElement;
+    let parent = element.parentNode;
+    let scrollableElements = [];
+    let rootScrollingElement = document.scrollingElement || document.documentElement;
     while(parent instanceof HTMLElement && parent !== rootScrollingElement){
         if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) scrollableElements.push({
             element: parent,
@@ -4021,7 +4022,11 @@ let $bbed8b41f857bcc0$var$transitionsByElement = new Map();
 let $bbed8b41f857bcc0$var$transitionCallbacks = new Set();
 function $bbed8b41f857bcc0$var$setupGlobalEvents() {
     if (typeof window === "undefined") return;
+    function isTransitionEvent(event) {
+        return "propertyName" in event;
+    }
     let onTransitionStart = (e)=>{
+        if (!isTransitionEvent(e) || !e.target) return;
         // Add the transitioning property to the list for this element.
         let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
         if (!transitions) {
@@ -4030,11 +4035,14 @@ function $bbed8b41f857bcc0$var$setupGlobalEvents() {
             // The transitioncancel event must be registered on the element itself, rather than as a global
             // event. This enables us to handle when the node is deleted from the document while it is transitioning.
             // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-            e.target.addEventListener("transitioncancel", onTransitionEnd);
+            e.target.addEventListener("transitioncancel", onTransitionEnd, {
+                once: true
+            });
         }
         transitions.add(e.propertyName);
     };
     let onTransitionEnd = (e)=>{
+        if (!isTransitionEvent(e) || !e.target) return;
         // Remove property from list of transitioning properties.
         let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
         if (!properties) return;
@@ -4173,7 +4181,7 @@ function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
         if (context && context.ref && ref) {
             context.ref.current = ref.current;
             return ()=>{
-                context.ref.current = null;
+                if (context.ref) context.ref.current = null;
             };
         }
     });
@@ -4327,6 +4335,7 @@ function _class_private_field_set(receiver, privateMap, value) {
 
 
 
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4394,7 +4403,6 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
 }
 
 
-
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -4545,8 +4553,13 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                         state.isPressed = true;
                         shouldStopPropagation = triggerPressStart(e, "keyboard");
                         // Focus may move before the key up event, so register the event on the document
-                        // instead of the same element where the key down event occurred.
-                        addGlobalListener(($431fbd86ca7dc216$export$b204af158042fbac)(e.currentTarget), "keyup", onKeyUp, false);
+                        // instead of the same element where the key down event occurred. Make it capturing so that it will trigger
+                        // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element.
+                        let originalTarget = e.currentTarget;
+                        let pressUp = (e)=>{
+                            if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard");
+                        };
+                        addGlobalListener(($431fbd86ca7dc216$export$b204af158042fbac)(e.currentTarget), "keyup", ($ff5963eb1fccf552$export$e08e3b67e392101e)(pressUp, onKeyUp), true);
                     }
                     if (shouldStopPropagation) e.stopPropagation();
                     // Keep track of the keydown events that occur while the Meta (e.g. Command) key is held.
@@ -4559,9 +4572,6 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                     if (e.metaKey && ($c87311424ea30a05$export$9ac100e40613ea10)()) (_state_metaKeyEvents = state.metaKeyEvents) === null || _state_metaKeyEvents === void 0 ? void 0 : _state_metaKeyEvents.set(e.key, e.nativeEvent);
                 } else if (e.key === "Meta") state.metaKeyEvents = new Map();
             },
-            onKeyUp (e) {
-                if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard");
-            },
             onClick (e) {
                 if (e && !e.currentTarget.contains(e.target)) return;
                 if (e && e.button === 0 && !state.isTriggeringEvent && !($ea8dcbcb9ea1b556$export$95185d699e05d4d7).isOpening) {
@@ -4589,9 +4599,8 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
                 var _state_metaKeyEvents1;
                 if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
                 let target = e.target;
-                let shouldStopPropagation = triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard", state.target.contains(target));
+                triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard", state.target.contains(target));
                 removeAllGlobalListeners();
-                if (shouldStopPropagation) e.stopPropagation();
                 // If a link was triggered with a key other than Enter, open the URL ourselves.
                 // This means the link has a role override, and the default browser behavior
                 // only applies when using the Enter key.
@@ -5126,7 +5135,7 @@ function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
 
 let $507fabe10e71c6fb$var$currentModality = null;
 let $507fabe10e71c6fb$var$changeHandlers = new Set();
-let $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
+let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects.
 let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
 let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
 // Only Tab or Esc keys will make focus visible on text input elements
@@ -5185,39 +5194,82 @@ function $507fabe10e71c6fb$var$handleWindowBlur() {
 }
 /**
  * Setup global event listeners to control when keyboard focus style should be visible.
- */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents() {
-    if (typeof window === "undefined" || $507fabe10e71c6fb$var$hasSetupGlobalListeners) return;
+ */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) {
+    if (typeof window === "undefined" || $507fabe10e71c6fb$export$d90243b58daecda7.get(($431fbd86ca7dc216$export$f21a1ffae260145a)(element))) return;
+    const windowObject = ($431fbd86ca7dc216$export$f21a1ffae260145a)(element);
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
     // Programmatic focus() calls shouldn't affect the current input modality.
     // However, we need to detect other cases when a focus event occurs without
     // a preceding user event (e.g. screen reader focus). Overriding the focus
     // method on HTMLElement.prototype is a bit hacky, but works.
-    let focus = HTMLElement.prototype.focus;
-    HTMLElement.prototype.focus = function() {
+    let focus = windowObject.HTMLElement.prototype.focus;
+    windowObject.HTMLElement.prototype.focus = function() {
         $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
         focus.apply(this, arguments);
     };
-    document.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
-    document.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
-    document.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+    documentObject.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
     // Register focus events on the window so they are sure to happen
     // before React's event listeners (registered on the document).
-    window.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
-    window.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+    windowObject.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
     if (typeof PointerEvent !== "undefined") {
-        document.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
     } else {
-        document.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
-        document.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
-    }
-    $507fabe10e71c6fb$var$hasSetupGlobalListeners = true;
+        documentObject.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    // Add unmount handler
+    windowObject.addEventListener("beforeunload", ()=>{
+        $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element);
+    }, {
+        once: true
+    });
+    $507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, {
+        focus: focus
+    });
 }
-if (typeof document !== "undefined") {
-    if (document.readyState !== "loading") $507fabe10e71c6fb$var$setupGlobalFocusEvents();
-    else document.addEventListener("DOMContentLoaded", $507fabe10e71c6fb$var$setupGlobalFocusEvents);
+const $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener)=>{
+    const windowObject = ($431fbd86ca7dc216$export$f21a1ffae260145a)(element);
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
+    if (loadListener) documentObject.removeEventListener("DOMContentLoaded", loadListener);
+    if (!$507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject)) return;
+    windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus;
+    documentObject.removeEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+    windowObject.removeEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.removeEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+    if (typeof PointerEvent !== "undefined") {
+        documentObject.removeEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    } else {
+        documentObject.removeEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    $507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject);
+};
+function $507fabe10e71c6fb$export$2f1888112f558a7d(element) {
+    const documentObject = ($431fbd86ca7dc216$export$b204af158042fbac)(element);
+    let loadListener;
+    if (documentObject.readyState !== "loading") $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+    else {
+        loadListener = ()=>{
+            $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+        };
+        documentObject.addEventListener("DOMContentLoaded", loadListener);
+    }
+    return ()=>$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener);
 }
+// Server-side rendering does not have the document object defined
+// eslint-disable-next-line no-restricted-globals
+if (typeof document !== "undefined") $507fabe10e71c6fb$export$2f1888112f558a7d();
 function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
     return $507fabe10e71c6fb$var$currentModality !== "pointer";
 }
@@ -5244,8 +5296,12 @@ const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([
  * focus visible style can be properly set.
  */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
     var _e_target;
-    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof HTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
-    return !(isTextInput && modality === "keyboard" && e instanceof KeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+    const IHTMLInputElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
+    const IHTMLTextAreaElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
+    const IHTMLElement = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
+    const IKeyboardEvent = typeof window !== "undefined" ? ($431fbd86ca7dc216$export$f21a1ffae260145a)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
+    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+    return !(isTextInput && modality === "keyboard" && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
     $507fabe10e71c6fb$var$setupGlobalFocusEvents();
@@ -5951,7 +6007,7 @@ function IconButton(props) {
     // @ts-ignore
     buttonEl);
     const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-    const commonProps = Object.assign(Object.assign(Object.assign({ 'aria-disabled': busy, className: classNames(iconSide, size, variant, className, {
+    const commonProps = Object.assign(Object.assign(Object.assign({ 'aria-disabled': busy, className: y(iconSide, size, variant, className, {
             'focus-visible': isFocusVisible,
             busy,
             disabled: isLink && isDisabled,
@@ -5960,7 +6016,7 @@ function IconButton(props) {
             marginTop: `${adjustAlignment}px`,
             marginBottom: `${Math.abs(adjustAlignment)}px`,
             marginRight: `${spacings.xs}`,
-        } })) : (jsx(Icon, { className: classNames({ 'right-margin': label }), name: iconName }));
+        } })) : (jsx(Icon, { className: y({ 'right-margin': label }), name: iconName }));
     const labelElement = label ? (jsx("span", { style: { marginTop: `${adjustAlignment}px` }, children: label })) : null;
     if (isLink && !isDisabled) {
         return (
@@ -6043,7 +6099,7 @@ function EditableInput(props) {
             setInitialValue(editableEl.current.innerText);
         }
     }, []);
-    return (jsxs(StyledEditableInput, { className: classNames('EditableInput-container', id, className), "data-cy": props['data-cy'], id: props.id, children: [jsx("span", { role: "textbox", tabIndex: 0, contentEditable: true, suppressContentEditableWarning: true, ref: editableEl, onKeyDown: handleKeypress, onBlur: handleBlur, children: children }), jsx(Icon, { name: "fa-pencil-alt", className: "pencil-icon" })] }));
+    return (jsxs(StyledEditableInput, { className: y('EditableInput-container', id, className), "data-cy": props['data-cy'], id: props.id, children: [jsx("span", { role: "textbox", tabIndex: 0, contentEditable: true, suppressContentEditableWarning: true, ref: editableEl, onKeyDown: handleKeypress, onBlur: handleBlur, children: children }), jsx(Icon, { name: "fa-pencil-alt", className: "pencil-icon" })] }));
 }
 
 const inputCommon = css `
@@ -6225,7 +6281,7 @@ function NumberInput(props) {
         }, 1000);
         return () => clearTimeout(delayDebounceFn);
     }, [currentValue]);
-    return (jsxs(StyledNumberField, { className: classNames(className, {
+    return (jsxs(StyledNumberField, { className: y(className, {
             hiddenLabel,
         }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { tabIndex: tabIndex, autoFocus: autoFocus, id: fieldId, type: "number", value: currentValue, disabled: disabled, max: max, min: min, onChange: handleChange, placeholder: placeholder, required: required, step: step, "aria-label": hiddenLabel ? label : '', ref: inputEl }), !hiddenLabel && jsx("label", { htmlFor: fieldId, children: label }), jsxs("div", { className: "spin-buttons", children: [jsx(Button$1, { variant: "no-style", onClick: increment, tabindex: -1, children: jsx(Icon, { name: "fa-caret-up", ariaLabel: "increase" }) }), jsx(Button$1, { variant: "no-style", onClick: decrement, tabindex: -1, children: jsx(Icon, { name: "fa-caret-down", ariaLabel: "decrease" }) })] })] }));
 }
@@ -6279,7 +6335,7 @@ const StyledSearchField = styled.div `
 const SearchInput = (props) => {
     const { id, border, showSearchIcon, showClearInputIcon, className, inputProps, onChange, onClear, onKeyUp, placeholder, value, } = props;
     const getId = id ? id : v4();
-    return (jsxs(StyledSearchField, { className: classNames(className, {
+    return (jsxs(StyledSearchField, { className: y(className, {
             border,
             showSearchIcon,
             showClearInputIcon,
@@ -6357,7 +6413,7 @@ function TextInput(props) {
     const inputId = v4();
     const { autoComplete, autoFocus, className, defaultValue, disabled, displayErrors, id, inputProps, label, maxLength, name, onBlur, onChange, onFocus, placeholder, promptProps, required, type = 'text', validationErrors, value, readOnly, } = props;
     const errorClass = displayErrors ? 'error' : 'prompt';
-    return (jsxs(StyledTextInput, { className: className, "data-cy": props['data-cy'], id: id, children: [jsx("input", Object.assign({ autoComplete: autoComplete, autoFocus: autoFocus, className: classNames('text-input__input-element', {
+    return (jsxs(StyledTextInput, { className: className, "data-cy": props['data-cy'], id: id, children: [jsx("input", Object.assign({ autoComplete: autoComplete, autoFocus: autoFocus, className: y('text-input__input-element', {
                     filled: (value && value.length > 0) || defaultValue,
                 }), disabled: disabled, defaultValue: defaultValue, id: inputId, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: (e) => {
                     if (e.key === 'Enter') {
@@ -6365,7 +6421,7 @@ function TextInput(props) {
                     }
                 }, placeholder: placeholder, required: required, type: type, value: value, readOnly: readOnly }, inputProps)), label ? jsx("label", { htmlFor: inputId, children: label }) : null, (validationErrors || maxLength) && (jsxs(StyledInputInfo, { children: [validationErrors && (jsx("div", { children: validationErrors.map((err, i) => {
                             return (jsx("p", Object.assign({ className: errorClass }, promptProps, { children: err }), i));
-                        }) })), maxLength && (jsxs("div", { className: classNames('count', { isMax: (value === null || value === void 0 ? void 0 : value.length) === maxLength }), children: [(value === null || value === void 0 ? void 0 : value.length) || 0, " / ", maxLength] }))] }))] }));
+                        }) })), maxLength && (jsxs("div", { className: y('count', { isMax: (value === null || value === void 0 ? void 0 : value.length) === maxLength }), children: [(value === null || value === void 0 ? void 0 : value.length) || 0, " / ", maxLength] }))] }))] }));
 }
 
 /*
@@ -7266,7 +7322,7 @@ function RadioGroup$1(props) {
     };
     const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(radioGroupState);
     const { radioGroupProps, labelProps } = $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state);
-    return (jsxs(StyledRadioGroup$1, Object.assign({}, radioGroupProps, { className: classNames(className, { horizontal: orientation === 'horizontal' }), "data-cy": props['data-cy'], id: id, children: [label && (jsx("div", Object.assign({ className: "groupLabel" }, labelProps, { children: label }))), jsx(RadioContext.Provider, { value: state, children: children })] })));
+    return (jsxs(StyledRadioGroup$1, Object.assign({}, radioGroupProps, { className: y(className, { horizontal: orientation === 'horizontal' }), "data-cy": props['data-cy'], id: id, children: [label && (jsx("div", Object.assign({ className: "groupLabel" }, labelProps, { children: label }))), jsx(RadioContext.Provider, { value: state, children: children })] })));
 }
 /**
  * A single radio button and its label; no styling is applied, and the native
@@ -7286,7 +7342,7 @@ function Radio$1(props) {
     else {
         isSelected = state.selectedValue === props.value;
     }
-    return (jsxs("label", { className: classNames(className, {
+    return (jsxs("label", { className: y(className, {
             disabled: isDisabled || state.isDisabled,
             selected: isSelected,
             focused: isFocusVisible,
@@ -7954,7 +8010,7 @@ function addYears(date, amount) {
  * ])
  * //=> Sun Jul 02 1995 00:00:00
  */
-function max$1(dates) {
+function max$2(dates) {
   let result;
   dates.forEach(function (dirtyDate) {
     const currentDate = toDate(dirtyDate);
@@ -7995,7 +8051,7 @@ function max$1(dates) {
  * ])
  * //=> Wed Feb 11 1987 00:00:00
  */
-function min$1(dates) {
+function min$2(dates) {
   let result;
 
   dates.forEach((dirtyDate) => {
@@ -19360,10 +19416,10 @@ function getNextFocus(focusedDay, options) {
     };
     var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
     if (direction === 'before' && fromDate) {
-        newFocusedDay = max$1([fromDate, newFocusedDay]);
+        newFocusedDay = max$2([fromDate, newFocusedDay]);
     }
     else if (direction === 'after' && toDate) {
-        newFocusedDay = min$1([toDate, newFocusedDay]);
+        newFocusedDay = min$2([toDate, newFocusedDay]);
     }
     var isFocusable = true;
     if (modifiers) {
@@ -20282,11 +20338,11 @@ var write = 'write';
 var afterWrite = 'afterWrite';
 var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
 
-function getNodeName(element) {
+function getNodeName$1(element) {
   return element ? (element.nodeName || '').toLowerCase() : null;
 }
 
-function getWindow(node) {
+function getWindow$1(node) {
   if (node == null) {
     return window;
   }
@@ -20299,23 +20355,23 @@ function getWindow(node) {
   return node;
 }
 
-function isElement(node) {
-  var OwnElement = getWindow(node).Element;
+function isElement$1(node) {
+  var OwnElement = getWindow$1(node).Element;
   return node instanceof OwnElement || node instanceof Element;
 }
 
-function isHTMLElement(node) {
-  var OwnElement = getWindow(node).HTMLElement;
+function isHTMLElement$1(node) {
+  var OwnElement = getWindow$1(node).HTMLElement;
   return node instanceof OwnElement || node instanceof HTMLElement;
 }
 
-function isShadowRoot(node) {
+function isShadowRoot$1(node) {
   // IE 11 has no ShadowRoot
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
 
-  var OwnElement = getWindow(node).ShadowRoot;
+  var OwnElement = getWindow$1(node).ShadowRoot;
   return node instanceof OwnElement || node instanceof ShadowRoot;
 }
 
@@ -20328,7 +20384,7 @@ function applyStyles(_ref) {
     var attributes = state.attributes[name] || {};
     var element = state.elements[name]; // arrow is optional + virtual elements
 
-    if (!isHTMLElement(element) || !getNodeName(element)) {
+    if (!isHTMLElement$1(element) || !getNodeName$1(element)) {
       return;
     } // Flow doesn't support to extend this property, but it's the most
     // effective way to apply styles to an HTMLElement
@@ -20380,7 +20436,7 @@ function effect$2(_ref2) {
         return style;
       }, {}); // arrow is optional + virtual elements
 
-      if (!isHTMLElement(element) || !getNodeName(element)) {
+      if (!isHTMLElement$1(element) || !getNodeName$1(element)) {
         return;
       }
 
@@ -20406,9 +20462,9 @@ function getBasePlacement(placement) {
   return placement.split('-')[0];
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
+var max$1 = Math.max;
+var min$1 = Math.min;
+var round$1 = Math.round;
 
 function getUAString() {
   var uaData = navigator.userAgentData;
@@ -20426,7 +20482,7 @@ function isLayoutViewport() {
   return !/^((?!chrome|android).)*safari/i.test(getUAString());
 }
 
-function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+function getBoundingClientRect$1(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -20439,12 +20495,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   var scaleX = 1;
   var scaleY = 1;
 
-  if (includeScale && isHTMLElement(element)) {
-    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  if (includeScale && isHTMLElement$1(element)) {
+    scaleX = element.offsetWidth > 0 ? round$1(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round$1(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
-  var _ref = isElement(element) ? getWindow(element) : window,
+  var _ref = isElement$1(element) ? getWindow$1(element) : window,
       visualViewport = _ref.visualViewport;
 
   var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
@@ -20467,7 +20523,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
 // means it doesn't take into account transforms.
 
 function getLayoutRect(element) {
-  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  var clientRect = getBoundingClientRect$1(element); // Use the clientRect sizes if it's not been transformed.
   // Fixes https://github.com/popperjs/popper-core/issues/1223
 
   var width = element.offsetWidth;
@@ -20495,7 +20551,7 @@ function contains(parent, child) {
   if (parent.contains(child)) {
     return true;
   } // then fallback to custom implementation with Shadow DOM support
-  else if (rootNode && isShadowRoot(rootNode)) {
+  else if (rootNode && isShadowRoot$1(rootNode)) {
       var next = child;
 
       do {
@@ -20512,22 +20568,22 @@ function contains(parent, child) {
   return false;
 }
 
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
+function getComputedStyle$2(element) {
+  return getWindow$1(element).getComputedStyle(element);
 }
 
-function isTableElement(element) {
-  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+function isTableElement$1(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName$1(element)) >= 0;
 }
 
-function getDocumentElement(element) {
+function getDocumentElement$1(element) {
   // $FlowFixMe[incompatible-return]: assume body is always available
-  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  return ((isElement$1(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
   element.document) || window.document).documentElement;
 }
 
-function getParentNode(element) {
-  if (getNodeName(element) === 'html') {
+function getParentNode$1(element) {
+  if (getNodeName$1(element) === 'html') {
     return element;
   }
 
@@ -20536,16 +20592,16 @@ function getParentNode(element) {
     // $FlowFixMe[prop-missing]
     element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
     element.parentNode || ( // DOM Element detected
-    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    isShadowRoot$1(element) ? element.host : null) || // ShadowRoot detected
     // $FlowFixMe[incompatible-call]: HTMLElement is a Node
-    getDocumentElement(element) // fallback
+    getDocumentElement$1(element) // fallback
 
   );
 }
 
-function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-  getComputedStyle$1(element).position === 'fixed') {
+function getTrueOffsetParent$1(element) {
+  if (!isHTMLElement$1(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle$2(element).position === 'fixed') {
     return null;
   }
 
@@ -20554,27 +20610,27 @@ function getTrueOffsetParent(element) {
 // return the containing block
 
 
-function getContainingBlock(element) {
+function getContainingBlock$1(element) {
   var isFirefox = /firefox/i.test(getUAString());
   var isIE = /Trident/i.test(getUAString());
 
-  if (isIE && isHTMLElement(element)) {
+  if (isIE && isHTMLElement$1(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
-    var elementCss = getComputedStyle$1(element);
+    var elementCss = getComputedStyle$2(element);
 
     if (elementCss.position === 'fixed') {
       return null;
     }
   }
 
-  var currentNode = getParentNode(element);
+  var currentNode = getParentNode$1(element);
 
-  if (isShadowRoot(currentNode)) {
+  if (isShadowRoot$1(currentNode)) {
     currentNode = currentNode.host;
   }
 
-  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
-    var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+  while (isHTMLElement$1(currentNode) && ['html', 'body'].indexOf(getNodeName$1(currentNode)) < 0) {
+    var css = getComputedStyle$2(currentNode); // 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
 
@@ -20590,27 +20646,27 @@ function getContainingBlock(element) {
 // such as table ancestors and cross browser bugs.
 
 
-function getOffsetParent(element) {
-  var window = getWindow(element);
-  var offsetParent = getTrueOffsetParent(element);
+function getOffsetParent$1(element) {
+  var window = getWindow$1(element);
+  var offsetParent = getTrueOffsetParent$1(element);
 
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
-    offsetParent = getTrueOffsetParent(offsetParent);
+  while (offsetParent && isTableElement$1(offsetParent) && getComputedStyle$2(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent$1(offsetParent);
   }
 
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static')) {
+  if (offsetParent && (getNodeName$1(offsetParent) === 'html' || getNodeName$1(offsetParent) === 'body' && getComputedStyle$2(offsetParent).position === 'static')) {
     return window;
   }
 
-  return offsetParent || getContainingBlock(element) || window;
+  return offsetParent || getContainingBlock$1(element) || window;
 }
 
 function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-function within(min$1, value, max$1) {
-  return max(min$1, min(value, max$1));
+function within(min, value, max) {
+  return max$1(min, min$1(value, max));
 }
 function withinMaxClamp(min, value, max) {
   var v = within(min, value, max);
@@ -20644,7 +20700,7 @@ var toPaddingObject = function toPaddingObject(padding, state) {
   return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
 };
 
-function arrow(_ref) {
+function arrow$2(_ref) {
   var _state$modifiersData$;
 
   var state = _ref.state,
@@ -20667,7 +20723,7 @@ function arrow(_ref) {
   var maxProp = axis === 'y' ? bottom : right;
   var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
   var startDiff = popperOffsets[axis] - state.rects.reference[axis];
-  var arrowOffsetParent = getOffsetParent(arrowElement);
+  var arrowOffsetParent = getOffsetParent$1(arrowElement);
   var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
   var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
   // outside of the popper bounds
@@ -20708,11 +20764,11 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-var arrow$1 = {
+var arrow$3 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
-  fn: arrow,
+  fn: arrow$2,
   effect: effect$1,
   requires: ['popperOffsets'],
   requiresIfExists: ['preventOverflow']
@@ -20736,8 +20792,8 @@ function roundOffsetsByDPR(_ref, win) {
       y = _ref.y;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(x * dpr) / dpr || 0,
-    y: round(y * dpr) / dpr || 0
+    x: round$1(x * dpr) / dpr || 0,
+    y: round$1(y * dpr) / dpr || 0
   };
 }
 
@@ -20776,14 +20832,14 @@ function mapToStyles(_ref2) {
   var win = window;
 
   if (adaptive) {
-    var offsetParent = getOffsetParent(popper);
+    var offsetParent = getOffsetParent$1(popper);
     var heightProp = 'clientHeight';
     var widthProp = 'clientWidth';
 
-    if (offsetParent === getWindow(popper)) {
-      offsetParent = getDocumentElement(popper);
+    if (offsetParent === getWindow$1(popper)) {
+      offsetParent = getDocumentElement$1(popper);
 
-      if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') {
+      if (getComputedStyle$2(offsetParent).position !== 'static' && position === 'absolute') {
         heightProp = 'scrollHeight';
         widthProp = 'scrollWidth';
       }
@@ -20816,7 +20872,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }, getWindow(popper)) : {
+  }, getWindow$1(popper)) : {
     x: x,
     y: y
   };
@@ -20895,7 +20951,7 @@ function effect(_ref) {
       scroll = _options$scroll === void 0 ? true : _options$scroll,
       _options$resize = options.resize,
       resize = _options$resize === void 0 ? true : _options$resize;
-  var window = getWindow(state.elements.popper);
+  var window = getWindow$1(state.elements.popper);
   var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
 
   if (scroll) {
@@ -20937,7 +20993,7 @@ var hash$1 = {
   bottom: 'top',
   top: 'bottom'
 };
-function getOppositePlacement(placement) {
+function getOppositePlacement$1(placement) {
   return placement.replace(/left|right|bottom|top/g, function (matched) {
     return hash$1[matched];
   });
@@ -20954,7 +21010,7 @@ function getOppositeVariationPlacement(placement) {
 }
 
 function getWindowScroll(node) {
-  var win = getWindow(node);
+  var win = getWindow$1(node);
   var scrollLeft = win.pageXOffset;
   var scrollTop = win.pageYOffset;
   return {
@@ -20963,7 +21019,7 @@ function getWindowScroll(node) {
   };
 }
 
-function getWindowScrollBarX(element) {
+function getWindowScrollBarX$1(element) {
   // If <html> has a CSS width greater than the viewport, then this will be
   // incorrect for RTL.
   // Popper 1 is broken in this case and never had a bug report so let's assume
@@ -20971,12 +21027,12 @@ function getWindowScrollBarX(element) {
   // anyway.
   // Browsers where the left scrollbar doesn't cause an issue report `0` for
   // this (e.g. Edge 2019, IE11, Safari)
-  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
+  return getBoundingClientRect$1(getDocumentElement$1(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element, strategy) {
-  var win = getWindow(element);
-  var html = getDocumentElement(element);
+function getViewportRect$1(element, strategy) {
+  var win = getWindow$1(element);
+  var html = getDocumentElement$1(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
@@ -20997,26 +21053,26 @@ function getViewportRect(element, strategy) {
   return {
     width: width,
     height: height,
-    x: x + getWindowScrollBarX(element),
+    x: x + getWindowScrollBarX$1(element),
     y: y
   };
 }
 
 // of the `<html>` and `<body>` rect bounds if horizontally scrollable
 
-function getDocumentRect(element) {
+function getDocumentRect$1(element) {
   var _element$ownerDocumen;
 
-  var html = getDocumentElement(element);
+  var html = getDocumentElement$1(element);
   var winScroll = getWindowScroll(element);
   var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
-  var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
-  var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
-  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
+  var width = max$1(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  var height = max$1(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  var x = -winScroll.scrollLeft + getWindowScrollBarX$1(element);
   var y = -winScroll.scrollTop;
 
-  if (getComputedStyle$1(body || html).direction === 'rtl') {
-    x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  if (getComputedStyle$2(body || html).direction === 'rtl') {
+    x += max$1(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
 
   return {
@@ -21029,7 +21085,7 @@ function getDocumentRect(element) {
 
 function isScrollParent(element) {
   // Firefox wants us to check `-x` and `-y` variations as well
-  var _getComputedStyle = getComputedStyle$1(element),
+  var _getComputedStyle = getComputedStyle$2(element),
       overflow = _getComputedStyle.overflow,
       overflowX = _getComputedStyle.overflowX,
       overflowY = _getComputedStyle.overflowY;
@@ -21038,16 +21094,16 @@ function isScrollParent(element) {
 }
 
 function getScrollParent(node) {
-  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+  if (['html', 'body', '#document'].indexOf(getNodeName$1(node)) >= 0) {
     // $FlowFixMe[incompatible-return]: assume body is always available
     return node.ownerDocument.body;
   }
 
-  if (isHTMLElement(node) && isScrollParent(node)) {
+  if (isHTMLElement$1(node) && isScrollParent(node)) {
     return node;
   }
 
-  return getScrollParent(getParentNode(node));
+  return getScrollParent(getParentNode$1(node));
 }
 
 /*
@@ -21066,14 +21122,14 @@ function listScrollParents(element, list) {
 
   var scrollParent = getScrollParent(element);
   var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
-  var win = getWindow(scrollParent);
+  var win = getWindow$1(scrollParent);
   var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
   var updatedList = list.concat(target);
   return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
-  updatedList.concat(listScrollParents(getParentNode(target)));
+  updatedList.concat(listScrollParents(getParentNode$1(target)));
 }
 
-function rectToClientRect(rect) {
+function rectToClientRect$1(rect) {
   return Object.assign({}, rect, {
     left: rect.x,
     top: rect.y,
@@ -21082,8 +21138,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element, strategy) {
-  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
+function getInnerBoundingClientRect$1(element, strategy) {
+  var rect = getBoundingClientRect$1(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -21096,39 +21152,39 @@ function getInnerBoundingClientRect(element, strategy) {
 }
 
 function getClientRectFromMixedType(element, clippingParent, strategy) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect$1(getViewportRect$1(element, strategy)) : isElement$1(clippingParent) ? getInnerBoundingClientRect$1(clippingParent, strategy) : rectToClientRect$1(getDocumentRect$1(getDocumentElement$1(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
 
 
 function getClippingParents(element) {
-  var clippingParents = listScrollParents(getParentNode(element));
-  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$1(element).position) >= 0;
-  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+  var clippingParents = listScrollParents(getParentNode$1(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$2(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement$1(element) ? getOffsetParent$1(element) : element;
 
-  if (!isElement(clipperElement)) {
+  if (!isElement$1(clipperElement)) {
     return [];
   } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+    return isElement$1(clippingParent) && contains(clippingParent, clipperElement) && getNodeName$1(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary, strategy) {
+function getClippingRect$1(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
     var rect = getClientRectFromMixedType(element, clippingParent, strategy);
-    accRect.top = max(rect.top, accRect.top);
-    accRect.right = min(rect.right, accRect.right);
-    accRect.bottom = min(rect.bottom, accRect.bottom);
-    accRect.left = max(rect.left, accRect.left);
+    accRect.top = max$1(rect.top, accRect.top);
+    accRect.right = min$1(rect.right, accRect.right);
+    accRect.bottom = min$1(rect.bottom, accRect.bottom);
+    accRect.left = max$1(rect.left, accRect.left);
     return accRect;
   }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
@@ -21203,7 +21259,7 @@ function computeOffsets(_ref) {
   return offsets;
 }
 
-function detectOverflow(state, options) {
+function detectOverflow$1(state, options) {
   if (options === void 0) {
     options = {};
   }
@@ -21227,15 +21283,15 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
-  var referenceClientRect = getBoundingClientRect(state.elements.reference);
+  var clippingClientRect = getClippingRect$1(isElement$1(element) ? element : element.contextElement || getDocumentElement$1(state.elements.popper), boundary, rootBoundary, strategy);
+  var referenceClientRect = getBoundingClientRect$1(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
     strategy: 'absolute',
     placement: placement
   });
-  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var popperClientRect = rectToClientRect$1(Object.assign({}, popperRect, popperOffsets));
   var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
   // 0 or negative = within the clipping rect
 
@@ -21286,7 +21342,7 @@ function computeAutoPlacement(state, options) {
 
 
   var overflows = allowedPlacements.reduce(function (acc, placement) {
-    acc[placement] = detectOverflow(state, {
+    acc[placement] = detectOverflow$1(state, {
       placement: placement,
       boundary: boundary,
       rootBoundary: rootBoundary,
@@ -21304,11 +21360,11 @@ function getExpandedFallbackPlacements(placement) {
     return [];
   }
 
-  var oppositePlacement = getOppositePlacement(placement);
+  var oppositePlacement = getOppositePlacement$1(placement);
   return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
 }
 
-function flip(_ref) {
+function flip$2(_ref) {
   var state = _ref.state,
       options = _ref.options,
       name = _ref.name;
@@ -21332,7 +21388,7 @@ function flip(_ref) {
   var preferredPlacement = state.options.placement;
   var basePlacement = getBasePlacement(preferredPlacement);
   var isBasePlacement = basePlacement === preferredPlacement;
-  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement$1(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
   var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
     return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
       placement: placement,
@@ -21357,7 +21413,7 @@ function flip(_ref) {
     var isStartVariation = getVariation(placement) === start;
     var isVertical = [top, bottom].indexOf(_basePlacement) >= 0;
     var len = isVertical ? 'width' : 'height';
-    var overflow = detectOverflow(state, {
+    var overflow = detectOverflow$1(state, {
       placement: placement,
       boundary: boundary,
       rootBoundary: rootBoundary,
@@ -21367,10 +21423,10 @@ function flip(_ref) {
     var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;
 
     if (referenceRect[len] > popperRect[len]) {
-      mainVariationSide = getOppositePlacement(mainVariationSide);
+      mainVariationSide = getOppositePlacement$1(mainVariationSide);
     }
 
-    var altVariationSide = getOppositePlacement(mainVariationSide);
+    var altVariationSide = getOppositePlacement$1(mainVariationSide);
     var checks = [];
 
     if (checkMainAxis) {
@@ -21428,11 +21484,11 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-var flip$1 = {
+var flip$3 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
-  fn: flip,
+  fn: flip$2,
   requiresIfExists: ['offset'],
   data: {
     _skip: false
@@ -21467,10 +21523,10 @@ function hide$1(_ref) {
   var referenceRect = state.rects.reference;
   var popperRect = state.rects.popper;
   var preventedOffsets = state.modifiersData.preventOverflow;
-  var referenceOverflow = detectOverflow(state, {
+  var referenceOverflow = detectOverflow$1(state, {
     elementContext: 'reference'
   });
-  var popperAltOverflow = detectOverflow(state, {
+  var popperAltOverflow = detectOverflow$1(state, {
     altBoundary: true
   });
   var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
@@ -21519,7 +21575,7 @@ function distanceAndSkiddingToXY(placement, rects, offset) {
   };
 }
 
-function offset(_ref2) {
+function offset$1(_ref2) {
   var state = _ref2.state,
       options = _ref2.options,
       name = _ref2.name;
@@ -21542,12 +21598,12 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-var offset$1 = {
+var offset$2 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
   requires: ['popperOffsets'],
-  fn: offset
+  fn: offset$1
 };
 
 function popperOffsets(_ref) {
@@ -21594,7 +21650,7 @@ function preventOverflow(_ref) {
       tether = _options$tether === void 0 ? true : _options$tether,
       _options$tetherOffset = options.tetherOffset,
       tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
-  var overflow = detectOverflow(state, {
+  var overflow = detectOverflow$1(state, {
     boundary: boundary,
     rootBoundary: rootBoundary,
     padding: padding,
@@ -21635,8 +21691,8 @@ function preventOverflow(_ref) {
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = offset + overflow[mainSide];
-    var max$1 = offset - overflow[altSide];
+    var min = offset + overflow[mainSide];
+    var max = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -21658,12 +21714,12 @@ function preventOverflow(_ref) {
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
     var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
     var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
-    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
+    var arrowOffsetParent = state.elements.arrow && getOffsetParent$1(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
     var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
     var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
     var tetherMax = offset + maxOffset - offsetModifierValue;
-    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    var preventedOffset = within(tether ? min$1(min, tetherMin) : min, offset, tether ? max$1(max, tetherMax) : max);
     popperOffsets[mainAxis] = preventedOffset;
     data[mainAxis] = preventedOffset - offset;
   }
@@ -21716,8 +21772,8 @@ function getHTMLElementScroll(element) {
   };
 }
 
-function getNodeScroll(node) {
-  if (node === getWindow(node) || !isHTMLElement(node)) {
+function getNodeScroll$1(node) {
+  if (node === getWindow$1(node) || !isHTMLElement$1(node)) {
     return getWindowScroll(node);
   } else {
     return getHTMLElementScroll(node);
@@ -21726,8 +21782,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = round(rect.width) / element.offsetWidth || 1;
-  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  var scaleX = round$1(rect.width) / element.offsetWidth || 1;
+  var scaleY = round$1(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 } // Returns the composite rect of an element relative to its offsetParent.
 // Composite means it takes into account transforms as well as layout.
@@ -21738,10 +21794,10 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     isFixed = false;
   }
 
-  var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
-  var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
+  var isOffsetParentAnElement = isHTMLElement$1(offsetParent);
+  var offsetParentIsScaled = isHTMLElement$1(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement$1(offsetParent);
+  var rect = getBoundingClientRect$1(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -21752,17 +21808,17 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   };
 
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    if (getNodeName$1(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
     isScrollParent(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
+      scroll = getNodeScroll$1(offsetParent);
     }
 
-    if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent, true);
+    if (isHTMLElement$1(offsetParent)) {
+      offsets = getBoundingClientRect$1(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
-      offsets.x = getWindowScrollBarX(documentElement);
+      offsets.x = getWindowScrollBarX$1(documentElement);
     }
   }
 
@@ -21900,7 +21956,7 @@ function popperGenerator(generatorOptions) {
         cleanupModifierEffects();
         state.options = Object.assign({}, defaultOptions, state.options, options);
         state.scrollParents = {
-          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          reference: isElement$1(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
           popper: listScrollParents(popper)
         }; // Orders the modifiers based on their dependencies and `phase`
         // properties
@@ -21934,7 +21990,7 @@ function popperGenerator(generatorOptions) {
 
 
         state.rects = {
-          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          reference: getCompositeRect(reference, getOffsetParent$1(popper), state.options.strategy === 'fixed'),
           popper: getLayoutRect(popper)
         }; // Modifiers have the ability to reset the current update cycle. The
         // most common use case for this is the `flip` modifier changing the
@@ -22036,7 +22092,7 @@ function popperGenerator(generatorOptions) {
   };
 }
 
-var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$2];
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$2, flip$3, preventOverflow$1, arrow$3, hide$2];
 var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
@@ -25527,7 +25583,7 @@ const StyledLoadingAwareContainer = styled.div `
  */
 function LoadingAwareContainer(props) {
     const { children, className, isLoading, style } = props;
-    return (jsxs(StyledLoadingAwareContainer, { className: classNames({ loading: isLoading }, className), style: style, children: [jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsx(LoadingIndicator, {}) : jsx(Fragment, { children: children })] }));
+    return (jsxs(StyledLoadingAwareContainer, { className: y({ loading: isLoading }, className), style: style, children: [jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsx(LoadingIndicator, {}) : jsx(Fragment, { children: children })] }));
 }
 
 const StyledWizard = styled.div `
@@ -25820,7 +25876,7 @@ function WizardWithSidebar(props) {
         return () => setCurrentStep(steps[0] || '');
     }, []);
     return (jsxs(StyledWizardWithSidebar, { className: className, "data-cy": props['data-cy'], id: id, backgroundcolor: backgroundColor, color: color, buttoncolor: buttonColor, children: [jsxs("div", { className: "wizard-sidebar", children: [jsxs("h2", { children: [" ", wizardTitle] }), steps.map((step, index) => {
-                        return (jsxs("div", { className: classNames('sidebar-step', {
+                        return (jsxs("div", { className: y('sidebar-step', {
                                 ['current-step']: index === steps.indexOf(currentStep),
                                 ['prior-step']: index < steps.indexOf(currentStep),
                             }), children: [(Object.keys(validationErrors ? validationErrors : []).some((error) => stepSchema[step].inputsRequiringValidation.includes(error)) ||
@@ -25964,15 +26020,15 @@ const StyledDrawerLinkList = styled.div `
 
 const DrawerLinkList = (props) => {
     const { className, style = {}, id, listItems, isOpen } = props, restOfProps = __rest$1(props, ["className", "style", "id", "listItems", "isOpen"]);
-    return (jsx(StyledDrawerLinkList, Object.assign({ id: id, "data-cy": props['data-cy'], "data-testid": props['data-testid'], style: style }, restOfProps, { className: classNames('drawer__content__list', className), children: listItems && (jsx("ul", { className: "drawer__list", children: listItems.map((item) => (jsx(NavLink, { to: item.path, className: ({ isActive, isPending }) => {
-                    return classNames('drawer__list__item', { 'drawer__list__item--active': isActive }, { 'drawer__list__item--pending': isPending });
+    return (jsx(StyledDrawerLinkList, Object.assign({ id: id, "data-cy": props['data-cy'], "data-testid": props['data-testid'], style: style }, restOfProps, { className: y('drawer__content__list', className), children: listItems && (jsx("ul", { className: "drawer__list", children: listItems.map((item) => (jsx(NavLink, { to: item.path, className: ({ isActive, isPending }) => {
+                    return y('drawer__list__item', { 'drawer__list__item--active': isActive }, { 'drawer__list__item--pending': isPending });
                 }, role: "link", "aria-label": item.label, "data-testid": `link-list-item-${item.label}`, children: jsxs("li", { className: "drawer__list__item__link", children: [jsx("span", { className: `drawer__list__item__icon`, children: jsx(Icon, { size: [22], name: item.icon, ariaLabel: `${item.label} icon` }) }), jsx("span", { className: `drawer__list__item__label ${!isOpen ? 'drawer__list__item__label--hidden' : ''}`, "aria-hidden": !isOpen, "data-testid": "list-item-label", children: item.label })] }) }, item.id))) })) })));
 };
 
 const Drawer = (props) => {
     const { id, className, style = {}, logoText, logoIcon, navigationItems, footerItems, headerComponent, $expandedWidth, $collapsedWidth } = props, restOfProps = __rest$1(props, ["id", "className", "style", "logoText", "logoIcon", "navigationItems", "footerItems", "headerComponent", "$expandedWidth", "$collapsedWidth"]);
     const [isOpen, setIsOpen] = React__default.useState(false);
-    const drawerClasses = classNames('drawer', className, {
+    const drawerClasses = y('drawer', className, {
         'drawer--open': isOpen,
         'drawer--closed': !isOpen,
     });
@@ -25987,8 +26043,8 @@ const Drawer = (props) => {
 
 const StyledTextTruncate = styled.span ``;
 
-function TextTruncate({ string, maxChars, children }) {
-    return string.length > maxChars ? (jsxs(StyledTextTruncate, { title: string, children: [`${string.substring(0, maxChars)}...`, children] })) : (jsxs(StyledTextTruncate, { children: [string, children] }));
+function TextTruncate({ string, maxChars, children, noTitle }) {
+    return string.length > maxChars ? (jsxs(StyledTextTruncate, { title: noTitle ? undefined : string, children: [`${string.substring(0, maxChars)}...`, children] })) : (jsxs(StyledTextTruncate, { children: [string, children] }));
 }
 
 const StyledToggle = styled.label `
@@ -26076,10 +26132,1570 @@ const StyledToggle = styled.label `
 
 const Toggle = (props) => {
     const { disabled, onChange, value, className, id, checkedIconName, notCheckedIconName, iconSize, } = props;
-    return (jsxs(StyledToggle, { className: classNames(className, {
+    return (jsxs(StyledToggle, { className: y(className, {
             disabled,
         }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { "aria-label": props['aria-label'], type: "checkbox", disabled: disabled, checked: value, onChange: onChange }), jsx("span", { className: "slider round" }), checkedIconName && (jsx(Icon, { name: checkedIconName, size: [iconSize || 5], className: "checked-icon" })), notCheckedIconName && (jsx(Icon, { name: notCheckedIconName, size: [iconSize || 5], className: "not-checked-icon" }))] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, color as colorUtils, faIcons, indicons, number as numberUtils, string as stringUtils };
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+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;
+    }
+  }
+  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({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'flip',
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+
+      // One or more sides is overflowing.
+      if (!overflows.every(side => side <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements[nextIndex];
+        if (nextPlacement) {
+          // Try next placement and re-run the lifecycle.
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$map$so;
+                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
+              }
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'shift',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      };
+    }
+  };
+};
+
+function getNodeName(node) {
+  if (isNode(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 || (_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, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  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 : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+const topLayerSelectors = [':popover-open', ':modal'];
+function isTopLayer(floating) {
+  return topLayerSelectors.some(selector => {
+    try {
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+
+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);
+    }
+  }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  return element.offsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const window = getWindow(element);
+  if (!isHTMLElement(element) || isTopLayer(element)) {
+    return window;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+    return window;
+  }
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      ...(await getDimensionsFn(data.floating))
+    }
+  };
+};
+
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+/*
+* React Tooltip
+* {@link https://github.com/ReactTooltip/react-tooltip}
+* @copyright ReactTooltip Team
+* @license MIT
+*/
+const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};function S({css:e,id:t=w,type:o="base",ref:r}){var l,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(l=null===process||void 0===process?void 0:process.env)||void 0===l?void 0:l.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),r||(r={});const{insertAt:c}=r;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);const i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const g=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:r="top",offset:l=10,strategy:n="absolute",middlewares:c=[offset(Number(l)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:i})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:r};const s=c;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:r,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_=(e,t,o)=>{let r=null;const l=function(...l){const n=()=>{r=null,o||e.apply(this,l);};o&&!r&&(e.apply(this,l),r=setTimeout(n,t)),o||(r&&clearTimeout(r),r=setTimeout(n,t));};return l.cancel=()=>{r&&(clearTimeout(r),r=null);},l},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,T=(e,t)=>{if(e===t)return !0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>T(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return !1;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),r=Object.keys(t);return o.length===r.length&&o.every((o=>T(e[o],t[o])))},k=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},C=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(k(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},L="undefined"!=typeof window?useLayoutEffect:useEffect,R="DEFAULT_TOOLTIP_ID",x={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},N=createContext({getTooltipData:()=>x});function I(e=R){return useContext(N).getTooltipData(e)}var B={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},z={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const D=({forwardRef:t,id:r,className:c,classNameArrow:i,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:E,delayShow:A=0,delayHide:O=0,float:k=!1,hidden:R=!1,noArrow:x=!1,clickable:N=!1,closeOnEsc:$=!1,closeOnScroll:j=!1,closeOnResize:D=!1,openEvents:q,closeEvents:H,globalCloseEvents:M,imperativeModeOnly:W,style:P,position:V,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,defaultIsOpen:G=!1,setIsOpen:Z,activeAnchor:J,setActiveAnchor:Q,border:ee,opacity:te,arrowColor:oe,role:re="tooltip"})=>{var le;const ne=useRef(null),ce=useRef(null),ie=useRef(null),se=useRef(null),ae=useRef(null),[ue,de]=useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[pe,ve]=useState(!1),[me,fe]=useState(!1),[ye,he]=useState(null),we=useRef(!1),be=useRef(null),{anchorRefs:Se,setActiveAnchor:Ee}=I(r),ge=useRef(!1),[Ae,_e]=useState([]),Oe=useRef(!1),Te=w||h.includes("click"),ke=Te||(null==q?void 0:q.click)||(null==q?void 0:q.dblclick)||(null==q?void 0:q.mousedown),Ce=q?{...q}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!q&&Te&&Object.assign(Ce,{mouseenter:!1,focus:!1,click:!0});const Le=H?{...H}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!H&&Te&&Object.assign(Le,{mouseleave:!1,blur:!1});const Re=M?{...M}:{escape:$||!1,scroll:j||!1,resize:D||!1,clickOutsideAnchor:ke||!1};W&&(Object.assign(Ce,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Le,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Re,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),L((()=>(Oe.current=!0,()=>{Oe.current=!1;})),[]);const xe=e=>{Oe.current&&(e&&fe(!0),setTimeout((()=>{Oe.current&&(null==Z||Z(e),void 0===Y&&ve(e));}),10));};useEffect((()=>{if(void 0===Y)return ()=>null;Y&&fe(!0);const e=setTimeout((()=>{ve(Y);}),10);return ()=>{clearTimeout(e);}}),[Y]),useEffect((()=>{if(pe!==we.current)if(ae.current&&clearTimeout(ae.current),we.current=pe,pe)null==F||F();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,r]=t;return Number(o)*("ms"===r?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));ae.current=setTimeout((()=>{fe(!1),he(null),null==K||K();}),e+25);}}),[pe]);const Ne=e=>{de((t=>T(t,e)?t:e));},$e=(e=A)=>{ie.current&&clearTimeout(ie.current),me?xe(!0):ie.current=setTimeout((()=>{xe(!0);}),e);},Ie=(e=O)=>{se.current&&clearTimeout(se.current),se.current=setTimeout((()=>{ge.current||xe(!1);}),e);},je=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return Q(null),void Ee({current:null});A?$e():xe(!0),Q(o),Ee({current:o}),se.current&&clearTimeout(se.current);},Be=()=>{N?Ie(O||100):O?Ie():xe(!1),ie.current&&clearTimeout(ie.current);},ze=({x:e,y:t})=>{var o;const r={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};g({place:null!==(o=null==ye?void 0:ye.place)&&void 0!==o?o:v,offset:m,elementReference:r,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Ne(e);}));},De=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ze(o),be.current=o;},qe=e=>{var t;if(!pe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ne.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Ae].some((e=>null==e?void 0:e.contains(o)))||(xe(!1),ie.current&&clearTimeout(ie.current));},He=_(je,50,!0),Me=_(Be,50,!0),We=e=>{Me.cancel(),He(e);},Pe=()=>{He.cancel(),Me();},Ve=useCallback((()=>{var e,t;const o=null!==(e=null==ye?void 0:ye.position)&&void 0!==e?e:V;o?ze(o):k?be.current&&ze(be.current):(null==J?void 0:J.isConnected)&&g({place:null!==(t=null==ye?void 0:ye.place)&&void 0!==t?t:v,offset:m,elementReference:J,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Oe.current&&Ne(e);}));}),[pe,J,U,P,v,null==ye?void 0:ye.place,m,b,V,null==ye?void 0:ye.position,k]);useEffect((()=>{var e,t;const o=new Set(Se);Ae.forEach((e=>{o.add({current:e});}));const r=document.querySelector(`[id='${d}']`);r&&o.add({current:r});const l=()=>{xe(!1);},n=C(J),c=C(ne.current);Re.scroll&&(window.addEventListener("scroll",l),null==n||n.addEventListener("scroll",l),null==c||c.addEventListener("scroll",l));let i=null;Re.resize?window.addEventListener("resize",l):J&&ne.current&&(i=autoUpdate(J,ne.current,Ve,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&xe(!1);};Re.escape&&window.addEventListener("keydown",s),Re.clickOutsideAnchor&&window.addEventListener("click",qe);const a=[],u=e=>{pe&&(null==e?void 0:e.target)===J||je(e);},p=e=>{pe&&(null==e?void 0:e.target)===J&&Be();},v=["mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:We}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(Le).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Pe}):m.includes(e)&&a.push({event:e,listener:p}));})),k&&a.push({event:"pointermove",listener:De});const y=()=>{ge.current=!0;},h=()=>{ge.current=!1,Be();};return N&&!ke&&(null===(e=ne.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.addEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t);}));})),()=>{var e,t;Re.scroll&&(window.removeEventListener("scroll",l),null==n||n.removeEventListener("scroll",l),null==c||c.removeEventListener("scroll",l)),Re.resize?window.removeEventListener("resize",l):null==i||i(),Re.clickOutsideAnchor&&window.removeEventListener("click",qe),Re.escape&&window.removeEventListener("keydown",s),N&&!ke&&(null===(e=ne.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=ne.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t);}));}));}}),[J,Ve,me,Se,Ae,q,H,M,Te,A,O]),useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&r&&(o=`[data-tooltip-id='${r}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===r?t.push(e.target):e.oldValue===r&&l.push(e.target);}if("childList"===e.type){if(J){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,J))&&(fe(!1),xe(!1),Q(null),ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current),!0)}));}if(o)try{const r=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...r.filter((e=>e.matches(o)))),t.push(...r.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||l.length)&&_e((e=>[...e.filter((e=>!l.includes(e))),...t]));}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{l.disconnect();}}),[r,p,null==ye?void 0:ye.anchorSelect,J]),useEffect((()=>{Ve();}),[Ve]),useEffect((()=>{if(!(null==X?void 0:X.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ve()));}));return e.observe(X.current),()=>{e.disconnect();}}),[U,null==X?void 0:X.current]),useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Ae,t];J&&o.includes(J)||Q(null!==(e=Ae[0])&&void 0!==e?e:t);}),[d,Ae,J]),useEffect((()=>(G&&xe(!0),()=>{ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current);})),[]),useEffect((()=>{var e;let t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r}']`),t)try{const e=Array.from(document.querySelectorAll(t));_e(e);}catch(e){_e([]);}}),[r,p,null==ye?void 0:ye.anchorSelect]),useEffect((()=>{ie.current&&(clearTimeout(ie.current),$e(A));}),[A]);const Fe=null!==(le=null==ye?void 0:ye.content)&&void 0!==le?le:U,Ke=pe&&Object.keys(ue.tooltipStyles).length>0;return useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}he(null!=e?e:null),(null==e?void 0:e.delay)?$e(e.delay):xe(!0);},close:e=>{(null==e?void 0:e.delay)?Ie(e.delay):xe(!1);},activeAnchor:J,place:ue.place,isOpen:Boolean(me&&!R&&Fe&&Ke)}))),me&&!R&&Fe?React__default.createElement(E,{id:r,role:re,className:y("react-tooltip",B.tooltip,z.tooltip,z[u],c,`react-tooltip__place-${ue.place}`,B[Ke?"show":"closing"],Ke?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B.fixed,N&&B.clickable),onTransitionEnd:e=>{ae.current&&clearTimeout(ae.current),pe||"opacity"!==e.propertyName||(fe(!1),he(null),null==K||K());},style:{...P,...ue.tooltipStyles,opacity:void 0!==te&&Ke?te:void 0},ref:ne},Fe,React__default.createElement(E,{className:y("react-tooltip-arrow",B.arrow,z.arrow,i,x&&B.noArrow),style:{...ue.tooltipArrowStyles,background:oe?`linear-gradient(to right bottom, transparent 50%, ${oe} 50%)`:void 0},ref:ce})):null},q=({content:t})=>React__default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),H=React__default.forwardRef((({id:t,anchorId:r,anchorSelect:n,content:c,html:i,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=!1,positionStrategy:S="absolute",middlewares:E,delayShow:g=0,delayHide:_=0,float:O=!1,hidden:T=!1,noArrow:k=!1,clickable:C=!1,closeOnEsc:L=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B=!1,style:z,position:H,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,role:G="tooltip"},Z)=>{const[J,Q]=useState(c),[ee,te]=useState(i),[oe,re]=useState(v),[le,ne]=useState(p),[ce,ie]=useState(m),[se,ae]=useState(g),[ue,de]=useState(_),[pe,ve]=useState(O),[me,fe]=useState(T),[ye,he]=useState(f),[we,be]=useState(w),[Se,Ee]=useState(S),[ge,Ae]=useState(null),[_e,Oe]=useState(null),Te=useRef(P),{anchorRefs:ke,activeAnchor:Ce}=I(t),Le=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null;}return t}),{}),Re=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v);},content:e=>{Q(null!=e?e:c);},html:e=>{te(null!=e?e:i);},variant:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ie(null===e?m:Number(e));},wrapper:e=>{var t;he(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");be(null!=t?t:w);},"position-strategy":e=>{var t;Ee(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ae(null===e?g:Number(e));},"delay-hide":e=>{de(null===e?_:Number(e));},float:e=>{ve(null===e?O:"true"===e);},hidden:e=>{fe(null===e?T:"true"===e);},"class-name":e=>{Ae(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o);}));};useEffect((()=>{Q(c);}),[c]),useEffect((()=>{te(i);}),[i]),useEffect((()=>{re(v);}),[v]),useEffect((()=>{ne(p);}),[p]),useEffect((()=>{ie(m);}),[m]),useEffect((()=>{ae(g);}),[g]),useEffect((()=>{de(_);}),[_]),useEffect((()=>{ve(O);}),[O]),useEffect((()=>{fe(T);}),[T]),useEffect((()=>{Ee(S);}),[S]),useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),useEffect((()=>{var e;const o=new Set(ke);let l=n;if(!l&&t&&(l=`[data-tooltip-id='${t}']`),l)try{document.querySelectorAll(l).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);}const c=document.querySelector(`[id='${r}']`);if(c&&o.add({current:c}),!o.size)return ()=>null;const i=null!==(e=null!=_e?_e:c)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Le(i);Re(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Le(i);Re(e),s.observe(i,a);}return ()=>{s.disconnect();}}),[ke,Ce,_e,r,n]),useEffect((()=>{(null==z?void 0:z.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==z?void 0:z.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let xe=h;const Ne=useRef(null);if(a){const t=a({content:(null==_e?void 0:_e.getAttribute("data-tooltip-content"))||J||null,activeAnchor:_e});xe=t?React__default.createElement("div",{ref:Ne,className:"react-tooltip-content-wrapper"},t):null;}else J&&(xe=J);ee&&(xe=React__default.createElement(q,{content:ee}));const $e={forwardRef:Z,id:t,anchorId:r,anchorSelect:n,className:y(u,ge),classNameArrow:d,content:xe,contentWrapperRef:Ne,place:oe,variant:le,offset:ce,wrapper:ye,events:we,openOnClick:b,positionStrategy:Se,middlewares:E,delayShow:se,delayHide:ue,float:pe,hidden:me,noArrow:k,clickable:C,closeOnEsc:L,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:j,imperativeModeOnly:B,style:z,position:H,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,activeAnchor:_e,setActiveAnchor:e=>Oe(e),role:G};return React__default.createElement(D,{...$e})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
+.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
+
+const StyledTooltip = styled.div `
+  display: inline-block;
+
+  i:hover {
+    cursor: pointer;
+  }
+
+  p {
+    line-height: 1.4;
+    font-size: 13px;
+  }
+
+  .tool {
+    background: ${allColors.oxfordBlue} !important;
+    border: 1px solid ${allColors.baliHai} !important;
+    border-radius: 2px !important;
+    padding: 8px 11px !important;
+    opacity: 1 !important;
+
+    &.place-left:after {
+      border-left-color: ${allColors.oxfordBlue} !important;
+      border-top: 5px solid transparent !important;
+      border-bottom: 5px solid transparent !important;
+      right: -6px !important;
+      top: 50% !important;
+      margin-top: -9px !important;
+    }
+
+    &.place-left:before {
+      border-left-color: ${allColors.baliHai} !important;
+      border-left-width: 8px !important;
+      border-left-style: solid !important;
+      margin-top: -10px !important;
+    }
+
+    &.place-right:after {
+      border-right-color: ${allColors.oxfordBlue} !important;
+      border-top: 5px solid transparent !important;
+      border-bottom: 5px solid transparent !important;
+      left: -6px !important;
+      top: 50% !important;
+      margin-top: -9px !important;
+    }
+
+    &.place-right:before {
+      border-right-color: ${allColors.baliHai} !important;
+      border-right-width: 8px !important;
+      border-right-style: solid !important;
+      margin-top: -10px !important;
+    }
+
+    &.place-top:after {
+      border-top-color: ${allColors.oxfordBlue} !important;
+    }
+
+    &.place-top:before {
+      border-top-color: ${allColors.baliHai} !important;
+      border-top-width: 8px !important;
+      border-top-style: solid !important;
+    }
+
+    &.place-bottom:after {
+      border-bottom-color: ${allColors.oxfordBlue} !important;
+    }
+
+    &.place-bottom:before {
+      border-bottom-color: ${allColors.baliHai} !important;
+      border-bottom-width: 8px !important;
+      border-bottom-style: solid !important;
+    }
+  }
+`;
+
+var PlacesType;
+(function (PlacesType) {
+    PlacesType["top"] = "top";
+    PlacesType["top-start"] = "top-start";
+    PlacesType["top-end"] = "top-end";
+    PlacesType["right"] = "right";
+    PlacesType["right-start"] = "right-start";
+    PlacesType["right-end"] = "right-end";
+    PlacesType["bottom"] = "bottom";
+    PlacesType["bottom-start"] = "bottom-start";
+    PlacesType["bottom-end"] = "bottom-end";
+    PlacesType["left"] = "left";
+    PlacesType["left-start"] = "left-start";
+    PlacesType["left-end"] = "left-end";
+})(PlacesType || (PlacesType = {}));
+const Tooltip = (props) => {
+    return (jsxs(StyledTooltip, { className: props.className, "data-cy": props['data-cy'], id: props.id, 
+        // this was done in a hurry, consider refactor on next pass.
+        style: { display: props.block ? 'block' : 'inline-block' }, children: [props.questionMark && (jsx("i", { style: { color: allColors.curiousBlue }, className: props.questionMarkClassName, "data-tooltip-id": props.for, "data-tooltip-place": props.place || 'top', children: jsx(Icon, { name: "fa-question-circle" }) })), jsx(H, { className: "tool", 
+                // globalEventOff={props.clickToShow ? 'click' : ''}
+                // place={(props.place as PlacesType) || 'top'}
+                openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
+};
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Tooltip, Wizard, WizardCard, WizardSection, WizardWithSidebar, color as colorUtils, faIcons, indicons, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map