@trackunit/react-components 1.9.8 → 1.9.9

package/index.esm.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, forwardRef, Fragment as Fragment$1, memo, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, forwardRef, Fragment, memo, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -15,7 +15,7 @@ import { Link, useBlocker } from '@tanstack/react-router';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { omit } from 'es-toolkit';
 import { twMerge } from 'tailwind-merge';
-import { noPagination, useInfiniteScroll } from '@trackunit/react-table-pagination';
+import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
 
@@ -1311,7 +1311,7 @@ const useElevatedState = (initialState, customState) => {
  * Custom hook to get the geometry of an element.
  * Size and position of the element relative to the viewport.
  */
-const useGeometry = (ref) => {
+const useGeometry = (ref, { skip = false } = {}) => {
     const [geometry, setGeometry] = useState({
         width: 0,
         height: 0,
@@ -1324,7 +1324,7 @@ const useGeometry = (ref) => {
     });
     const resizeObserver = useRef(null);
     useEffect(() => {
-        if (!ref.current) {
+        if (skip || !ref.current) {
             return;
         }
         const observe = () => {
@@ -1355,7 +1355,7 @@ const useGeometry = (ref) => {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [ref]);
+    }, [ref, skip]);
     return geometry;
 };
 
@@ -1484,17 +1484,21 @@ const useModifierKey = ({ exclude = [] } = {}) => {
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
+ * @param {UseResizeOptions} options - Options for the hook.
  * @returns {WindowSize} An object containing the current window height and width.
  */
-const useResize = () => {
+const useResize = ({ skip = false } = {}) => {
     const [size, setSize] = useState(getWindowSize());
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         const handleResize = () => {
             setSize(getWindowSize());
         };
         window.addEventListener("resize", handleResize, false);
         return () => window.removeEventListener("resize", handleResize);
-    }, [setSize]);
+    }, [setSize, skip]);
     return size;
 };
 /**
@@ -1519,36 +1523,73 @@ const getWindowSize = () => {
 
 const SCROLL_DEBOUNCE_TIME = 50;
 /**
- * Hook for getting detecting scroll values.
+ * Hook for detecting scroll values in horizontal or vertical direction.
  *
  * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
- * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ * @param {object} options - Options object containing direction and onScrollStateChange callback
+ * @returns {object} An object containing if the element is scrollable, is at the beginning, is at the end, and its current scroll position.
  */
-const useScrollDetection = (elementRef) => {
+const useScrollDetection = (elementRef, options) => {
+    const { direction = "vertical", onScrollStateChange } = options ?? {};
     const [isScrollable, setIsScrollable] = useState(false);
-    const [isAtTop, setIsAtTop] = useState(true);
-    const [isAtBottom, setIsAtBottom] = useState(false);
-    const [scrollPosition, setScrollPosition] = useState({ top: 0, bottom: 0 });
+    const [isAtBeginning, setIsAtBeginning] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [scrollPosition, setScrollPosition] = useState({ start: 0, end: 0 });
     const observerRef = useRef(null);
+    const isFirstRender = useIsFirstRender();
     const checkScrollable = useCallback(() => {
         const element = elementRef?.current;
         if (!element) {
             return;
         }
-        const hasOverflow = element.scrollHeight > element.clientHeight;
-        setIsScrollable(hasOverflow);
-    }, [elementRef]);
+        const hasOverflow = direction === "horizontal"
+            ? element.scrollWidth > element.clientWidth
+            : element.scrollHeight > element.clientHeight;
+        setIsScrollable(prev => {
+            if (prev !== hasOverflow) {
+                // State will be updated, so we'll notify in the next effect
+                return hasOverflow;
+            }
+            return prev;
+        });
+    }, [elementRef, direction]);
     const checkScrollPosition = useCallback(() => {
         const element = elementRef?.current;
         if (!element) {
             return;
         }
-        const { scrollTop, scrollHeight, clientHeight } = element;
-        setIsAtTop(scrollTop === 0);
-        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) <= 1);
-        setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
-    }, [elementRef]);
+        if (direction === "horizontal") {
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            const newIsAtBeginning = scrollLeft === 0;
+            const newIsAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
+            const newScrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
+            setIsAtBeginning(newIsAtBeginning);
+            setIsAtEnd(newIsAtEnd);
+            setScrollPosition(newScrollPosition);
+        }
+        else {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            const newIsAtBeginning = scrollTop === 0;
+            const newIsAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+            const newScrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
+            setIsAtBeginning(newIsAtBeginning);
+            setIsAtEnd(newIsAtEnd);
+            setScrollPosition(newScrollPosition);
+        }
+    }, [elementRef, direction]);
     const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    // Notify about state changes whenever any state value changes
+    useEffect(() => {
+        if (isFirstRender) {
+            return;
+        }
+        onScrollStateChange?.({
+            isScrollable,
+            isAtBeginning,
+            isAtEnd,
+            scrollPosition,
+        });
+    }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
     useEffect(() => {
         const element = elementRef?.current;
         if (!element) {
@@ -1570,7 +1611,7 @@ const useScrollDetection = (elementRef) => {
             element.removeEventListener("scroll", debouncedCheckScrollPosition);
         };
     }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
-    return { isScrollable, isAtTop, isAtBottom, scrollPosition };
+    return useMemo(() => ({ isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
 };
 
 /**
@@ -1586,6 +1627,36 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
+/**
+ * The useStable hook ensures that a value is computed only once and remains stable across renders.
+ * This is useful for expensive computations or when you need a value to never change after initial creation.
+ * Perfect for generating stable random values, creating stable object references, or any one-time computation.
+ *
+ * @example
+ * // Stable random ID that never changes
+ * const stableId = useStable(() => Math.random().toString(36));
+ * @example
+ * // Stable configuration object
+ * const config = useStable(() => ({
+ *   apiKey: generateApiKey(),
+ *   timestamp: Date.now()
+ * }));
+ * @example
+ * // Stable random widths for skeleton loading
+ * const lineWidths = useStable(() => ({
+ *   title: Math.floor(Math.random() * 100) + 120,
+ *   description: Math.floor(Math.random() * 80) + 80
+ * }));
+ */
+const useStable = (factory) => {
+    const ref = useRef(null);
+    // Compute value only once and store it
+    if (ref.current === null) {
+        ref.current = { value: factory() };
+    }
+    return ref.current.value;
+};
+
 /**
  * A custom React hook that provides real-time information about the current viewport size.
  * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
@@ -1755,11 +1826,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
     const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
-            return (jsxs(Fragment, { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }));
-        }
-        else {
-            return (jsx(Text, { className: "text-nowrap", size: "small", children: item.label }));
+            return (jsxs("div", { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }, index));
         }
+        return (jsx(Text, { className: "text-nowrap", size: "small", children: item.label }, index));
     });
     return breadCrumbItemsToJSX;
 };
@@ -2180,45 +2249,66 @@ const cvaDetailsListItem = cvaMerge(["last:truncate"]);
  * @returns {ReactElement} The details list element.
  */
 const DetailsList = ({ details, className, density = "default" }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment$1, { 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))) }));
+    return (jsx("div", { className: cvaDetailsList({ className, density }), 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))) }));
 };
 
+/**
+ * Generates a random width percentage string for skeleton loading components.
+ *
+ * @param {object} params - The parameter object
+ * @param {number} params.min - Minimum percentage value (e.g., 30 for 30%)
+ * @param {number} params.max - Maximum percentage value (e.g., 80 for 80%)
+ * @returns {string} A percentage string (e.g., "65%")
+ */
+const getResponsiveRandomWidthPercentage = ({ min, max }) => {
+    const randomWidth = Math.floor(Math.random() * (max - min + 1)) + min;
+    return `${randomWidth}%`;
+};
+
+const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
 const cvaSkeletonLine = cvaMerge([
-    "rounded-md",
-    "h-3",
-    "opacity-20",
-    "animate-pulse",
-    "bg-black/50",
-    "bg-auto",
+    "relative",
+    "overflow-hidden",
+    "rounded-lg",
+    // Gradient background
     "bg-gradient-to-r",
-    "from-black/0",
-    "via-black/50",
-    "to-black/20",
+    "from-gray-200/80",
+    "via-gray-300/60",
+    "to-gray-200/80",
+    // Pulse animation
+    "animate-pulse",
+    // Shimmer overlay
+    "before:absolute",
+    "before:inset-0",
+    "before:bg-gradient-to-r",
+    "before:from-transparent",
+    "before:via-white/50",
+    "before:to-transparent",
+    "before:opacity-0",
+    "before:animate-pulse",
+    // Smooth transitions for accessibility
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
 ]);
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
  */
-const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId, }) => {
-    const skeletonLines = [];
-    const getWidth = (index) => {
-        if (Array.isArray(width)) {
-            return width[index] ?? "100%";
-        }
-        return width;
-    };
-    const getHeight = (index) => {
-        if (Array.isArray(height)) {
-            return height[index] ?? "auto";
-        }
-        return height;
-    };
-    for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 && i >= 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
-    }
-    return jsx(Fragment, { children: skeletonLines });
+const SkeletonLines = memo(({ lines = 1, height = "0.75rem", width = "100%", margin = 10, className, dataTestId }) => {
+    const gapStyle = typeof margin === "number" ? `${margin}px` : margin;
+    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(width, index),
+                height: getDimension(height, index),
+            } }, index))) }));
 });
-SkeletonLines.displayName = "SkeletonLines";
+const getDimension = (dimension, index) => {
+    if (Array.isArray(dimension)) {
+        const value = dimension[index] ?? dimension[0] ?? "100%";
+        return typeof value === "number" ? `${value}px` : value;
+    }
+    return typeof dimension === "number" ? `${dimension}px` : dimension;
+};
 
 const cvaContainerStyles = cvaMerge([
     "flex",
@@ -2311,7 +2401,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, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { 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", 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] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
@@ -2390,6 +2480,119 @@ const Highlight = ({ className, dataTestId, children, size = "small", color = "w
 };
 Highlight.displayName = "Highlight";
 
+const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
+const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
+
+/**
+ * ZStack is a component that stacks its children on the z-axis.
+ * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
+ *
+ * @param { ZStackProps} props - The props for the  ZStack component
+ * @returns {Element}  ZStack component
+ */
+const ZStack = ({ children, className, dataTestId }) => {
+    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                className: cvaZStackItem({ className: child.props.className }),
+                key: index,
+            });
+        }) }));
+};
+
+const cvaHorizontalOverflowScroller = cvaMerge([
+    "flex",
+    "flex-nowrap",
+    "gap-1",
+    "overflow-y-hidden",
+    "overflow-x-scroll",
+    "w-full",
+    "no-scrollbar",
+]);
+const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cvaMerge(["group", "w-full", "overflow-clip"]);
+
+const cvaOverflowIndicatorContainer = cvaMerge(["pointer-events-none", "h-full", "w-full", "isolate"]);
+const cvaOverflowIndicatorGradient = cvaMerge(["pointer-events-none", "h-full", "w-8"], {
+    variants: {
+        direction: {
+            left: ["bg-gradient-to-r", "from-white", "to-transparent"],
+            right: ["bg-gradient-to-l", "from-white", "to-transparent"],
+        },
+    },
+});
+const cvaJustificationContainer = cvaMerge(["flex", "w-full", "items-center", "pointer-events-none"], {
+    variants: {
+        direction: {
+            left: ["justify-start"],
+            right: ["justify-end"],
+        },
+    },
+});
+const cvaOverflowIndicatorButton = cvaMerge([
+    "shadow-md",
+    "opacity-0",
+    "transition-opacity",
+    "duration-200",
+    "pointer-events-auto",
+    "starting:opacity-0",
+    "group-hover:opacity-100",
+]);
+
+/**
+ * Overflow indicator component that shows visual cues when content extends beyond visible area
+ * Shows a scroll button on hover to navigate in the specified direction
+ *
+ * @param {OverflowIndicatorProps} props - The props for the component
+ * @returns {ReactElement} OverflowIndicator component
+ */
+const OverflowIndicator = ({ className, 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, { circular: true, className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
+};
+
+/**
+ * Container for displaying components in a horizontal layout with overflow detection
+ *
+ * @param {HorizontalOverflowScrollerProps} props - The props for the component
+ * @returns {Element} HorizontalOverflowScroller component
+ */
+const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollStateChange, }) => {
+    const containerRef = useRef(null);
+    const childrenArray = Children.toArray(children);
+    const { width: containerWidth } = useGeometry(containerRef);
+    const { isScrollable, isAtBeginning, isAtEnd } = useScrollDetection(containerRef, {
+        direction: "horizontal",
+        onScrollStateChange: onScrollStateChange
+            ? (state) => onScrollStateChange({
+                isScrollable: state.isScrollable,
+                isAtBeginning: state.isAtBeginning,
+                isAtEnd: state.isAtEnd,
+            })
+            : undefined,
+    });
+    const handleScrollLeft = () => {
+        const element = containerRef.current;
+        if (!element || !containerWidth)
+            return;
+        element.scrollBy({
+            left: -containerWidth,
+            behavior: "smooth",
+        });
+    };
+    const handleScrollRight = () => {
+        const element = containerRef.current;
+        if (!element || !containerWidth)
+            return;
+        element.scrollBy({
+            left: containerWidth,
+            behavior: "smooth",
+        });
+    };
+    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller({ className }), "data-testid": dataTestId, ref: containerRef, 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] }));
+};
+
 const PADDING = 12;
 /**
  * Converts a width size value into a CSS dimension value for max constraints
@@ -2774,7 +2977,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, }) => {
+const Tooltip = ({ children, 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({
@@ -2807,7 +3010,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, 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(), 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] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -2944,12 +3147,12 @@ const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground
     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] }) }));
 };
 
-const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
+const cvaKPI = cvaMerge(["w-full", "flex", "flex-col"], {
     variants: {
         variant: {
-            small: ["px-3"],
+            small: ["px-3", "py-2"],
             condensed: ["px-2", "py-0"],
-            default: [""],
+            default: ["px-4", "py-2"],
         },
     },
     defaultVariants: {
@@ -3001,9 +3204,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, ...rest }) => {
+const KPI = ({ title, value, loading = false, unit, className, 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", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { 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, { 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({
                                 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 })] }) })] })) }) }));
@@ -3075,25 +3278,66 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
-const cvaListContainer = cvaMerge(["h-full"], {
+const cvaListItem$1 = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
+const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
+    variants: {
+        hasThumbnail: {
+            true: "grid-cols-min-fr",
+            false: "grid-cols-1",
+        },
+    },
+});
+const cvaThumbnailContainer = cvaMerge([
+    "flex",
+    "h-8",
+    "w-8",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "rounded-md",
+]);
+
+const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
+    hasThumbnail: true,
+    thumbnailShape: "circle",
+    hasDescription: true,
+    hasMeta: false,
+    hasDetails: false,
+};
+/**
+ * Skeleton loading indicator that mimics the ListItem component structure.
+ * Uses the same layout, spacing, and visual hierarchy as ListItem.
+ */
+const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
+    // Generate stable random widths once and never change them
+    const lineWidths = useStable(() => {
+        return {
+            title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
+            description: getResponsiveRandomWidthPercentage({ min: 45, max: 70 }),
+            meta: getResponsiveRandomWidthPercentage({ min: 30, max: 55 }),
+            details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
+        };
+    });
+    return (jsxs("div", { className: cvaListItem$1({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
+};
+
+const cvaListContainer = cvaMerge(["overflow-auto", "h-full"], {
     variants: {
-        parentControlledScrollable: {
-            true: [""],
-            false: ["overflow-auto"],
+        withTopSeparator: {
+            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
+            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
         },
     },
     defaultVariants: {
-        parentControlledScrollable: false,
+        withTopSeparator: false,
     },
 });
 const cvaList = cvaMerge(["relative"]);
-const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+const cvaListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {
-            alternating: ["even:bg-slate-100"],
-            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
+            line: ["[&:not(:last-child)]:border-b", "border-neutral-200"],
             none: "",
-            space: "[&:not(:last-child)]:pb-0.5",
         },
     },
     defaultVariants: {
@@ -3102,62 +3346,129 @@ const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
 });
 
 /**
- * Render a performant virtualized list of items. Optionally with infinite scrolling.
  *
- * @property {number} count - The total number of items in the list.
- * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
- * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
- * @property {separator} [separator="line"] - The separator style between items in the list.
- * @property {(index: number) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
- * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
- * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const List = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = rowHeight + "px", onRowClick, scrollRef, }) => {
-    const containerRef = useRef(null);
-    const listRef = useRef(null);
-    const [scrollParent, setScrollParent] = useState(null);
-    const [parentControlledScrollable, setParentControlledScrollable] = useState(false);
-    useEffect(() => {
-        if (scrollRef?.current) {
-            setParentControlledScrollable(true);
-            setScrollParent(scrollRef.current);
+const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescription, component, hasMeta, hasDetails, }) => {
+    switch (type) {
+        case "none":
+            return null;
+        case "spinner":
+            return jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" });
+        case "custom":
+            return component;
+        case "skeleton":
+            return (jsx(ListItemSkeleton, { hasDescription: hasDescription, hasDetails: hasDetails, hasMeta: hasMeta, hasThumbnail: hasThumbnail, thumbnailShape: thumbnailShape }));
+        default: {
+            throw new Error(`${type} is not known`);
         }
-        else {
-            setParentControlledScrollable(false);
-            setScrollParent(containerRef.current);
+    }
+};
+
+const DEFAULT_ROW_HEIGHT = 61; // 61px is the height of the ListItem component as of 2025-09-26
+/**
+ * A performant virtualized list component with infinite scrolling support.
+ *
+ * ⚠️ **Important**: Requires a container with defined height to work properly.
+ *
+ * Features:
+ * - Virtualized rendering using TanStack Virtual for performance with large datasets
+ * - Automatic infinite scroll loading when approaching the end of the list
+ * - Optional header support (automatically managed, scrolls with content)
+ * - Built-in pagination with relay-style cursor support
+ * - Configurable loading indicators (skeleton, spinner, or custom)
+ * - Scroll state detection and callbacks
+ * - Variable-height item support via `estimateItemSize`
+ *
+ * The component automatically loads more data when:
+ * - User scrolls to the last visible item
+ * - Content height is insufficient to fill the container
+ */
+const List = ({ count, pagination, children, className, dataTestId, separator = "line", loadingIndicator = { type: "skeleton", ...DEFAULT_SKELETON_LIST_ITEM_PROPS }, onRowClick, onScrollStateChange, topSeparatorOnScroll = false, estimateItemSize, header, getItem, }) => {
+    const parentRef = useRef(null);
+    // Calculate the actual count including header
+    const actualCount = count + (header ? 1 : 0);
+    // Helper function to get item for a given data index
+    const getItemAtIndex = useCallback((dataIndex) => {
+        return getItem(dataIndex);
+    }, [getItem]);
+    // Calculate how many loading rows we need
+    const getLoadingRowsCount = useCallback(() => {
+        const { type: loadingIndicatorType } = loadingIndicator;
+        if (pagination?.isLoading === false)
+            return 0;
+        switch (loadingIndicatorType) {
+            case "none":
+                return 0;
+            case "spinner":
+                return 1;
+            case "custom":
+            case "skeleton": {
+                const isInitialLoading = !pagination?.pageInfo;
+                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                return isInitialLoading ? initialCount : scrollCount;
+            }
+            default: {
+                throw new Error(`${loadingIndicatorType} is not known`);
+            }
         }
-    }, [scrollRef]);
-    const infiniteScrollProps = useMemo(() => {
-        return {
-            pagination: pagination || noPagination,
-            containerRef: { current: scrollParent },
-            rowSize: pagination !== undefined &&
-                pagination.pageInfo !== undefined &&
-                pagination.pageInfo.hasNextPage === true &&
-                pagination.isLoading === true
-                ? count + 1
-                : count,
-            rowHeight,
-        };
-    }, [pagination, scrollParent, count, rowHeight]);
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll(infiniteScrollProps);
-    useEffect(() => {
-        if (scrollParent) {
-            const handleScroll = () => {
-                fetchMoreOnBottomReached(scrollParent);
-            };
-            scrollParent.addEventListener("scroll", handleScroll);
-            return () => {
-                scrollParent.removeEventListener("scroll", handleScroll);
-            };
+    }, [loadingIndicator, pagination]);
+    const estimateSize = useCallback((index) => {
+        // Check if this is a loading row
+        if (index >= actualCount) {
+            const loaderIndex = index - actualCount;
+            const shouldShowLoader = pagination?.isLoading === true && loaderIndex < getLoadingRowsCount();
+            // Empty loader rows should be estimated at 0 height to prevent blank space
+            return shouldShowLoader ? DEFAULT_ROW_HEIGHT : 0;
         }
-        return undefined;
-    }, [scrollParent, fetchMoreOnBottomReached]);
-    return (jsx("div", { className: cvaListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
-                const isLoaderRow = virtualRow.index > count - 1;
-                return (jsx("li", { className: cvaListItem$1({ separator }), "data-index": virtualRow.index, onClick: onRowClick !== undefined ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
-                        transform: `translateY(${virtualRow.start}px)`,
-                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading === true ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+        // For data rows (including header), use custom estimator if provided
+        return estimateItemSize ? estimateItemSize(index) : DEFAULT_ROW_HEIGHT;
+    }, [estimateItemSize, actualCount, pagination?.isLoading, getLoadingRowsCount]);
+    const { getVirtualItems, getTotalSize, measureElement, scrollOffset } = useInfiniteScroll({
+        pagination: pagination || noPagination,
+        containerRef: parentRef,
+        count: actualCount + (pagination?.isLoading === true ? getLoadingRowsCount() : 0),
+        estimateSize,
+        onChange: virtualizer => onScrollStateChange?.(virtualizer.scrollOffset ?? 0, virtualizer.isScrolling),
+    });
+    const isAtTop = scrollOffset <= 0;
+    return (jsx("div", { className: cvaListContainer({
+            withTopSeparator: topSeparatorOnScroll && !isAtTop,
+            className,
+        }), "data-testid": dataTestId, ref: parentRef, children: jsx("ul", { className: cvaList(), style: { height: `${getTotalSize()}px` }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index >= actualCount;
+                const isHeaderRow = Boolean(header) && virtualRow.index === 0;
+                // Calculate data index: if header exists, subtract 1 from index for data items
+                const dataIndex = Boolean(header) && !isHeaderRow ? virtualRow.index - 1 : virtualRow.index;
+                // Calculate which loading indicator this is (for multiple loading indicators)
+                const loaderIndex = isLoaderRow ? virtualRow.index - actualCount : 0;
+                // Props required by the virtualizer for proper positioning and behavior
+                const listItemProps = {
+                    className: cvaListItem({ separator }), // List styling (separators, spacing)
+                    "data-index": isLoaderRow || isHeaderRow ? virtualRow.index : dataIndex, // For accessibility and debugging
+                    onClick: onRowClick && !isLoaderRow && !isHeaderRow
+                        ? () => {
+                            const clickedItem = getItemAtIndex(dataIndex);
+                            onRowClick(clickedItem, dataIndex);
+                        }
+                        : undefined, // Row-level click handling (skip header)
+                    ref: measureElement, // Required for virtualizer to measure item dimensions
+                    style: {
+                        transform: `translateY(${virtualRow.start}px)`, // Critical: positions item in virtual scroll
+                    },
+                    tabIndex: -1, // Keyboard navigation support
+                };
+                // Handle loading rows
+                if (isLoaderRow) {
+                    return (jsx("li", { ...listItemProps, children: pagination?.isLoading === true && loaderIndex < getLoadingRowsCount() ? (jsx(ListLoadingIndicator, { ...loadingIndicator })) : null }, virtualRow.index));
+                }
+                // Handle header row
+                if (isHeaderRow && header) {
+                    return (jsx("li", { ...listItemProps, children: header }, "header"));
+                }
+                // For regular children, call the children function with virtualization props and item data
+                const item = getItemAtIndex(dataIndex);
+                return children(listItemProps, item, dataIndex);
             }) }) }));
 };
 
@@ -3222,35 +3533,16 @@ const cvaInteractableItem = cvaMerge("", {
     },
 });
 
-const cvaListItem = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
-const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
-    variants: {
-        hasThumbnail: {
-            true: "grid-cols-min-fr",
-            false: "grid-cols-1",
-        },
-    },
-});
-const cvaThumbnailContainer = cvaMerge([
-    "flex",
-    "h-8",
-    "w-8",
-    "items-center",
-    "justify-center",
-    "overflow-hidden",
-    "rounded-md",
-]);
-
 /**
  *   The ListItem is designed to present a concise set of items for quick scanning and navigation. It supports multiple content types and actions, and its flexible layout allows for customization based on the type of data being shown - assets, events, users, etc.
  *
  * @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", }) => {
-    const baseClass = cvaListItem({ className });
+const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
+    const baseClass = cvaListItem$1({ className });
     const interactableItemClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
-    return (jsxs("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsx("div", { className: cvaThumbnailContainer({
+    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, {
                                     className: twMerge(title.props.className, "neutral-900 text-sm font-medium truncate"),
@@ -3258,7 +3550,7 @@ const ListItem = ({ className, dataTestId, onClick, details, title, description,
                                 })) }), 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, {
                                     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 pl-2", children: [details, onClick ? jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
+                                })) })) : 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] })] }));
 };
 
 const cvaMenuList = cvaMerge([
@@ -3783,7 +4075,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
     if (loading) {
         return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, 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, { 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, 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" })] }));
 };
@@ -4064,7 +4356,7 @@ const cvaTab = cvaMerge([
  * 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 renderContent = () => (jsxs(Fragment, { children: [iconName !== undefined ? jsx(Icon, { name: iconName, size: "small" }) : null, isValidElement(children) ? children.props.children : children, suffix] }));
+    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,
@@ -4283,7 +4575,7 @@ const ToggleButton = ({ title, size, children, dataTestId, className, icon, icon
         large: "p-2 text-base",
     };
     const paddingClasses = isIconOnly ? iconOnlySizeClasses[size] : sizeClasses[size];
-    return (jsx("button", { className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxs(Fragment, { children: [iconPrefix, children] })) }));
+    return (jsx("button", { className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxs(Fragment$1, { children: [iconPrefix, children] })) }));
 };
 
 const cvaValueBar = cvaMerge([
@@ -4399,28 +4691,6 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     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] }));
 };
 
-const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
-const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
-
-/**
- * ZStack is a component that stacks its children on the z-axis.
- * Is a good alternative to "position: absolute" that avoids some of the unfortunate side effects of absolute positioning.
- *
- * @param { ZStackProps} props - The props for the  ZStack component
- * @returns {Element}  ZStack component
- */
-const ZStack = ({ children, className, dataTestId }) => {
-    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, children: Children.map(children, (child, index) => {
-            if (!isValidElement(child)) {
-                return child;
-            }
-            return cloneElement(child, {
-                className: cvaZStackItem({ className: child.props.className }),
-                key: index,
-            });
-        }) }));
-};
-
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",
@@ -4445,4 +4715,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };