@trackunit/react-components 1.8.22 → 1.8.24

package/index.esm.js

@@ -15,9 +15,9 @@ 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 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
-import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { noPagination, useInfiniteScroll } 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';
 
 const docs = {
     source: {
@@ -133,33 +133,29 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
+const Icon = ({ name, size = "medium", className, 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(() => {
-        if (size === "small") {
-            return "micro";
-        }
-        if (size === "medium") {
-            return "mini";
-        }
-        if (type === "solid") {
-            return "solid";
+        switch (size) {
+            case "small":
+                return "micro";
+            case "medium":
+                return "mini";
+            default:
+                return type === "solid" ? "solid" : "outline";
         }
-        return "outline";
     }, [type, size]);
     const correctViewBox = useMemo(() => {
-        if (size === "small") {
-            return "0 0 16 16";
-        }
-        if (size === "medium") {
-            return "0 0 20 20";
-        }
-        if (type === "solid") {
-            return "0 0 24 24";
+        switch (size) {
+            case "small":
+                return "0 0 16 16";
+            case "medium":
+                return "0 0 20 20";
+            default:
+                return "0 0 24 24";
         }
-        return "0 0 24 24";
-    }, [size, type]);
+    }, [size]);
     const iconName = iconNames[name];
     const href = useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
@@ -258,15 +254,15 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
         return false;
     }, [color]);
     const layout = useMemo(() => {
-        if (onClose && isSupportedDismissColor) {
+        if (onClose !== undefined && isSupportedDismissColor) {
             return "containsDismiss";
         }
-        if (icon) {
+        if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
     }, [onClose, icon, isSupportedDismissColor]);
-    return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon && size === "medium" ? jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    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] }));
 };
@@ -748,7 +744,7 @@ const cvaIconButton = cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {ReactElement} Button component
  */
-const Button = ({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ref, ...rest }) => {
+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, circular = false, ref, ...rest }) => {
     const Comp = asChild ? Slot : "button";
     const sharedCompProps = {
         ref,
@@ -766,7 +762,7 @@ const Button = ({ onClick, children, loading, disabled, className, fullWidth = f
         disabled: disabled || loading,
         type,
     };
-    return (jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsx(Slottable, { children: children }), suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix }) : null] }));
+    return (jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix !== null && prefix !== undefined && !loading ? (jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix })) : null, jsx(Slottable, { children: children }), suffix !== null && suffix !== undefined && !loading ? (jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix })) : null] }));
 };
 Button.displayName = "Button";
 
@@ -776,10 +772,8 @@ Button.displayName = "Button";
 /**
  *
  */
-const IconButton = ({ icon, size = "medium", square = true, loading, disabled, className, ref, ...rest }) => {
-    return (jsx(Button, { className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
-        // eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
-        prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
+const IconButton = ({ icon, size = "medium", square = true, loading = false, disabled = false, className, ref, ...rest }) => {
+    return (jsx(Button, { className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
 };
 IconButton.displayName = "IconButton";
 
@@ -883,7 +877,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, actionsInline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll = false, actionsInline = false, }) => {
     const ref = useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
@@ -892,7 +886,19 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children, actionsInline }), children: [jsx("div", { className: cvaAlertIconContainer({ inline: !isTextWrapping && !children, 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 ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, 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 || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose && actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, 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] }));
+    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({
+                    inline: !isTextWrapping && (children === null || children === undefined),
+                    actionsInline,
+                }), 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({
+                            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({
+                    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] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -966,7 +972,11 @@ const Badge = ({ color = "primary", compact = false, className, count, max, hide
     if (hideZero && count === 0) {
         return null;
     }
-    const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
+    const displayedCount = count !== undefined && count !== 0 && !Number.isNaN(count) && max !== undefined && max !== 0 && !Number.isNaN(max)
+        ? count > max
+            ? `${max}+`
+            : count
+        : count;
     const isSingleChar = displayedCount?.toString().length === 1;
     return (jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
@@ -1202,10 +1212,10 @@ const useDebounce = (value, delay = 500, direction, onBounce) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
         let handler;
-        if ((direction === "in" && !debouncedValue && value) ||
-            (direction === "out" && debouncedValue && !value) ||
+        if ((direction === "in" && !Boolean(debouncedValue) && Boolean(value)) ||
+            (direction === "out" && Boolean(debouncedValue) && !Boolean(value)) ||
             direction === "both" ||
-            !direction) {
+            direction === undefined) {
             handler = setTimeout(() => {
                 setDebouncedValue(value);
                 onBounce?.(value);
@@ -1426,7 +1436,7 @@ const useIsTextTruncated = (text) => {
     }, [updateTextVisibility]);
     // Re-check whenever text changes
     useEffect(() => {
-        if (!text) {
+        if (text === undefined || text === "") {
             return;
         }
         updateTextVisibility();
@@ -1632,7 +1642,11 @@ const useWatch = ({ value, onChange, immediate = false, isEqual }) => {
     const prevValue = useRef(UNINITIALIZED);
     useEffect(() => {
         const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED ? false : isEqual ? !isEqual(value, prev) : JSON.stringify(value) !== JSON.stringify(prev);
+        const hasChanged = prev === UNINITIALIZED
+            ? false
+            : isEqual !== undefined
+                ? !isEqual(value, prev)
+                : JSON.stringify(value) !== JSON.stringify(prev);
         if (immediate && prev === UNINITIALIZED) {
             onChange(value, null);
         }
@@ -1892,7 +1906,7 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
+const CardBody = ({ density = "auto", children, dataTestId, className, direction = "column", disableGap = false, id, }) => {
     return (jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
@@ -1904,7 +1918,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, hideSeparator = false }) => {
+const CardFooter = ({ dataTestId, className, children, density = "auto", hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardFooterDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
@@ -1969,12 +1983,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, hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, 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 ? (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", dataTestId: "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaCollapse = cvaMerge([
@@ -2060,9 +2074,9 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
 };
-const Collapsible = ({ children, expanded, id, extraPadding }) => {
+const Collapsible = ({ children, expanded, id, extraPadding = true }) => {
     const ref = useRef(null);
     const { height } = useGeometry(ref);
     return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ extraPadding }), children: children }) }) }));
@@ -2081,7 +2095,7 @@ const Collapsible = ({ children, expanded, id, extraPadding }) => {
  * @param {boolean} props.warning - Indicates if the process has a warning.
  * @param {boolean} props.success - Indicates if the process was successful.
  */
-const CompletionStatusIndicator = ({ loading, error, success, ...rest }) => {
+const CompletionStatusIndicator = ({ loading = false, error, success, ...rest }) => {
     if (loading) {
         return jsx(Spinner, { className: "h-[22px] w-[22px]", containerClassName: "w-min", ...rest });
     }
@@ -2175,17 +2189,17 @@ const cvaSkeletonLine = cvaMerge([
 /**
  * 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 = memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId, }) => {
     const skeletonLines = [];
     const getWidth = (index) => {
-        if (width instanceof Array) {
-            return width[index] || "100%";
+        if (Array.isArray(width)) {
+            return width[index] ?? "100%";
         }
         return width;
     };
     const getHeight = (index) => {
-        if (height instanceof Array) {
-            return height[index] || "auto";
+        if (Array.isArray(height)) {
+            return height[index] ?? "auto";
         }
         return height;
     };
@@ -2269,7 +2283,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, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
+const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customImageSrc, loading = false, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
     const ImageSource = useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -2287,7 +2301,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 ? (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 ? (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, { 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] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
@@ -2638,7 +2652,7 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(Portal, { id: portalId, children: context.isOpen ? (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.dataTestId ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -2653,7 +2667,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, 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] }));
 };
 
@@ -2663,7 +2677,7 @@ const PopoverTitle = ({ children, action, divider = false, className, dataTestId
  * @param {PopoverTriggerProps} props - The props for the PopoverTrigger component
  * @returns {ReactElement} PopoverTrigger component
  */
-const PopoverTrigger = function PopoverTrigger({ children, renderButton, ref: propRef, ...props }) {
+const PopoverTrigger = function PopoverTrigger({ children, renderButton = false, ref: propRef, ...props }) {
     const context = usePopoverContext();
     const ref = useMergeRefs([context.refs.setReference, propRef]);
     if (!renderButton && isValidElement(children)) {
@@ -2671,10 +2685,10 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton, ref: pr
             ref,
             ...props,
             ...children.props,
-            "data-state": context.isOpen ? "open" : "closed",
+            "data-state": context.isOpen === true ? "open" : "closed",
         }));
     }
-    return (jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+    return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
 const cvaTooltipContainer = cvaMerge(["flex", "leading-5"]);
@@ -2750,7 +2764,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, dataTestId, disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
+const Tooltip = ({ children, dataTestId, disabled = false, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -2916,8 +2930,8 @@ 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, weight, 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 !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
+const Indicator = ({ 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] }) }));
 };
 
 const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
@@ -2977,10 +2991,10 @@ 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, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
+const KPI = ({ title, value, loading = false, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !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({
-                                isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
+    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({
+                                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 })] }) })] })) }) }));
 };
@@ -2988,7 +3002,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 ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (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, { 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] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -3033,14 +3047,14 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive, onClick, className, dataTestId, children, iconName, iconColor, ...rest }) => {
-    const isClickable = Boolean(onClick && !rest.loading);
+const KPICard = ({ isActive = false, onClick, className, dataTestId, children, iconName = undefined, iconColor = "info", loading = false, ...rest }) => {
+    const isClickable = Boolean(onClick !== undefined && loading !== true);
     return (jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             minHeight: rest.trend ? "withTrends" : "default",
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor: iconColor ?? "info" }), 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: twMerge(iconName ? "gap-2" : "", "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] }) }));
 };
 const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     variants: {
@@ -3051,6 +3065,92 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
+const cvaListContainer = cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
+const cvaList = cvaMerge(["relative"]);
+const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            alternating: ["even:bg-slate-100"],
+            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
+            none: "",
+            space: "[&:not(:last-child)]:pb-0.5",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+/**
+ * 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);
+        }
+        else {
+            setParentControlledScrollable(false);
+            setScrollParent(containerRef.current);
+        }
+    }, [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);
+            };
+        }
+        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));
+            }) }) }));
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -3076,9 +3176,9 @@ const cvaInteractableItem = cvaMerge("", {
             default: "cursor-default",
             "not-allowed": "cursor-not-allowed",
         },
-        selected: {
-            true: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
-            false: "",
+        selection: {
+            selected: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
+            unselected: "",
             auto: [
                 "hover:bg-neutral-100",
                 "has-[:checked]:bg-primary-50",
@@ -3091,24 +3191,24 @@ const cvaInteractableItem = cvaMerge("", {
             true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
             false: "", // use compoundVariants instead
         },
-        focused: {
-            true: ["bg-neutral-600/5"],
-            false: "",
+        focus: {
+            focused: ["bg-neutral-600/5"],
+            unfocused: "",
             auto: "[&:has(:focus-visible)]:outline-native",
         },
     },
     compoundVariants: [
         {
             disabled: false,
-            selected: false,
+            selection: "unselected",
             className: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
         },
     ],
     defaultVariants: {
         cursor: "auto",
-        selected: "auto",
+        selection: "auto",
         disabled: false,
-        focused: "auto",
+        focus: "auto",
     },
 });
 
@@ -3145,7 +3245,7 @@ const ListItem = ({ className, dataTestId, onClick, details, title, description,
                         }), 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"),
                                     dataTestId: !title.props.dataTestId && dataTestId ? `${dataTestId}-title` : 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, {
+                                })) }), 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] })] }));
@@ -3187,7 +3287,12 @@ const MenuDivider = () => {
  */
 const cvaMenuItem = (props) => {
     const { selected, disabled, focused, className, variant, fieldSize } = props ?? {};
-    return twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    return twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({
+        selection: selected === true ? "selected" : "unselected",
+        disabled,
+        cursor: "pointer",
+        focus: focused === true ? "focused" : "unfocused",
+    }), className);
 };
 const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
@@ -3300,10 +3405,10 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm", "flex", "it
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", }) => {
+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", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
-        if (e.key === "Enter" && onClick && !disabled) {
+        if (e.key === "Enter" && onClick !== undefined && disabled !== true) {
             if (stopPropagation) {
                 e.stopPropagation();
             }
@@ -3323,7 +3428,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix ? optionPrefix : null, children ?? label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -3341,16 +3446,13 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
     const childrenArr = Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
-    const handleItemClick = useCallback((id, disabled) => {
-        if (disabled) {
-            return;
-        }
+    const handleItemClick = useCallback((id) => {
         const newSelectedItems = isMulti
             ? selectedItems.includes(id)
                 ? selectedItems.filter(item => item !== id)
                 : [...selectedItems, id]
             : [id];
-        if (onSelectionChange) {
+        if (onSelectionChange !== undefined) {
             onSelectionChange(newSelectedItems);
         }
         else {
@@ -3359,13 +3461,15 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
     }, [isMulti, selectedItems, onSelectionChange]);
     return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: childrenArr.map((menuItem, index) => {
             if (isValidElement(menuItem)) {
-                const isSelected = selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected;
+                const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
                 return cloneElement(menuItem, {
                     ...menuItem.props,
                     key: index,
                     onClick: (event) => {
                         menuItem.props.onClick?.(event);
-                        handleItemClick(menuItem.props.id ?? `${index}`, menuItem.props.disabled);
+                        if (menuItem.props.disabled !== true) {
+                            handleItemClick(menuItem.props.id ?? `${index}`);
+                        }
                     },
                     className: isMulti && isSelected
                         ? cvaMenuListMultiSelect({ className: menuItem.props.className })
@@ -3447,7 +3551,7 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * @returns {ReactElement} Notice component
  */
 const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: !withTooltip, 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 !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+    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] }) }));
 };
 
 const cvaPage = cvaMerge(["grid", "h-full"], {
@@ -3480,7 +3584,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 }) => {
-    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", children: children }));
 };
 
 /**
@@ -3495,17 +3599,30 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
 };
 
 const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [16, 25], lines: 2, margin: "3px 0 0 0", width: [75, 50] }) }) }));
+/**
+ * The PageHeaderKpiMetrics component is used to render the KPI metrics in the PageHeader component.
+ *
+ * @param {object} props - The props for the PageHeaderKpiMetrics component
+ * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
+ * @returns {ReactElement} PageHeaderKpiMetrics component
+ */
 const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
     return (jsx("div", { className: "hidden items-center gap-4 md:flex", children: kpiMetrics
-            .filter(kpi => !kpi.hidden)
+            .filter(kpi => kpi.hidden === false || kpi.hidden === undefined)
             .map((kpi, index) => {
-            if (kpi.loading) {
+            if (kpi.loading === true) {
                 return jsx(LoadingContent, {}, `${kpi}-${index}`);
             }
             return (jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-slate-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
         }) }));
 };
 
+/**
+ * The ActionRenderer component is used to render the action in the PageHeaderSecondaryActions component.
+ *
+ * @param {ActionRendererProps} props - The props for the ActionRenderer component
+ * @returns {ReactElement} ActionRenderer component
+ */
 function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
     const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, dataTestId, target, variant } = action;
     // This component handles all the "wrapping" logic for Link/Tooltip
@@ -3520,10 +3637,18 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
     // Wrap `content` with Tooltip
     const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { className: "block", label: tooltipLabel, children: content })) : (content);
     // Finally, wrap with Link if `to` is provided
-    return to ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
+    return to !== undefined && to !== "" ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
-const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
-    const enabledActions = useMemo(() => actions.filter(action => !action.hidden), [actions]);
+/**
+ * The PageHeaderSecondaryActions component is used to render the secondary actions in the PageHeader component.
+ *
+ * @param {object} props - The props for the PageHeaderSecondaryActions component
+ * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
+ * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
+ * @returns {ReactElement} PageHeaderSecondaryActions component
+ */
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, }) => {
+    const enabledActions = useMemo(() => actions.filter(action => action.hidden === false || action.hidden === undefined), [actions]);
     // If we need to render a "More Menu" because we have too many actions:
     if (enabledActions.length > 2 || (hasPrimaryAction && enabledActions.length > 1)) {
         // Separate them into danger vs. other
@@ -3535,7 +3660,7 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
                 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 ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+        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}`)))] })) }));
     }
     // Otherwise, render them inline as buttons
     return (jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
@@ -3562,6 +3687,14 @@ const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
 const cvaPageHeader = cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
 const cvaPageHeaderHeading = cvaMerge(["text-slate-900", "text-xl", "font-semibold", "truncate"]);
 
+/**
+ * The PageHeaderTitle component is used to display the title of the page header.
+ *
+ * @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
+ * @returns {ReactElement} PageHeaderTitle component
+ */
 const PageHeaderTitle = ({ title, dataTestId }) => {
     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 }) }) }));
@@ -3577,21 +3710,21 @@ const PageHeaderTitle = ({ title, dataTestId }) => {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }) => {
+const PageHeader = ({ className, dataTestId, secondaryActions, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", kpiMetrics, tagTooltipLabel, primaryAction, }) => {
     const tagRenderer = useMemo(() => {
-        if (!tagLabel || showLoading) {
+        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, 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, { dataTestId: "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, dataTestId: "page-header-tag", children: tagLabel }) }) }));
     }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
-            withBorder: !tabsList,
-        }), "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: "medium", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || description ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
-                                    name: descriptionIcon ?? "QuestionMarkCircle",
+            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: "medium", 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: {
+                                    name: descriptionIcon,
                                     dataTestId: "page-header-description-icon",
-                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions ? (secondaryActions) : null, primaryAction && !primaryAction.hidden ? (jsx(Tooltip, { disabled: !primaryAction.tooltipLabel, label: primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName ? jsx(Icon, { name: primaryAction.prefixIconName, size: "small" }) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
+                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions !== null && secondaryActions !== undefined ? (secondaryActions) : null, primaryAction !== undefined && (primaryAction.hidden === false || primaryAction.hidden === undefined) ? (jsx(Tooltip, { disabled: primaryAction.tooltipLabel === undefined || primaryAction.tooltipLabel === "", label: primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: primaryAction.prefixIconName, size: "small" })) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -3603,7 +3736,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
+const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPage = false, pageCount, pageIndex, loading = false, className, dataTestId, getTranslatedCount, onPageChange, cursorBase = false, }) => {
     const [page, setPage] = useState(pageIndex);
     const [currentPage, setCurrentPage] = useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
@@ -3652,7 +3785,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, 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]));
@@ -3755,7 +3888,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @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 ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
+    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 cvaSidebar = cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -3789,7 +3922,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
         entries.forEach(entry => {
             // @ts-expect-error - suppressImplicitAnyIndexErrors
             const targetElementId = entry.target[childUniqueIdentifierAttribute];
-            if (targetElementId) {
+            if (targetElementId !== null && targetElementId !== undefined) {
                 updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
             }
         });
@@ -3845,19 +3978,19 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     });
     const overflowItemCount = objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
-        if (itemOverflowMap[id]) {
+        if (itemOverflowMap[id] === true) {
             return "invisible";
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: Children.map(children, child => {
+    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: Children.map(children, child => {
                     return cloneElement(child, {
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
                     variant: "ghost-neutral",
-                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: Children.map(children, child => {
-                        return itemOverflowMap[child.props.id]
+                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: `${dataTestId}-more-menu`, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: Children.map(children, child => {
+                        return itemOverflowMap[child.props.id] === true
                             ? cloneElement(child, {
                                 onClick: () => {
                                     child.props.onClick?.();
@@ -3920,8 +4053,8 @@ 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, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true, ...rest }) => {
-    const renderContent = () => (jsxs(Fragment, { children: [iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, isValidElement(children) ? children.props.children : children, suffix] }));
+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 commonProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
@@ -3943,7 +4076,7 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
  * Wrapper for radix tab list component.
  */
 const TabList = ({ className, dataTestId, children, ...rest }) => {
-    return (jsx(List, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
 /**
@@ -4081,8 +4214,8 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
     const containerPadding = 2; // p-0.5 = 2px
     const gap = 4;
     const slidingLeft = containerPadding +
-        buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth || 0) + gap, 0);
-    const slidingWidth = buttonRefs.current[validIndex]?.offsetWidth || 0;
+        buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth ?? 0) + gap, 0);
+    const slidingWidth = buttonRefs.current[validIndex]?.offsetWidth ?? 0;
     useEffect(() => {
         setIsMounted(true);
     }, []);
@@ -4102,7 +4235,7 @@ const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, clas
                 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, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+            }), 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({
                 className,
                 selected,
                 disabled,
@@ -4168,7 +4301,7 @@ const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
  */
 const getScore = (value, min, max, zeroScoreAllowed) => {
     if (value <= min) {
-        if (zeroScoreAllowed) {
+        if (zeroScoreAllowed === true) {
             return 0;
         }
         return 0.01; // always render at least some small fragment
@@ -4201,10 +4334,10 @@ const getDefaultFillColor = (score) => {
  * @returns {string} color value
  */
 const getFillColor = (score, levelColors) => {
-    if (levelColors.low && score < (levelColors.low.level || 0)) {
+    if (levelColors.low !== undefined && score < (levelColors.low.level !== undefined ? levelColors.low.level : 0)) {
         return levelColors.low.color;
     }
-    if (levelColors.high && score >= (levelColors.high.level || 0)) {
+    if (levelColors.high !== undefined && score >= (levelColors.high.level !== undefined ? levelColors.high.level : 0)) {
         return levelColors.high.color;
     }
     return levelColors.medium?.color ?? color("WARNING", 300);
@@ -4229,94 +4362,13 @@ 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, className, dataTestId, zeroScoreAllowed, }) => {
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, 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] }));
 };
 
-const cvaVirtualizedListContainer = cvaMerge(["h-full"], {
-    variants: {
-        parentControlledScrollable: {
-            true: [""],
-            false: ["overflow-auto"],
-        },
-    },
-    defaultVariants: {
-        parentControlledScrollable: false,
-    },
-});
-const cvaVirtualizedList = cvaMerge(["relative"]);
-const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
-    variants: {
-        separator: {
-            alternating: ["even:bg-slate-100"],
-            line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
-            none: "",
-            space: "[&:not(:last-child)]:pb-0.5",
-        },
-    },
-    defaultVariants: {
-        separator: "none",
-    },
-});
-
-/**
- * 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 VirtualizedList = ({ 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);
-        }
-        else {
-            setParentControlledScrollable(false);
-            setScrollParent(containerRef.current);
-        }
-    }, [scrollRef]);
-    const infiniteScrollProps = useMemo(() => {
-        return {
-            pagination: pagination || noPagination,
-            containerRef: { current: scrollParent },
-            rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? 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);
-            };
-        }
-        return undefined;
-    }, [scrollParent, fetchMoreOnBottomReached]);
-    return (jsx("div", { className: cvaVirtualizedListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
-                const isLoaderRow = virtualRow.index > count - 1;
-                return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
-                        transform: `translateY(${virtualRow.start}px)`,
-                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading ? (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));
-            }) }) }));
-};
-
 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"]);
 
@@ -4363,4 +4415,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, 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, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, 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, 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 };