@ballistix.digital/react-components 2.2.0 → 3.0.0

package/dist/index.esm.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
-import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
+import * as React from 'react';
+import React__default, { useState, useMemo, useLayoutEffect, useEffect, useRef, Children, Fragment as Fragment$1, useCallback, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { fal } from '@fortawesome/pro-light-svg-icons';
@@ -10,6 +11,7 @@ import { far } from '@fortawesome/pro-regular-svg-icons';
 import { fas } from '@fortawesome/pro-solid-svg-icons';
 import { fat } from '@fortawesome/pro-thin-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as ReactDOM from 'react-dom';
 import { Menu, Transition, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
 import { useMask } from '@react-input/mask';
 import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
@@ -155,10 +157,10 @@ var deepCopyObject = function (object) {
 var AvatarElement = function (props) {
     var src = props.src, placeholder = props.placeholder, children = props.children, url = props.url, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.figure, figure = _b === void 0 ? 'block' : _b, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$v.base);
-        var keys = calculateNestedKeys(styles$v.base);
+        var result = deepCopyObject(styles$w.base);
+        var keys = calculateNestedKeys(styles$w.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$v.base, key), size && get(styles$v[size], key), figure && get(styles$v[figure], key), status && get(styles$v[status], key), isDisabled && get(styles$v.disabled, key), isLoading && get(styles$v.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$w.base, key), size && get(styles$w[size], key), figure && get(styles$w[figure], key), status && get(styles$w[status], key), isDisabled && get(styles$w.disabled, key), isLoading && get(styles$w.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -176,7 +178,7 @@ var AvatarElement = function (props) {
     return (jsx("a", { href: url, children: jsxs("div", { className: "flex items-center", children: [jsxs("span", { className: "flex items-center justify-center", children: [jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsx("span", { className: styles.indicator })] }), children && jsx("div", { className: "ml-3", children: children })] }) }));
 };
 
-var base$r = {
+var base$s = {
     loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
     spinner: 'w-5 h-5 animate-spin text-gray-400',
     empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
@@ -254,8 +256,8 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$v = {
-    base: base$r,
+var styles$w = {
+    base: base$s,
     xs: xs$4,
     sm: sm$5,
     md: md$4,
@@ -302,236 +304,3786 @@ var IconElement = function (props) {
             if (!(library === null || library === void 0 ? void 0 : library.definitions.fat)) {
                 library.add(fat);
             }
-            component = (jsx(FontAwesomeIcon, { icon: ['fat', accessor], className: className }));
-            break;
-    }
-    return component;
-};
-
-var BadgeElement$1 = function (props) {
-    var title = props.title, message = props.message, _a = props.type, type = _a === void 0 ? 'generic' : _a, _b = props.onClose, onClose = _b === void 0 ? noop$1 : _b, _c = props.onCollapse, onCollapse = _c === void 0 ? noop$1 : _c, _d = props.isCollapsible, isCollapsible = _d === void 0 ? false : _d, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
-    var _e = useState(false), isCollapsed = _e[0], setIsCollapsed = _e[1];
-    var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$u.base);
-        var keys = calculateNestedKeys(styles$u.base);
-        keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$u.base, key), type && get(styles$u[type], key), get(stylesOverrides, key)));
-        });
-        return result;
+            component = (jsx(FontAwesomeIcon, { icon: ['fat', accessor], className: className }));
+            break;
+    }
+    return component;
+};
+
+var BadgeElement$1 = function (props) {
+    var title = props.title, message = props.message, _a = props.type, type = _a === void 0 ? 'generic' : _a, _b = props.onClose, onClose = _b === void 0 ? noop$1 : _b, _c = props.onCollapse, onCollapse = _c === void 0 ? noop$1 : _c, _d = props.isCollapsible, isCollapsible = _d === void 0 ? false : _d, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
+    var _e = useState(false), isCollapsed = _e[0], setIsCollapsed = _e[1];
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$v.base);
+        var keys = calculateNestedKeys(styles$v.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$v.base, key), type && get(styles$v[type], key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var iconAccessor = useMemo(function () {
+        if (iconAccessorOverride)
+            return iconAccessorOverride;
+        switch (type) {
+            case 'info':
+                return 'question-circle';
+            case 'error':
+                return 'exclamation-triangle';
+            case 'warn':
+                return 'exclamation-circle';
+            case 'success':
+                return 'sparkles';
+            case 'generic':
+            default:
+                return undefined;
+        }
+    }, [iconAccessorOverride, type]);
+    return (jsx("div", { className: toClassName(styles.container), children: jsxs("div", { className: "flex h-full items-center", children: [jsx("div", { className: "flex-shrink-0", children: iconAccessor && (jsx(IconElement, { accessor: iconAccessor, className: toClassName(styles.icon), "aria-hidden": "true" })) }), jsxs("div", { className: styles.content.container, children: [jsxs("div", { children: [jsx("h3", { className: toClassName(styles.content.title), children: title }), !isCollapsed && (jsx("p", { className: toClassName(styles.content.message), children: message }))] }), jsxs("div", { className: styles.content.actions, children: [isCollapsible && (jsx("div", { onClick: function () {
+                                        setIsCollapsed(!isCollapsed);
+                                        onCollapse();
+                                    }, children: jsx(IconElement, { className: toClassName(styles.content.action, isCollapsed && styles.content.inverted), accessor: "chevron-up" }) })), jsx("div", { onClick: onClose, children: jsx(IconElement, { className: styles.content.action, accessor: "times" }) })] })] })] }) }));
+};
+
+var base$r = {
+    container: 'rounded-sm p-4 border-l-4',
+    icon: 'h-5 w-5',
+    content: {
+        container: 'ml-3 flex-1 md:flex md:justify-between ease-in-out transition-transform',
+        title: 'text-md font-semibold',
+        message: 'text-sm',
+        actions: 'flex gap-2',
+        action: 'h-5 w-5 !p-0 hover:opacity-60 cursor-pointer',
+        inverted: 'rotate-180',
+    },
+};
+var generic = {
+    container: 'bg-gray-50 border-gray-400',
+    icon: 'text-gray-400',
+    content: {
+        actions: 'text-gray-500',
+        message: 'text-gray-500',
+        title: 'text-gray-500 rotate',
+    },
+};
+var error$2 = {
+    container: 'bg-red-50 border-red-400',
+    icon: 'text-red-400',
+    content: {
+        actions: 'text-red-500',
+        message: 'text-red-500',
+        title: 'text-red-500',
+    },
+};
+var warn$1 = {
+    container: 'bg-yellow-50 border-orange-400',
+    icon: 'text-orange-400',
+    content: {
+        actions: 'text-orange-500',
+        message: 'text-orange-500',
+        title: 'text-orange-500',
+    },
+};
+var success$1 = {
+    container: 'bg-green-50 border-green-400',
+    icon: 'text-green-400',
+    content: {
+        actions: 'text-green-500',
+        message: 'text-green-500',
+        title: 'text-green-500',
+    },
+};
+var info = {
+    container: 'bg-blue-50 border-blue-400',
+    icon: 'text-blue-400',
+    content: {
+        actions: 'text-blue-500',
+        message: 'text-blue-500',
+        title: 'text-blue-500',
+    },
+};
+var styles$v = {
+    base: base$r,
+    generic: generic,
+    error: error$2,
+    warn: warn$1,
+    success: success$1,
+    info: info,
+};
+
+var BadgeElement = function (props) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$u.base);
+        var keys = calculateNestedKeys(styles$u.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$u.base, key), type && get(styles$u[type], key), color && get(styles$u[color], key), size && get(styles$u[size], key), figure && get(styles$u[figure], key), isDisabled && get(styles$u.disabled, key), isLoading && get(styles$u.loading, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var xIcon = (jsx("svg", { className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8", children: jsx("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }) }));
+    if (isLoading) {
+        return (jsx("span", { className: toClassName(styles.container, 'h-4 w-12 animate-pulse'), children: type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })) }));
+    }
+    return (jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
+};
+
+var base$q = {
+    container: 'inline-flex items-center font-medium py-0.5',
+    indicator: '',
+    button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
+};
+var normal$8 = {
+    container: 'px-2.5',
+};
+var indicator = {
+    container: 'px-2.5',
+};
+var close = {
+    container: 'pl-2.5 pr-1',
+};
+var primary$1 = {
+    container: "shadow-sm text-white bg-primary-600  hover:bg-primary-700",
+};
+var secondary$1 = {
+    container: "shadow-none text-primary-700 bg-primary-100 hover:bg-primary-200",
+};
+var outline$1 = {
+    container: "border-gray-300  text-gray-700 bg-white hover:bg-gray-50",
+};
+var sm$4 = {
+    container: 'text-xs',
+    indicator: 'mr-1.5 h-2 w-2 ',
+};
+var lg$4 = {
+    container: 'text-sm',
+    indicator: '-ml-0.5 mr-1.5 h-2 w-2',
+};
+var block$1 = {
+    container: 'rounded-md',
+};
+var rounded$1 = {
+    container: 'rounded-full',
+};
+var gray = {
+    container: 'bg-gray-100 text-gray-800',
+    indicator: 'text-gray-400',
+    button: 'text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:bg-gray-500',
+};
+var red = {
+    container: 'bg-red-100 text-red-800',
+    indicator: 'text-red-400',
+    button: 'text-red-400 hover:bg-red-200 hover:text-red-500 focus:bg-red-500',
+};
+var yellow = {
+    container: 'bg-yellow-100 text-yellow-800',
+    indicator: 'text-yellow-400',
+    button: 'text-yellow-400 hover:bg-yellow-200 hover:text-yellow-500 focus:bg-yellow-500',
+};
+var green = {
+    container: 'bg-green-100 text-green-800',
+    indicator: 'text-green-400',
+    button: 'text-green-400 hover:bg-green-200 hover:text-green-500 focus:bg-green-500',
+};
+var blue = {
+    container: 'bg-blue-100 text-blue-800',
+    indicator: 'text-blue-400',
+    button: 'text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:bg-blue-500',
+};
+var indigo = {
+    container: 'bg-primary-100 text-primary-800',
+    indicator: 'text-primary-400',
+    button: 'text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500',
+};
+var purple = {
+    container: 'bg-purple-100 text-purple-800',
+    indicator: 'text-purple-400',
+    button: 'text-purple-400 hover:bg-purple-200 hover:text-purple-500 focus:bg-purple-500',
+};
+var pink = {
+    container: 'bg-pink-100 text-pink-800',
+    indicator: 'text-pink-400',
+    button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
+};
+var disabled$9 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var loading$1 = {
+    container: 'cursor-progress',
+};
+var styles$u = {
+    base: base$q,
+    normal: normal$8,
+    indicator: indicator,
+    close: close,
+    primary: primary$1,
+    secondary: secondary$1,
+    outline: outline$1,
+    sm: sm$4,
+    lg: lg$4,
+    block: block$1,
+    rounded: rounded$1,
+    gray: gray,
+    red: red,
+    yellow: yellow,
+    green: green,
+    blue: blue,
+    indigo: indigo,
+    purple: purple,
+    pink: pink,
+    disabled: disabled$9,
+    loading: loading$1,
+};
+
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  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) {
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle(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(element);
+  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;
+    }
+    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(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 =
+  node.assignedSlot ||
+  node.parentNode ||
+  isShadowRoot(node) && node.host ||
+  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 activeElement(doc) {
+  let activeElement = doc.activeElement;
+  while (((_activeElement = activeElement) == null || (_activeElement = _activeElement.shadowRoot) == null ? void 0 : _activeElement.activeElement) != null) {
+    var _activeElement;
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode == null ? void 0 : child.getRootNode();
+  if (parent.contains(child)) {
+    return true;
+  }
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode || next.host;
+    }
+  }
+  return false;
+}
+function getPlatform() {
+  const uaData = navigator.userAgentData;
+  if (uaData != null && uaData.platform) {
+    return uaData.platform;
+  }
+  return navigator.platform;
+}
+function getUserAgent() {
+  const uaData = navigator.userAgentData;
+  if (uaData && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(_ref => {
+      let {
+        brand,
+        version
+      } = _ref;
+      return brand + "/" + version;
+    }).join(' ');
+  }
+  return navigator.userAgent;
+}
+function isVirtualPointerEvent(event) {
+  if (isJSDOM()) return false;
+  return !isAndroid() && event.width === 0 && event.height === 0 || isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse' ||
+  event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
+}
+function isSafari() {
+  return /apple/i.test(navigator.vendor);
+}
+function isAndroid() {
+  const re = /android/i;
+  return re.test(getPlatform()) || re.test(getUserAgent());
+}
+function isMac() {
+  return getPlatform().toLowerCase().startsWith('mac') && !navigator.maxTouchPoints;
+}
+function isJSDOM() {
+  return getUserAgent().includes('jsdom/');
+}
+function isMouseLikePointerType(pointerType, strict) {
+  const values = ['mouse', 'pen'];
+  if (!strict) {
+    values.push('', undefined);
+  }
+  return values.includes(pointerType);
+}
+function isReactEvent(event) {
+  return 'nativeEvent' in event;
+}
+function isRootElement(element) {
+  return element.matches('html,body');
+}
+function getDocument(node) {
+  return (node == null ? void 0 : node.ownerDocument) || document;
+}
+function isEventTargetWithin(event, node) {
+  if (node == null) {
+    return false;
+  }
+  if ('composedPath' in event) {
+    return event.composedPath().includes(node);
+  }
+  const e = event;
+  return e.target != null && node.contains(e.target);
+}
+function getTarget(event) {
+  if ('composedPath' in event) {
+    return event.composedPath()[0];
+  }
+  return event.target;
+}
+const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
+function isTypeableElement(element) {
+  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+function stopEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+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) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+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;
+}
+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
+  };
+};
+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' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : 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
+  };
+}
+const arrow$3 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    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;
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+    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);
+    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
+    };
+  }
+});
+const flip$2 = 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 ((_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
+      }];
+      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) {
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+        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;
+        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 {};
+    }
+  };
+};
+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
+  };
+}
+const offset$2 = 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 (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
+        }
+      };
+    }
+  };
+};
+const shift$2 = 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 getCssDimensions(element) {
+  const css = getComputedStyle(element);
+  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;
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+const noOffsets = 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(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(element) {
+  return topLayerSelectors.some(selector => {
+    try {
+      return element.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) {
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+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(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
+  };
+}
+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(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+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(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle(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) {
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : 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 isStaticPositioned(element) {
+  return getComputedStyle(element).position === 'static';
+}
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  return element.offsetParent;
+}
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+function isRTL(element) {
+  return getComputedStyle(element).direction === 'rtl';
+}
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+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);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+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) {
+        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);
+    }
+  };
+}
+const offset$1 = offset$2;
+const shift$1 = shift$2;
+const flip$1 = flip$2;
+const arrow$2 = arrow$3;
+const computePosition = (reference, floating, options) => {
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (typeof a === 'function' && a.toString() === b.toString()) {
+    return true;
+  }
+  let length;
+  let i;
+  let keys;
+  if (a && b && typeof a === 'object') {
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length !== b.length) return false;
+      for (i = length; i-- !== 0;) {
+        if (!deepEqual(a[i], b[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) {
+      return false;
+    }
+    for (i = length; i-- !== 0;) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
+        return false;
+      }
+    }
+    for (i = length; i-- !== 0;) {
+      const key = keys[i];
+      if (key === '_owner' && a.$$typeof) {
+        continue;
+      }
+      if (!deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+function useLatestRef$1(value) {
+  const ref = React.useRef(value);
+  index$1(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function useFloating$1(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
+    whileElementsMounted,
+    open
+  } = options;
+  const [data, setData] = React.useState({
+    x: 0,
+    y: 0,
+    strategy,
+    placement,
+    middlewareData: {},
+    isPositioned: false
+  });
+  const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
+  if (!deepEqual(latestMiddleware, middleware)) {
+    setLatestMiddleware(middleware);
+  }
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
+  const setReference = React.useCallback(node => {
+    if (node !== referenceRef.current) {
+      referenceRef.current = node;
+      _setReference(node);
+    }
+  }, []);
+  const setFloating = React.useCallback(node => {
+    if (node !== floatingRef.current) {
+      floatingRef.current = node;
+      _setFloating(node);
+    }
+  }, []);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const hasWhileElementsMounted = whileElementsMounted != null;
+  const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
+  const platformRef = useLatestRef$1(platform);
+  const update = React.useCallback(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const config = {
+      placement,
+      strategy,
+      middleware: latestMiddleware
+    };
+    if (platformRef.current) {
+      config.platform = platformRef.current;
+    }
+    computePosition(referenceRef.current, floatingRef.current, config).then(data => {
+      const fullData = {
+        ...data,
+        isPositioned: true
+      };
+      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+        dataRef.current = fullData;
+        ReactDOM.flushSync(() => {
+          setData(fullData);
+        });
+      }
+    });
+  }, [latestMiddleware, placement, strategy, platformRef]);
+  index$1(() => {
+    if (open === false && dataRef.current.isPositioned) {
+      dataRef.current.isPositioned = false;
+      setData(data => ({
+        ...data,
+        isPositioned: false
+      }));
+    }
+  }, [open]);
+  const isMountedRef = React.useRef(false);
+  index$1(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  index$1(() => {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
+      if (whileElementsMountedRef.current) {
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+      }
+      update();
+    }
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
+  const refs = React.useMemo(() => ({
+    reference: referenceRef,
+    floating: floatingRef,
+    setReference,
+    setFloating
+  }), [setReference, setFloating]);
+  const elements = React.useMemo(() => ({
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
+    };
+    if (!elements.floating) {
+      return initialStyles;
+    }
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...(getDPR(elements.floating) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy,
+      left: x,
+      top: y
+    };
+  }, [strategy, transform, elements.floating, data.x, data.y]);
+  return React.useMemo(() => ({
+    ...data,
+    update,
+    refs,
+    elements,
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
+}
+const arrow$1 = options => {
+  function isRef(value) {
+    return {}.hasOwnProperty.call(value, 'current');
+  }
+  return {
+    name: 'arrow',
+    options,
+    fn(state) {
+      const {
+        element,
+        padding
+      } = typeof options === 'function' ? options(state) : options;
+      if (element && isRef(element)) {
+        if (element.current != null) {
+          return arrow$2({
+            element: element.current,
+            padding
+          }).fn(state);
+        }
+        return {};
+      }
+      if (element) {
+        return arrow$2({
+          element,
+          padding
+        }).fn(state);
+      }
+      return {};
+    }
+  };
+};
+const offset = (options, deps) => ({
+  ...offset$1(options),
+  options: [options, deps]
+});
+const shift = (options, deps) => ({
+  ...shift$1(options),
+  options: [options, deps]
+});
+const flip = (options, deps) => ({
+  ...flip$1(options),
+  options: [options, deps]
+});
+const arrow = (options, deps) => ({
+  ...arrow$1(options),
+  options: [options, deps]
+});
+
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return value => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
+const SafeReact = {
+  ...React
+};
+const useInsertionEffect = SafeReact.useInsertionEffect;
+const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
+function useEffectEvent(callback) {
+  const ref = React.useRef(() => {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error('Cannot call an event handler while rendering.');
+    }
+  });
+  useSafeInsertionEffect(() => {
+    ref.current = callback;
+  });
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return ref.current == null ? void 0 : ref.current(...args);
+  }, []);
+}
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+function isDifferentRow(index, cols, prevRow) {
+  return Math.floor(index / cols) !== prevRow;
+}
+function isIndexOutOfBounds(listRef, index) {
+  return index < 0 || index >= listRef.current.length;
+}
+function getMinIndex(listRef, disabledIndices) {
+  return findNonDisabledIndex(listRef, {
+    disabledIndices
+  });
+}
+function getMaxIndex(listRef, disabledIndices) {
+  return findNonDisabledIndex(listRef, {
+    decrement: true,
+    startingIndex: listRef.current.length,
+    disabledIndices
+  });
+}
+function findNonDisabledIndex(listRef, _temp) {
+  let {
+    startingIndex = -1,
+    decrement = false,
+    disabledIndices,
+    amount = 1
+  } = _temp === void 0 ? {} : _temp;
+  const list = listRef.current;
+  let index = startingIndex;
+  do {
+    index += decrement ? -amount : amount;
+  } while (index >= 0 && index <= list.length - 1 && isDisabled(list, index, disabledIndices));
+  return index;
+}
+function getGridNavigatedIndex(elementsRef, _ref) {
+  let {
+    event,
+    orientation,
+    loop,
+    cols,
+    disabledIndices,
+    minIndex,
+    maxIndex,
+    prevIndex,
+    stopEvent: stop = false
+  } = _ref;
+  let nextIndex = prevIndex;
+  if (event.key === ARROW_UP) {
+    stop && stopEvent(event);
+    if (prevIndex === -1) {
+      nextIndex = maxIndex;
+    } else {
+      nextIndex = findNonDisabledIndex(elementsRef, {
+        startingIndex: nextIndex,
+        amount: cols,
+        decrement: true,
+        disabledIndices
+      });
+      if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
+        const col = prevIndex % cols;
+        const maxCol = maxIndex % cols;
+        const offset = maxIndex - (maxCol - col);
+        if (maxCol === col) {
+          nextIndex = maxIndex;
+        } else {
+          nextIndex = maxCol > col ? offset : offset - cols;
+        }
+      }
+    }
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      nextIndex = prevIndex;
+    }
+  }
+  if (event.key === ARROW_DOWN) {
+    stop && stopEvent(event);
+    if (prevIndex === -1) {
+      nextIndex = minIndex;
+    } else {
+      nextIndex = findNonDisabledIndex(elementsRef, {
+        startingIndex: prevIndex,
+        amount: cols,
+        disabledIndices
+      });
+      if (loop && prevIndex + cols > maxIndex) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex % cols - cols,
+          amount: cols,
+          disabledIndices
+        });
+      }
+    }
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      nextIndex = prevIndex;
+    }
+  }
+  if (orientation === 'both') {
+    const prevRow = floor(prevIndex / cols);
+    if (event.key === ARROW_RIGHT) {
+      stop && stopEvent(event);
+      if (prevIndex % cols !== cols - 1) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex,
+          disabledIndices
+        });
+        if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+          nextIndex = findNonDisabledIndex(elementsRef, {
+            startingIndex: prevIndex - prevIndex % cols - 1,
+            disabledIndices
+          });
+        }
+      } else if (loop) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+      }
+      if (isDifferentRow(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    if (event.key === ARROW_LEFT) {
+      stop && stopEvent(event);
+      if (prevIndex % cols !== 0) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex,
+          decrement: true,
+          disabledIndices
+        });
+        if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+          nextIndex = findNonDisabledIndex(elementsRef, {
+            startingIndex: prevIndex + (cols - prevIndex % cols),
+            decrement: true,
+            disabledIndices
+          });
+        }
+      } else if (loop) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex + (cols - prevIndex % cols),
+          decrement: true,
+          disabledIndices
+        });
+      }
+      if (isDifferentRow(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    const lastRow = floor(maxIndex / cols) === prevRow;
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      if (loop && lastRow) {
+        nextIndex = event.key === ARROW_LEFT ? maxIndex : findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+      } else {
+        nextIndex = prevIndex;
+      }
+    }
+  }
+  return nextIndex;
+}
+function buildCellMap(sizes, cols, dense) {
+  const cellMap = [];
+  let startIndex = 0;
+  sizes.forEach((_ref2, index) => {
+    let {
+      width,
+      height
+    } = _ref2;
+    if (width > cols) {
+      if (process.env.NODE_ENV !== "production") {
+        throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
+      }
+    }
+    let itemPlaced = false;
+    if (dense) {
+      startIndex = 0;
+    }
+    while (!itemPlaced) {
+      const targetCells = [];
+      for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+          targetCells.push(startIndex + i + j * cols);
+        }
+      }
+      if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
+        targetCells.forEach(cell => {
+          cellMap[cell] = index;
+        });
+        itemPlaced = true;
+      } else {
+        startIndex++;
+      }
+    }
+  });
+  return [...cellMap];
+}
+function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
+  if (index === -1) return -1;
+  const firstCellIndex = cellMap.indexOf(index);
+  const sizeItem = sizes[index];
+  switch (corner) {
+    case 'tl':
+      return firstCellIndex;
+    case 'tr':
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + sizeItem.width - 1;
+    case 'bl':
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + (sizeItem.height - 1) * cols;
+    case 'br':
+      return cellMap.lastIndexOf(index);
+  }
+}
+function getCellIndices(indices, cellMap) {
+  return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
+}
+function isDisabled(list, index, disabledIndices) {
+  if (disabledIndices) {
+    return disabledIndices.includes(index);
+  }
+  const element = list[index];
+  return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+}
+let rafId = 0;
+function enqueueFocus(el, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    preventScroll = false,
+    cancelPrevious = true,
+    sync = false
+  } = options;
+  cancelPrevious && cancelAnimationFrame(rafId);
+  const exec = () => el == null ? void 0 : el.focus({
+    preventScroll
+  });
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+}
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+function sortByDocumentPosition(a, b) {
+  const position = a.compareDocumentPosition(b);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return -1;
+  }
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
+}
+function areMapsEqual(map1, map2) {
+  if (map1.size !== map2.size) {
+    return false;
+  }
+  for (const [key, value] of map1.entries()) {
+    if (value !== map2.get(key)) {
+      return false;
+    }
+  }
+  return true;
+}
+const FloatingListContext = React.createContext({
+  register: () => {},
+  unregister: () => {},
+  map: new Map(),
+  elementsRef: {
+    current: []
+  }
+});
+function FloatingList(props) {
+  const {
+    children,
+    elementsRef,
+    labelsRef
+  } = props;
+  const [map, setMap] = React.useState(() => new Map());
+  const register = React.useCallback(node => {
+    setMap(prevMap => new Map(prevMap).set(node, null));
+  }, []);
+  const unregister = React.useCallback(node => {
+    setMap(prevMap => {
+      const map = new Map(prevMap);
+      map.delete(node);
+      return map;
+    });
+  }, []);
+  index(() => {
+    const newMap = new Map(map);
+    const nodes = Array.from(newMap.keys()).sort(sortByDocumentPosition);
+    nodes.forEach((node, index) => {
+      newMap.set(node, index);
+    });
+    if (!areMapsEqual(map, newMap)) {
+      setMap(newMap);
+    }
+  }, [map]);
+  return React.createElement(FloatingListContext.Provider, {
+    value: React.useMemo(() => ({
+      register,
+      unregister,
+      map,
+      elementsRef,
+      labelsRef
+    }), [register, unregister, map, elementsRef, labelsRef])
+  }, children);
+}
+function useListItem(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    label
+  } = props;
+  const {
+    register,
+    unregister,
+    map,
+    elementsRef,
+    labelsRef
+  } = React.useContext(FloatingListContext);
+  const [index$1, setIndex] = React.useState(null);
+  const componentRef = React.useRef(null);
+  const ref = React.useCallback(node => {
+    componentRef.current = node;
+    if (index$1 !== null) {
+      elementsRef.current[index$1] = node;
+      if (labelsRef) {
+        var _node$textContent;
+        const isLabelDefined = label !== undefined;
+        labelsRef.current[index$1] = isLabelDefined ? label : (_node$textContent = node == null ? void 0 : node.textContent) != null ? _node$textContent : null;
+      }
+    }
+  }, [index$1, elementsRef, labelsRef, label]);
+  index(() => {
+    const node = componentRef.current;
+    if (node) {
+      register(node);
+      return () => {
+        unregister(node);
+      };
+    }
+  }, [register, unregister]);
+  index(() => {
+    const index = componentRef.current ? map.get(componentRef.current) : null;
+    if (index != null) {
+      setIndex(index);
+    }
+  }, [map]);
+  return React.useMemo(() => ({
+    ref,
+    index: index$1 == null ? -1 : index$1
+  }), [index$1, ref]);
+}
+function renderJsx(render, computedProps) {
+  if (typeof render === 'function') {
+    return render(computedProps);
+  }
+  if (render) {
+    return React.cloneElement(render, computedProps);
+  }
+  return React.createElement("div", computedProps);
+}
+const CompositeContext = React.createContext({
+  activeIndex: 0,
+  onNavigate: () => {}
+});
+const horizontalKeys = [ARROW_LEFT, ARROW_RIGHT];
+const verticalKeys = [ARROW_UP, ARROW_DOWN];
+const allKeys = [...horizontalKeys, ...verticalKeys];
+React.forwardRef(function Composite(props, forwardedRef) {
+  const {
+    render,
+    orientation = 'both',
+    loop = true,
+    cols = 1,
+    disabledIndices,
+    activeIndex: externalActiveIndex,
+    onNavigate: externalSetActiveIndex,
+    itemSizes,
+    dense = false,
+    ...domProps
+  } = props;
+  const [internalActiveIndex, internalSetActiveIndex] = React.useState(0);
+  const activeIndex = externalActiveIndex != null ? externalActiveIndex : internalActiveIndex;
+  const onNavigate = useEffectEvent(externalSetActiveIndex != null ? externalSetActiveIndex : internalSetActiveIndex);
+  const elementsRef = React.useRef([]);
+  const renderElementProps = render && typeof render !== 'function' ? render.props : {};
+  const contextValue = React.useMemo(() => ({
+    activeIndex,
+    onNavigate
+  }), [activeIndex, onNavigate]);
+  const isGrid = cols > 1;
+  function handleKeyDown(event) {
+    if (!allKeys.includes(event.key)) return;
+    let nextIndex = activeIndex;
+    const minIndex = getMinIndex(elementsRef, disabledIndices);
+    const maxIndex = getMaxIndex(elementsRef, disabledIndices);
+    if (isGrid) {
+      const sizes = itemSizes || Array.from({
+        length: elementsRef.current.length
+      }, () => ({
+        width: 1,
+        height: 1
+      }));
+      const cellMap = buildCellMap(sizes, cols, dense);
+      const minGridIndex = cellMap.findIndex(index => index != null && !isDisabled(elementsRef.current, index, disabledIndices));
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isDisabled(elementsRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      nextIndex = cellMap[getGridNavigatedIndex({
+        current: cellMap.map(itemIndex => itemIndex ? elementsRef.current[itemIndex] : null)
+      }, {
+        event,
+        orientation,
+        loop,
+        cols,
+        disabledIndices: getCellIndices([...(disabledIndices || elementsRef.current.map((_, index) => isDisabled(elementsRef.current, index) ? index : undefined)), undefined], cellMap),
+        minIndex: minGridIndex,
+        maxIndex: maxGridIndex,
+        prevIndex: getCellIndexOfCorner(activeIndex > maxIndex ? minIndex : activeIndex, sizes, cellMap, cols,
+        event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl')
+      })];
+    }
+    const toEndKeys = {
+      horizontal: [ARROW_RIGHT],
+      vertical: [ARROW_DOWN],
+      both: [ARROW_RIGHT, ARROW_DOWN]
+    }[orientation];
+    const toStartKeys = {
+      horizontal: [ARROW_LEFT],
+      vertical: [ARROW_UP],
+      both: [ARROW_LEFT, ARROW_UP]
+    }[orientation];
+    const preventedKeys = isGrid ? allKeys : {
+      horizontal: horizontalKeys,
+      vertical: verticalKeys,
+      both: allKeys
+    }[orientation];
+    if (nextIndex === activeIndex && [...toEndKeys, ...toStartKeys].includes(event.key)) {
+      if (loop && nextIndex === maxIndex && toEndKeys.includes(event.key)) {
+        nextIndex = minIndex;
+      } else if (loop && nextIndex === minIndex && toStartKeys.includes(event.key)) {
+        nextIndex = maxIndex;
+      } else {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: nextIndex,
+          decrement: toStartKeys.includes(event.key),
+          disabledIndices
+        });
+      }
+    }
+    if (nextIndex !== activeIndex && !isIndexOutOfBounds(elementsRef, nextIndex)) {
+      event.stopPropagation();
+      if (preventedKeys.includes(event.key)) {
+        event.preventDefault();
+      }
+      onNavigate(nextIndex);
+      queueMicrotask(() => {
+        enqueueFocus(elementsRef.current[nextIndex]);
+      });
+    }
+  }
+  const computedProps = {
+    ...domProps,
+    ...renderElementProps,
+    ref: forwardedRef,
+    'aria-orientation': orientation === 'both' ? undefined : orientation,
+    onKeyDown(e) {
+      domProps.onKeyDown == null || domProps.onKeyDown(e);
+      renderElementProps.onKeyDown == null || renderElementProps.onKeyDown(e);
+      handleKeyDown(e);
+    }
+  };
+  return React.createElement(CompositeContext.Provider, {
+    value: contextValue
+  }, React.createElement(FloatingList, {
+    elementsRef: elementsRef
+  }, renderJsx(render, computedProps)));
+});
+React.forwardRef(function CompositeItem(props, forwardedRef) {
+  const {
+    render,
+    ...domProps
+  } = props;
+  const renderElementProps = render && typeof render !== 'function' ? render.props : {};
+  const {
+    activeIndex,
+    onNavigate
+  } = React.useContext(CompositeContext);
+  const {
+    ref,
+    index
+  } = useListItem();
+  const mergedRef = useMergeRefs([ref, forwardedRef, renderElementProps.ref]);
+  const isActive = activeIndex === index;
+  const computedProps = {
+    ...domProps,
+    ...renderElementProps,
+    ref: mergedRef,
+    tabIndex: isActive ? 0 : -1,
+    'data-active': isActive ? '' : undefined,
+    onFocus(e) {
+      domProps.onFocus == null || domProps.onFocus(e);
+      renderElementProps.onFocus == null || renderElementProps.onFocus(e);
+      onNavigate(index);
+    }
+  };
+  return renderJsx(render, computedProps);
+});
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+let serverHandoffComplete = false;
+let count = 0;
+const genId = () =>
+"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++;
+function useFloatingId() {
+  const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : undefined);
+  index(() => {
+    if (id == null) {
+      setId(genId());
+    }
+  }, []);
+  React.useEffect(() => {
+    serverHandoffComplete = true;
+  }, []);
+  return id;
+}
+const useReactId = SafeReact.useId;
+const useId = useReactId || useFloatingId;
+let devMessageSet;
+if (process.env.NODE_ENV !== "production") {
+  devMessageSet = new Set();
+}
+function warn() {
+  var _devMessageSet;
+  for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
+    messages[_key] = arguments[_key];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
+    var _devMessageSet2;
+    (_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
+    console.warn(message);
+  }
+}
+function error$1() {
+  var _devMessageSet3;
+  for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    messages[_key2] = arguments[_key2];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
+    var _devMessageSet4;
+    (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
+    console.error(message);
+  }
+}
+const FloatingArrow = React.forwardRef(function FloatingArrow(props, ref) {
+  const {
+    context: {
+      placement,
+      elements: {
+        floating
+      },
+      middlewareData: {
+        arrow
+      }
+    },
+    width = 14,
+    height = 7,
+    tipRadius = 0,
+    strokeWidth = 0,
+    staticOffset,
+    stroke,
+    d,
+    style: {
+      transform,
+      ...restStyle
+    } = {},
+    ...rest
+  } = props;
+  if (process.env.NODE_ENV !== "production") {
+    if (!ref) {
+      warn('The `ref` prop is required for `FloatingArrow`.');
+    }
+  }
+  const clipPathId = useId();
+  if (!floating) {
+    return null;
+  }
+  const computedStrokeWidth = strokeWidth * 2;
+  const halfStrokeWidth = computedStrokeWidth / 2;
+  const svgX = width / 2 * (tipRadius / -8 + 1);
+  const svgY = height / 2 * tipRadius / 4;
+  const [side, alignment] = placement.split('-');
+  const isRTL = platform.isRTL(floating);
+  const isCustomShape = !!d;
+  const isVerticalSide = side === 'top' || side === 'bottom';
+  const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
+  let xOffsetProp = staticOffset && alignment === 'end' ? 'right' : 'left';
+  if (staticOffset && isRTL) {
+    xOffsetProp = alignment === 'end' ? 'left' : 'right';
+  }
+  const arrowX = (arrow == null ? void 0 : arrow.x) != null ? staticOffset || arrow.x : '';
+  const arrowY = (arrow == null ? void 0 : arrow.y) != null ? staticOffset || arrow.y : '';
+  const dValue = d || 'M0,0' + (" H" + width) + (" L" + (width - svgX) + "," + (height - svgY)) + (" Q" + width / 2 + "," + height + " " + svgX + "," + (height - svgY)) + ' Z';
+  const rotation = {
+    top: isCustomShape ? 'rotate(180deg)' : '',
+    left: isCustomShape ? 'rotate(90deg)' : 'rotate(-90deg)',
+    bottom: isCustomShape ? '' : 'rotate(180deg)',
+    right: isCustomShape ? 'rotate(-90deg)' : 'rotate(90deg)'
+  }[side];
+  return React.createElement("svg", _extends({}, rest, {
+    "aria-hidden": true,
+    ref: ref,
+    width: isCustomShape ? width : width + computedStrokeWidth,
+    height: width,
+    viewBox: "0 0 " + width + " " + (height > width ? height : width),
+    style: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      [xOffsetProp]: arrowX,
+      [yOffsetProp]: arrowY,
+      [side]: isVerticalSide || isCustomShape ? '100%' : "calc(100% - " + computedStrokeWidth / 2 + "px)",
+      transform: "" + rotation + (transform != null ? transform : ''),
+      ...restStyle
+    }
+  }), computedStrokeWidth > 0 && React.createElement("path", {
+    clipPath: "url(#" + clipPathId + ")",
+    fill: "none",
+    stroke: stroke
+    ,
+    strokeWidth: computedStrokeWidth + (d ? 0 : 1),
+    d: dValue
+  }), React.createElement("path", {
+    stroke: computedStrokeWidth && !d ? rest.fill : 'none',
+    d: dValue
+  }), React.createElement("clipPath", {
+    id: clipPathId
+  }, React.createElement("rect", {
+    x: -halfStrokeWidth,
+    y: halfStrokeWidth * (isCustomShape ? -1 : 1),
+    width: width + computedStrokeWidth,
+    height: width
+  })));
+});
+function createPubSub() {
+  const map = new Map();
+  return {
+    emit(event, data) {
+      var _map$get;
+      (_map$get = map.get(event)) == null || _map$get.forEach(handler => handler(data));
+    },
+    on(event, listener) {
+      map.set(event, [...(map.get(event) || []), listener]);
+    },
+    off(event, listener) {
+      var _map$get2;
+      map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter(l => l !== listener)) || []);
+    }
+  };
+}
+const FloatingNodeContext = React.createContext(null);
+const FloatingTreeContext = React.createContext(null);
+const useFloatingParentNodeId = () => {
+  var _React$useContext;
+  return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
+};
+const useFloatingTree = () => React.useContext(FloatingTreeContext);
+function createAttribute(name) {
+  return "data-floating-ui-" + name;
+}
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+const safePolygonIdentifier = createAttribute('safe-polygon');
+function getDelay(value, prop, pointerType) {
+  if (pointerType && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  return value == null ? void 0 : value[prop];
+}
+function useHover(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    elements: {
+      domReference,
+      floating
+    }
+  } = context;
+  const {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true
+  } = props;
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const handleCloseRef = useLatestRef(handleClose);
+  const delayRef = useLatestRef(delay);
+  const pointerTypeRef = React.useRef();
+  const timeoutRef = React.useRef(-1);
+  const handlerRef = React.useRef();
+  const restTimeoutRef = React.useRef(-1);
+  const blockMouseMoveRef = React.useRef(true);
+  const performedPointerEventsMutationRef = React.useRef(false);
+  const unbindMouseMoveRef = React.useRef(() => {});
+  const isHoverOpen = React.useCallback(() => {
+    var _dataRef$current$open;
+    const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
+    return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
+  }, [dataRef]);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function onOpenChange(_ref) {
+      let {
+        open
+      } = _ref;
+      if (!open) {
+        clearTimeout(timeoutRef.current);
+        clearTimeout(restTimeoutRef.current);
+        blockMouseMoveRef.current = true;
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [enabled, events]);
+  React.useEffect(() => {
+    if (!enabled || !handleCloseRef.current || !open) {
+      return;
+    }
+    function onLeave(event) {
+      if (isHoverOpen()) {
+        onOpenChange(false, event, 'hover');
+      }
+    }
+    const html = getDocument(floating).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
+  const closeWithDelay = React.useCallback(function (event, runElseBranch, reason) {
+    if (runElseBranch === void 0) {
+      runElseBranch = true;
+    }
+    if (reason === void 0) {
+      reason = 'hover';
+    }
+    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+    if (closeDelay && !handlerRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => onOpenChange(false, event, reason), closeDelay);
+    } else if (runElseBranch) {
+      clearTimeout(timeoutRef.current);
+      onOpenChange(false, event, reason);
+    }
+  }, [delayRef, onOpenChange]);
+  const cleanupMouseMoveHandler = useEffectEvent(() => {
+    unbindMouseMoveRef.current();
+    handlerRef.current = undefined;
+  });
+  const clearPointerEvents = useEffectEvent(() => {
+    if (performedPointerEventsMutationRef.current) {
+      const body = getDocument(floating).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      performedPointerEventsMutationRef.current = false;
+    }
+  });
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function isClickLikeOpenEvent() {
+      return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    }
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      blockMouseMoveRef.current = false;
+      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && !getDelay(delayRef.current, 'open')) {
+        return;
+      }
+      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+      if (openDelay) {
+        timeoutRef.current = window.setTimeout(() => {
+          onOpenChange(true, event, 'hover');
+        }, openDelay);
+      } else {
+        onOpenChange(true, event, 'hover');
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) return;
+      unbindMouseMoveRef.current();
+      const doc = getDocument(floating);
+      clearTimeout(restTimeoutRef.current);
+      if (handleCloseRef.current && dataRef.current.floatingContext) {
+        if (!open) {
+          clearTimeout(timeoutRef.current);
+        }
+        handlerRef.current = handleCloseRef.current({
+          ...dataRef.current.floatingContext,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+          onClose() {
+            clearPointerEvents();
+            cleanupMouseMoveHandler();
+            closeWithDelay(event, true, 'safe-polygon');
+          }
+        });
+        const handler = handlerRef.current;
+        doc.addEventListener('mousemove', handler);
+        unbindMouseMoveRef.current = () => {
+          doc.removeEventListener('mousemove', handler);
+        };
+        return;
+      }
+      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(floating, event.relatedTarget) : true;
+      if (shouldClose) {
+        closeWithDelay(event);
+      }
+    }
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent()) return;
+      if (!dataRef.current.floatingContext) return;
+      handleCloseRef.current == null || handleCloseRef.current({
+        ...dataRef.current.floatingContext,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        onClose() {
+          clearPointerEvents();
+          cleanupMouseMoveHandler();
+          closeWithDelay(event);
+        }
+      })(event);
+    }
+    if (isElement(domReference)) {
+      const ref = domReference;
+      open && ref.addEventListener('mouseleave', onScrollMouseLeave);
+      floating == null || floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && ref.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      ref.addEventListener('mouseenter', onMouseEnter);
+      ref.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
+        floating == null || floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && ref.removeEventListener('mousemove', onMouseEnter);
+        ref.removeEventListener('mouseenter', onMouseEnter);
+        ref.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [domReference, floating, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, tree, delayRef, handleCloseRef, dataRef]);
+  index(() => {
+    var _handleCloseRef$curre;
+    if (!enabled) {
+      return;
+    }
+    if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
+      const body = getDocument(floating).body;
+      body.setAttribute(safePolygonIdentifier, '');
+      body.style.pointerEvents = 'none';
+      performedPointerEventsMutationRef.current = true;
+      if (isElement(domReference) && floating) {
+        var _tree$nodesRef$curren;
+        const ref = domReference;
+        const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+        ref.style.pointerEvents = 'auto';
+        floating.style.pointerEvents = 'auto';
+        return () => {
+          ref.style.pointerEvents = '';
+          floating.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, floating, domReference, tree, handleCloseRef, isHoverOpen]);
+  index(() => {
+    if (!open) {
+      pointerTypeRef.current = undefined;
+      cleanupMouseMoveHandler();
+      clearPointerEvents();
+    }
+  }, [open, cleanupMouseMoveHandler, clearPointerEvents]);
+  React.useEffect(() => {
+    return () => {
+      cleanupMouseMoveHandler();
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+      clearPointerEvents();
+    };
+  }, [enabled, domReference, cleanupMouseMoveHandler, clearPointerEvents]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    function setPointerRef(event) {
+      pointerTypeRef.current = event.pointerType;
+    }
+    return {
+      reference: {
+        onPointerDown: setPointerRef,
+        onPointerEnter: setPointerRef,
+        onMouseMove(event) {
+          const {
+            nativeEvent
+          } = event;
+          function handleMouseMove() {
+            if (!blockMouseMoveRef.current) {
+              onOpenChange(true, nativeEvent, 'hover');
+            }
+          }
+          if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+            return;
+          }
+          if (open || restMs === 0) {
+            return;
+          }
+          clearTimeout(restTimeoutRef.current);
+          if (pointerTypeRef.current === 'touch') {
+            handleMouseMove();
+          } else {
+            restTimeoutRef.current = window.setTimeout(handleMouseMove, restMs);
+          }
+        }
+      },
+      floating: {
+        onMouseEnter() {
+          clearTimeout(timeoutRef.current);
+        },
+        onMouseLeave(event) {
+          closeWithDelay(event.nativeEvent, false);
+        }
+      }
+    };
+  }, [enabled, mouseOnly, open, restMs, onOpenChange, closeWithDelay]);
+}
+const NOOP = () => {};
+React.createContext({
+  delay: 0,
+  initialDelay: 0,
+  timeoutMs: 0,
+  currentId: null,
+  setCurrentId: NOOP,
+  setState: NOOP,
+  isInstantPhase: false
+});
+function getChildren(nodes, id) {
+  let allChildren = nodes.filter(node => {
+    var _node$context;
+    return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
+  });
+  let currentChildren = allChildren;
+  while (currentChildren.length) {
+    currentChildren = nodes.filter(node => {
+      var _currentChildren;
+      return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some(n => {
+        var _node$context2;
+        return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
+      });
+    });
+    allChildren = allChildren.concat(currentChildren);
+  }
+  return allChildren;
+}
+const HIDDEN_STYLES = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'fixed',
+  whiteSpace: 'nowrap',
+  width: '1px',
+  top: 0,
+  left: 0
+};
+let timeoutId;
+function setActiveElementOnTab(event) {
+  if (event.key === 'Tab') {
+    event.target;
+    clearTimeout(timeoutId);
+  }
+}
+React.forwardRef(function FocusGuard(props, ref) {
+  const [role, setRole] = React.useState();
+  index(() => {
+    if (isSafari()) {
+      setRole('button');
+    }
+    document.addEventListener('keydown', setActiveElementOnTab);
+    return () => {
+      document.removeEventListener('keydown', setActiveElementOnTab);
+    };
+  }, []);
+  const restProps = {
+    ref,
+    tabIndex: 0,
+    role,
+    'aria-hidden': role ? undefined : true,
+    [createAttribute('focus-guard')]: '',
+    style: HIDDEN_STYLES
+  };
+  return React.createElement("span", _extends({}, props, restProps));
+});
+React.createContext(null);
+React.forwardRef(function VisuallyHiddenDismiss(props, ref) {
+  return React.createElement("button", _extends({}, props, {
+    type: "button",
+    ref: ref,
+    tabIndex: -1,
+    style: HIDDEN_STYLES
+  }));
+});
+const activeLocks = new Set();
+React.forwardRef(function FloatingOverlay(props, ref) {
+  const {
+    lockScroll = false,
+    ...rest
+  } = props;
+  const lockId = useId();
+  index(() => {
+    if (!lockScroll) return;
+    activeLocks.add(lockId);
+    const isIOS = /iP(hone|ad|od)|iOS/.test(getPlatform());
+    const bodyStyle = document.body.style;
+    const scrollbarX = Math.round(document.documentElement.getBoundingClientRect().left) + document.documentElement.scrollLeft;
+    const paddingProp = scrollbarX ? 'paddingLeft' : 'paddingRight';
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const scrollX = bodyStyle.left ? parseFloat(bodyStyle.left) : window.pageXOffset;
+    const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.pageYOffset;
+    bodyStyle.overflow = 'hidden';
+    if (scrollbarWidth) {
+      bodyStyle[paddingProp] = scrollbarWidth + "px";
+    }
+    if (isIOS) {
+      var _window$visualViewpor, _window$visualViewpor2;
+      const offsetLeft = ((_window$visualViewpor = window.visualViewport) == null ? void 0 : _window$visualViewpor.offsetLeft) || 0;
+      const offsetTop = ((_window$visualViewpor2 = window.visualViewport) == null ? void 0 : _window$visualViewpor2.offsetTop) || 0;
+      Object.assign(bodyStyle, {
+        position: 'fixed',
+        top: -(scrollY - Math.floor(offsetTop)) + "px",
+        left: -(scrollX - Math.floor(offsetLeft)) + "px",
+        right: '0'
+      });
+    }
+    return () => {
+      activeLocks.delete(lockId);
+      if (activeLocks.size === 0) {
+        Object.assign(bodyStyle, {
+          overflow: '',
+          [paddingProp]: ''
+        });
+        if (isIOS) {
+          Object.assign(bodyStyle, {
+            position: '',
+            top: '',
+            left: '',
+            right: ''
+          });
+          window.scrollTo(scrollX, scrollY);
+        }
+      }
+    };
+  }, [lockId, lockScroll]);
+  return React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    style: {
+      position: 'fixed',
+      overflow: 'auto',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      ...rest.style
+    }
+  }));
+});
+const bubbleHandlerKeys = {
+  pointerdown: 'onPointerDown',
+  mousedown: 'onMouseDown',
+  click: 'onClick'
+};
+const captureHandlerKeys = {
+  pointerdown: 'onPointerDownCapture',
+  mousedown: 'onMouseDownCapture',
+  click: 'onClickCapture'
+};
+const normalizeProp = normalizable => {
+  var _normalizable$escapeK, _normalizable$outside;
+  return {
+    escapeKey: typeof normalizable === 'boolean' ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
+    outsidePress: typeof normalizable === 'boolean' ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
+  };
+};
+function useDismiss(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    elements: {
+      reference,
+      domReference,
+      floating
+    },
+    dataRef
+  } = context;
+  const {
+    enabled = true,
+    escapeKey = true,
+    outsidePress: unstable_outsidePress = true,
+    outsidePressEvent = 'pointerdown',
+    referencePress = false,
+    referencePressEvent = 'pointerdown',
+    ancestorScroll = false,
+    bubbles,
+    capture
+  } = props;
+  const tree = useFloatingTree();
+  const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
+  const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
+  const insideReactTreeRef = React.useRef(false);
+  const endedOrStartedInsideRef = React.useRef(false);
+  const {
+    escapeKey: escapeKeyBubbles,
+    outsidePress: outsidePressBubbles
+  } = normalizeProp(bubbles);
+  const {
+    escapeKey: escapeKeyCapture,
+    outsidePress: outsidePressCapture
+  } = normalizeProp(capture);
+  const closeOnEscapeKeyDown = useEffectEvent(event => {
+    var _dataRef$current$floa;
+    if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
+      return;
+    }
+    const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (!escapeKeyBubbles) {
+      event.stopPropagation();
+      if (children.length > 0) {
+        let shouldDismiss = true;
+        children.forEach(child => {
+          var _child$context;
+          if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
+            shouldDismiss = false;
+            return;
+          }
+        });
+        if (!shouldDismiss) {
+          return;
+        }
+      }
+    }
+    onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, 'escape-key');
+  });
+  const closeOnEscapeKeyDownCapture = useEffectEvent(event => {
+    var _getTarget2;
+    const callback = () => {
+      var _getTarget;
+      closeOnEscapeKeyDown(event);
+      (_getTarget = getTarget(event)) == null || _getTarget.removeEventListener('keydown', callback);
+    };
+    (_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);
+  });
+  const closeOnPressOutside = useEffectEvent(event => {
+    var _dataRef$current$floa2;
+    const insideReactTree = insideReactTreeRef.current;
+    insideReactTreeRef.current = false;
+    const endedOrStartedInside = endedOrStartedInsideRef.current;
+    endedOrStartedInsideRef.current = false;
+    if (outsidePressEvent === 'click' && endedOrStartedInside) {
+      return;
+    }
+    if (insideReactTree) {
+      return;
+    }
+    if (typeof outsidePress === 'function' && !outsidePress(event)) {
+      return;
+    }
+    const target = getTarget(event);
+    const inertSelector = "[" + createAttribute('inert') + "]";
+    const markers = getDocument(floating).querySelectorAll(inertSelector);
+    let targetRootAncestor = isElement(target) ? target : null;
+    while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
+      const nextParent = getParentNode(targetRootAncestor);
+      if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
+        break;
+      }
+      targetRootAncestor = nextParent;
+    }
+    if (markers.length && isElement(target) && !isRootElement(target) &&
+    !contains(target, floating) &&
+    Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {
+      return;
+    }
+    if (isHTMLElement(target) && floating) {
+      const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+      const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+      let xCond = canScrollY && event.offsetX > target.clientWidth;
+      if (canScrollY) {
+        const isRTL = getComputedStyle(target).direction === 'rtl';
+        if (isRTL) {
+          xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
+        }
+      }
+      if (xCond || canScrollX && event.offsetY > target.clientHeight) {
+        return;
+      }
+    }
+    const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
+    const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
+      var _node$context;
+      return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
+    });
+    if (isEventTargetWithin(event, floating) || isEventTargetWithin(event, domReference) || targetIsInsideChildren) {
+      return;
+    }
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (children.length > 0) {
+      let shouldDismiss = true;
+      children.forEach(child => {
+        var _child$context2;
+        if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
+          shouldDismiss = false;
+          return;
+        }
+      });
+      if (!shouldDismiss) {
+        return;
+      }
+    }
+    onOpenChange(false, event, 'outside-press');
+  });
+  const closeOnPressOutsideCapture = useEffectEvent(event => {
+    var _getTarget4;
+    const callback = () => {
+      var _getTarget3;
+      closeOnPressOutside(event);
+      (_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
+    };
+    (_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
+  });
+  React.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
+    dataRef.current.__outsidePressBubbles = outsidePressBubbles;
+    function onScroll(event) {
+      onOpenChange(false, event, 'ancestor-scroll');
+    }
+    const doc = getDocument(floating);
+    escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+    outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+    let ancestors = [];
+    if (ancestorScroll) {
+      if (isElement(domReference)) {
+        ancestors = getOverflowAncestors(domReference);
+      }
+      if (isElement(floating)) {
+        ancestors = ancestors.concat(getOverflowAncestors(floating));
+      }
+      if (!isElement(reference) && reference && reference.contextElement) {
+        ancestors = ancestors.concat(getOverflowAncestors(reference.contextElement));
+      }
+    }
+    ancestors = ancestors.filter(ancestor => {
+      var _doc$defaultView;
+      return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
+    });
+    ancestors.forEach(ancestor => {
+      ancestor.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    });
+    return () => {
+      escapeKey && doc.removeEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+      outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+      ancestors.forEach(ancestor => {
+        ancestor.removeEventListener('scroll', onScroll);
+      });
+    };
+  }, [dataRef, floating, domReference, reference, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
+  React.useEffect(() => {
+    insideReactTreeRef.current = false;
+  }, [outsidePress, outsidePressEvent]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onKeyDown: closeOnEscapeKeyDown,
+        [bubbleHandlerKeys[referencePressEvent]]: event => {
+          if (referencePress) {
+            onOpenChange(false, event.nativeEvent, 'reference-press');
+          }
+        }
+      },
+      floating: {
+        onKeyDown: closeOnEscapeKeyDown,
+        onMouseDown() {
+          endedOrStartedInsideRef.current = true;
+        },
+        onMouseUp() {
+          endedOrStartedInsideRef.current = true;
+        },
+        [captureHandlerKeys[outsidePressEvent]]: () => {
+          insideReactTreeRef.current = true;
+        }
+      }
+    };
+  }, [enabled, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
+}
+function useFloatingRootContext(options) {
+  const {
+    open = false,
+    onOpenChange: onOpenChangeProp,
+    elements: elementsProp
+  } = options;
+  const floatingId = useId();
+  const dataRef = React.useRef({});
+  const [events] = React.useState(() => createPubSub());
+  const nested = useFloatingParentNodeId() != null;
+  if (process.env.NODE_ENV !== "production") {
+    const optionDomReference = elementsProp.reference;
+    if (optionDomReference && !isElement(optionDomReference)) {
+      error$1('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
+    }
+  }
+  const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    dataRef.current.openEvent = open ? event : undefined;
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
+  });
+  const refs = React.useMemo(() => ({
+    setPositionReference
+  }), []);
+  const elements = React.useMemo(() => ({
+    reference: positionReference || elementsProp.reference || null,
+    floating: elementsProp.floating || null,
+    domReference: elementsProp.reference
+  }), [positionReference, elementsProp.reference, elementsProp.floating]);
+  return React.useMemo(() => ({
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  }), [open, onOpenChange, elements, events, floatingId, refs]);
+}
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    nodeId
+  } = options;
+  const internalRootContext = useFloatingRootContext({
+    ...options,
+    elements: {
+      reference: null,
+      floating: null,
+      ...options.elements
+    }
+  });
+  const rootContext = options.rootContext || internalRootContext;
+  const computedElements = rootContext.elements;
+  const [_domReference, setDomReference] = React.useState(null);
+  const [positionReference, _setPositionReference] = React.useState(null);
+  const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
+  const domReference = optionDomReference || _domReference;
+  const domReferenceRef = React.useRef(null);
+  const tree = useFloatingTree();
+  index(() => {
+    if (domReference) {
+      domReferenceRef.current = domReference;
+    }
+  }, [domReference]);
+  const position = useFloating$1({
+    ...options,
+    elements: {
+      ...computedElements,
+      ...(positionReference && {
+        reference: positionReference
+      })
+    }
+  });
+  const setPositionReference = React.useCallback(node => {
+    const computedPositionReference = isElement(node) ? {
+      getBoundingClientRect: () => node.getBoundingClientRect(),
+      contextElement: node
+    } : node;
+    _setPositionReference(computedPositionReference);
+    position.refs.setReference(computedPositionReference);
+  }, [position.refs]);
+  const setReference = React.useCallback(node => {
+    if (isElement(node) || node === null) {
+      domReferenceRef.current = node;
+      setDomReference(node);
+    }
+    if (isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    node !== null && !isElement(node)) {
+      position.refs.setReference(node);
+    }
+  }, [position.refs]);
+  const refs = React.useMemo(() => ({
+    ...position.refs,
+    setReference,
+    setPositionReference,
+    domReference: domReferenceRef
+  }), [position.refs, setReference, setPositionReference]);
+  const elements = React.useMemo(() => ({
+    ...position.elements,
+    domReference: domReference
+  }), [position.elements, domReference]);
+  const context = React.useMemo(() => ({
+    ...position,
+    ...rootContext,
+    refs,
+    elements,
+    nodeId
+  }), [position, refs, elements, nodeId, rootContext]);
+  index(() => {
+    rootContext.dataRef.current.floatingContext = context;
+    const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
+    if (node) {
+      node.context = context;
+    }
+  });
+  return React.useMemo(() => ({
+    ...position,
+    context,
+    refs,
+    elements
+  }), [position, refs, elements, context]);
+}
+function useFocus(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    events,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    visibleOnly = true
+  } = props;
+  const blockFocusRef = React.useRef(false);
+  const timeoutRef = React.useRef();
+  const keyboardModalityRef = React.useRef(true);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const win = getWindow(domReference);
+    function onBlur() {
+      if (!open && isHTMLElement(domReference) && domReference === activeElement(getDocument(domReference))) {
+        blockFocusRef.current = true;
+      }
+    }
+    function onKeyDown() {
+      keyboardModalityRef.current = true;
+    }
+    win.addEventListener('blur', onBlur);
+    win.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      win.removeEventListener('blur', onBlur);
+      win.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [domReference, open, enabled]);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function onOpenChange(_ref) {
+      let {
+        reason
+      } = _ref;
+      if (reason === 'reference-press' || reason === 'escape-key') {
+        blockFocusRef.current = true;
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [events, enabled]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onPointerDown(event) {
+          if (isVirtualPointerEvent(event.nativeEvent)) return;
+          keyboardModalityRef.current = false;
+        },
+        onMouseLeave() {
+          blockFocusRef.current = false;
+        },
+        onFocus(event) {
+          if (blockFocusRef.current) return;
+          const target = getTarget(event.nativeEvent);
+          if (visibleOnly && isElement(target)) {
+            try {
+              if (isSafari() && isMac()) throw Error();
+              if (!target.matches(':focus-visible')) return;
+            } catch (e) {
+              if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+                return;
+              }
+            }
+          }
+          onOpenChange(true, event.nativeEvent, 'focus');
+        },
+        onBlur(event) {
+          blockFocusRef.current = false;
+          const relatedTarget = event.relatedTarget;
+          const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+          timeoutRef.current = window.setTimeout(() => {
+            var _dataRef$current$floa;
+            const activeEl = activeElement(domReference ? domReference.ownerDocument : document);
+            if (!relatedTarget && activeEl === domReference) return;
+            if (contains((_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {
+              return;
+            }
+            onOpenChange(false, event.nativeEvent, 'focus');
+          });
+        }
+      }
     };
-    var styles = handleGenerateStyle();
-    var iconAccessor = useMemo(function () {
-        if (iconAccessorOverride)
-            return iconAccessorOverride;
-        switch (type) {
-            case 'info':
-                return 'question-circle';
-            case 'error':
-                return 'exclamation-triangle';
-            case 'warn':
-                return 'exclamation-circle';
-            case 'success':
-                return 'sparkles';
-            case 'generic':
-            default:
-                return undefined;
+  }, [enabled, visibleOnly, dataRef, domReference, onOpenChange]);
+}
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+function mergeProps(userProps, propsList, elementKey) {
+  const map = new Map();
+  const isItem = elementKey === 'item';
+  let domUserProps = userProps;
+  if (isItem && userProps) {
+    const {
+      [ACTIVE_KEY]: _,
+      [SELECTED_KEY]: __,
+      ...validProps
+    } = userProps;
+    domUserProps = validProps;
+  }
+  return {
+    ...(elementKey === 'floating' && {
+      tabIndex: -1
+    }),
+    ...domUserProps,
+    ...propsList.map(value => {
+      const propsOrGetProps = value ? value[elementKey] : null;
+      if (typeof propsOrGetProps === 'function') {
+        return userProps ? propsOrGetProps(userProps) : null;
+      }
+      return propsOrGetProps;
+    }).concat(userProps).reduce((acc, props) => {
+      if (!props) {
+        return acc;
+      }
+      Object.entries(props).forEach(_ref => {
+        let [key, value] = _ref;
+        if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+          return;
         }
-    }, [iconAccessorOverride, type]);
-    return (jsx("div", { className: toClassName(styles.container), children: jsxs("div", { className: "flex h-full items-center", children: [jsx("div", { className: "flex-shrink-0", children: iconAccessor && (jsx(IconElement, { accessor: iconAccessor, className: toClassName(styles.icon), "aria-hidden": "true" })) }), jsxs("div", { className: styles.content.container, children: [jsxs("div", { children: [jsx("h3", { className: toClassName(styles.content.title), children: title }), !isCollapsed && (jsx("p", { className: toClassName(styles.content.message), children: message }))] }), jsxs("div", { className: styles.content.actions, children: [isCollapsible && (jsx("div", { onClick: function () {
-                                        setIsCollapsed(!isCollapsed);
-                                        onCollapse();
-                                    }, children: jsx(IconElement, { className: toClassName(styles.content.action, isCollapsed && styles.content.inverted), accessor: "chevron-up" }) })), jsx("div", { onClick: onClose, children: jsx(IconElement, { className: styles.content.action, accessor: "times" }) })] })] })] }) }));
-};
-
-var base$q = {
-    container: 'rounded-sm p-4 border-l-4',
-    icon: 'h-5 w-5',
-    content: {
-        container: 'ml-3 flex-1 md:flex md:justify-between ease-in-out transition-transform',
-        title: 'text-md font-semibold',
-        message: 'text-sm',
-        actions: 'flex gap-2',
-        action: 'h-5 w-5 !p-0 hover:opacity-60 cursor-pointer',
-        inverted: 'rotate-180',
-    },
-};
-var generic = {
-    container: 'bg-gray-50 border-gray-400',
-    icon: 'text-gray-400',
-    content: {
-        actions: 'text-gray-500',
-        message: 'text-gray-500',
-        title: 'text-gray-500 rotate',
-    },
-};
-var error$1 = {
-    container: 'bg-red-50 border-red-400',
-    icon: 'text-red-400',
-    content: {
-        actions: 'text-red-500',
-        message: 'text-red-500',
-        title: 'text-red-500',
-    },
-};
-var warn = {
-    container: 'bg-yellow-50 border-orange-400',
-    icon: 'text-orange-400',
-    content: {
-        actions: 'text-orange-500',
-        message: 'text-orange-500',
-        title: 'text-orange-500',
-    },
-};
-var success$1 = {
-    container: 'bg-green-50 border-green-400',
-    icon: 'text-green-400',
-    content: {
-        actions: 'text-green-500',
-        message: 'text-green-500',
-        title: 'text-green-500',
-    },
-};
-var info = {
-    container: 'bg-blue-50 border-blue-400',
-    icon: 'text-blue-400',
-    content: {
-        actions: 'text-blue-500',
-        message: 'text-blue-500',
-        title: 'text-blue-500',
-    },
-};
-var styles$u = {
-    base: base$q,
-    generic: generic,
-    error: error$1,
-    warn: warn,
-    success: success$1,
-    info: info,
-};
+        if (key.indexOf('on') === 0) {
+          if (!map.has(key)) {
+            map.set(key, []);
+          }
+          if (typeof value === 'function') {
+            var _map$get;
+            (_map$get = map.get(key)) == null || _map$get.push(value);
+            acc[key] = function () {
+              var _map$get2;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);
+            };
+          }
+        } else {
+          acc[key] = value;
+        }
+      });
+      return acc;
+    }, {})
+  };
+}
+function useInteractions(propsList) {
+  if (propsList === void 0) {
+    propsList = [];
+  }
+  const deps = propsList;
+  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
+  deps);
+  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
+  deps);
+  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
+  propsList.map(key => key == null ? void 0 : key.item));
+  return React.useMemo(() => ({
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  }), [getReferenceProps, getFloatingProps, getItemProps]);
+}
+const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
+function useRole(context, props) {
+  var _componentRoleToAriaR;
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    floatingId
+  } = context;
+  const {
+    enabled = true,
+    role = 'dialog'
+  } = props;
+  const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
+  const referenceId = useId();
+  const parentId = useFloatingParentNodeId();
+  const isNested = parentId != null;
+  return React.useMemo(() => {
+    if (!enabled) return {};
+    const floatingProps = {
+      id: floatingId,
+      ...(ariaRole && {
+        role: ariaRole
+      })
+    };
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return {
+        reference: {
+          ["aria-" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined
+        },
+        floating: floatingProps
+      };
+    }
+    return {
+      reference: {
+        'aria-expanded': open ? 'true' : 'false',
+        'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
+        'aria-controls': open ? floatingId : undefined,
+        ...(ariaRole === 'listbox' && {
+          role: 'combobox'
+        }),
+        ...(ariaRole === 'menu' && {
+          id: referenceId
+        }),
+        ...(ariaRole === 'menu' && isNested && {
+          role: 'menuitem'
+        }),
+        ...(role === 'select' && {
+          'aria-autocomplete': 'none'
+        }),
+        ...(role === 'combobox' && {
+          'aria-autocomplete': 'list'
+        })
+      },
+      floating: {
+        ...floatingProps,
+        ...(ariaRole === 'menu' && {
+          'aria-labelledby': referenceId
+        })
+      },
+      item(_ref) {
+        let {
+          active,
+          selected
+        } = _ref;
+        const commonProps = {
+          role: 'option',
+          ...(active && {
+            id: floatingId + "-option"
+          })
+        };
+        switch (role) {
+          case 'select':
+            return {
+              ...commonProps,
+              'aria-selected': active && selected
+            };
+          case 'combobox':
+            {
+              return {
+                ...commonProps,
+                ...(active && {
+                  'aria-selected': true
+                })
+              };
+            }
+        }
+        return {};
+      }
+    };
+  }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);
+}
 
-var BadgeElement = function (props) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
+var TooltipElement = function (props) {
+    var children = props.children, 
+    //
+    content = props.content, 
+    //
+    placement = props.placement, isHidden = props.isHidden, isPointing = props.isPointing, 
+    //
+    stylesOverrides = props.styles, dataCy = props.dataCy;
+    var arrowRef = useRef(null);
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: placement,
+        middleware: [
+            offset(10),
+            flip(),
+            shift(),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+        whileElementsMounted: autoUpdate,
+    }), refs = _b.refs, floatingStyles = _b.floatingStyles, context = _b.context;
+    var hover = useHover(context, { move: false });
+    var focus = useFocus(context);
+    var dismiss = useDismiss(context);
+    var role = useRole(context, {
+        // If your reference element has its own label (text).
+        role: 'tooltip',
+    });
+    // Merge all the interactions into prop getters
+    var _c = useInteractions([
+        hover,
+        focus,
+        dismiss,
+        role,
+    ]), getReferenceProps = _c.getReferenceProps, getFloatingProps = _c.getFloatingProps;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$t.base);
         var keys = calculateNestedKeys(styles$t.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$t.base, key), type && get(styles$t[type], key), color && get(styles$t[color], key), size && get(styles$t[size], key), figure && get(styles$t[figure], key), isDisabled && get(styles$t.disabled, key), isLoading && get(styles$t.loading, key), get(stylesOverrides, key)));
+            return set(result, key, toClassName(get(styles$t.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    var xIcon = (jsx("svg", { className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8", children: jsx("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }) }));
-    if (isLoading) {
-        return (jsx("span", { className: toClassName(styles.container, 'h-4 w-12 animate-pulse'), children: type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })) }));
-    }
-    return (jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
+    var childrenWithProps = React__default.Children.map(children, function (child) {
+        var props = __assign$1({ ref: refs.setReference }, getReferenceProps());
+        if (React__default.isValidElement(child)) {
+            return React__default.cloneElement(child, props);
+        }
+        return child;
+    });
+    if (isHidden)
+        return children;
+    return (jsxs(Fragment, { children: [childrenWithProps, isOpen && (jsxs("div", __assign$1({ "data-cy": dataCy, ref: refs.setFloating, style: floatingStyles, className: toClassName(styles.content, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.content) }, getFloatingProps(), { children: [isPointing && (jsx(FloatingArrow, { ref: arrowRef, context: context, fill: styles.arrow.fill, stroke: styles.arrow.stroke, strokeWidth: Number(styles.arrow.strokeWidth) })), content] })))] }));
 };
 
 var base$p = {
-    container: 'inline-flex items-center font-medium py-0.5',
-    indicator: '',
-    button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
-};
-var normal$8 = {
-    container: 'px-2.5',
-};
-var indicator = {
-    container: 'px-2.5',
-};
-var close = {
-    container: 'pl-2.5 pr-1',
-};
-var primary$1 = {
-    container: "shadow-sm text-white bg-primary-600  hover:bg-primary-700",
-};
-var secondary$1 = {
-    container: "shadow-none text-primary-700 bg-primary-100 hover:bg-primary-200",
-};
-var outline$1 = {
-    container: "border-gray-300  text-gray-700 bg-white hover:bg-gray-50",
-};
-var sm$4 = {
-    container: 'text-xs',
-    indicator: 'mr-1.5 h-2 w-2 ',
-};
-var lg$4 = {
-    container: 'text-sm',
-    indicator: '-ml-0.5 mr-1.5 h-2 w-2',
-};
-var block$1 = {
-    container: 'rounded-md',
-};
-var rounded$1 = {
-    container: 'rounded-full',
-};
-var gray = {
-    container: 'bg-gray-100 text-gray-800',
-    indicator: 'text-gray-400',
-    button: 'text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:bg-gray-500',
-};
-var red = {
-    container: 'bg-red-100 text-red-800',
-    indicator: 'text-red-400',
-    button: 'text-red-400 hover:bg-red-200 hover:text-red-500 focus:bg-red-500',
-};
-var yellow = {
-    container: 'bg-yellow-100 text-yellow-800',
-    indicator: 'text-yellow-400',
-    button: 'text-yellow-400 hover:bg-yellow-200 hover:text-yellow-500 focus:bg-yellow-500',
-};
-var green = {
-    container: 'bg-green-100 text-green-800',
-    indicator: 'text-green-400',
-    button: 'text-green-400 hover:bg-green-200 hover:text-green-500 focus:bg-green-500',
-};
-var blue = {
-    container: 'bg-blue-100 text-blue-800',
-    indicator: 'text-blue-400',
-    button: 'text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:bg-blue-500',
-};
-var indigo = {
-    container: 'bg-primary-100 text-primary-800',
-    indicator: 'text-primary-400',
-    button: 'text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500',
-};
-var purple = {
-    container: 'bg-purple-100 text-purple-800',
-    indicator: 'text-purple-400',
-    button: 'text-purple-400 hover:bg-purple-200 hover:text-purple-500 focus:bg-purple-500',
-};
-var pink = {
-    container: 'bg-pink-100 text-pink-800',
-    indicator: 'text-pink-400',
-    button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
-};
-var disabled$9 = {
-    container: 'opacity-20 cursor-not-allowed',
-};
-var loading$1 = {
-    container: 'cursor-progress',
+    container: 'w-fit h-fit relative group/tooltip',
+    content: 'absolute flex justify-center items-center z-200 tooltip-animate px-4 py-2 border whitespace-nowrap border-palette-grayDarker bg-white font-light text-xs rounded-sm',
+    arrow: {
+        stroke: '#e5e7eb',
+        fill: 'white',
+        strokeWidth: '1',
+    },
 };
 var styles$t = {
     base: base$p,
-    normal: normal$8,
-    indicator: indicator,
-    close: close,
-    primary: primary$1,
-    secondary: secondary$1,
-    outline: outline$1,
-    sm: sm$4,
-    lg: lg$4,
-    block: block$1,
-    rounded: rounded$1,
-    gray: gray,
-    red: red,
-    yellow: yellow,
-    green: green,
-    blue: blue,
-    indigo: indigo,
-    purple: purple,
-    pink: pink,
-    disabled: disabled$9,
-    loading: loading$1,
 };
 
 var ButtonElement = function (props) {
@@ -667,7 +4219,7 @@ var Container$3 = function (props) {
     };
     var styles = handleGenerateStyle();
     return (jsxs(Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxs("div", { children: [type === 'button' &&
-                        (!trigger ? (jsxs(Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(Menu.Items, { className: styles.items, children: children }) })] }));
+                        (!trigger ? (jsxs(Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(Menu.Items, { className: styles.items, children: children }) })] }));
 };
 var DropdownElement = {
     Container: Container$3,
@@ -966,7 +4518,7 @@ var MediaObjectLayout = function (props) {
     var handleGenerateComponent = function () {
         var result = (jsx("svg", { className: styles.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true", children: jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) }));
         if (customFigure) {
-            result = React.cloneElement(customFigure, {
+            result = React__default.cloneElement(customFigure, {
                 className: styles.svg,
             });
         }
@@ -1408,16 +4960,16 @@ var PanelPaginationNavigation = function (props) {
     var component;
     switch (pageType) {
         case 'first':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'center':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'last':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'simple':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
             break;
     }
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), hasCustomizablePageSize && (jsx(SelectMenuForm, { name: "pageSize", isClearable: false, isSearchable: false, isMultiple: false, isSolo: true, options: pageSizeMenuOptions, value: pageSize, styles: { list: styles.pageSizeList }, onClear: noop$1, onChange: function (value) {
@@ -1559,7 +5111,7 @@ var TableList = function (props) {
             return window === null || window === void 0 ? void 0 : window.localStorage.setItem("TableList.".concat(id, ".state"), idsWithVisibilityIndicator.join(','));
         }
     }, [id, table, order, visibility]);
-    return (jsx(Fragment$1, { children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.controls.container, children: [jsx("div", { children: customControls }), jsxs("div", { className: styles.controls.body, children: [jsx(DropdownElement.Container, { styles: (_a = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.components) === null || _a === void 0 ? void 0 : _a.dropdownElement, label: jsx(ViewColumnsIcon, { className: "w-6 h-6" }), children: jsx("div", { className: styles.controls.content, children: table
+    return (jsx(Fragment, { children: jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.controls.container, children: [jsx("div", { children: customControls }), jsxs("div", { className: styles.controls.body, children: [jsx(DropdownElement.Container, { styles: (_a = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.components) === null || _a === void 0 ? void 0 : _a.dropdownElement, label: jsx(ViewColumnsIcon, { className: "w-6 h-6" }), children: jsx("div", { className: styles.controls.content, children: table
                                             .getAllLeafColumns()
                                             // .filter((column) => column?.getCanSort())
                                             .map(function (column, index) {
@@ -1914,7 +5466,7 @@ var TableList2 = function (props) {
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
 var base$c = {
@@ -2127,16 +5679,16 @@ var PagePaginationNavigation = function (props) {
     var component;
     switch (pageType) {
         case 'first':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
         case 'center':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
         case 'last':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
         case 'simple':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return setCurrent(min + 3); }, children: min + 3 }))] }));
+            component = (jsxs(Fragment, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return setCurrent(min + 3); }, children: min + 3 }))] }));
             break;
     }
     useEffect(function () {
@@ -2254,7 +5806,7 @@ var Item$1 = function (props) {
 };
 var View$1 = function (props) {
     var children = props.children;
-    return jsx(Fragment$1, { children: children });
+    return jsx(Fragment, { children: children });
 };
 var TabNavigation = {
     Container: Container$1,
@@ -2336,7 +5888,7 @@ var Item = function (props) {
 };
 var View = function (props) {
     var children = props.children;
-    return jsx(Fragment$1, { children: children });
+    return jsx(Fragment, { children: children });
 };
 var VerticalNavigation = {
     Container: Container,
@@ -2381,7 +5933,7 @@ var ModalOverlay = function (props) {
             onOpen && onOpen();
         }
     }, [isOpen, onOpen]);
-    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxs(Fragment, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment$1, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsx(Transition.Child, { as: Fragment$1, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment$1, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$8 = {
@@ -2476,7 +6028,7 @@ var NotificationOverlayItem = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs(Fragment$1, { children: [jsx(Transition, { show: isOpen, as: Fragment, enter: styles.item.panel.transition.enter, enterFrom: styles.item.panel.transition.enterFrom, enterTo: styles.item.panel.transition.enterTo, leave: styles.item.panel.transition.leave, leaveFrom: styles.item.panel.transition.leaveFrom, leaveTo: styles.item.panel.transition.leaveTo, children: jsx("div", { className: styles.item.panel.container, children: children(options) }) }), trigger && trigger(options)] }));
+    return (jsxs(Fragment, { children: [jsx(Transition, { show: isOpen, as: Fragment$1, enter: styles.item.panel.transition.enter, enterFrom: styles.item.panel.transition.enterFrom, enterTo: styles.item.panel.transition.enterTo, leave: styles.item.panel.transition.leave, leaveFrom: styles.item.panel.transition.leaveFrom, leaveTo: styles.item.panel.transition.leaveTo, children: jsx("div", { className: styles.item.panel.container, children: children(options) }) }), trigger && trigger(options)] }));
 };
 var NotificationOverlay = {
     Container: NotificationOverlayContainer,
@@ -2568,7 +6120,7 @@ var SlideOverOverlay = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, children: jsx("div", { className: styles.layout.inner, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxs(Fragment, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment$1, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment$1, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, children: jsx("div", { className: styles.layout.inner, children: jsx(Transition.Child, { as: Fragment$1, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$6 = {
@@ -2718,11 +6270,16 @@ var DateMenuForm = function (props) {
     var $datepickerInputRef = useRef(null);
     var handleValueChange = useCallback(function (newValue) {
         setState(newValue);
-        onChange && onChange(newValue);
+        if (newValue.startDate === null && newValue.endDate === null) {
+            onClear && onClear(name);
+        }
+        else {
+            onChange && onChange(newValue);
+        }
         setTimeout(function () {
             onBlur && onBlur();
         }, 50);
-    }, [onBlur, onChange]);
+    }, [name, onBlur, onChange, onClear]);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
         var keys = calculateNestedKeys(styles$7.base);
@@ -2734,13 +6291,6 @@ var DateMenuForm = function (props) {
     var styles = handleGenerateStyle();
     var inputDataCy = "form-date-".concat(name);
     var errorDataCy = "form-date-error-".concat(name);
-    // Simulate onClear event.
-    useEffect(function () {
-        if (state.startDate === null && state.endDate === null) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
     // listen to value changes.
     useEffect(function () {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { startDate: null, endDate: null });
@@ -2880,7 +6430,7 @@ var CheckboxInputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     return (jsx(FormikProvider, { value: form, children: jsxs("div", { children: [jsx("legend", { className: styles.sr, children: name }), jsx("div", { className: styles.list, children: jsx(FieldArray, { name: name, render: function (_a) {
                             var remove = _a.remove, push = _a.push;
-                            return (jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxs("div", { className: styles.item.container, children: [jsx("div", { className: styles.item.head, children: jsx("input", { id: option.value, name: option.value, "data-cy": "form-".concat(name, "-checkbox-").concat(option.value), "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
+                            return (jsx(Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxs("div", { className: styles.item.container, children: [jsx("div", { className: styles.item.head, children: jsx("input", { id: option.value, name: option.value, "data-cy": "form-".concat(name, "-checkbox-").concat(option.value), "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
                                                     var isChecked = value.currentTarget.checked;
                                                     if (isChecked) {
                                                         push(option.value);
@@ -2982,7 +6532,7 @@ var Switch = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment$1, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
 var styles$4 = {
@@ -4398,7 +7948,7 @@ var Dropzone = forwardRef(function (_ref, ref) {
       open: open
     };
   }, [open]);
-  return React.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
+  return React__default.createElement(Fragment$1, null, children(_objectSpread(_objectSpread({}, props), {}, {
     open: open
   })));
 });
@@ -9829,7 +13379,7 @@ var OpeningsHourInputGroupForm = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.body, children: jsx(FormikProvider, { value: form, children: jsx(FieldArray, { name: name, render: function (_a) {
                             var _b, _c, _d, _e, _f;
                             var remove = _a.remove, push = _a.push, replace = _a.replace;
-                            return (jsxs(Fragment$1, { children: [(_e = (_d = (_c = (_b = form.values) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.map(function (value, index) { return ({ index: index, value: value }); })) === null || _d === void 0 ? void 0 : _d.sort(function (a, b) { return (a.value.day < b.value.day ? -1 : 1); })) === null || _e === void 0 ? void 0 : _e.map(function (_a) {
+                            return (jsxs(Fragment, { children: [(_e = (_d = (_c = (_b = form.values) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.map(function (value, index) { return ({ index: index, value: value }); })) === null || _d === void 0 ? void 0 : _d.sort(function (a, b) { return (a.value.day < b.value.day ? -1 : 1); })) === null || _e === void 0 ? void 0 : _e.map(function (_a) {
                                         var openingHour = _a.value, index = _a.index;
                                         return (jsx(OpeningHourItem, { id: index, openingHour: openingHour, lang: lang, onCreate: push, onUpdate: function (value) { return replace(index, value); }, onDelete: function (id) {
                                                 if (id) {
@@ -10296,7 +13846,7 @@ var Input =  (function (_super) {
         if (!attributes.tabIndex) {
             attributes.tabIndex = 0;
         }
-        return (createElement(Fragment, null,
+        return (createElement(Fragment$1, null,
             shouldRenderLabel && (createElement("label", { className: "geosuggest__label", htmlFor: this.props.id }, this.props.label)),
             createElement("input", __assign({ className: classes, id: "geosuggest__input" + (this.props.id ? "--" + this.props.id : ''), ref: function (i) { return (_this.input = i); }, type: this.props.inputType }, attributes, { value: this.props.value, style: this.props.style, onKeyDown: this.onInputKeyDown, onChange: this.onChange, onKeyPress: this.props.onKeyPress, onFocus: this.props.onFocus, onBlur: this.props.onBlur, role: "combobox", "aria-expanded": !this.props.isSuggestsHidden, "aria-activedescendant": this.props.activeSuggest
                     ? this.props.activeSuggest.placeId
@@ -10918,7 +14468,7 @@ var AddressInputGroupForm = function (props) {
                             info: value === null || value === void 0 ? void 0 : value.info,
                         };
                         onBlur && onBlur(location);
-                    }, children: jsx(Fragment$1, {}) }) }), jsxs("div", { className: styles$1.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles$1.description, children: description })), error && isTouched && jsx("p", { className: styles$1.error, children: error })] })] }));
+                    }, children: jsx(Fragment, {}) }) }), jsxs("div", { className: styles$1.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles$1.description, children: description })), error && isTouched && jsx("p", { className: styles$1.error, children: error })] })] }));
 };
 
 var base = {
@@ -11004,5 +14554,5 @@ var styles = {
     disabled: disabled,
 };
 
-export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
+export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, TooltipElement, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
 //# sourceMappingURL=index.esm.js.map