@trackunit/react-components 1.10.48 → 1.10.51

package/index.esm.js

@@ -132,7 +132,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, 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, forwardedRef, ariaLabel, fontSize = false, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = uuidv4();
     const correctIconType = useMemo(() => {
@@ -244,7 +244,7 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
     const isSupportedDismissColor = useMemo(() => {
         if (color === "neutral" || color === "primary" || color === "white" || color === "info") {
             return true;
@@ -262,7 +262,7 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
     }, [onClose, isSupportedDismissColor, disabled, icon]);
     return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), children: icon })) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 Tag.displayName = "Tag";
 
@@ -379,7 +379,7 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  * @param {TextProps} props - The props for the Text component
  * @returns {ReactElement} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ref, ...rest }) => {
+const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, "data-testid": dataTestId, ref, ...rest }) => {
     return createElement(type, {
         ref,
         className: cvaText({
@@ -451,7 +451,7 @@ 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, dataTestId = "spinner", label, }) => {
+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] }) }));
 };
 
@@ -738,7 +738,7 @@ const cvaIconButton = cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {ReactElement} Button component
  */
-const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, ref, ...rest }) => {
+const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, "data-testid": dataTestId, title, role, tabIndex, asChild = false, ref, ...rest }) => {
     const Comp = asChild ? Slot : "button";
     const sharedCompProps = {
         ref,
@@ -868,7 +868,7 @@ 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, onClose, dataTestId, autoScroll = false, actionsInline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
     const ref = useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
@@ -883,7 +883,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 }), children: [jsx("div", { className: cvaAlertIconContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
-                        }), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose !== undefined && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
+                        }), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { "data-testid": `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose !== undefined && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
                         }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose !== undefined && actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
@@ -969,7 +969,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, dataTestId, }) => {
+const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, "data-testid": dataTestId, }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -2155,7 +2155,7 @@ const cvaBreadcrumbForMediumScreen = cvaMerge(["flex"], {
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
-const BreadcrumbItem = ({ item, dataTestId }) => {
+const BreadcrumbItem = ({ item, "data-testid": dataTestId }) => {
     const id = uuidv4();
     return (jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
 };
@@ -2163,18 +2163,18 @@ const BreadcrumbItem = ({ item, dataTestId }) => {
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
-const BreadcrumbForLargeScreen = ({ dataTestId, breadcrumbItems }) => {
-    return (jsx("div", { className: cvaBreadcrumbForLargeScreen(), "data-testid": dataTestId, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { dataTestId: `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
+const BreadcrumbForLargeScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
+    return (jsx("div", { className: cvaBreadcrumbForLargeScreen(), "data-testid": dataTestId, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
 /**
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
-const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
+const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
     const [expanded, setExpanded] = useState(false);
     const getReducedArray = useCallback(() => {
         let reducedArrayElements = [];
-        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
+        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
         if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
             const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
@@ -2183,15 +2183,15 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
         return reducedArrayElements;
     }, [breadcrumbItems, dataTestId]);
     const reducedArray = getReducedArray();
-    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
+    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
 };
 
 /**
  * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
  */
-const BreadcrumbForSmallScreen = ({ dataTestId, breadcrumbItems }) => {
+const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
     const lastBreadcrumbItem = breadcrumbItems.slice(-1);
-    return (jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
+    return (jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
 /**
@@ -2221,24 +2221,24 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
+const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, back, }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { dataTestId: `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, dataTestId: dataTestId }) })] }));
+    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, 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.
  *
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
-const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
+const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
     const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
     if (isSmallScreen) {
-        return jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `smallScreen-${dataTestId}` });
+        return jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` });
     }
     if (isMediumScreen) {
-        return jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `mediumScreen-${dataTestId}` });
+        return jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` });
     }
-    return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `largeScreen-${dataTestId}` });
+    return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
 };
 
 const cvaCard = cvaMerge([
@@ -2348,7 +2348,7 @@ 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, dataTestId, ...rest }, ref) {
+const Card = forwardRef(function Card({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ...rest }, ref) {
     return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
 });
 
@@ -2360,7 +2360,7 @@ 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 = ({ density = "auto", children, dataTestId, className, direction = "column", disableGap = false, id, }) => {
+const CardBody = ({ density = "auto", children, "data-testid": dataTestId, className, direction = "column", disableGap = false, id, }) => {
     return (jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
@@ -2372,7 +2372,7 @@ const CardBody = ({ density = "auto", children, dataTestId, className, direction
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-const CardFooter = ({ dataTestId, className, children, density = "auto", hideSeparator = false, }) => {
+const CardFooter = ({ "data-testid": dataTestId, className, children, density = "auto", hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardFooterDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
@@ -2417,7 +2417,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, dataTestId, ...rest }) => {
+const Heading = ({ variant = "primary", inverted = false, subtle = false, className, "data-testid": dataTestId, ...rest }) => {
     const semanticType = {
         primary: "h1",
         secondary: "h2",
@@ -2437,12 +2437,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, onClose, dataTestId, className, children, accessories, actions, density = "auto", hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, density = "auto", hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), "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, onClose ? (jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "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, onClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaCollapse = cvaMerge(["flex", "flex-col", "overflow-hidden"], {
@@ -2588,7 +2588,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, 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, }) => {
     const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = useState(initialExpanded);
     const handleClick = useCallback((e) => {
@@ -2661,7 +2661,7 @@ const cvaCopyableText = cvaMerge([
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
+const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, className, }) => {
     const value = alternativeText ?? text ?? "";
     const [animating, setAnimating] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
@@ -2746,7 +2746,7 @@ const cvaSkeletonLine = cvaMerge([
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
  * All width values are automatically constrained using CSS min() function to prevent overflow.
  */
-const SkeletonLines = memo(({ lines = 1, height = "0.75rem", width = "100%", gap = 10, maxWidth = "100%", className, dataTestId, }) => {
+const SkeletonLines = memo(({ lines = 1, height = "0.75rem", width = "100%", gap = 10, maxWidth = "100%", className, "data-testid": dataTestId, }) => {
     const gapStyle = typeof gap === "number" ? `${gap}px` : gap;
     return (jsx("div", { "aria-label": `Loading ${lines} ${lines === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, role: "status", style: { gap: gapStyle }, children: Array.from({ length: lines }, (_, index) => (jsx("div", { className: cvaSkeletonLine(), "data-testid": dataTestId ? `${dataTestId}-${index}` : `skeleton-lines-${index}`, "data-type": "loading-skeleton-line", style: {
                 width: getDimension({ dimension: width, index, direction: "width", maxWidth }),
@@ -2843,7 +2843,7 @@ WorkerWithSignSVG.displayName = "WorkerWithSignSVG";
  * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
  * - In celebratory instances (e.g., no new notifications, services up to date).
  */
-const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customImageSrc, loading = false, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
+const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customImageSrc, loading = false, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
     const ImageSource = useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -2861,7 +2861,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return SearchDocumentSVG;
         }
     }, [image]);
-    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxs(Fragment$1, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment$1, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
+    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxs(Fragment$1, { children: [jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsx(SkeletonLines, { "data-testid": "skeleton-lines", width: 50 })] })) : (jsxs(Fragment$1, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
@@ -2872,7 +2872,7 @@ const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
  * @param {EmptyValueProps} props - The props for the EmptyValue component
  * @returns {ReactElement} EmptyValue component
  */
-const EmptyValue = ({ className, dataTestId }) => {
+const EmptyValue = ({ className, "data-testid": dataTestId }) => {
     return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
 };
 
@@ -2913,7 +2913,7 @@ 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, dataTestId, onClick, color = "primary", }) => {
+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 }));
 };
 
@@ -2964,7 +2964,7 @@ const cvaHighlightText = cvaMerge(["truncate"]);
  * @param {HighlightProps} props - The props for the highlight component
  * @returns {ReactElement} highlight component
  */
-const Highlight = ({ className, dataTestId, children, size = "small", color = "warning", ref, }) => {
+const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", ref, }) => {
     return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
@@ -2979,7 +2979,7 @@ 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, dataTestId }) => {
+const ZStack = ({ children, className, "data-testid": dataTestId }) => {
     return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {
             if (!isValidElement(child)) {
                 return child;
@@ -3037,9 +3037,9 @@ const cvaOverflowIndicatorButton = cvaMerge([
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, }) => {
+const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, }) => {
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), dataTestId: dataTestId, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
+    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
 };
 
 /**
@@ -3049,11 +3049,11 @@ const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, })
  * @param props - Component properties
  * @param props.children - The content to display in the horizontal scroller
  * @param props.className - Optional CSS class name for styling
- * @param props.dataTestId - Optional test ID for testing purposes
+ * @param props."data-testid" - Optional test ID for testing purposes
  * @param props.onScrollStateChange - Optional callback fired when scroll state changes
  * @returns {ReactElement} A horizontal overflow scroller component with visual indicators
  */
-const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollStateChange, }) => {
+const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, }) => {
     const childrenArray = Children.toArray(children);
     const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
     const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
@@ -3083,7 +3083,7 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             behavior: "smooth",
         });
     };
-    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const PADDING = 12;
@@ -3361,10 +3361,10 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
+const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs$1([context.refs.setFloating, propRef]);
-    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps.dataTestId ?? "popover-content", ref: ref, style: {
+    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -3379,7 +3379,7 @@ const PopoverContent = function PopoverContent({ className, dataTestId, children
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-const PopoverTitle = ({ children, action, divider = false, className, dataTestId, }) => {
+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] }));
 };
 
@@ -3478,7 +3478,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, dataTestId, disabled = false, className, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, className, label, placement = "auto", mode = "dark", iconProps, id, style, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -3511,7 +3511,7 @@ const Tooltip = ({ children, dataTestId, disabled = false, className, label, pla
         }
         setIsOpen(false);
     }, [disabled]);
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: 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, { dataTestId: 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, { dataTestId: `${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 (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] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -3644,7 +3644,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ...rest }) => {
+const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ...rest }) => {
     return (jsx(Tooltip, { 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] }) }));
 };
 
@@ -3705,9 +3705,9 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading = false, unit, className, dataTestId, tooltipLabel, variant = "default", trend, style, ...rest }) => {
+const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", trend, style, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", style: style, children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment$1, { children: [jsx("div", { className: cvaKPIHeader(), children: jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
+    return (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", style: style, children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment$1, { children: [jsx("div", { className: cvaKPIHeader(), children: jsx(Text, { className: cvaKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsx(Text, { className: cvaKPIvalueText({ variant }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
                                 isDefaultAndHasTrendValue: Boolean(trend !== undefined && trend.value !== undefined && !isSmallVariant),
                                 className,
                             }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
@@ -3716,7 +3716,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
         return null;
     }
-    return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value !== undefined ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant !== undefined && trend.variant.icon !== undefined ? (jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" })) : null, trend.percentage !== undefined ? (jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+    return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value !== undefined ? (jsxs(Text, { "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant !== undefined && trend.variant.icon !== undefined ? (jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" })) : null, trend.percentage !== undefined ? (jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -3765,13 +3765,13 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "p
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive = false, onClick, className, dataTestId, children, iconName = undefined, iconColor = "info", loading = false, ...rest }) => {
+const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, ...rest }) => {
     const isClickable = Boolean(onClick !== undefined && loading !== true);
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
@@ -3944,7 +3944,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, dataTestId, 
+const List = ({ children, className, "data-testid": dataTestId, 
 // UseListResult properties
 containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
 // Unused but part of UseListResult interface (can be used from parent)
@@ -4356,18 +4356,18 @@ const cvaInteractableItem = cvaMerge("", {
  * @param { ListItemProps} props - The props for the ListItem component
  * @returns {Element}  ListItem component
  */
-const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
+const ListItem = ({ className, "data-testid": dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
     const baseClass = cvaListItem({ className });
     const interactableItemClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
     return (jsxs("li", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, ...rest, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsx("div", { className: cvaThumbnailContainer({
                             className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
-                        }), children: thumbnail })) : null, jsxs("div", { className: "grid-rows-min-fr grid items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center text-sm", children: typeof title === "string" ? (jsx(Text, { className: "truncate", dataTestId: dataTestId ? `${dataTestId}-title` : undefined, weight: "bold", children: title })) : (cloneElement(title, {
+                        }), children: thumbnail })) : null, jsxs("div", { className: "grid-rows-min-fr grid items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center text-sm", children: typeof title === "string" ? (jsx(Text, { className: "truncate", "data-testid": dataTestId ? `${dataTestId}-title` : undefined, weight: "bold", children: title })) : (cloneElement(title, {
                                     className: twMerge(title.props.className, "neutral-900 text-sm font-medium truncate"),
-                                    dataTestId: !title.props.dataTestId && dataTestId ? `${dataTestId}-title` : undefined,
-                                })) }), description !== undefined && description !== "" ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsx(Text, { className: "truncate text-xs text-neutral-500", dataTestId: dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (cloneElement(description, {
+                                    "data-testid": !title.props["data-testid"] && dataTestId ? `${dataTestId}-title` : undefined,
+                                })) }), description !== undefined && description !== "" ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsx(Text, { className: "truncate text-xs text-neutral-500", "data-testid": dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (cloneElement(description, {
                                     className: twMerge(description.props.className, "text-neutral-500 text-xs font-medium truncate"),
-                                    dataTestId: !description.props.dataTestId && dataTestId ? `${dataTestId}-description` : undefined,
-                                })) })) : null, meta ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxs("div", { className: "flex items-center gap-0.5 text-nowrap pl-2", children: [details, onClick ? jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
+                                    "data-testid": !description.props["data-testid"] && dataTestId ? `${dataTestId}-description` : undefined,
+                                })) })) : null, meta ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsx(Text, { className: "truncate text-xs text-neutral-400", "data-testid": dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxs("div", { className: "flex items-center gap-0.5 text-nowrap pl-2", children: [details, onClick ? jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
 };
 
 // These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
@@ -4537,7 +4537,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, 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", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick !== undefined && disabled !== true) {
@@ -4574,7 +4574,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected = false, fo
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-const MenuList = ({ dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
+const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
@@ -4624,7 +4624,7 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {ReactElement} MoreMenu component
  */
-const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
+const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProps = {
     size: "medium",
     className: "text-neutral-400",
 }, iconButtonProps = {
@@ -4633,7 +4633,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     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, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    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 cvaNotice = cvaMerge(["flex", "items-center"]);
@@ -4681,7 +4681,7 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {ReactElement} Notice component
  */
-const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
+const Notice = ({ "data-testid": dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
     return (jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
@@ -4714,7 +4714,7 @@ 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, dataTestId }) => {
+const Page = ({ layout, className, children, "data-testid": dataTestId }) => {
     return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", children: children }));
 };
 
@@ -4725,7 +4725,7 @@ const Page = ({ layout, className, children, dataTestId }) => {
  * @param {PageContentProps} props - The component props.
  * @returns {ReactNode} - The rendered component.
  */
-const PageContent = ({ className, children, dataTestId, layout }) => {
+const PageContent = ({ className, children, "data-testid": dataTestId, layout, }) => {
     return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
@@ -4755,13 +4755,13 @@ const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
  * @returns {ReactElement} ActionRenderer component
  */
 function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
-    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, dataTestId, target, variant } = action;
+    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, "data-testid": dataTestId, target, variant, } = action;
     // This component handles all the "wrapping" logic for Link/Tooltip
     // The "content" is either a Button or a MenuItem, depending on `isMenuItem`
-    const content = isMenuItem ? (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: actionText, onClick: e => {
+    const content = isMenuItem ? (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, label: actionText, onClick: e => {
             actionCallback?.(e);
             externalOnClick?.();
-        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "medium" }) : null, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsx(Button, { dataTestId: dataTestId, disabled: disabled, onClick: e => {
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "medium" }) : null, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsx(Button, { "data-testid": dataTestId, disabled: disabled, onClick: e => {
             actionCallback?.(e);
             externalOnClick?.();
         }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
@@ -4796,7 +4796,7 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupAc
                 return [danger, [...others, action]];
             }
         }, [[], []]);
-        return (jsx(MoreMenu, { dataTestId: "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+        return (jsx(MoreMenu, { "data-testid": "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
     }
     // Otherwise, render them inline as buttons
     return (jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
@@ -4828,12 +4828,13 @@ const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semi
  *
  * @param {object} props - The props for the PageHeaderTitle component
  * @param {string} props.title - The title of the page header
- * @param {string} [props.dataTestId] - The data test id of the page header title
+ * @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
  * @returns {ReactElement} PageHeaderTitle component
  */
-const PageHeaderTitle = ({ title, dataTestId }) => {
+const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, }) => {
     const { ref, isTextTruncated } = useIsTextTruncated();
-    return (jsx("div", { className: "flex flex-row items-center", children: jsx(Tooltip, { className: "grid min-w-16", disabled: !isTextTruncated, label: title, placement: "top", children: jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
+    return (jsx("div", { className: "flex flex-row items-center", children: jsx(Tooltip, { 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 }) }) }));
 };
 
 /**
@@ -4846,25 +4847,25 @@ const PageHeaderTitle = ({ title, dataTestId }) => {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-const PageHeader = ({ className, 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, ...discriminatedProps }) => {
     const tagRenderer = useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             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, { dataTestId: "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, dataTestId: "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, 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, { dataTestId: 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, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "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, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
-                                    dataTestId: "page-header-description-icon",
+                                    "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, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
-                                    discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: discriminatedProps.primaryAction.dataTestId, 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] }));
+                                    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] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -4876,7 +4877,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, 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, }) => {
     const [page, setPage] = useState(pageIndex);
     const [currentPage, setCurrentPage] = useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
@@ -4933,7 +4934,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, dataTestId, }) => {
+const Polygon = ({ points, size, color = "black", opaque = true, className, "data-testid": dataTestId, }) => {
     // Calculate the bounds of the points
     const minX = Math.min(...points.map(coord => coord[0]));
     const maxX = Math.max(...points.map(coord => coord[0]));
@@ -5025,7 +5026,7 @@ const cvaSpacer = cvaMerge([], {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
+const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, className, }) => {
     return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
 };
 
@@ -5035,8 +5036,8 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {ReactElement} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, 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, { dataTestId: 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, }) => {
+    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 cvaSidebar = cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -5118,7 +5119,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, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, "data-testid": dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -5137,7 +5138,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
                     variant: "ghost-neutral",
-                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: `${dataTestId}-more-menu`, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: Children.map(children, child => {
+                }, ...moreMenuProps, className: moreMenuProps?.className, "data-testid": `${dataTestId}-more-menu`, children: close => (jsx(MenuList, { ...menuListProps, "data-testid": dataTestId, children: Children.map(children, child => {
                         return itemOverflowMap[child.props.id] === true
                             ? cloneElement(child, {
                                 onClick: () => {
@@ -5201,7 +5202,7 @@ 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, 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, ...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,
@@ -5216,14 +5217,14 @@ const Tab = ({ value, isFullWidth = false, iconName = undefined, dataTestId, cla
 /**
  * Wrapper for radix tab content component.
  */
-const TabContent = ({ className, dataTestId, children, ...rest }) => {
+const TabContent = ({ className, "data-testid": dataTestId, children, ...rest }) => {
     return (jsx(Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ...rest, children: children }));
 };
 
 /**
  * Wrapper for radix tab list component.
  */
-const TabList = ({ className, dataTestId, children, autoScrollToActive = true, ...rest }) => {
+const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToActive = true, ...rest }) => {
     const listRef = useRef(null);
     useEffect(() => {
         const element = listRef.current;
@@ -5269,7 +5270,7 @@ const TabList = ({ className, dataTestId, children, autoScrollToActive = true, .
 /**
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
-const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest }) => {
+const Tabs = ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ...rest }) => {
     return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
@@ -5393,7 +5394,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, dataTestId, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, "data-testid": dataTestId, }) => {
     const [isMounted, setIsMounted] = useState(false);
     const [slidingLeft, setSlidingLeft] = useState(0);
     const [slidingWidth, setSlidingWidth] = useState(0);
@@ -5420,23 +5421,23 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
             "--sliding-left": `${slidingLeft}px`,
             "--sliding-width": `${slidingWidth}px`,
             "--transition-duration": "200ms",
-        }, children: list.map((item, index) => (jsx(ToggleItem, { className: item.className, dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+        }, children: list.map((item, index) => (jsx(ToggleItem, { className: item.className, "data-testid": item["data-testid"], disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
             }, 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, size, className, selected, text, tooltip, dataTestId, ref, }) => {
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
     return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
-            }), dataTestId: 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({
+            }), "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,
-            }), dataTestId: dataTestId, disabled: disabled, iconPrefix: 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, children: jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
+            }), "data-testid": dataTestId, disabled: disabled, iconPrefix: 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, children: jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
 };
-const ToggleButton = ({ title, size, children, dataTestId, className, icon, iconPrefix, isIconOnly, ...rest }) => {
+const ToggleButton = ({ title, size, children, "data-testid": dataTestId, className, icon, iconPrefix, isIconOnly, ...rest }) => {
     const sizeClasses = {
         small: "px-2 py-1 text-xs",
         medium: "px-2 py-1 text-sm",
@@ -5557,11 +5558,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, dataTestId, zeroScoreAllowed = false, }) => {
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, }) => {
     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 }), dataTestId: 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, 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 cvaClickable = cvaMerge([