@geneui/components 3.0.0-next-711fc51-03102024 → 3.0.0-next-77c6918-09102024

package/{index-0c18f902.js → index-c92894e2.js}

@@ -1,10 +1,7 @@
 import { _ as __rest } from './tslib.es6-f211516f.js';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useEffect, useContext, useState, useMemo, Children, Fragment, cloneElement } from 'react';
+import React__default, { useLayoutEffect, useEffect, useRef, useContext, useState, useMemo, Children, cloneElement, Fragment } from 'react';
 import * as ReactDOM from 'react-dom';
-import 'prop-types';
-import './dateValidation-67caec66.js';
-import useDeviceType from './hooks/useDeviceType.js';
 import { GeneUIDesignSystemContext } from './GeneUIProvider/index.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
@@ -354,6 +351,88 @@ async function detectOverflow(state, options) {
   };
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$3 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -818,6 +897,15 @@ function isSafari() {
   // Chrome DevTools does not complain about navigator.vendor
   return /apple/i.test(navigator.vendor);
 }
+function isMouseLikePointerType(pointerType, strict) {
+  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+  const values = ['mouse', 'pen'];
+  if (!strict) {
+    values.push('', undefined);
+  }
+  return values.includes(pointerType);
+}
 function getDocument(node) {
   return (node == null ? void 0 : node.ownerDocument) || document;
 }
@@ -1966,6 +2054,13 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$2 = arrow$3;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -2054,7 +2149,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 
-function useLatestRef(value) {
+function useLatestRef$1(value) {
   const ref = React.useRef(value);
   index$1(() => {
     ref.current = value;
@@ -2115,9 +2210,9 @@ function useFloating$1(options) {
   const floatingRef = React.useRef(null);
   const dataRef = React.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
-  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
-  const platformRef = useLatestRef(platform);
-  const openRef = useLatestRef(open);
+  const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
+  const platformRef = useLatestRef$1(platform);
+  const openRef = useLatestRef$1(open);
   const update = React.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
@@ -2218,6 +2313,55 @@ function useFloating$1(options) {
   }), [data, update, refs, elements, floatingStyles]);
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+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 {};
+    }
+  };
+};
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = (options, deps) => ({
+  ...arrow$1(options),
+  options: [options, deps]
+});
+
 // https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
 const SafeReact = {
   ...React
@@ -2342,6 +2486,321 @@ function createAttribute(name) {
   return "data-floating-ui-" + name;
 }
 
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+const safePolygonIdentifier = /*#__PURE__*/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];
+}
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+function useHover(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    elements
+  } = 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 openRef = useLatestRef(open);
+  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]);
+
+  // When closing before opening, clear the delay timeouts to cancel it
+  // from showing.
+  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) return;
+    if (!handleCloseRef.current) return;
+    if (!open) return;
+    function onLeave(event) {
+      if (isHoverOpen()) {
+        onOpenChange(false, event, 'hover');
+      }
+    }
+    const html = getDocument(elements.floating).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [elements.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(elements.floating).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      performedPointerEventsMutationRef.current = false;
+    }
+  });
+
+  // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+  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(() => {
+          if (!openRef.current) {
+            onOpenChange(true, event, 'hover');
+          }
+        }, openDelay);
+      } else {
+        onOpenChange(true, event, 'hover');
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) return;
+      unbindMouseMoveRef.current();
+      const doc = getDocument(elements.floating);
+      clearTimeout(restTimeoutRef.current);
+      if (handleCloseRef.current && dataRef.current.floatingContext) {
+        // Prevent clearing `onScrollMouseLeave` timeout.
+        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;
+      }
+
+      // Allow interactivity without `safePolygon` on touch devices. With a
+      // pointer, a short close delay is an alternative, so it should work
+      // consistently.
+      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(elements.floating, event.relatedTarget) : true;
+      if (shouldClose) {
+        closeWithDelay(event);
+      }
+    }
+
+    // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+    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(elements.domReference)) {
+      var _elements$floating;
+      const ref = elements.domReference;
+      open && ref.addEventListener('mouseleave', onScrollMouseLeave);
+      (_elements$floating = elements.floating) == null || _elements$floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && ref.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      ref.addEventListener('mouseenter', onMouseEnter);
+      ref.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        var _elements$floating2;
+        open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
+        (_elements$floating2 = elements.floating) == null || _elements$floating2.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && ref.removeEventListener('mousemove', onMouseEnter);
+        ref.removeEventListener('mouseenter', onMouseEnter);
+        ref.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [elements, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, openRef, tree, delayRef, handleCloseRef, dataRef]);
+
+  // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+  index(() => {
+    var _handleCloseRef$curre;
+    if (!enabled) return;
+    if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
+      performedPointerEventsMutationRef.current = true;
+      const floatingEl = elements.floating;
+      if (isElement(elements.domReference) && floatingEl) {
+        var _tree$nodesRef$curren;
+        const body = getDocument(elements.floating).body;
+        body.setAttribute(safePolygonIdentifier, '');
+        const ref = elements.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 = '';
+        }
+        body.style.pointerEvents = 'none';
+        ref.style.pointerEvents = 'auto';
+        floatingEl.style.pointerEvents = 'auto';
+        return () => {
+          body.style.pointerEvents = '';
+          ref.style.pointerEvents = '';
+          floatingEl.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, elements, 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, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents]);
+  const reference = React.useMemo(() => {
+    function setPointerRef(event) {
+      pointerTypeRef.current = event.pointerType;
+    }
+    return {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+      onMouseMove(event) {
+        const {
+          nativeEvent
+        } = event;
+        function handleMouseMove() {
+          if (!blockMouseMoveRef.current && !openRef.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);
+        }
+      }
+    };
+  }, [mouseOnly, onOpenChange, open, openRef, restMs]);
+  const floating = React.useMemo(() => ({
+    onMouseEnter() {
+      clearTimeout(timeoutRef.current);
+    },
+    onMouseLeave(event) {
+      closeWithDelay(event.nativeEvent, false);
+    }
+  }), [closeWithDelay]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating
+  } : {}, [enabled, reference, floating]);
+}
+
 const getTabbableOptions = () => ({
   getShadowRoot: true,
   displayCheck:
@@ -2613,6 +3072,8 @@ function FloatingPortal(props) {
 }
 const usePortalContext = () => React.useContext(PortalContext);
 
+const FOCUSABLE_ATTRIBUTE = 'data-floating-ui-focusable';
+
 function useFloatingRootContext(options) {
   const {
     open = false,
@@ -2758,6 +3219,93 @@ function useFloating(options) {
   }), [position, refs, elements, context]);
 }
 
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+function mergeProps(userProps, propsList, elementKey) {
+  const map = new Map();
+  const isItem = elementKey === 'item';
+  let domUserProps = userProps;
+  if (isItem && userProps) {
+    const {
+      [ACTIVE_KEY]: _,
+      [SELECTED_KEY]: __,
+      ...validProps
+    } = userProps;
+    domUserProps = validProps;
+  }
+  return {
+    ...(elementKey === 'floating' && {
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
+    }),
+    ...domUserProps,
+    ...propsList.map(value => {
+      const propsOrGetProps = value ? value[elementKey] : null;
+      if (typeof propsOrGetProps === 'function') {
+        return userProps ? propsOrGetProps(userProps) : null;
+      }
+      return propsOrGetProps;
+    }).concat(userProps).reduce((acc, props) => {
+      if (!props) {
+        return acc;
+      }
+      Object.entries(props).forEach(_ref => {
+        let [key, value] = _ref;
+        if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+          return;
+        }
+        if (key.indexOf('on') === 0) {
+          if (!map.has(key)) {
+            map.set(key, []);
+          }
+          if (typeof value === 'function') {
+            var _map$get;
+            (_map$get = map.get(key)) == null || _map$get.push(value);
+            acc[key] = function () {
+              var _map$get2;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);
+            };
+          }
+        } else {
+          acc[key] = value;
+        }
+      });
+      return acc;
+    }, {})
+  };
+}
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/useInteractions
+ */
+function useInteractions(propsList) {
+  if (propsList === void 0) {
+    propsList = [];
+  }
+  const referenceDeps = propsList.map(key => key == null ? void 0 : key.reference);
+  const floatingDeps = propsList.map(key => key == null ? void 0 : key.floating);
+  const itemDeps = propsList.map(key => key == null ? void 0 : key.item);
+  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  referenceDeps);
+  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  floatingDeps);
+  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  itemDeps);
+  return React.useMemo(() => ({
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  }), [getReferenceProps, getFloatingProps, getItemProps]);
+}
+
 var reactIsExports = {};
 var reactIs = {
   get exports(){ return reactIsExports; },
@@ -3029,22 +3577,44 @@ function requireReactIs_development () {
 	}
 } (reactIs));
 
-var css_248z = "[data-gene-ui-version=\"2.16.1\"] .tooltip-c-p{pointer-events:none;z-index:10}[data-gene-ui-version=\"2.16.1\"] .s-small .tooltip-c-p{padding:1.5rem}[data-gene-ui-version=\"2.16.1\"] .tooltip-wrapper{max-width:inherit}[data-gene-ui-version=\"2.16.1\"] .tooltip-content{background:rgba(var(--background-sc-rgb),.6);border-radius:.4rem;color:rgba(var(--background-rgb),.7);font:600 1.2rem/1.6rem var(--font-family);max-width:20rem;padding:.6rem 1rem;word-break:break-word}[data-gene-ui-version=\"2.16.1\"] .tooltip-content>*+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.16.1\"] .s-small .tooltip-content{font:600 1rem/1.4rem var(--font-family);padding:.6rem .8rem}[data-gene-ui-version=\"2.16.1\"] .tooltip-title{color:var(--background)}";
+var css_248z = "[data-gene-ui-version=\"2.16.1\"] .tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-shadow:var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;max-width:24rem;min-width:10rem;padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.1\"] .tooltip_position_bottom .tooltip__arrow,[data-gene-ui-version=\"2.16.1\"] .tooltip_position_top .tooltip__arrow{transform:rotateX(60deg) rotate(45deg)}[data-gene-ui-version=\"2.16.1\"] .tooltip_position_left .tooltip__arrow,[data-gene-ui-version=\"2.16.1\"] .tooltip_position_right .tooltip__arrow{transform:rotateY(60deg) rotate(45deg)}[data-gene-ui-version=\"2.16.1\"] .tooltip_color_default,[data-gene-ui-version=\"2.16.1\"] .tooltip_color_default .tooltip__arrow{background-color:var(--guit-sem-color-background-neutral-4)}[data-gene-ui-version=\"2.16.1\"] .tooltip_color_default .tooltip__icon,[data-gene-ui-version=\"2.16.1\"] .tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}[data-gene-ui-version=\"2.16.1\"] .tooltip_color_inverse,[data-gene-ui-version=\"2.16.1\"] .tooltip_color_inverse .tooltip__arrow{background-color:var(--guit-sem-color-background-neutral-1)}[data-gene-ui-version=\"2.16.1\"] .tooltip_color_inverse .tooltip__icon,[data-gene-ui-version=\"2.16.1\"] .tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .tooltip__arrow{height:10px;position:absolute;width:10px}[data-gene-ui-version=\"2.16.1\"] .tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}[data-gene-ui-version=\"2.16.1\"] .tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-llne-height);overflow:hidden;word-break:break-word}[data-gene-ui-version=\"2.16.1\"] .tooltip__icon{align-items:center;display:flex;flex:0 0 auto;justify-content:center}";
 styleInject(css_248z);
 
-const positions = ['top', 'right', 'bottom', 'left'];
-const FindAndSetRef = (children, childProps, componentRef) => {
+const positions = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top-start',
+    'top-end',
+    'right-start',
+    'right-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end'
+];
+const correctPosition = {
+    'bottom-center': 'bottom',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-center': 'left',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-center': 'right',
+    'right-top': 'right-start',
+    'top-center': 'top',
+    'top-left': 'top-start',
+    'top-right': 'top-end'
+};
+const FindAndSetRef = (children, childProps, componentRef, checked = false) => {
     return Children.map(children, (node, i) => {
         const el = node;
         let newProps = Object.assign({}, childProps);
-        if ((el === null || el === void 0 ? void 0 : el.type) === Fragment && el.props.children) {
-            return FindAndSetRef(el.props.children, newProps, componentRef);
-        }
-        if (reactIsExports.isForwardRef(el)) {
-            return FindAndSetRef(el.type.render(el.props, el.ref), newProps, componentRef);
-        }
         if (typeof (el === null || el === void 0 ? void 0 : el.type) === 'string') {
-            if (!el.ref && i === 0) {
+            if (!el.ref && i === 0 && !checked) {
+                checked = true;
                 newProps = Object.assign(Object.assign({}, newProps), { ref: componentRef });
             }
             return cloneElement(el, newProps);
@@ -3055,20 +3625,30 @@ const FindAndSetRef = (children, childProps, componentRef) => {
             }
             return cloneElement(el.type(el.props), newProps);
         }
+        if ((el === null || el === void 0 ? void 0 : el.type) === Fragment && el.props.children) {
+            return FindAndSetRef(el.props.children, newProps, componentRef, checked);
+        }
+        if (reactIsExports.isForwardRef(el)) {
+            return FindAndSetRef(el.type.render(el.props, el.ref), newProps, componentRef, checked);
+        }
         return el && cloneElement(el, newProps);
     });
 };
+/**
+A tooltip is a small, elevated surface that appears to provide contextual information when a user hovers over or focuses on a UI element.
+Tooltips should be used to offer helpful plaintext information, not to communicate system feedback. Use a popover instead if you need to deliver structured information or enable interactions.
+*/
 const Tooltip = (_a) => {
-    var { children, position = 'top', size = 'default', style, text, title, customPosition, alwaysShow, padding = 5, screenType = 'desktop', isVisible = true } = _a, props = __rest(_a, ["children", "position", "size", "style", "text", "title", "customPosition", "alwaysShow", "padding", "screenType", "isVisible"]);
-    // @ts-ignore
+    var _b;
+    var { children, position = 'top', text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = 'default', Icon } = _a, props = __rest(_a, ["children", "position", "text", "customPosition", "alwaysShow", "padding", "isVisible", "appearance", "Icon"]);
     const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
-    const { isMobile } = useDeviceType(screenType);
-    const [isPopoverOpen, setIsPopoverState] = useState(false);
-    const mouseEnterHandler = () => !alwaysShow && setIsPopoverState(true);
-    const mouseLeaveHandler = () => !alwaysShow && setIsPopoverState(false);
-    const { refs, floatingStyles, context } = useFloating({
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context, middlewareData, placement } = useFloating({
         open: alwaysShow || isPopoverOpen,
-        placement: position,
+        placement: correctPosition[position],
+        onOpenChange: setIsPopoverOpen,
+        platform: Object.assign(Object.assign({}, platform), { isRTL: () => false }),
         middleware: [
             offset(padding),
             flip({
@@ -3076,6 +3656,7 @@ const Tooltip = (_a) => {
                 fallbackPlacements: positions,
                 mainAxis: true
             }),
+            arrow({ element: arrowRef }),
             shift(),
             {
                 name: 'getCustomPosition',
@@ -3089,27 +3670,49 @@ const Tooltip = (_a) => {
         ],
         whileElementsMounted: autoUpdate
     });
-    const checkNudged = ({ nudgedLeft, nudgedTop }) => (isMobile ? !(nudgedTop || nudgedLeft) : true);
-    const childProps = {
-        onMouseEnter: mouseEnterHandler,
-        onMouseLeave: mouseLeaveHandler
-    };
+    const hover = useHover(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+    const childProps = Object.assign({}, getReferenceProps());
     const component = useMemo(() => FindAndSetRef(children, childProps, refs.setReference), [children, childProps]);
     useEffect(() => {
-        component.forEach((element) => {
-            var _a;
-            const node = element;
+        var _a;
+        for (let i = 0; i < component.length; i++) {
+            const node = component[i];
+            if (typeof node.ref === 'function' && node.ref === refs.setReference) {
+                break;
+            }
             if ((_a = node === null || node === void 0 ? void 0 : node.ref) === null || _a === void 0 ? void 0 : _a.current) {
                 refs.setReference(node.ref.current);
+                break;
             }
-        });
+        }
     }, [component]);
+    const currentDirection = placement.split('-')[0];
+    const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+    }[currentDirection];
+    const middlewareArrowData = middlewareData.arrow;
+    const offsetFromEdge = 8;
+    const arrowPositions = {
+        'top-start': 'left',
+        'top-end': 'right',
+        'bottom-end': 'right',
+        'bottom-start': 'left'
+    }[placement];
+    const getCorrectPosition = arrowPositions
+        ? { [arrowPositions]: offsetFromEdge }
+        : { 'inset-inline-start': (middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x) || undefined };
     return (React__default.createElement(React__default.Fragment, null,
         component,
-        isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current }, checkNudged({ nudgedLeft: context.x, nudgedTop: context.y }) && (React__default.createElement("div", Object.assign({ className: `tooltip-c-p s-${size} ${position}`, ref: refs.setFloating, style: Object.assign(Object.assign(Object.assign({}, style), floatingStyles), { zIndex: 400 //TODO: Remove after 3.0.0
-             }) }, props), (title || text) && (React__default.createElement("div", { className: "tooltip-content" },
-            title && React__default.createElement("div", { className: "tooltip-title" }, title),
-            text && React__default.createElement("div", { className: "tooltip-text" }, text)))))))));
+        isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
+            React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance}  tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, props, getFloatingProps()),
+                React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: (middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y) || undefined, [staticSide]: arrowRef.current ? `${-((_b = arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 5}px` : 0 }) }),
+                React__default.createElement("div", { className: "tooltip__textWrapper" },
+                    React__default.createElement("p", { className: "tooltip__text" }, text)),
+                Icon && React__default.createElement("div", { className: "tooltip__icon" }, Icon))))));
 };
 
 export { Tooltip as T, reactIsExports as r };