@trackunit/react-components 1.17.17 → 1.17.21

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, filterByMultiple } from '@trackunit/shared-utils';
-import { useRef, useMemo, useEffect, useState, useLayoutEffect, useCallback, createElement, forwardRef, Fragment, memo, useId, useReducer, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
+import { useRef, useMemo, useEffect, useState, useLayoutEffect, useCallback, createElement, Fragment, memo, forwardRef, useId, useReducer, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
 import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
@@ -125,7 +125,7 @@ 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, forwardedRef, 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, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = uuidv4();
     const correctIconType = useMemo(() => {
@@ -160,7 +160,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: forwardedRef, 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", { "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 }) }) }));
 };
 
 /**
@@ -381,6 +381,70 @@ const useIsTextWrapping = (options = {}) => {
     return useMemo(() => ({ ref, isTextWrapping }), [isTextWrapping]);
 };
 
+// This hook is _heavily_ inspired by floating-ui's useMergeRefs
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * Useful when you need to attach multiple refs to the same element,
+ * such as when composing multiple hooks that each need a ref.
+ *
+ * @template TInstance - The type of the element instance
+ * @param {ReadonlyArray<MergeableRef<TInstance> | undefined>} refs - Array of refs to merge (can be RefObjects, RefCallbacks, or undefined)
+ * @returns {null | RefCallback<TInstance>} A single ref callback that will update all provided refs, or null if all refs are null
+ * @example
+ * ```tsx
+ * const { ref: measureRef } = useMeasure();
+ * const { ref: scrollRef } = useScrollDetection();
+ * const mergedRef = useMergeRefs([measureRef, scrollRef]);
+ *
+ * return <div ref={mergedRef}>Content</div>;
+ * ```
+ */
+function useMergeRefs(refs) {
+    const cleanupRef = useRef(undefined);
+    const refsRef = useRef(refs);
+    useEffect(() => {
+        refsRef.current = refs;
+    }, [refs]);
+    const refEffect = useCallback((instance) => {
+        const cleanups = refsRef.current.map(ref => {
+            if (ref === null || ref === undefined) {
+                return;
+            }
+            if (typeof ref === "function") {
+                const refCallback = ref;
+                const refCleanup = refCallback(instance);
+                return typeof refCleanup === "function"
+                    ? refCleanup
+                    : () => {
+                        refCallback(null);
+                    };
+            }
+            ref.current = instance;
+            return () => {
+                ref.current = null;
+            };
+        });
+        return () => {
+            cleanups.forEach(refCleanup => refCleanup?.());
+        };
+    }, []);
+    return useMemo(() => {
+        // eslint-disable-next-line react-hooks/refs
+        if (refsRef.current.every(ref => ref === null)) {
+            return null;
+        }
+        return (value) => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = undefined;
+            }
+            if (value !== null) {
+                cleanupRef.current = refEffect(value);
+            }
+        };
+    }, [refEffect]);
+}
+
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
     variants: {
         align: {
@@ -516,8 +580,8 @@ const cvaSpinnerLabel = cvaMerge(["self-center", "text-center", "text-current"])
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {ReactElement} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, "data-testid": dataTestId = "spinner", label, }) => {
-    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, "data-testid": dataTestId = "spinner", label, ref, }) => {
+    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), ref: ref, children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
 };
 
 const cvaButton = cvaMerge([
@@ -1052,16 +1116,19 @@ const cvaAlertIconContainer = cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
-    const ref = useRef(null);
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, ref, }) => {
+    const scrollRef = useRef(null);
+    const mergedRef = useMergeRefs([scrollRef, ref]);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
         if (autoScroll) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            ref.current?.scrollIntoView?.();
+            const element = scrollRef.current;
+            if (element && typeof element.scrollIntoView === "function") {
+                element.scrollIntoView();
+            }
         }
-    }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({
+    }, [autoScroll]);
+    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: mergedRef, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({
                     inline: !isTextWrapping && (children === null || children === undefined),
                     actionsInline,
                 }), children: [jsx("div", { className: cvaAlertIconContainer({
@@ -1176,7 +1243,7 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, "data-testid": dataTestId, }) => {
+const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, "data-testid": dataTestId, ref, }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -1186,7 +1253,7 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
             : count
         : count;
     const isSingleChar = displayedCount?.toString().length === 1;
-    return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
+    return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, children: compact ? null : displayedCount }));
 };
 
 /**
@@ -1390,9 +1457,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, }) => {
+const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, ref, }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
+    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -1416,8 +1483,8 @@ const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) =>
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {ReactElement} StarButton component
  */
-const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
+const StarButton = ({ starred, onClick, ref }) => {
+    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, ref: ref, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
 const cvaCard = cvaMerge([
@@ -1554,9 +1621,10 @@ const ROLE_CARD = "region";
  * @param {CardProps} props - The props for the Card component
  * @returns {ReactElement} Card component
  */
-const Card = forwardRef(function Card({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ...rest }, ref) {
+const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ref, ...rest }) => {
     return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-card": true, "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
-});
+};
+Card.displayName = "Card";
 
 /**
  * The CardBody component should be used to inform the user of important information.
@@ -1566,13 +1634,13 @@ const Card = forwardRef(function Card({ children, onClick, fullHeight = false, o
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, }) => {
+const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, ref, }) => {
     return (jsx("div", { className: cvaCardBodyContainer({
             gap,
             padding,
             className,
             direction,
-        }), "data-card-body": true, "data-testid": dataTestId, id: id, children: children }));
+        }), "data-card-body": true, "data-testid": dataTestId, id: id, ref: ref, children: children }));
 };
 
 /**
@@ -1583,12 +1651,12 @@ const CardBody = ({ children, "data-testid": dataTestId, className, direction =
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, }) => {
+const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, ref, }) => {
     return (jsx("div", { className: cvaCardFooterContainerRoot({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-footer": true, "data-testid": dataTestId, children: jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
+        }), "data-card-footer": true, "data-testid": dataTestId, ref: ref, children: jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -1628,7 +1696,7 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {ReactElement} Heading component
  */
-const Heading = ({ variant = "primary", inverted = false, subtle = false, className, "data-testid": dataTestId, ...rest }) => {
+const Heading = ({ variant = "primary", inverted = false, subtle = false, className, "data-testid": dataTestId, ref, ...rest }) => {
     const semanticType = {
         primary: "h1",
         secondary: "h2",
@@ -1637,6 +1705,7 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
     };
     return createElement(semanticType[variant], {
         ...rest,
+        ref,
         className: cvaHeading({ subtle, inverted, size: variant, className }),
         "data-testid": dataTestId,
     });
@@ -1648,12 +1717,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, ref, }) => {
     return (jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-header": true, "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, ref: ref, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cvaMerge([
@@ -1924,7 +1993,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate = true, extraPadding = true, }) => {
+const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate = true, extraPadding = true, ref, }) => {
     const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = useState(initialExpanded);
     const handleClick = useCallback((e) => {
@@ -1933,7 +2002,7 @@ const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle,
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
+    return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, ref: ref, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
     const { geometry, ref } = useMeasure();
@@ -2065,7 +2134,7 @@ const cvaCopyableText = cvaMerge([
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, className, }) => {
+const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, className, ref, }) => {
     const value = alternativeText ?? text ?? "";
     const [animating, setAnimating] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
@@ -2073,7 +2142,7 @@ const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, classN
         void copyToClipboard(value);
         setAnimating(true);
     };
-    return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
+    return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, ref: ref, title: value, children: text }));
 };
 
 const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
@@ -2095,10 +2164,11 @@ const cvaDetailsListItem = cvaMerge(["last:truncate"]);
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
  * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
+ * @param [props.ref] - Ref forwarded to the root element.
  * @returns {ReactElement} The details list element.
  */
-const DetailsList = ({ details, className, hasLink = false }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, hasLink = false, ref }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), ref: ref, children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
 const VALID_SIZE_KEYS = [
@@ -2240,10 +2310,10 @@ const cvaSkeleton = cvaMerge([
  * For shape-based elements (images, badges, buttons), use SkeletonBlock component instead.
  */
 const SkeletonLabel = memo((props) => {
-    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, } = props;
+    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, ref, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = getHeightValue(textSize);
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, role: "status", style: {
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, ref: ref, role: "status", style: {
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
@@ -2433,8 +2503,8 @@ const cvaExternalLink = cvaMerge(["underline", "decoration-[1.5px]", "underline-
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {ReactElement} External Link component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, "data-testid": dataTestId, onClick, color = "primary", }) => {
-    return (jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, "data-testid": dataTestId, onClick, color = "primary", ref, }) => {
+    return (jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, ref: ref, rel: rel, target: target, title: title, children: children }));
 };
 
 // =============================================================================
@@ -3238,70 +3308,6 @@ const Highlight = ({ className, "data-testid": dataTestId, children, size = "sma
 };
 Highlight.displayName = "Highlight";
 
-// This hook is _heavily_ inspired by floating-ui's useMergeRefs
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- * Useful when you need to attach multiple refs to the same element,
- * such as when composing multiple hooks that each need a ref.
- *
- * @template TInstance - The type of the element instance
- * @param {ReadonlyArray<MergeableRef<TInstance> | undefined>} refs - Array of refs to merge (can be RefObjects, RefCallbacks, or undefined)
- * @returns {null | RefCallback<TInstance>} A single ref callback that will update all provided refs, or null if all refs are null
- * @example
- * ```tsx
- * const { ref: measureRef } = useMeasure();
- * const { ref: scrollRef } = useScrollDetection();
- * const mergedRef = useMergeRefs([measureRef, scrollRef]);
- *
- * return <div ref={mergedRef}>Content</div>;
- * ```
- */
-function useMergeRefs(refs) {
-    const cleanupRef = useRef(undefined);
-    const refsRef = useRef(refs);
-    useEffect(() => {
-        refsRef.current = refs;
-    }, [refs]);
-    const refEffect = useCallback((instance) => {
-        const cleanups = refsRef.current.map(ref => {
-            if (ref === null || ref === undefined) {
-                return;
-            }
-            if (typeof ref === "function") {
-                const refCallback = ref;
-                const refCleanup = refCallback(instance);
-                return typeof refCleanup === "function"
-                    ? refCleanup
-                    : () => {
-                        refCallback(null);
-                    };
-            }
-            ref.current = instance;
-            return () => {
-                ref.current = null;
-            };
-        });
-        return () => {
-            cleanups.forEach(refCleanup => refCleanup?.());
-        };
-    }, []);
-    return useMemo(() => {
-        // eslint-disable-next-line react-hooks/refs
-        if (refsRef.current.every(ref => ref === null)) {
-            return null;
-        }
-        return (value) => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = undefined;
-            }
-            if (value !== null) {
-                cleanupRef.current = refEffect(value);
-            }
-        };
-    }, [refEffect]);
-}
-
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
@@ -3563,8 +3569,8 @@ const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-
  * @param { ZStackProps} props - The props for the  ZStack component
  * @returns {Element}  ZStack component
  */
-const ZStack = ({ children, className, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {
+const ZStack = ({ children, className, "data-testid": dataTestId, ref }) => {
+    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, ref: ref, children: Children.map(children, (child, index) => {
             if (!isValidElement(child)) {
                 return child;
             }
@@ -3635,9 +3641,10 @@ const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, on
  * @param props.className - Optional CSS class name for styling
  * @param props."data-testid" - Optional test ID for testing purposes
  * @param props.onScrollStateChange - Optional callback fired when scroll state changes
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} A horizontal overflow scroller component with visual indicators
  */
-const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, }) => {
+const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, ref, }) => {
     const childrenArray = Children.toArray(children);
     const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
     const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
@@ -3650,7 +3657,7 @@ const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, chil
             })
             : undefined,
     });
-    const mergedRef = useMergeRefs([measureRef, scrollRef]);
+    const mergedRef = useMergeRefs([measureRef, scrollRef, ref]);
     const handleScrollLeft = () => {
         if (!element || containerGeometry?.width === undefined)
             return;
@@ -4316,8 +4323,8 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ...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, ...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] }) }));
+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] }) }));
 };
 
 /**
@@ -4449,20 +4456,20 @@ const cvaKPITrendPercentage = cvaMerge([""], {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ...rest }) => {
+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, 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, { 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] }) })] }) }));
 };
 
 /**
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
  */
-const KPISkeleton = ({ variant = "default", className, "data-testid": dataTestId, style, ...rest }) => {
+const KPISkeleton = ({ variant = "default", className, "data-testid": dataTestId, style, ref, ...rest }) => {
     const isSmallVariant = variant === "small";
     // Generate stable random widths once and never change them
     const [titleWidth, valueWidth] = useRandomCSSLengths({ count: 2, min: 60, max: 100 });
-    return (jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsx("div", { className: twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-sm", width: titleWidth }) }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap", "flex h-7 flex-row items-center"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-lg", width: valueWidth }) })] }));
+    return (jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: [jsx("div", { className: twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-sm", width: titleWidth }) }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap", "flex h-7 flex-row items-center"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-lg", width: valueWidth }) })] }));
 };
 
 /**
@@ -4471,8 +4478,8 @@ const KPISkeleton = ({ variant = "default", className, "data-testid": dataTestId
  * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
  * @returns {ReactElement} TrendIndicator component
  */
-const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, }) => {
-    return (jsxs("div", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: [value !== undefined ? (jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxs("div", { className: "flex items-center", children: [icon ? (jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
+const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, ref, }) => {
+    return (jsxs("div", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: [value !== undefined ? (jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxs("div", { className: "flex items-center", children: [icon ? (jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
 };
 
 /**
@@ -4481,8 +4488,8 @@ const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefin
  * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
  * @returns {ReactElement} TrendIndicators component
  */
-const TrendIndicators = ({ trends, "data-testid": dataTestId, className, }) => {
-    return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
+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 cvaValueBar = cvaMerge([
@@ -4591,11 +4598,11 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {ReactElement} ValueBar component
  */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, ref, }) => {
     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, 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: "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] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -4684,13 +4691,13 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", notice, valueBar, trends, unit, ...rest }) => {
+const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", notice, valueBar, trends, unit, ref, ...rest }) => {
     const isClickable = Boolean(onClick !== undefined);
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (
                 // NOTE: Can't use Notice component here due to the non-flexible text styling options
                 jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
 };
@@ -4705,10 +4712,10 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
  * For multiple text lines, use SkeletonLines component instead.
  */
 const SkeletonBlock = memo((props) => {
-    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children, ref, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = typeof height === "number" ? `${height}px` : height;
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, ref: ref, role: "status", style: {
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
@@ -4720,8 +4727,8 @@ SkeletonBlock.displayName = "SkeletonBlock";
  * Skeleton loading indicator that mimics the KPICard component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPICard.
  */
-const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = false, hasNotice = false, children, className, "data-testid": dataTestId, style, ...rest }) => {
-    return (jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, style: style, ...rest, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
+const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = false, hasNotice = false, children, className, "data-testid": dataTestId, style, ref, ...rest }) => {
+    return (jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
@@ -5523,7 +5530,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-neutral-400", "text-sm", "flex", "item
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, "data-testid": dataTestId, label, children, selected = false, focused = false, prefix, suffix, disabled = false, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", }) => {
+const MenuItem = ({ className, "data-testid": dataTestId, label, children, selected = false, focused = false, prefix, suffix, disabled = false, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", ref, }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick !== undefined && disabled !== true) {
@@ -5546,7 +5553,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, ref: ref, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -5605,7 +5612,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
+const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ref, ...args }) => {
     const childrenArr = Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
@@ -5622,7 +5629,7 @@ const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = fa
             setInternalSelectedItems(newSelectedItems);
         }
     }, [isMulti, selectedItems, onSelectionChange]);
-    return (jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
+    return (jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, ref: ref, role: "list", tabIndex: 0, children: jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
                 if (isValidElement(menuItem)) {
                     const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
                     return cloneElement(menuItem, {
@@ -5662,9 +5669,10 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     size: "medium",
     square: true,
     variant: "secondary",
-}, customButton, customPortalId, children, }) => {
+}, customButton, customPortalId, children, ref, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    const mergedRef = useMergeRefs([actionMenuRef, ref]);
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: mergedRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -5712,8 +5720,8 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @param {NoticeProps} props - The props for the Notice component
  * @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", ...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, ...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 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] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -5745,8 +5753,8 @@ const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-r
 /**
  * Renders the page component. Adds padding and layout to the page.
  */
-const Page = ({ layout, className, children, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", children: children }));
+const Page = ({ layout, className, children, "data-testid": dataTestId, ref }) => {
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", ref: ref, children: children }));
 };
 
 /**
@@ -5756,8 +5764,8 @@ const Page = ({ layout, className, children, "data-testid": dataTestId }) => {
  * @param {PageContentProps} props - The component props.
  * @returns {ReactNode} - The rendered component.
  */
-const PageContent = ({ className, children, "data-testid": dataTestId, layout, }) => {
-    return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
+const PageContent = ({ className, children, "data-testid": dataTestId, layout, ref, }) => {
+    return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", ref: ref, children: children }));
 };
 
 /**
@@ -5865,7 +5873,7 @@ cvaMerge([
  * <SkeletonLines variant="preset" preset="title-paragraph" />
  */
 const SkeletonLines = memo((props) => {
-    const { className, "data-testid": dataTestId } = props;
+    const { className, "data-testid": dataTestId, ref } = props;
     // Generate line configs based on variant
     let lineConfigs;
     if (props.variant === "preset") {
@@ -5886,7 +5894,7 @@ const SkeletonLines = memo((props) => {
         }));
     }
     const lineCount = lineConfigs.length;
-    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
+    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, ref: ref, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
 });
 SkeletonLines.displayName = "SkeletonLines";
 
@@ -5899,16 +5907,17 @@ const LoadingContent = () => (jsx("div", { className: "flex flex-row items-cente
  *
  * @param {object} props - The props for the PageHeaderKpiMetrics component
  * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderKpiMetrics component
  */
-const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
-    return (jsx("div", { className: "hidden items-center gap-4 md:flex", children: kpiMetrics
+const PageHeaderKpiMetrics = ({ kpiMetrics, ref, }) => {
+    return (jsx("div", { className: "hidden items-center gap-4 md:flex", ref: ref, children: kpiMetrics
             .filter(kpi => kpi.hidden === false || kpi.hidden === undefined)
             .map((kpi, index) => {
             if (kpi.loading === true) {
                 return jsx(LoadingContent, {}, `${kpi}-${index}`);
             }
-            return (jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsx("span", { className: "text-xs text-neutral-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-neutral-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-neutral-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
+            return (jsxs("div", { className: "text-nowrap flex flex-col text-left", children: [jsx("span", { className: "text-xs text-neutral-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-neutral-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-neutral-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
         }) }));
 };
 
@@ -6044,11 +6053,12 @@ const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semi
  * @param {string} props.title - The title of the page header
  * @param {string} props.className - The class name of the page header title
  * @param {string} [props."data-testid"] - The data test id of the page header title
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderTitle component
  */
-const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, }) => {
+const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
     const { ref, isTextTruncated } = useIsTextTruncated();
-    return (jsx("div", { className: "flex flex-row items-center", children: jsx(Tooltip, { asChild: false, className: "grid min-w-16", 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, { 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 }) }) }));
 };
 
 /**
@@ -6100,7 +6110,7 @@ const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, }) => {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, ...discriminatedProps }) => {
+const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, ref, ...discriminatedProps }) => {
     const tagRenderer = useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -6111,7 +6121,7 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, 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, { asChild: false, "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" &&
@@ -6130,7 +6140,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPage = false, pageCount, pageIndex, loading = false, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase = false, }) => {
+const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPage = false, pageCount, pageIndex, loading = false, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase = false, ref, }) => {
     const [page, setPage] = useState(pageIndex);
     const [currentPage, setCurrentPage] = useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
@@ -6173,9 +6183,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
         onPageChange?.({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
-        return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLabel, { textSize: "text-sm", width: 150 }) }));
+        return (jsx("div", { className: cvaPagination({ className }), ref: ref, children: jsx(SkeletonLabel, { textSize: "text-sm", width: 150 }) }));
     }
-    return (jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": "prev-page", disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), onClick: () => handlePageChange("prev"), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxs(Fragment$1, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { "data-testid": "next-page", disabled: cursorBase
+    return (jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, ref: ref, children: [jsx(IconButton, { "data-testid": "prev-page", disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), onClick: () => handlePageChange("prev"), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxs(Fragment$1, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { "data-testid": "next-page", disabled: cursorBase
                     ? !canNextPage || false
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, icon: jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
@@ -6187,7 +6197,7 @@ const STROKE_WIDTH_THRESHOLD = 32;
  * @param { PolygonProps} props - The props for the  Polygon component
  * @returns {ReactElement}  Polygon component
  */
-const Polygon = ({ points, size, color = "black", opaque = true, className, "data-testid": dataTestId, }) => {
+const Polygon = ({ points, size, color = "black", opaque = true, className, "data-testid": dataTestId, ref, }) => {
     // Calculate the bounds of the points
     const minX = Math.min(...points.map(coord => coord[0]));
     const maxX = Math.max(...points.map(coord => coord[0]));
@@ -6204,7 +6214,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, "dat
         size: sizeToNormalizeAgainst,
     })}`)
         .join(" ");
-    return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
+    return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, ref: ref, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
                 fill: color,
                 fillOpacity: opaque ? 0.2 : undefined,
                 stroke: color,
@@ -6220,8 +6230,8 @@ const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) *
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, }) => {
-    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
+const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, ref, }) => {
+    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, ref: ref, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
 const cvaPreferenceCard = cvaMerge([
@@ -6363,8 +6373,9 @@ const preferenceCardGrid = createGrid()
  * with various states and visual treatments.
  * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
  */
-const PreferenceCard = ({ title, description, icon, input, titleTag, cardTag, disabled = false, className, "data-testid": dataTestId, children, }) => {
-    const { ref, geometry } = useMeasure();
+const PreferenceCard = ({ title, description, icon, input, titleTag, cardTag, disabled = false, className, "data-testid": dataTestId, children, ref: forwardedRef, }) => {
+    const { ref: measureRef, geometry } = useMeasure();
+    const ref = useMergeRefs([measureRef, forwardedRef]);
     const gridAreas = useGridAreas(preferenceCardGrid);
     return (jsxs("div", { className: cvaPreferenceCard({
             disabled,
@@ -6413,7 +6424,7 @@ const getRandomWidth = (min, max) => {
  * Skeleton loading indicator that mimics the PreferenceCard component structure.
  * Uses the same grid layout, spacing, and visual hierarchy as PreferenceCard.
  */
-const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasIcon, hasTitleTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasTitleTag, hasCardTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasCardTag, hasInput = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasInput, }) => {
+const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasIcon, hasTitleTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasTitleTag, hasCardTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasCardTag, hasInput = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasInput, ref, }) => {
     const gridAreas = useGridAreas(preferenceCardGrid);
     // Generate stable random widths once and never change them
     const lineWidths = useMemo(() => {
@@ -6422,7 +6433,7 @@ const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PRO
             description: getRandomWidth(160, 240),
         };
     }, []);
-    return (jsxs("div", { className: cvaPreferenceCard(), children: [hasInput ? (jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsx(SkeletonBlock, { height: 20, width: 20 }) })) : null, jsx("div", { className: cvaContentWrapper(), children: jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxs(Fragment$1, { children: [hasIcon ? (jsx("div", { ...slots.icon, children: jsx(SkeletonBlock, { className: cvaIconBackground({ disabled: false }), height: 32, width: 32 }) })) : null, jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }), hasTitleTag ? jsx(TagSkeleton, { size: "small" }) : null] }) }), jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
+    return (jsxs("div", { className: cvaPreferenceCard(), ref: ref, children: [hasInput ? (jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsx(SkeletonBlock, { height: 20, width: 20 }) })) : null, jsx("div", { className: cvaContentWrapper(), children: jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxs(Fragment$1, { children: [hasIcon ? (jsx("div", { ...slots.icon, children: jsx(SkeletonBlock, { className: cvaIconBackground({ disabled: false }), height: 32, width: 32 }) })) : null, jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }), hasTitleTag ? jsx(TagSkeleton, { size: "small" }) : null] }) }), jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
 };
 /**
  * Simple tag skeleton for use within PreferenceCardSkeleton.
@@ -6510,8 +6521,8 @@ const cvaSpacer = cvaMerge([], {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, className, }) => {
-    return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
+const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, className, ref, }) => {
+    return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId, ref: ref });
 };
 
 /**
@@ -6520,8 +6531,8 @@ const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, cl
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {ReactElement} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, "data-testid": dataTestId, addons, }) => {
-    return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { "data-testid": dataTestId, variant: "secondary", children: title }), subtitle ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons !== null && addons !== undefined ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
+const SectionHeader = ({ title, subtitle, "data-testid": dataTestId, addons, ref, }) => {
+    return (jsxs("div", { className: "flex flex-col", ref: ref, children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { "data-testid": dataTestId, variant: "secondary", children: title }), subtitle ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons !== null && addons !== undefined ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -6624,7 +6635,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */
-const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, "data-testid": dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, "data-testid": dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, ref, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -6637,7 +6648,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: Children.map(children, child => {
+    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: Children.map(children, child => {
                     return cloneElement(child, {
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
@@ -6707,13 +6718,13 @@ const cvaTab = cvaMerge([
  * Wrapper for radix tab component.
  * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid": dataTestId, className, children, suffix, asChild = false, appendTabStylesToChildIfAsChild = true, ...rest }) => {
+const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid": dataTestId, className, children, suffix, asChild = false, appendTabStylesToChildIfAsChild = true, ref, ...rest }) => {
     const renderContent = () => (jsxs(Fragment$1, { children: [iconName !== undefined ? jsx(Icon, { name: iconName, size: "small" }) : null, isValidElement(children) ? children.props.children : children, suffix] }));
     const commonProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
     };
-    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (cloneElement(children, {
+    return (jsx(Trigger, { asChild: true, ref: ref, value: value, children: asChild && typeof children !== "string" ? (cloneElement(children, {
             ...commonProps,
             children: renderContent(),
         })) : (jsx("button", { ...commonProps, "data-testid": dataTestId, children: renderContent() })) }));
@@ -6722,15 +6733,16 @@ const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid":
 /**
  * Wrapper for radix tab content component.
  */
-const TabContent = ({ className, "data-testid": dataTestId, children, ...rest }) => {
-    return (jsx(Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ...rest, children: children }));
+const TabContent = ({ className, "data-testid": dataTestId, children, ref, ...rest }) => {
+    return (jsx(Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ref: ref, ...rest, children: children }));
 };
 
 /**
  * Wrapper for radix tab list component.
  */
-const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToActive = true, ...rest }) => {
+const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToActive = true, ref, ...rest }) => {
     const listRef = useRef(null);
+    const mergedRef = useMergeRefs([listRef, ref]);
     useEffect(() => {
         const element = listRef.current;
         if (!element) {
@@ -6769,7 +6781,7 @@ const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToA
             });
         }
     }, [autoScrollToActive]);
-    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: listRef, ...rest, children: children }));
+    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: mergedRef, ...rest, children: children }));
 };
 
 /**
@@ -6808,8 +6820,8 @@ const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToA
  * );
  * ```
  */
-const Tabs = ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ...rest }) => {
-    return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
+const Tabs = ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ref, ...rest }) => {
+    return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 
 const cvaToggleGroup = cvaMerge(["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"]);
@@ -6932,7 +6944,7 @@ const cvaToggleItemContent = cvaMerge([], {
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
  * @returns {ReactElement} ToggleGroup component
  */
-const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, "data-testid": dataTestId, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, "data-testid": dataTestId, ref, }) => {
     const [isMounted, setIsMounted] = useState(false);
     const [slidingLeft, setSlidingLeft] = useState(0);
     const [slidingWidth, setSlidingWidth] = useState(0);
@@ -6948,12 +6960,12 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         const containerPadding = 2; // p-0.5 = 2px
         const gap = 4;
         const left = containerPadding +
-            buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth ?? 0) + gap, 0);
+            buttonRefs.current.slice(0, validIndex).reduce((sum, btnRef) => sum + (btnRef?.offsetWidth ?? 0) + gap, 0);
         const width = buttonRefs.current[validIndex]?.offsetWidth ?? 0;
         setSlidingLeft(left);
         setSlidingWidth(width);
     }, [validIndex]);
-    return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, style: 
+    return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
         // eslint-disable-next-line local-rules/no-typescript-assertion
         {
             "--sliding-left": `${slidingLeft}px`,