@trackunit/react-components 1.17.23 → 1.17.25

package/index.cjs.js

@@ -144,9 +144,9 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
+const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }) => {
     const useTagRef = react.useRef(null);
-    const ICON_CONTAINER_ID = sharedUtils.uuidv4();
+    const iconContainerId = react.useMemo(() => sharedUtils.uuidv4(), []);
     const correctIconType = react.useMemo(() => {
         switch (size) {
             case "small":
@@ -179,7 +179,7 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: ref, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsxRuntime.jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, children: jsxRuntime.jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 /**
@@ -805,13 +805,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         disabled: {
-            true: [
-                "cursor-not-allowed",
-                "pointer-events-none",
-                "bg-neutral-200",
-                "hover:bg-neutral-200",
-                "text-neutral-400",
-            ],
+            true: ["cursor-not-allowed", "bg-neutral-200", "hover:bg-neutral-200", "text-neutral-400"],
             false: [],
         },
         loading: {
@@ -4524,8 +4518,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
-const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
-const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
+cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
+const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
             light: "hover:text-white",
@@ -4563,7 +4557,6 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
         mode: "dark",
     },
 });
-cssClassVarianceUtilities.cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
 const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge(["max-w-sm", "rounded", "p-2"], {
     variants: {
         color: {
@@ -4626,7 +4619,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, className, label, placement = "auto", mode = "dark", iconProps, id, style, asChild = true, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
@@ -4647,27 +4640,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, classN
     // Please don't try to move this into the component body directly
     // I tried and it caused infinite re-renders some places (for whatever reason)
     const wrappedChildren = react.useMemo(() => {
-        if (asChild) {
-            return (jsxRuntime.jsx(reactSlot.Slot, { className: className, "data-testid": dataTestId ? `${dataTestId}-child` : undefined, children: children }));
-        }
-        return (jsxRuntime.jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
-    }, [asChild, children, className, dataTestId]);
-    const openTooltip = react.useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        setIsOpen(true);
-    }, [disabled]);
-    const closeTooltip = react.useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        setIsOpen(false);
-    }, [disabled]);
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseDown: closeTooltip, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { "data-testid": `${dataTestId}-text`, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+        return jsxRuntime.jsx(reactSlot.Slot, { children: children });
+    }, [children]);
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
-const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
+const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["inline-flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize"], {
     variants: {
@@ -4823,7 +4801,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ref, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { asChild: false, className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ref: ref, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
+    return (jsxRuntime.jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
 /**
@@ -4887,7 +4865,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["transition-colo
     },
 });
 
-const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "flex", "flex-col"], {
+const cvaKPI = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"], {
     variants: {
         variant: {
             small: ["px-3", "py-2"],
@@ -4957,7 +4935,7 @@ const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
  */
 const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ref, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsx(Tooltip, { asChild: false, className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
+    return (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("min-w-8", cvaKPI({ variant, className })), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
 };
 
 /**
@@ -5012,6 +4990,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
     return (jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: trends.map((trend, index) => (jsxRuntime.jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
 };
 
+const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
+    variants: {
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
     "w-full",
     "overflow-hidden",
@@ -5033,17 +5024,6 @@ const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
         size: "small",
     },
 });
-const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
-    variants: {
-        size: {
-            small: "leading-xs text-xs font-medium text-neutral-600",
-            large: "absolute pl-3 text-base text-white drop-shadow-lg",
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
 
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
@@ -5158,7 +5138,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const valueText = `${Number(value.toFixed(1))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
-    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+    return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
@@ -6399,7 +6379,7 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
-const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
+const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -6474,7 +6454,7 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * @returns {ReactElement} Notice component
  */
 const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ref, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { asChild: false, className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ref: ref, ...rest, children: [sharedUtils.nonNullable(iconName) ? (jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsxRuntime.jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+    return (jsxRuntime.jsx(Tooltip, { disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [sharedUtils.nonNullable(iconName) ? (jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsxRuntime.jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
@@ -6744,7 +6724,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
             externalOnClick?.();
         }, prefix: prefixIconName ? jsxRuntime.jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
     // Wrap `content` with Tooltip
-    const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, { asChild: false, className: "block", label: tooltipLabel, children: content })) : (content);
+    const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, { label: tooltipLabel, children: jsxRuntime.jsx("span", { className: "block", children: content }) })) : (content);
     // Finally, wrap with Link if `to` is provided
     return to !== undefined && to !== "" ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
@@ -6863,7 +6843,7 @@ const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-neutral-9
  */
 const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
     const { ref, isTextTruncated } = useIsTextTruncated();
-    return (jsxRuntime.jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsxRuntime.jsx(Tooltip, { asChild: false, className: "min-w-16 grid", disabled: !isTextTruncated, label: title, placement: "top", children: jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
+    return (jsxRuntime.jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsxRuntime.jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsxRuntime.jsx("div", { className: "min-w-16 grid", children: jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
 };
 
 /**
@@ -6925,18 +6905,18 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
             return null;
         }
         // If the user passes a string, we render the string as a tag with props provided.
-        return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { asChild: false, "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
+        return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
     }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { asChild: false, "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     "data-testid": "page-header-description-icon",
                                 }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
                                 discriminatedProps.primaryAction !== undefined &&
                                 (discriminatedProps.primaryAction.hidden === false ||
-                                    discriminatedProps.primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { asChild: false, disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
+                                    discriminatedProps.primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
                                     discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsxRuntime.jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
@@ -8103,11 +8083,11 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
             }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
-    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { asChild: false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
-            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { asChild: false, disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
+            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
@@ -8183,7 +8163,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
     const valueText = formatValue(sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
                         ? `${segment.label}: ${formatValue(segment.value, unit)}`
                         : formatValue(segment.value, unit);

package/index.esm.js

@@ -142,9 +142,9 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
+const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, color = undefined, onClick, type = size === "large" ? "outline" : "solid", style, ref, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }) => {
     const useTagRef = useRef(null);
-    const ICON_CONTAINER_ID = uuidv4();
+    const iconContainerId = useMemo(() => uuidv4(), []);
     const correctIconType = useMemo(() => {
         switch (size) {
             case "small":
@@ -177,7 +177,7 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: ref, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, children: jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 /**
@@ -803,13 +803,7 @@ const cvaButton = cvaMerge([
             false: "",
         },
         disabled: {
-            true: [
-                "cursor-not-allowed",
-                "pointer-events-none",
-                "bg-neutral-200",
-                "hover:bg-neutral-200",
-                "text-neutral-400",
-            ],
+            true: ["cursor-not-allowed", "bg-neutral-200", "hover:bg-neutral-200", "text-neutral-400"],
             false: [],
         },
         loading: {
@@ -4522,8 +4516,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
-const cvaTooltipContainer = cvaMerge(["flex", "leading-5"]);
-const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
+cvaMerge(["flex", "leading-5"]);
+const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
             light: "hover:text-white",
@@ -4561,7 +4555,6 @@ const cvaTooltipPopoverTail = cvaMerge("", {
         mode: "dark",
     },
 });
-cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
 const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
     variants: {
         color: {
@@ -4624,7 +4617,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, className, label, placement = "auto", mode = "dark", iconProps, id, style, asChild = true, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -4645,27 +4638,12 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, classN
     // Please don't try to move this into the component body directly
     // I tried and it caused infinite re-renders some places (for whatever reason)
     const wrappedChildren = useMemo(() => {
-        if (asChild) {
-            return (jsx(Slot, { className: className, "data-testid": dataTestId ? `${dataTestId}-child` : undefined, children: children }));
-        }
-        return (jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
-    }, [asChild, children, className, dataTestId]);
-    const openTooltip = useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        setIsOpen(true);
-    }, [disabled]);
-    const closeTooltip = useCallback(() => {
-        if (disabled) {
-            return;
-        }
-        setIsOpen(false);
-    }, [disabled]);
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseDown: closeTooltip, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, ref: refs.setReference, style: style, children: children === undefined ? (jsx("div", { children: jsx(Icon, { "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { "data-testid": `${dataTestId}-text`, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+        return jsx(Slot, { children: children });
+    }, [children]);
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
-const cvaIndicator = cvaMerge(["flex", "items-center"]);
+const cvaIndicator = cvaMerge(["inline-flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cvaMerge(["capitalize"], {
     variants: {
@@ -4821,7 +4799,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ref, ...rest }) => {
-    return (jsx(Tooltip, { asChild: false, className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ref: ref, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
+    return (jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
 /**
@@ -4885,7 +4863,7 @@ const cvaInteractableItem = cvaMerge(["transition-colors", "duration-100", "ease
     },
 });
 
-const cvaKPI = cvaMerge(["w-full", "flex", "flex-col"], {
+const cvaKPI = cvaMerge(["flex", "flex-col"], {
     variants: {
         variant: {
             small: ["px-3", "py-2"],
@@ -4955,7 +4933,7 @@ const cvaKPITrendPercentage = cvaMerge([""], {
  */
 const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ref, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { asChild: false, className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
+    return (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: twMerge("min-w-8", cvaKPI({ variant, className })), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
 };
 
 /**
@@ -5010,6 +4988,19 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, })
     return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
 };
 
+const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
+    variants: {
+        size: {
+            small: "leading-xs text-xs font-medium text-neutral-600",
+            large: "absolute pl-3 text-base text-white drop-shadow-lg",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+
 const cvaValueBar = cvaMerge([
     "w-full",
     "overflow-hidden",
@@ -5031,17 +5022,6 @@ const cvaValueBar = cvaMerge([
         size: "small",
     },
 });
-const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
-    variants: {
-        size: {
-            small: "leading-xs text-xs font-medium text-neutral-600",
-            large: "absolute pl-3 text-base text-white drop-shadow-lg",
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
 
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
@@ -5156,7 +5136,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const valueText = `${Number(value.toFixed(1))}${nonNullable(unit) ? unit : ""}`;
-    return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, ref: ref, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -6397,7 +6377,7 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
-const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis"], {
+const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -6472,7 +6452,7 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @returns {ReactElement} Notice component
  */
 const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "medium", iconColor = undefined, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ref, ...rest }) => {
-    return (jsx(Tooltip, { asChild: false, className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ref: ref, ...rest, children: [nonNullable(iconName) ? (jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+    return (jsx(Tooltip, { disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [nonNullable(iconName) ? (jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -6742,7 +6722,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
             externalOnClick?.();
         }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
     // Wrap `content` with Tooltip
-    const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { asChild: false, className: "block", label: tooltipLabel, children: content })) : (content);
+    const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { label: tooltipLabel, children: jsx("span", { className: "block", children: content }) })) : (content);
     // Finally, wrap with Link if `to` is provided
     return to !== undefined && to !== "" ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
@@ -6861,7 +6841,7 @@ const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semi
  */
 const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
     const { ref, isTextTruncated } = useIsTextTruncated();
-    return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsx(Tooltip, { asChild: false, className: "min-w-16 grid", disabled: !isTextTruncated, label: title, placement: "top", children: jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
+    return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsx("div", { className: "min-w-16 grid", children: jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
 };
 
 /**
@@ -6923,18 +6903,18 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
             return null;
         }
         // If the user passes a string, we render the string as a tag with props provided.
-        return (jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsx(Tooltip, { asChild: false, "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
+        return (jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsx(Tooltip, { "data-testid": "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, "data-testid": "page-header-tag", children: tagLabel }) }) }));
     }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, ref: ref, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { asChild: false, "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "data-testid": dataTestId, ref: ref, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     "data-testid": "page-header-description-icon",
                                 }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
                                 discriminatedProps.primaryAction !== undefined &&
                                 (discriminatedProps.primaryAction.hidden === false ||
-                                    discriminatedProps.primaryAction.hidden === undefined) ? (jsx(Tooltip, { asChild: false, disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
+                                    discriminatedProps.primaryAction.hidden === undefined) ? (jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
                                     discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
@@ -8101,11 +8081,11 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
             }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
-    return isIconOnly ? (jsx(Tooltip, { asChild: false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+    return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
-            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, { asChild: false, disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
@@ -8181,7 +8161,7 @@ const SegmentedValueBar = ({ segments, total, size = "small", showValue = false,
     const valueText = formatValue(sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
                         ? `${segment.label}: ${formatValue(segment.value, unit)}`
                         : formatValue(segment.value, unit);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.23",
+  "version": "1.17.25",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Icon/Icon.d.ts

@@ -318,5 +318,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & Refab
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, ref, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => ReactElement;
+export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, ref, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, ...rest }: IconProps) => ReactElement;
 export {};

package/src/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@ import { CommonProps } from "../../common/CommonProps";
 import { Styleable } from "../../common/Styleable";
 import { IconProps } from "../Icon/Icon";
 export type TooltipPlacement = Placement | "auto";
-export interface TooltipProps extends CommonProps, Styleable {
+export interface TooltipProps extends Omit<CommonProps, "className">, Styleable {
     /**
      * The text to be displayed in the tooltip.
      */
@@ -33,15 +33,6 @@ export interface TooltipProps extends CommonProps, Styleable {
      * Ihe id of the html element
      */
     id?: string;
-    /**
-     * Specifies whether the current component or element should be rendered as a child element.
-     * When set to `true`, the behavior or structure of the component may adapt to fit within
-     * a parent context, altering its default rendering logic. Typically used in scenarios
-     * where nesting or parent-child relationships are relevant.
-     *
-     * @deprecated - Do not use this prop. It will be removed in a future release.
-     */
-    asChild?: boolean;
 }
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
@@ -84,4 +75,4 @@ export interface TooltipProps extends CommonProps, Styleable {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, className, label, placement, mode, iconProps, id, style, asChild, }: TooltipProps) => ReactElement;
+export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, }: TooltipProps) => ReactElement;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -8,7 +8,6 @@ export declare const cvaTooltipPopoverTail: (props?: ({
     placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
     mode?: "light" | "dark" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTooltipPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipPopoverContent: (props?: ({
     color?: "light" | "dark" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/ValueBar.shared.d.ts

@@ -0,0 +1,4 @@
+export declare const valueBarContainerClassName = "relative flex w-full items-center gap-2";
+export declare const cvaValueBarText: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/ValueBar.variants.d.ts

@@ -1,6 +1,3 @@
 export declare const cvaValueBar: (props?: ({
     size?: "extraSmall" | "small" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaValueBarText: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;