@eightshift/ui-components 6.3.0 → 7.1.0

package/dist/tooltip-BzJzYlcc.js

@@ -0,0 +1,440 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { h as $b5e257d569688ac6$export$535bd6ca7f90a273, m as $bdb11010cef70236$export$f680877a34711e37, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, t as $64fa3d84918910a7$export$2881499e37b75b9a, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { c as $507fabe10e71c6fb$export$630ff653c5ada6a9, f as $507fabe10e71c6fb$export$b9b3dfddab17db27, n as $f645667febf57a63$export$13f3202a3e5ddd5, r as $f645667febf57a63$export$4c014de7c8940b4c, t as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-qaMm3XFO.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { i as $2a41e45df1593e64$export$d39e1813b3bdd0e1, n as $44f671af83e7d9e0$export$746d02f47f4d381, r as $fc909762b330b746$export$61c6a8c84e605fb6, t as $44f671af83e7d9e0$export$2de4954e8ae13b9f } from "./OverlayArrow-BoloUPQM.js";
+import { n as $d3f049242431219c$export$6d3443f2c48bfc20, t as $d3f049242431219c$export$45fda7c47f93fd48 } from "./animation-Bd2peown.js";
+import { n as $96b38030c423d352$export$9fc1347d4195ccb3 } from "./PortalProvider-DinZZCKX.js";
+import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import $dbSRa$reactdom from "react-dom";
+//#region node_modules/@react-aria/overlays/dist/useModal.mjs
+var $f57aed4a881a3485$var$Context = React.createContext(null);
+function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
+	let { children } = props;
+	let parent = useContext($f57aed4a881a3485$var$Context);
+	let [modalCount, setModalCount] = useState(0);
+	let context = useMemo(() => ({
+		parent,
+		modalCount,
+		addModal() {
+			setModalCount((count) => count + 1);
+			if (parent) parent.addModal();
+		},
+		removeModal() {
+			setModalCount((count) => count - 1);
+			if (parent) parent.removeModal();
+		}
+	}), [parent, modalCount]);
+	return React.createElement($f57aed4a881a3485$var$Context.Provider, { value: context }, children);
+}
+function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
+	let context = useContext($f57aed4a881a3485$var$Context);
+	return { modalProviderProps: { "aria-hidden": context && context.modalCount > 0 ? true : void 0 } };
+}
+/**
+* Creates a root node that will be aria-hidden if there are other modals open.
+*/ function $f57aed4a881a3485$var$OverlayContainerDOM(props) {
+	let { modalProviderProps } = $f57aed4a881a3485$export$d9aaed4c3ece1bc0();
+	return React.createElement("div", {
+		"data-overlay-container": true,
+		...props,
+		...modalProviderProps
+	});
+}
+function $f57aed4a881a3485$export$bf688221f59024e5(props) {
+	return React.createElement($f57aed4a881a3485$export$178405afcd8c5eb, null, React.createElement($f57aed4a881a3485$var$OverlayContainerDOM, props));
+}
+function $f57aed4a881a3485$export$b47c3594eab58386(props) {
+	let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+	let { portalContainer = isSSR ? null : document.body, ...rest } = props;
+	let { getContainer } = $96b38030c423d352$export$9fc1347d4195ccb3();
+	if (!props.portalContainer && getContainer) portalContainer = getContainer();
+	React.useEffect(() => {
+		if (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
+	}, [portalContainer]);
+	if (!portalContainer) return null;
+	let contents = React.createElement($f57aed4a881a3485$export$bf688221f59024e5, rest);
+	return $dbSRa$reactdom.createPortal(contents, portalContainer);
+}
+//#endregion
+//#region node_modules/@react-aria/tooltip/dist/useTooltip.mjs
+function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
+	let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { labelable: true });
+	let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
+		onHoverStart: () => state === null || state === void 0 ? void 0 : state.open(true),
+		onHoverEnd: () => state === null || state === void 0 ? void 0 : state.close()
+	});
+	return { tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, { role: "tooltip" }) };
+}
+//#endregion
+//#region node_modules/@react-aria/tooltip/dist/useTooltipTrigger.mjs
+function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
+	let { isDisabled, trigger, shouldCloseOnPress = true } = props;
+	let tooltipId = $bdb11010cef70236$export$f680877a34711e37();
+	let isHovered = useRef(false);
+	let isFocused = useRef(false);
+	let handleShow = () => {
+		if (isHovered.current || isFocused.current) state.open(isFocused.current);
+	};
+	let handleHide = (immediate) => {
+		if (!isHovered.current && !isFocused.current) state.close(immediate);
+	};
+	useEffect(() => {
+		let onKeyDown = (e) => {
+			if (ref && ref.current) {
+				if (e.key === "Escape") {
+					e.stopPropagation();
+					state.close(true);
+				}
+			}
+		};
+		if (state.isOpen) {
+			document.addEventListener("keydown", onKeyDown, true);
+			return () => {
+				document.removeEventListener("keydown", onKeyDown, true);
+			};
+		}
+	}, [ref, state]);
+	let onHoverStart = () => {
+		if (trigger === "focus") return;
+		if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") isHovered.current = true;
+		else isHovered.current = false;
+		handleShow();
+	};
+	let onHoverEnd = () => {
+		if (trigger === "focus") return;
+		isFocused.current = false;
+		isHovered.current = false;
+		handleHide();
+	};
+	let onPressStart = () => {
+		if (!shouldCloseOnPress) return;
+		isFocused.current = false;
+		isHovered.current = false;
+		handleHide(true);
+	};
+	let onFocus = () => {
+		if ($507fabe10e71c6fb$export$b9b3dfddab17db27()) {
+			isFocused.current = true;
+			handleShow();
+		}
+	};
+	let onBlur = () => {
+		isFocused.current = false;
+		isHovered.current = false;
+		handleHide(true);
+	};
+	let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
+		isDisabled,
+		onHoverStart,
+		onHoverEnd
+	});
+	let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
+		isDisabled,
+		onFocus,
+		onBlur
+	}, ref);
+	return {
+		triggerProps: {
+			"aria-describedby": state.isOpen ? tooltipId : void 0,
+			...$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, {
+				onPointerDown: onPressStart,
+				onKeyDown: onPressStart
+			}),
+			tabIndex: void 0
+		},
+		tooltipProps: { id: tooltipId }
+	};
+}
+//#endregion
+//#region node_modules/@react-stately/tooltip/dist/useTooltipTriggerState.mjs
+var $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
+var $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
+var $8796f90736e175cb$var$tooltips = {};
+var $8796f90736e175cb$var$tooltipId = 0;
+var $8796f90736e175cb$var$globalWarmedUp = false;
+var $8796f90736e175cb$var$globalWarmUpTimeout = null;
+var $8796f90736e175cb$var$globalCooldownTimeout = null;
+function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
+	let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
+	let { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+	let id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
+	let closeTimeout = useRef(null);
+	let closeCallback = useRef(close);
+	let ensureTooltipEntry = () => {
+		$8796f90736e175cb$var$tooltips[id] = hideTooltip;
+	};
+	let closeOpenTooltips = () => {
+		for (let hideTooltipId in $8796f90736e175cb$var$tooltips) if (hideTooltipId !== id) {
+			$8796f90736e175cb$var$tooltips[hideTooltipId](true);
+			delete $8796f90736e175cb$var$tooltips[hideTooltipId];
+		}
+	};
+	let showTooltip = () => {
+		if (closeTimeout.current) clearTimeout(closeTimeout.current);
+		closeTimeout.current = null;
+		closeOpenTooltips();
+		ensureTooltipEntry();
+		$8796f90736e175cb$var$globalWarmedUp = true;
+		open();
+		if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+			clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+			$8796f90736e175cb$var$globalWarmUpTimeout = null;
+		}
+		if ($8796f90736e175cb$var$globalCooldownTimeout) {
+			clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+			$8796f90736e175cb$var$globalCooldownTimeout = null;
+		}
+	};
+	let hideTooltip = (immediate) => {
+		if (immediate || closeDelay <= 0) {
+			if (closeTimeout.current) clearTimeout(closeTimeout.current);
+			closeTimeout.current = null;
+			closeCallback.current();
+		} else if (!closeTimeout.current) closeTimeout.current = setTimeout(() => {
+			closeTimeout.current = null;
+			closeCallback.current();
+		}, closeDelay);
+		if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+			clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+			$8796f90736e175cb$var$globalWarmUpTimeout = null;
+		}
+		if ($8796f90736e175cb$var$globalWarmedUp) {
+			if ($8796f90736e175cb$var$globalCooldownTimeout) clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+			$8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
+				delete $8796f90736e175cb$var$tooltips[id];
+				$8796f90736e175cb$var$globalCooldownTimeout = null;
+				$8796f90736e175cb$var$globalWarmedUp = false;
+			}, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
+		}
+	};
+	let warmupTooltip = () => {
+		closeOpenTooltips();
+		ensureTooltipEntry();
+		if (!isOpen && !$8796f90736e175cb$var$globalWarmedUp) {
+			if ($8796f90736e175cb$var$globalWarmUpTimeout) clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+			$8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
+				$8796f90736e175cb$var$globalWarmUpTimeout = null;
+				$8796f90736e175cb$var$globalWarmedUp = true;
+				showTooltip();
+			}, delay);
+		} else if (!isOpen) showTooltip();
+	};
+	useEffect(() => {
+		closeCallback.current = close;
+	}, [close]);
+	useEffect(() => {
+		return () => {
+			if (closeTimeout.current) clearTimeout(closeTimeout.current);
+			if ($8796f90736e175cb$var$tooltips[id]) delete $8796f90736e175cb$var$tooltips[id];
+		};
+	}, [id]);
+	return {
+		isOpen,
+		open: (immediate) => {
+			if (!immediate && delay > 0 && !closeTimeout.current) warmupTooltip();
+			else showTooltip();
+		},
+		close: hideTooltip
+	};
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/Tooltip.mjs
+var $4e3b923658d69c60$export$7a7623236eec67fa = createContext(null);
+var $4e3b923658d69c60$export$39ae08fa83328b12 = createContext(null);
+function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
+	let state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+	let ref = useRef(null);
+	let { triggerProps, tooltipProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
+	return React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [[$4e3b923658d69c60$export$7a7623236eec67fa, state], [$4e3b923658d69c60$export$39ae08fa83328b12, {
+		...tooltipProps,
+		triggerRef: ref
+	}]] }, React.createElement($f645667febf57a63$export$13f3202a3e5ddd5, {
+		...triggerProps,
+		ref
+	}, props.children));
+}
+var $4e3b923658d69c60$export$28c660c63b792dea = forwardRef(function Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
+	let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
+	let localState = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+	let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+	let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
+	if (!state.isOpen && !isExiting) return null;
+	return React.createElement($f57aed4a881a3485$export$b47c3594eab58386, { portalContainer: UNSTABLE_portalContainer }, React.createElement($4e3b923658d69c60$var$TooltipInner, {
+		...props,
+		tooltipRef: ref,
+		isExiting
+	}));
+});
+function $4e3b923658d69c60$var$TooltipInner(props) {
+	let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
+	let arrowRef = useRef(null);
+	let { overlayProps, arrowProps, placement, triggerAnchorPoint } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
+		placement: props.placement || "top",
+		targetRef: props.triggerRef,
+		overlayRef: props.tooltipRef,
+		arrowRef,
+		offset: props.offset,
+		crossOffset: props.crossOffset,
+		isOpen: state.isOpen,
+		arrowBoundaryOffset: props.arrowBoundaryOffset,
+		shouldFlip: props.shouldFlip,
+		containerPadding: props.containerPadding,
+		onClose: () => state.close(true)
+	});
+	let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-Tooltip",
+		values: {
+			placement,
+			isEntering,
+			isExiting: props.isExiting,
+			state
+		}
+	});
+	props = $3ef42575df84b30b$export$9d1611c77c2fe928(props, overlayProps);
+	let { tooltipProps } = $326e436e94273fe1$export$1c4b08e0eca38426(props, state);
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tooltipProps),
+		ref: props.tooltipRef,
+		style: {
+			...overlayProps.style,
+			"--trigger-anchor-point": triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : void 0,
+			...renderProps.style
+		},
+		"data-placement": placement !== null && placement !== void 0 ? placement : void 0,
+		"data-entering": isEntering || void 0,
+		"data-exiting": props.isExiting || void 0
+	}, React.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, { value: {
+		...arrowProps,
+		placement,
+		ref: arrowRef
+	} }, renderProps.children));
+}
+//#endregion
+//#region lib/components/tooltip/tooltip.jsx
+/**
+* @typedef {Object} TooltipProps
+* @property {string|JSX.Element} props.text - The text to display in the tooltip.
+* @property {TooltipTheme} [props.theme='dark'] - The theme of the tooltip.
+* @property {number} [props.offset=0] - Additional offset between the tooltip and the element on the main axis (same axis as element).
+* @property {number} [props.crossOffset=0] - Additional offset between the tooltip and the element on the cross axis (opposite axis as element).
+* @property {number} [props.containerPadding=12] - Space that should be left between the tooltip and the main containing element (usually browser window).
+* @property {number} [props.openDelay=1500] - Duration before the tooltip is shown, in milliseconds.
+* @property {number} [props.closeDelay=500] - Duration before the tooltip is hidden, in milliseconds.
+* @property {boolean} [props.shouldFlip=true] - If `false`, the tooltip will not flip to the opposite side if there is not enough space.
+* @property {boolean} [props.defaultOpen] - (**Uncontrolled mode**) Whether the tooltip is initially open.
+* @property {boolean} [props.open] - (**Controlled mode**) Whether the tooltip is open.
+* @property {Function} [props.onOpenChange] - (**Controlled mode**) Function to run when the tooltip is opened or closed.
+* @property {TooltipPlacement} [props.placement] - The side of the trigger element where the tooltip will be displayed.
+* @property {string} [props.className] - Classes to pass to the tooltip.
+* @property {RefObject<Element>} [props.triggerRef] - Ref to anchor the tooltip to. If not provided, the tooltip will be anchored to the trigger element.
+* @property {boolean} [props.arrow] - If `true`, an arrow is shown on the tooltip.
+*
+* @typedef {'light' | 'dark'} TooltipTheme
+* @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} TooltipPlacement
+*/
+/**
+* A simple tooltip component.
+*
+* It can be used in two modes:
+* - **Controlled mode**: You can control the tooltip with the `open` prop.
+* - **Uncontrolled mode**: The tooltip will be open by default with the `defaultOpen` prop.
+*
+* @component
+* @param {TooltipProps} props - Component props.
+*
+* @returns {JSX.Element} The Tooltip component.
+*
+* @example
+* <Tooltip text='My tooltip'>
+* 	<Button>Hover me</Button>
+* </Tooltip>
+*/
+var Tooltip = (props) => {
+	const { children, text, theme = "dark", offset = 5, crossOffset = 0, containerPadding = 12, openDelay = 1200, closeDelay = 500, shouldFlip = true, arrow, open, defaultOpen, onOpenChange, placement, className, triggerRef, disabled } = props;
+	return jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, {
+		delay: openDelay,
+		closeDelay,
+		isDisabled: disabled,
+		isOpen: open,
+		onOpenChange,
+		defaultOpen,
+		children: [children, jsxs($4e3b923658d69c60$export$28c660c63b792dea, {
+			containerPadding,
+			placement,
+			shouldFlip,
+			triggerRef,
+			offset,
+			crossOffset,
+			className: ({ isEntering, isExiting }) => clsx("es:group es:pointer-events-none", "es:font-variation-[\"wdth\"_72,\"wght\"_380,\"ROND\"_100]", "es:z-40 es:select-none es:rounded-lg es:inset-ring es:px-2.5 es:py-2 es:text-13 es:leading-none es:shadow es:backdrop-blur-xl es:backdrop-brightness-105 es:backdrop-saturate-125 es:will-change-[transform,opacity] es:fill-mode-forwards", theme === "light" && "es:inset-ring-surface-800/5 es:bg-surface-50/90 es:text-secondary-700", theme === "dark" && "es:inset-ring-surface-200/15 es:bg-surface-800/80 es:text-secondary-100", isEntering && "es:motion-opacity-in es:motion-duration-300 es:placement-left:motion-translate-x-in-[5%] es:placement-right:-motion-translate-x-in-[5%] es:placement-top:motion-translate-y-in-[5%] es:placement-bottom:-motion-translate-y-in-[5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity", isExiting && "es:motion-opacity-out es:motion-duration-200 es:placement-left:motion-translate-x-out-[12.5%] es:placement-right:motion-translate-x-out-[-12.5%] es:placement-top:motion-translate-y-out-[12.5%] es:placement-bottom:motion-translate-y-out-[-12.5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity", className),
+			children: [arrow && jsx($44f671af83e7d9e0$export$746d02f47f4d381, { children: jsx("svg", {
+				width: 8,
+				height: 8,
+				viewBox: "0 0 8 8",
+				className: clsx("es:m-px es:stroke-none es:drop-shadow-sm", "es:pointer-events-none", theme === "light" && "es:fill-secondary-200", theme === "dark" && "es:fill-secondary-600", "es:group-placement-left:-rotate-90 es:group-placement-right:rotate-90 es:group-placement-bottom:rotate-180", "es:forced-colors:fill-[Canvas] es:forced-colors:stroke-[ButtonBorder]"),
+				children: jsx("path", { d: "M0 0 L4 4 L8 0" })
+			}) }), text]
+		})]
+	});
+};
+/**
+* A "decorative" tooltip than can be used with element that usually don't support tooltips.
+* Usually the only elements that support tooltips are interactive elements like buttons or links.
+*
+* This component will wrap the element and add the tooltip functionality to it.
+* The tooltip will be shown when the element is hovered or anything within is focused.
+*
+* **Note**: This is not officially supported by the ARIA spec, so use with caution.
+*
+* @see {@link Tooltip} before using this component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {string|JSX.Element} props.text - The text to display in the tooltip.
+* @param {TooltipTheme} [props.theme='dark'] - The theme of the tooltip.
+* @param {number} [props.offset=0] - Additional offset between the tooltip and the element on the main axis (same axis as element).
+* @param {number} [props.crossOffset=0] - Additional offset between the tooltip and the element on the cross axis (opposite axis as element).
+* @param {number} [props.containerPadding=12] - Space that should be left between the tooltip and the main containing element (usually browser window).
+* @param {number} [props.openDelay=1500] - Duration before the tooltip is shown, in milliseconds.
+* @param {number} [props.closeDelay=500] - Duration before the tooltip is hidden, in milliseconds.
+* @param {boolean} [props.shouldFlip=true] - If `false`, the tooltip will not flip to the opposite side if there is not enough space.
+* @param {TooltipPlacement} [props.placement] - The side of the trigger element where the tooltip will be displayed.
+* @param {string} [props.className] - Classes to pass to the tooltip.
+* @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper (if `doNotReplaceChild` is `false`).
+* @param {boolean} [props.arrow] - If `true`, an arrow is shown on the tooltip.
+*
+* @returns {JSX.Element} The DecorativeTooltip component.
+*
+* @typedef {'light' | 'dark'} TooltipTheme
+* @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} TooltipPlacement
+*
+* @example
+* <DecorativeTooltip text='My tooltip'>
+* 	<span>Hover me</span>
+* </DecorativeTooltip>
+*/
+var DecorativeTooltip = (props) => {
+	const { openDelay, closeDelay, children, text, wrapperClassName, ...rest } = props;
+	const state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+	const ref = useRef(null);
+	const { triggerProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
+	return jsx(Tooltip, {
+		triggerRef: ref,
+		text,
+		open: state.isOpen,
+		...rest,
+		children: jsx("div", {
+			ref,
+			...triggerProps,
+			className: wrapperClassName,
+			children
+		})
+	});
+};
+//#endregion
+export { Tooltip as n, DecorativeTooltip as t };