@levi-gemcommerce/analytics 0.0.0-test.1

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelChartLabels/FunnelChartLabels.mjs

@@ -0,0 +1,130 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.mjs';
+import { useChartContext, estimateStringWidth, LINE_HEIGHT } from '@shopify/polaris-viz-core';
+import { estimateStringWidthWithOffset } from '../../../../utilities/estimateStringWidthWithOffset.mjs';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.mjs';
+import { ScaleIconTooltip } from '../ScaleIconTooltip.mjs';
+import '../../../../constants.mjs';
+import { useState, useMemo, Fragment } from 'react';
+import { Tooltip, Button } from '@shopify/polaris';
+import { SingleTextLine } from '../../../Labels/SingleTextLine.mjs';
+import { ScaleIcon } from '../ScaleIcon.mjs';
+
+const LINE_GAP = 5;
+const LINE_PADDING = 4;
+const GROUP_OFFSET = 10;
+const LABEL_FONT_SIZE = 12;
+const VALUE_FONT_SIZE = 14;
+const VALUE_FONT_WEIGHT = 500;
+const PRIMARY_VALUE_FONT_WEIGHT = 550;
+const VALUE_FONT_SIZE_SMALL = 12;
+const TREND_INDICATOR_SPACING = 20;
+const TREND_INDICATOR_SPACING_2 = 10;
+const VERTICAL_STACK_SPACING = 3;
+const MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY = 400;
+const LABEL_VERTICAL_OFFSET = 2;
+const TREND_INDICATOR_SPACING_ADJUSTMENT = 35;
+const ACTION_BUTTON_WIDTH = 20;
+const TEXT_COLOR = '#616161';
+const PRIMARY_TEXT_COLOR = '#303030';
+const REDUCED_FONT_SIZE = 11;
+const LAYOUT_STRATEGY = {
+    ONE_LINE_ALL: 'one_line_all',
+    ONE_LINE_COUNTS_AND_TRENDS: 'one_line_counts_and_trends',
+    VERTICAL_STACKING: 'vertical_stacking',
+};
+function FunnelChartLabels({ formattedValues, labels, labelWidth, barWidth, percentages, trends, xScale, shouldApplyScaling, showPercentages = true, renderScaleIconTooltipContent, hoverIndex, onMouseEnter, onMouseLeave, isShowScaleIcon = false, }) {
+    const { characterWidths, containerBounds } = useChartContext();
+    const chartContainerWidth = containerBounds?.width ?? 0;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const labelFontSize = useMemo(() => {
+        const maxLabelWidth = Math.max(...labels.map((label) => estimateStringWidth(label.value, characterWidths)));
+        return maxLabelWidth > labelWidth ? REDUCED_FONT_SIZE : LABEL_FONT_SIZE;
+    }, [labels, characterWidths, labelWidth]);
+    const { layoutStrategy } = useMemo(() => {
+        // Check if all items can fit in one Main Percentage, Counts, and TI (if present) on a single line.
+        const actionButtonWidth = labels[0]?.secondaryActions?.length ? ACTION_BUTTON_WIDTH : 0;
+        const canAllFitInOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentPercentWidth = showPercentages
+                ? estimateStringWidthWithOffset(percentages[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT)
+                : 0;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentPercentWidth +
+                LINE_PADDING +
+                currentCountStringWidth +
+                (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                availableWidth);
+        });
+        if (canAllFitInOneLine) {
+            // All elements in one line
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_ALL };
+        }
+        // If chart width is very narrow, prioritize full stacking.
+        if (chartContainerWidth < MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY) {
+            return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+        }
+        // Check if counts and trends can fit in one line.
+        const canCountsAndTrendsFitOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentCountStringWidth + (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                Number(availableWidth) + TREND_INDICATOR_SPACING_ADJUSTMENT);
+        });
+        if (canCountsAndTrendsFitOneLine) {
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS };
+        }
+        // Fall back to vertical stacking.
+        return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+    }, [
+        labels,
+        percentages,
+        formattedValues,
+        trends,
+        labelWidth,
+        barWidth,
+        chartContainerWidth,
+        showPercentages,
+        hoverIndex,
+    ]);
+    function displayChartLabels(layoutStrategy, index, currentTargetWidth, percentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) {
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_ALL) {
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: PRIMARY_TEXT_COLOR, text: percentages[index], targetWidth: percentWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: PRIMARY_VALUE_FONT_WEIGHT })) : null, jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], x: showPercentages ? percentWidth + LINE_PADDING : 0, targetWidth: currentTargetWidth -
+                            (percentWidth + LINE_PADDING) -
+                            (trendIndicatorProps ? TREND_INDICATOR_SPACING + trendIndicatorWidth : 0), textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: !showPercentages ? VALUE_FONT_WEIGHT : undefined }), ' ', trendIndicatorProps && (jsx("g", { transform: `translate(${percentWidth + countStringWidth + TREND_INDICATOR_SPACING}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(Fragment, { children: jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT }) })) : null, jsxs("g", { transform: `translate(0, ${formattedValueTransformY})`, children: [jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: trendIndicatorProps ? countStringWidth : currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE_SMALL, fontWeight: VALUE_FONT_WEIGHT, x: 0, y: 2 }), trendIndicatorProps && (jsx("g", { transform: `translate(${countStringWidth + TREND_INDICATOR_SPACING_2}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] })] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.VERTICAL_STACKING) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            const trendIndicatorTransformY = showPercentages
+                ? LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
+                : LINE_HEIGHT + VERTICAL_STACK_SPACING * 2;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT })) : null, jsx("g", { transform: `translate(0, ${formattedValueTransformY})`, children: jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT, x: 0 }) }), trendIndicatorProps && (jsx("g", { transform: `translate(0, ${trendIndicatorTransformY})`, children: jsx("g", { transform: `translate(0, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }) }))] }));
+        }
+        return null;
+    }
+    return (jsx(Fragment, { children: labels.map((label, index) => {
+            const x = xScale(index.toString()) ?? 0;
+            const showScaleIcon = index === 0 && shouldApplyScaling && isShowScaleIcon;
+            const isLast = index === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const percentWidth = estimateStringWidthWithOffset(percentages[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const countStringWidth = estimateStringWidthWithOffset(formattedValues[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorProps, trendIndicatorWidth } = getTrendIndicatorData(trends?.[index]?.reached);
+            const updatedPercentWidth = showPercentages ? percentWidth : 0;
+            return (jsxs("g", { transform: `translate(${index === 0 ? x : x + GROUP_OFFSET},${GROUP_OFFSET})`, onMouseEnter: () => onMouseEnter?.(index), onMouseLeave: () => onMouseLeave?.(), children: [showScaleIcon && (jsxs("g", { transform: "translate(0, -3)", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [jsx(ScaleIcon, {}), showTooltip && renderScaleIconTooltipContent && (jsx(ScaleIconTooltip, { renderScaleIconTooltipContent: renderScaleIconTooltipContent }))] })), jsx(SingleTextLine, { color: TEXT_COLOR, text: label.value, targetWidth: currentTargetWidth, textAnchor: "start", fontSize: labelFontSize, x: showScaleIcon ? 20 : 0 }), jsx("g", { transform: `translate(0,${LINE_HEIGHT + LINE_GAP})`, children: displayChartLabels(layoutStrategy, index, currentTargetWidth, updatedPercentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) }), hoverIndex === index &&
+                        label.secondaryActions?.map((action, index) => (jsx("foreignObject", { x: currentTargetWidth - (index + 1) * 20, y: LINE_HEIGHT, style: { overflow: 'visible' }, children: jsx(Tooltip, { content: 'Remove step', children: jsx(Button, { variant: "tertiary", tone: "critical", onClick: () => action.onAction?.(), icon: action.icon, disabled: action.disabled, loading: action.loading }) }) }, index)))] }, index));
+        }) }));
+}
+
+export { FunnelChartLabels, LABEL_VERTICAL_OFFSET };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelChartLabels/index.d.ts

@@ -0,0 +1 @@
+export { FunnelChartLabels } from './FunnelChartLabels';

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type TooltipPlacement = 'above' | 'below';
+export declare function FunnelTooltip({ children, x, y, placement, }: {
+    children: ReactNode;
+    x: number;
+    y: number;
+    placement?: TooltipPlacement;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.js

@@ -0,0 +1,17 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useSpring, to, animated } from '@react-spring/web';
+import { FUNNEL_CONNECTOR_Y_OFFSET } from '../../constants.js';
+
+function FunnelTooltip({ children, x, y, placement = 'above', }) {
+    const yOffset = placement === 'above' ? FUNNEL_CONNECTOR_Y_OFFSET : -FUNNEL_CONNECTOR_Y_OFFSET;
+    const placementTranslateY = placement === 'above' ? '-100%' : '0%';
+    const springs = useSpring({
+        from: { opacity: 0, posX: x, posY: y + yOffset },
+        to: { opacity: 1, posX: Math.round(x), posY: Math.round(y) },
+    });
+    const transform = to([springs.posX, springs.posY], (px, py) => `translate(${px}px, ${py}px) translateY(${placementTranslateY})`);
+    return (jsx(animated.div, { className: "GFunnelChartNextTooltip-container", style: { transform, opacity: springs.opacity }, children: children }));
+}
+
+export { FunnelTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.mjs

@@ -0,0 +1,17 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useSpring, to, animated } from '@react-spring/web';
+import { FUNNEL_CONNECTOR_Y_OFFSET } from '../../constants.mjs';
+
+function FunnelTooltip({ children, x, y, placement = 'above', }) {
+    const yOffset = placement === 'above' ? FUNNEL_CONNECTOR_Y_OFFSET : -FUNNEL_CONNECTOR_Y_OFFSET;
+    const placementTranslateY = placement === 'above' ? '-100%' : '0%';
+    const springs = useSpring({
+        from: { opacity: 0, posX: x, posY: y + yOffset },
+        to: { opacity: 1, posX: Math.round(x), posY: Math.round(y) },
+    });
+    const transform = to([springs.posX, springs.posY], (px, py) => `translate(${px}px, ${py}px) translateY(${placementTranslateY})`);
+    return (jsx(animated.div, { className: "GFunnelChartNextTooltip-container", style: { transform, opacity: springs.opacity }, children: children }));
+}
+
+export { FunnelTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export type { TooltipPlacement } from './FunnelTooltip';
+export { FunnelTooltip } from './FunnelTooltip';

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.d.ts

@@ -0,0 +1 @@
+export declare function ScaleIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.js

@@ -0,0 +1,11 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+const ICON_COLOR = '#050F2E';
+const ICON_BACKGROUND_COLOR = '#F3F3F3';
+function ScaleIcon() {
+    return (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "8", fill: ICON_BACKGROUND_COLOR }), jsx("g", { transform: "translate(4, 2)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99996 0.820219C2.99996 0.367258 3.36716 6.10352e-05 3.82012 6.10352e-05C4.27308 6.10352e-05 4.64027 0.367258 4.64027 0.820219V3.55216L6.04518 2.98454C6.46516 2.81486 6.94318 3.01777 7.11286 3.43774C7.28254 3.85772 7.07964 4.33574 6.65966 4.50542L1.3366 6.65608C0.916618 6.82576 0.438604 6.62285 0.268922 6.20287C0.0992403 5.7829 0.302145 5.30488 0.722123 5.1352L3.00068 4.2146C3.0002 4.2031 2.99996 4.19153 2.99996 4.1799V0.820219ZM6.04523 6.3073C6.4652 6.13762 6.94322 6.34052 7.1129 6.7605C7.28258 7.18048 7.07968 7.65849 6.6597 7.82817L4.64032 8.64406V11.7526C4.64032 12.2056 4.27312 12.5728 3.82016 12.5728C3.3672 12.5728 3 12.2056 3 11.7526V9.30679L1.33664 9.97883C0.91666 10.1485 0.438646 9.94561 0.268964 9.52563C0.0992823 9.10565 0.302187 8.62764 0.722165 8.45795L6.04523 6.3073Z", fill: ICON_COLOR }) })] }));
+}
+
+export { ScaleIcon };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.mjs

@@ -0,0 +1,11 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+const ICON_COLOR = '#050F2E';
+const ICON_BACKGROUND_COLOR = '#F3F3F3';
+function ScaleIcon() {
+    return (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "8", fill: ICON_BACKGROUND_COLOR }), jsx("g", { transform: "translate(4, 2)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99996 0.820219C2.99996 0.367258 3.36716 6.10352e-05 3.82012 6.10352e-05C4.27308 6.10352e-05 4.64027 0.367258 4.64027 0.820219V3.55216L6.04518 2.98454C6.46516 2.81486 6.94318 3.01777 7.11286 3.43774C7.28254 3.85772 7.07964 4.33574 6.65966 4.50542L1.3366 6.65608C0.916618 6.82576 0.438604 6.62285 0.268922 6.20287C0.0992403 5.7829 0.302145 5.30488 0.722123 5.1352L3.00068 4.2146C3.0002 4.2031 2.99996 4.19153 2.99996 4.1799V0.820219ZM6.04523 6.3073C6.4652 6.13762 6.94322 6.34052 7.1129 6.7605C7.28258 7.18048 7.07968 7.65849 6.6597 7.82817L4.64032 8.64406V11.7526C4.64032 12.2056 4.27312 12.5728 3.82016 12.5728C3.3672 12.5728 3 12.2056 3 11.7526V9.30679L1.33664 9.97883C0.91666 10.1485 0.438646 9.94561 0.268964 9.52563C0.0992823 9.10565 0.302187 8.62764 0.722165 8.45795L6.04523 6.3073Z", fill: ICON_COLOR }) })] }));
+}
+
+export { ScaleIcon };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface ScaleIconTooltipProps {
+    renderScaleIconTooltipContent: () => ReactNode;
+}
+export declare function ScaleIconTooltip({ renderScaleIconTooltipContent }: ScaleIconTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.js

@@ -0,0 +1,20 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import '../../../constants.js';
+import { Fragment } from 'react';
+import { TooltipContentContainer } from '../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.js';
+import { TooltipWithPortal } from './TooltipWithPortal.js';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.js';
+
+const TOOLTIP_VERTICAL_OFFSET = 65;
+function ScaleIconTooltip({ renderScaleIconTooltipContent }) {
+    const { containerBounds } = useChartContext();
+    const { x, y } = containerBounds ?? {
+        x: 0,
+        y: 0,
+    };
+    return (jsx(TooltipWithPortal, { children: jsx(FunnelTooltip, { x: x, y: y - TOOLTIP_VERTICAL_OFFSET, children: jsx(TooltipContentContainer, { maxWidth: 200, theme: DEFAULT_THEME_NAME, color: "white", children: () => jsx(Fragment, { children: renderScaleIconTooltipContent() }) }) }) }));
+}
+
+export { ScaleIconTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.mjs

@@ -0,0 +1,20 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import '../../../constants.mjs';
+import { Fragment } from 'react';
+import { TooltipContentContainer } from '../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.mjs';
+import { TooltipWithPortal } from './TooltipWithPortal.mjs';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.mjs';
+
+const TOOLTIP_VERTICAL_OFFSET = 65;
+function ScaleIconTooltip({ renderScaleIconTooltipContent }) {
+    const { containerBounds } = useChartContext();
+    const { x, y } = containerBounds ?? {
+        x: 0,
+        y: 0,
+    };
+    return (jsx(TooltipWithPortal, { children: jsx(FunnelTooltip, { x: x, y: y - TOOLTIP_VERTICAL_OFFSET, children: jsx(TooltipContentContainer, { maxWidth: 200, theme: DEFAULT_THEME_NAME, color: "white", children: () => jsx(Fragment, { children: renderScaleIconTooltipContent() }) }) }) }));
+}
+
+export { ScaleIconTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { GDataPoint, GDataPointTooltipPrimaryAction } from '../../../../../../types/chart';
+export interface TooltipContentProps {
+    data: {
+        key: string;
+        value: string;
+    }[];
+    primaryAction?: GDataPointTooltipPrimaryAction;
+    item?: GDataPoint;
+}
+export declare function CustomTooltip({ data, primaryAction, item }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.js

@@ -0,0 +1,19 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_WIDTH } from '../../constants.js';
+import { BlockStack, Box, Text, Divider, InlineStack, Button } from '@shopify/polaris';
+
+function CustomTooltip({ data, primaryAction, item }) {
+    const basicInfo = data[0];
+    const metricsData = data.slice(1);
+    return (jsx("div", { style: {
+            background: '#FFFFFF',
+            borderRadius: 8,
+            padding: 12,
+            boxShadow: '0px 8px 16px -4px rgba(26, 26, 26, 0.22), inset 0px 1px 0px 0px rgba(204, 204, 204, 0.5), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.17), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.13), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.13)',
+            width: TOOLTIP_WIDTH,
+            maxWidth: TOOLTIP_WIDTH,
+        }, children: jsxs(BlockStack, { gap: "300", children: [jsxs(Box, { children: [jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", truncate: true, children: basicInfo?.key }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", truncate: true, children: basicInfo?.value })] }), jsx(Divider, {}), jsx(BlockStack, { gap: "100", children: metricsData.map(({ key, value }, index) => (jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: key }), jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: value })] }, `row-${index}-${key}`))) }), primaryAction && (jsx("div", { role: "button", tabIndex: 0, onMouseDown: () => primaryAction.onClick(item), children: jsx(Button, { fullWidth: true, size: "medium", children: primaryAction.content }) }))] }) }));
+}
+
+export { CustomTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.mjs

@@ -0,0 +1,19 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_WIDTH } from '../../constants.mjs';
+import { BlockStack, Box, Text, Divider, InlineStack, Button } from '@shopify/polaris';
+
+function CustomTooltip({ data, primaryAction, item }) {
+    const basicInfo = data[0];
+    const metricsData = data.slice(1);
+    return (jsx("div", { style: {
+            background: '#FFFFFF',
+            borderRadius: 8,
+            padding: 12,
+            boxShadow: '0px 8px 16px -4px rgba(26, 26, 26, 0.22), inset 0px 1px 0px 0px rgba(204, 204, 204, 0.5), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.17), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.13), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.13)',
+            width: TOOLTIP_WIDTH,
+            maxWidth: TOOLTIP_WIDTH,
+        }, children: jsxs(BlockStack, { gap: "300", children: [jsxs(Box, { children: [jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", truncate: true, children: basicInfo?.key }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", truncate: true, children: basicInfo?.value })] }), jsx(Divider, {}), jsx(BlockStack, { gap: "100", children: metricsData.map(({ key, value }, index) => (jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: key }), jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: value })] }, `row-${index}-${key}`))) }), primaryAction && (jsx("div", { role: "button", tabIndex: 0, onMouseDown: () => primaryAction.onClick(item), children: jsx(Button, { fullWidth: true, size: "medium", children: primaryAction.content }) }))] }) }));
+}
+
+export { CustomTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import type { IFunnelChartColors } from '../../../../../GFunnelChart/types';
+import type { DataPoint, LabelFormatter } from '@shopify/polaris-viz-core';
+import type { FunnelChartMetaData } from '../../types';
+export interface TooltipContentProps {
+    activeIndex: number;
+    dataSeries: DataPoint[];
+    trends: FunnelChartMetaData['trends'];
+    tooltipLabels: {
+        reached: string;
+        dropped: string;
+    };
+    funnelColors?: IFunnelChartColors;
+    labelFormatter: LabelFormatter;
+    percentageFormatter: (value: number) => string;
+}
+export declare function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.js

@@ -0,0 +1,70 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import { Fragment } from 'react';
+import { FUNNEL_CHART_CONNECTOR_GRADIENT } from '../../../../shared/FunnelChartConnector/constants.js';
+import '@react-spring/web';
+import { FUNNEL_CHART_SEGMENT_FILL } from '../../../../shared/FunnelChartSegment/constants.js';
+import { SeriesIcon } from '../../../../shared/SeriesIcon/SeriesIcon.js';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.js';
+import '../../../../constants.js';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.js';
+import { TooltipContentContainer } from '../../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.js';
+import { TooltipTitle } from '../../../TooltipContent/components/TooltipTitle/TooltipTitle.js';
+import { TOOLTIP_WIDTH } from '../../constants.js';
+import { calculateDropOff } from '../../utilities/calculate-dropoff.js';
+
+function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, }) {
+    const selectedTheme = useTheme(DEFAULT_THEME_NAME);
+    const point = dataSeries[activeIndex];
+    const previousPoint = dataSeries[activeIndex - 1];
+    const isFirst = activeIndex === 0;
+    const currentValue = point?.value ?? null;
+    const previousValue = previousPoint?.value ?? null;
+    const hasValidValues = currentValue !== null && previousValue !== null;
+    const getDropOffPercent = () => {
+        if (isFirst || !hasValidValues || previousValue === 0)
+            return null;
+        return Math.abs(calculateDropOff(previousValue, currentValue));
+    };
+    const getReachedPercent = (percDropOff) => {
+        if (isFirst)
+            return 100;
+        if (!hasValidValues)
+            return null;
+        return 100 - percDropOff;
+    };
+    const percDropOffage = getDropOffPercent();
+    const reachedPercent = getReachedPercent(percDropOffage);
+    const data = [
+        {
+            key: tooltipLabels.reached,
+            value: currentValue === null ? '-' : labelFormatter(currentValue),
+            color: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
+            percent: reachedPercent,
+            trendKey: 'reached',
+        },
+    ];
+    if (!isFirst && hasValidValues) {
+        let value = '0';
+        if (previousValue > 0 && previousValue >= currentValue) {
+            value = labelFormatter(previousValue - currentValue);
+        }
+        data.push({
+            key: tooltipLabels.dropped,
+            value,
+            percent: percDropOffage,
+            color: funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT,
+            trendKey: 'dropped',
+        });
+    }
+    return (jsx(TooltipContentContainer, { maxWidth: TOOLTIP_WIDTH, minWidth: TOOLTIP_WIDTH, theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.backgroundColor, children: () => (jsxs(Fragment, { children: [jsx(TooltipTitle, { theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.textColor, "aria-label": `Step: ${point.key}`, children: point.key }), jsx("div", { className: "GFunnelChartNextTooltip-rows", children: data.map(({ key, value, color, percent, trendKey }, index) => {
+                        const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
+                        const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
+                        const { trendIndicatorProps } = getTrendIndicatorData(trends?.[activeIndex]);
+                        const trendByKey = trendIndicatorProps[trendKey];
+                        return (jsxs("div", { className: "GFunnelChartNextTooltip-row", "aria-label": ariaLabel, children: [jsxs("div", { className: "GFunnelChartNextTooltip-keys", children: [jsx(SeriesIcon, { color: color }), jsx("span", { children: key })] }), jsxs("div", { className: "GFunnelChartNextTooltip-values", children: [jsx("span", { children: jsx("strong", { children: value }) }), jsx("span", { children: jsx("strong", { children: formattedPercent }) }), trendIndicatorProps && (jsx("div", { className: "GFunnelChartNextTooltip-trendIndicator", children: jsx(TrendIndicator, { ...trendByKey }) }))] })] }, `row-${index}-${key}`));
+                    }) })] })) }));
+}
+
+export { Tooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.mjs

@@ -0,0 +1,70 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import { Fragment } from 'react';
+import { FUNNEL_CHART_CONNECTOR_GRADIENT } from '../../../../shared/FunnelChartConnector/constants.mjs';
+import '@react-spring/web';
+import { FUNNEL_CHART_SEGMENT_FILL } from '../../../../shared/FunnelChartSegment/constants.mjs';
+import { SeriesIcon } from '../../../../shared/SeriesIcon/SeriesIcon.mjs';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.mjs';
+import '../../../../constants.mjs';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.mjs';
+import { TooltipContentContainer } from '../../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.mjs';
+import { TooltipTitle } from '../../../TooltipContent/components/TooltipTitle/TooltipTitle.mjs';
+import { TOOLTIP_WIDTH } from '../../constants.mjs';
+import { calculateDropOff } from '../../utilities/calculate-dropoff.mjs';
+
+function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, }) {
+    const selectedTheme = useTheme(DEFAULT_THEME_NAME);
+    const point = dataSeries[activeIndex];
+    const previousPoint = dataSeries[activeIndex - 1];
+    const isFirst = activeIndex === 0;
+    const currentValue = point?.value ?? null;
+    const previousValue = previousPoint?.value ?? null;
+    const hasValidValues = currentValue !== null && previousValue !== null;
+    const getDropOffPercent = () => {
+        if (isFirst || !hasValidValues || previousValue === 0)
+            return null;
+        return Math.abs(calculateDropOff(previousValue, currentValue));
+    };
+    const getReachedPercent = (percDropOff) => {
+        if (isFirst)
+            return 100;
+        if (!hasValidValues)
+            return null;
+        return 100 - percDropOff;
+    };
+    const percDropOffage = getDropOffPercent();
+    const reachedPercent = getReachedPercent(percDropOffage);
+    const data = [
+        {
+            key: tooltipLabels.reached,
+            value: currentValue === null ? '-' : labelFormatter(currentValue),
+            color: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
+            percent: reachedPercent,
+            trendKey: 'reached',
+        },
+    ];
+    if (!isFirst && hasValidValues) {
+        let value = '0';
+        if (previousValue > 0 && previousValue >= currentValue) {
+            value = labelFormatter(previousValue - currentValue);
+        }
+        data.push({
+            key: tooltipLabels.dropped,
+            value,
+            percent: percDropOffage,
+            color: funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT,
+            trendKey: 'dropped',
+        });
+    }
+    return (jsx(TooltipContentContainer, { maxWidth: TOOLTIP_WIDTH, minWidth: TOOLTIP_WIDTH, theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.backgroundColor, children: () => (jsxs(Fragment, { children: [jsx(TooltipTitle, { theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.textColor, "aria-label": `Step: ${point.key}`, children: point.key }), jsx("div", { className: "GFunnelChartNextTooltip-rows", children: data.map(({ key, value, color, percent, trendKey }, index) => {
+                        const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
+                        const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
+                        const { trendIndicatorProps } = getTrendIndicatorData(trends?.[activeIndex]);
+                        const trendByKey = trendIndicatorProps[trendKey];
+                        return (jsxs("div", { className: "GFunnelChartNextTooltip-row", "aria-label": ariaLabel, children: [jsxs("div", { className: "GFunnelChartNextTooltip-keys", children: [jsx(SeriesIcon, { color: color }), jsx("span", { children: key })] }), jsxs("div", { className: "GFunnelChartNextTooltip-values", children: [jsx("span", { children: jsx("strong", { children: value }) }), jsx("span", { children: jsx("strong", { children: formattedPercent }) }), trendIndicatorProps && (jsx("div", { className: "GFunnelChartNextTooltip-trendIndicator", children: jsx(TrendIndicator, { ...trendByKey }) }))] })] }, `row-${index}-${key}`));
+                    }) })] })) }));
+}
+
+export { Tooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.d.ts

@@ -0,0 +1,30 @@
+import type { IFunnelChartColors } from '../../../../GFunnelChart/types';
+import type { TooltipPlacement } from './FunnelTooltip/FunnelTooltip';
+import type { LabelFormatter } from '@shopify/polaris-viz-core';
+import type { GDataPoint } from '../../../../../types';
+import type { ScaleBand } from 'd3-scale';
+interface TooltipOverlayProps {
+    tooltipIndex: number;
+    dataSeries: GDataPoint[];
+    trends: ReturnType<any> | undefined;
+    tooltipLabels: {
+        reached: string;
+        dropped: string;
+    };
+    funnelColors?: IFunnelChartColors;
+    labelFormatter: LabelFormatter;
+    percentageFormatter: (value: number) => string;
+    getBarHeight: (value: number) => number;
+    getXPosition: (dataPoint: GDataPoint) => number;
+    getYPosition: (dataPoint: GDataPoint, height: number) => {
+        y: number;
+        placement: TooltipPlacement;
+    };
+    chartX: number;
+    barWidth: number;
+    xScale: ScaleBand<string>;
+    onTooltipMouseEnter: () => void;
+    onTooltipMouseLeave: () => void;
+}
+export declare function TooltipOverlay({ tooltipIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, getBarHeight, getXPosition, getYPosition, chartX, barWidth, xScale, onTooltipMouseEnter, onTooltipMouseLeave, }: TooltipOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.js

@@ -0,0 +1,50 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_GAP_FROM_BAR, TOOLTIP_WIDTH, TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT } from '../constants.js';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.js';
+import { CustomTooltip } from './Tooltip/CustomTooltip.js';
+import { Tooltip } from './Tooltip/Tooltip.js';
+
+function TooltipOverlay({ tooltipIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, getBarHeight, getXPosition, getYPosition, chartX, barWidth, xScale, onTooltipMouseEnter, onTooltipMouseLeave, }) {
+    const activeDataSeries = dataSeries[tooltipIndex];
+    if (!activeDataSeries)
+        return null;
+    const xPosition = getXPosition(activeDataSeries);
+    const chartTooltip = activeDataSeries.chartTooltip;
+    const tooltipHeight = chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+    const { y: yPosition, placement } = getYPosition(activeDataSeries, tooltipHeight);
+    const chartTooltipPrimaryAction = activeDataSeries.chartTooltipPrimaryAction;
+    // Hover bridge: covers area between tooltip and bar so mouse can travel between them
+    const activeBarHeight = getBarHeight(activeDataSeries.value ?? 0);
+    const bridgeHeight = TOOLTIP_GAP_FROM_BAR + activeBarHeight;
+    // Compute union of tooltip and section edges (relative to tooltip left)
+    const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+    const sectionLeftRel = chartX + currentX - xPosition;
+    const sectionRightRel = sectionLeftRel + barWidth;
+    const bridgeLeft = Math.min(0, sectionLeftRel);
+    const bridgeRight = Math.max(TOOLTIP_WIDTH, sectionRightRel);
+    const bridgeWidth = bridgeRight - bridgeLeft;
+    const isBelow = placement === 'below';
+    return (jsx(FunnelTooltip, { x: xPosition, y: yPosition, placement: placement, children: jsxs("div", { role: "presentation", style: {
+                position: 'relative',
+                overflow: 'visible',
+                pointerEvents: 'auto',
+                ...(isBelow ? { paddingTop: TOOLTIP_GAP_FROM_BAR } : { paddingBottom: TOOLTIP_GAP_FROM_BAR }),
+            }, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave, children: [chartTooltip ? (jsx(CustomTooltip, { data: chartTooltip, primaryAction: chartTooltipPrimaryAction, item: activeDataSeries })) : (jsx(Tooltip, { activeIndex: tooltipIndex, dataSeries: dataSeries, trends: trends, tooltipLabels: tooltipLabels, funnelColors: funnelColors, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter })), jsx("div", { style: {
+                        position: 'absolute',
+                        ...(isBelow
+                            ? {
+                                top: -bridgeHeight,
+                                clipPath: `polygon(${sectionLeftRel - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 100%, ${-bridgeLeft}px 100%)`,
+                            }
+                            : {
+                                bottom: -bridgeHeight,
+                                clipPath: `polygon(${-bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 100%, ${sectionLeftRel - bridgeLeft}px 100%)`,
+                            }),
+                        left: bridgeLeft,
+                        width: bridgeWidth,
+                        height: bridgeHeight,
+                    } })] }) }, `${tooltipIndex}-${placement}`));
+}
+
+export { TooltipOverlay };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.mjs

@@ -0,0 +1,50 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_GAP_FROM_BAR, TOOLTIP_WIDTH, TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT } from '../constants.mjs';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.mjs';
+import { CustomTooltip } from './Tooltip/CustomTooltip.mjs';
+import { Tooltip } from './Tooltip/Tooltip.mjs';
+
+function TooltipOverlay({ tooltipIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, getBarHeight, getXPosition, getYPosition, chartX, barWidth, xScale, onTooltipMouseEnter, onTooltipMouseLeave, }) {
+    const activeDataSeries = dataSeries[tooltipIndex];
+    if (!activeDataSeries)
+        return null;
+    const xPosition = getXPosition(activeDataSeries);
+    const chartTooltip = activeDataSeries.chartTooltip;
+    const tooltipHeight = chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+    const { y: yPosition, placement } = getYPosition(activeDataSeries, tooltipHeight);
+    const chartTooltipPrimaryAction = activeDataSeries.chartTooltipPrimaryAction;
+    // Hover bridge: covers area between tooltip and bar so mouse can travel between them
+    const activeBarHeight = getBarHeight(activeDataSeries.value ?? 0);
+    const bridgeHeight = TOOLTIP_GAP_FROM_BAR + activeBarHeight;
+    // Compute union of tooltip and section edges (relative to tooltip left)
+    const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+    const sectionLeftRel = chartX + currentX - xPosition;
+    const sectionRightRel = sectionLeftRel + barWidth;
+    const bridgeLeft = Math.min(0, sectionLeftRel);
+    const bridgeRight = Math.max(TOOLTIP_WIDTH, sectionRightRel);
+    const bridgeWidth = bridgeRight - bridgeLeft;
+    const isBelow = placement === 'below';
+    return (jsx(FunnelTooltip, { x: xPosition, y: yPosition, placement: placement, children: jsxs("div", { role: "presentation", style: {
+                position: 'relative',
+                overflow: 'visible',
+                pointerEvents: 'auto',
+                ...(isBelow ? { paddingTop: TOOLTIP_GAP_FROM_BAR } : { paddingBottom: TOOLTIP_GAP_FROM_BAR }),
+            }, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave, children: [chartTooltip ? (jsx(CustomTooltip, { data: chartTooltip, primaryAction: chartTooltipPrimaryAction, item: activeDataSeries })) : (jsx(Tooltip, { activeIndex: tooltipIndex, dataSeries: dataSeries, trends: trends, tooltipLabels: tooltipLabels, funnelColors: funnelColors, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter })), jsx("div", { style: {
+                        position: 'absolute',
+                        ...(isBelow
+                            ? {
+                                top: -bridgeHeight,
+                                clipPath: `polygon(${sectionLeftRel - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 100%, ${-bridgeLeft}px 100%)`,
+                            }
+                            : {
+                                bottom: -bridgeHeight,
+                                clipPath: `polygon(${-bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 100%, ${sectionLeftRel - bridgeLeft}px 100%)`,
+                            }),
+                        left: bridgeLeft,
+                        width: bridgeWidth,
+                        height: bridgeHeight,
+                    } })] }) }, `${tooltipIndex}-${placement}`));
+}
+
+export { TooltipOverlay };