@trackunit/react-components 1.8.22 → 1.8.24

package/index.cjs.js

@@ -17,9 +17,9 @@ var reactRouter = require('@tanstack/react-router');
 var react$1 = require('@floating-ui/react');
 var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
+var reactTablePagination = require('@trackunit/react-table-pagination');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
-var reactTablePagination = require('@trackunit/react-table-pagination');
 
 const docs = {
     source: {
@@ -135,33 +135,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 = react.useRef(null);
     const ICON_CONTAINER_ID = sharedUtils.uuidv4();
     const correctIconType = react.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 = react.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 = uiIcons.iconNames[name];
     const href = react.useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
@@ -260,15 +256,15 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
         return false;
     }, [color]);
     const layout = react.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 (jsxRuntime.jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon && size === "medium" ? jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    return (jsxRuntime.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" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
             jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
@@ -750,7 +746,7 @@ const cvaIconButton = cssClassVarianceUtilities.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 ? reactSlot.Slot : "button";
     const sharedCompProps = {
         ref,
@@ -768,7 +764,7 @@ const Button = ({ onClick, children, loading, disabled, className, fullWidth = f
         disabled: disabled || loading,
         type,
     };
-    return (jsxRuntime.jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsxRuntime.jsx(reactSlot.Slottable, { children: children }), suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix }) : null] }));
+    return (jsxRuntime.jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix !== null && prefix !== undefined && !loading ? (jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix })) : null, jsxRuntime.jsx(reactSlot.Slottable, { children: children }), suffix !== null && suffix !== undefined && !loading ? (jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix })) : null] }));
 };
 Button.displayName = "Button";
 
@@ -778,10 +774,8 @@ Button.displayName = "Button";
 /**
  *
  */
-const IconButton = ({ icon, size = "medium", square = true, loading, disabled, className, ref, ...rest }) => {
-    return (jsxRuntime.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 (jsxRuntime.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";
 
@@ -885,7 +879,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "g
  * @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 = react.useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     react.useEffect(() => {
@@ -894,7 +888,19 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children, actionsInline }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose && !actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose && actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({
+                    inline: !isTextWrapping && (children === null || children === undefined),
+                    actionsInline,
+                }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({
+                            inline: !isTextWrapping && (children === null || children === undefined),
+                            actionsInline,
+                        }), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose !== undefined && !actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
+                            inline: !isTextWrapping && (children === null || children === undefined),
+                            actionsInline,
+                        }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose !== undefined && actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
+                    inline: !isTextWrapping && (children === null || children === undefined),
+                    actionsInline,
+                }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -968,7 +974,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 (jsxRuntime.jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
@@ -1204,10 +1214,10 @@ const useDebounce = (value, delay = 500, direction, onBounce) => {
     const [debouncedValue, setDebouncedValue] = react.useState(value);
     react.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);
@@ -1428,7 +1438,7 @@ const useIsTextTruncated = (text) => {
     }, [updateTextVisibility]);
     // Re-check whenever text changes
     react.useEffect(() => {
-        if (!text) {
+        if (text === undefined || text === "") {
             return;
         }
         updateTextVisibility();
@@ -1634,7 +1644,11 @@ const useWatch = ({ value, onChange, immediate = false, isEqual }) => {
     const prevValue = react.useRef(UNINITIALIZED);
     react.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);
         }
@@ -1894,7 +1908,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 (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
@@ -1906,7 +1920,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 (jsxRuntime.jsx("div", { className: cvaCardFooterDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
@@ -1971,12 +1985,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 (jsxRuntime.jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
@@ -2062,9 +2076,9 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerAddon ? headerAddon : null, jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined ? headerAddon : null, jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsxRuntime.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 = react.useRef(null);
     const { height } = useGeometry(ref);
     return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible({ extraPadding }), children: children }) }) }));
@@ -2083,7 +2097,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 jsxRuntime.jsx(Spinner, { className: "h-[22px] w-[22px]", containerClassName: "w-min", ...rest });
     }
@@ -2177,17 +2191,17 @@ const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
  */
-const SkeletonLines = react.memo(({ margin = "10px 0", lines = 1, height, width = "100%", className, dataTestId }) => {
+const SkeletonLines = react.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;
     };
@@ -2271,7 +2285,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 = react.useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -2289,7 +2303,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return SearchDocumentSVG;
         }
     }, [image]);
-    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"]);
@@ -2640,7 +2654,7 @@ const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-
 const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.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 (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.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,
@@ -2655,7 +2669,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 (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
@@ -2665,7 +2679,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 = react$1.useMergeRefs([context.refs.setReference, propRef]);
     if (!renderButton && react.isValidElement(children)) {
@@ -2673,10 +2687,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 (jsxRuntime.jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+    return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
 const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
@@ -2752,7 +2766,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] = react.useState(false);
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
@@ -2918,8 +2932,8 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @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 (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.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 (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
 const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col"], {
@@ -2979,10 +2993,10 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
  * @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 (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaKPIHeader(), children: jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
-                                isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
+    return (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaKPIHeader(), children: jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }) }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
+                                isDefaultAndHasTrendValue: Boolean(trend !== undefined && trend.value !== undefined && !isSmallVariant),
                                 className,
                             }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
 };
@@ -2990,7 +3004,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value !== undefined ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant !== undefined && trend.variant.icon !== undefined ? (jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" })) : null, trend.percentage !== undefined ? (jsxRuntime.jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
@@ -3035,14 +3049,14 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
  * @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 (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             minHeight: rest.trend ? "withTrends" : "default",
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor: iconColor ?? "info" }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: tailwindMerge.twMerge(iconName ? "gap-2" : "", "p-0"), dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     variants: {
@@ -3053,6 +3067,92 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid",
     },
 });
 
+const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["h-full"], {
+    variants: {
+        parentControlledScrollable: {
+            true: [""],
+            false: ["overflow-auto"],
+        },
+    },
+    defaultVariants: {
+        parentControlledScrollable: false,
+    },
+});
+const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaListItem$1 = cssClassVarianceUtilities.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 = react.useRef(null);
+    const listRef = react.useRef(null);
+    const [scrollParent, setScrollParent] = react.useState(null);
+    const [parentControlledScrollable, setParentControlledScrollable] = react.useState(false);
+    react.useEffect(() => {
+        if (scrollRef?.current) {
+            setParentControlledScrollable(true);
+            setScrollParent(scrollRef.current);
+        }
+        else {
+            setParentControlledScrollable(false);
+            setScrollParent(containerRef.current);
+        }
+    }, [scrollRef]);
+    const infiniteScrollProps = react.useMemo(() => {
+        return {
+            pagination: pagination || reactTablePagination.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 } = reactTablePagination.useInfiniteScroll(infiniteScrollProps);
+    react.useEffect(() => {
+        if (scrollParent) {
+            const handleScroll = () => {
+                fetchMoreOnBottomReached(scrollParent);
+            };
+            scrollParent.addEventListener("scroll", handleScroll);
+            return () => {
+                scrollParent.removeEventListener("scroll", handleScroll);
+            };
+        }
+        return undefined;
+    }, [scrollParent, fetchMoreOnBottomReached]);
+    return (jsxRuntime.jsx("div", { className: cvaListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
+                const isLoaderRow = virtualRow.index > count - 1;
+                return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+            }) }) }));
+};
+
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -3078,9 +3178,9 @@ const cvaInteractableItem = cssClassVarianceUtilities.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",
@@ -3093,24 +3193,24 @@ const cvaInteractableItem = cssClassVarianceUtilities.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",
     },
 });
 
@@ -3147,7 +3247,7 @@ const ListItem = ({ className, dataTestId, onClick, details, title, description,
                         }), children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: "grid-rows-min-fr grid items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center text-sm", children: typeof title === "string" ? (jsxRuntime.jsx(Text, { className: "truncate", dataTestId: dataTestId ? `${dataTestId}-title` : undefined, weight: "bold", children: title })) : (react.cloneElement(title, {
                                     className: tailwindMerge.twMerge(title.props.className, "neutral-900 text-sm font-medium truncate"),
                                     dataTestId: !title.props.dataTestId && dataTestId ? `${dataTestId}-title` : undefined,
-                                })) }), description ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-500", dataTestId: dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (react.cloneElement(description, {
+                                })) }), description !== undefined && description !== "" ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-500", dataTestId: dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (react.cloneElement(description, {
                                     className: tailwindMerge.twMerge(description.props.className, "text-neutral-500 text-xs font-medium truncate"),
                                     dataTestId: !description.props.dataTestId && dataTestId ? `${dataTestId}-description` : undefined,
                                 })) })) : null, meta ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 pl-2", children: [details, onClick ? jsxRuntime.jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
@@ -3189,7 +3289,12 @@ const MenuDivider = () => {
  */
 const cvaMenuItem = (props) => {
     const { selected, disabled, focused, className, variant, fieldSize } = props ?? {};
-    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({
+        selection: selected === true ? "selected" : "unselected",
+        disabled,
+        cursor: "pointer",
+        focus: focused === true ? "focused" : "unfocused",
+    }), className);
 };
 const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
@@ -3302,10 +3407,10 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @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();
             }
@@ -3325,7 +3430,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 ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix ? optionPrefix : null, children ?? label, optionLabelDescription ? jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsxRuntime.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 ? (jsxRuntime.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) : (jsxRuntime.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 !== "" ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -3343,16 +3448,13 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
     const childrenArr = react.Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = react.useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
-    const handleItemClick = react.useCallback((id, disabled) => {
-        if (disabled) {
-            return;
-        }
+    const handleItemClick = react.useCallback((id) => {
         const newSelectedItems = isMulti
             ? selectedItems.includes(id)
                 ? selectedItems.filter(item => item !== id)
                 : [...selectedItems, id]
             : [id];
-        if (onSelectionChange) {
+        if (onSelectionChange !== undefined) {
             onSelectionChange(newSelectedItems);
         }
         else {
@@ -3361,13 +3463,15 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
     }, [isMulti, selectedItems, onSelectionChange]);
     return (jsxRuntime.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 (react.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 react.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 })
@@ -3449,7 +3553,7 @@ const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items
  * @returns {ReactElement} Notice component
  */
 const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withTooltip === false, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
 };
 
 const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
@@ -3482,7 +3586,7 @@ const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "pag
  * Renders the page component. Adds padding and layout to the page.
  */
 const Page = ({ layout, className, children, dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", children: children }));
 };
 
 /**
@@ -3497,17 +3601,30 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
 };
 
 const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.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 (jsxRuntime.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 jsxRuntime.jsx(LoadingContent, {}, `${kpi}-${index}`);
             }
             return (jsxRuntime.jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsxRuntime.jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsxRuntime.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
@@ -3522,10 +3639,18 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
     // Wrap `content` with Tooltip
     const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "block", label: tooltipLabel, children: content })) : (content);
     // Finally, wrap with Link if `to` is provided
-    return to ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
+    return to !== undefined && to !== "" ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
-const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
-    const enabledActions = react.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 = react.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
@@ -3537,7 +3662,7 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
                 return [danger, [...others, action]];
             }
         }, [[], []]);
-        return (jsxRuntime.jsx(MoreMenu, { dataTestId: "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxRuntime.jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length ? jsxRuntime.jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+        return (jsxRuntime.jsx(MoreMenu, { dataTestId: "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxRuntime.jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsxRuntime.jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
     }
     // Otherwise, render them inline as buttons
     return (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
@@ -3564,6 +3689,14 @@ const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "
 const cvaPageHeader = cssClassVarianceUtilities.cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
 const cvaPageHeaderHeading = cssClassVarianceUtilities.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 (jsxRuntime.jsx("div", { className: "flex flex-row items-center", children: jsxRuntime.jsx(Tooltip, { className: "grid min-w-16", disabled: !isTextTruncated, label: title, placement: "top", children: jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
@@ -3579,21 +3712,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 = react.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 (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { dataTestId: "page-header-tag-tooltip", disabled: !tagTooltipLabel, label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: "page-header-tag", children: tagLabel }) }) }));
+        return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { dataTestId: "page-header-tag-tooltip", disabled: tagTooltipLabel === undefined || tagTooltipLabel === "", label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: "page-header-tag", children: tagLabel }) }) }));
     }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
-            withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "medium", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || description ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
-                                    name: descriptionIcon ?? "QuestionMarkCircle",
+            withBorder: tabsList === undefined,
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "medium", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+                                    name: descriptionIcon,
                                     dataTestId: "page-header-description-icon",
-                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions ? (secondaryActions) : null, primaryAction && !primaryAction.hidden ? (jsxRuntime.jsx(Tooltip, { disabled: !primaryAction.tooltipLabel, label: primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName ? jsxRuntime.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, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions !== null && secondaryActions !== undefined ? (secondaryActions) : null, primaryAction !== undefined && (primaryAction.hidden === false || primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { disabled: primaryAction.tooltipLabel === undefined || primaryAction.tooltipLabel === "", label: primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName !== undefined ? (jsxRuntime.jsx(Icon, { name: primaryAction.prefixIconName, size: "small" })) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -3605,7 +3738,7 @@ const cvaPaginationText = cssClassVarianceUtilities.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] = react.useState(pageIndex);
     const [currentPage, setCurrentPage] = react.useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
@@ -3654,7 +3787,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]));
@@ -3757,7 +3890,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {ReactElement} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons ? jsxRuntime.jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons !== null && addons !== undefined ? jsxRuntime.jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -3791,7 +3924,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;
             }
         });
@@ -3847,19 +3980,19 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     });
     const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
-        if (itemOverflowMap[id]) {
+        if (itemOverflowMap[id] === true) {
             return "invisible";
         }
         return "visible";
     };
-    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: react.Children.map(children, child => {
+    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: react.Children.map(children, child => {
                     return react.cloneElement(child, {
                         className: tailwindMerge.twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
                     variant: "ghost-neutral",
-                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: react.Children.map(children, child => {
-                        return itemOverflowMap[child.props.id]
+                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: `${dataTestId}-more-menu`, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: react.Children.map(children, child => {
+                        return itemOverflowMap[child.props.id] === true
                             ? react.cloneElement(child, {
                                 onClick: () => {
                                     child.props.onClick?.();
@@ -3922,8 +4055,8 @@ const cvaTab = cssClassVarianceUtilities.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 = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, react.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 = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName !== undefined ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, react.isValidElement(children) ? children.props.children : children, suffix] }));
     const commonProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
@@ -4083,8 +4216,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;
     react.useEffect(() => {
         setIsMounted(true);
     }, []);
@@ -4104,7 +4237,7 @@ const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, clas
                 className,
                 selected,
                 disabled,
-            }), dataTestId: dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content && !text?.truncate, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
+            }), dataTestId: dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
@@ -4170,7 +4303,7 @@ const cvaValueBarText = cssClassVarianceUtilities.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
@@ -4203,10 +4336,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 ?? uiDesignTokens.color("WARNING", 300);
@@ -4231,94 +4364,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))}${sharedUtils.nonNullable(unit) ? unit : ""}`;
     return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
-const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full"], {
-    variants: {
-        parentControlledScrollable: {
-            true: [""],
-            false: ["overflow-auto"],
-        },
-    },
-    defaultVariants: {
-        parentControlledScrollable: false,
-    },
-});
-const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaVirtualizedListItem = cssClassVarianceUtilities.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 = react.useRef(null);
-    const listRef = react.useRef(null);
-    const [scrollParent, setScrollParent] = react.useState(null);
-    const [parentControlledScrollable, setParentControlledScrollable] = react.useState(false);
-    react.useEffect(() => {
-        if (scrollRef?.current) {
-            setParentControlledScrollable(true);
-            setScrollParent(scrollRef.current);
-        }
-        else {
-            setParentControlledScrollable(false);
-            setScrollParent(containerRef.current);
-        }
-    }, [scrollRef]);
-    const infiniteScrollProps = react.useMemo(() => {
-        return {
-            pagination: pagination || reactTablePagination.noPagination,
-            containerRef: { current: scrollParent },
-            rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
-            rowHeight,
-        };
-    }, [pagination, scrollParent, count, rowHeight]);
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll(infiniteScrollProps);
-    react.useEffect(() => {
-        if (scrollParent) {
-            const handleScroll = () => {
-                fetchMoreOnBottomReached(scrollParent);
-            };
-            scrollParent.addEventListener("scroll", handleScroll);
-            return () => {
-                scrollParent.removeEventListener("scroll", handleScroll);
-            };
-        }
-        return undefined;
-    }, [scrollParent, fetchMoreOnBottomReached]);
-    return (jsxRuntime.jsx("div", { className: cvaVirtualizedListContainer({ parentControlledScrollable, className }), "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
-                const isLoaderRow = virtualRow.index > count - 1;
-                return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
-            }) }) }));
-};
-
 const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
 const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
 
@@ -4389,6 +4441,7 @@ exports.IconButton = IconButton;
 exports.Indicator = Indicator;
 exports.KPI = KPI;
 exports.KPICard = KPICard;
+exports.List = List;
 exports.ListItem = ListItem;
 exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;
@@ -4426,7 +4479,6 @@ exports.Text = Text;
 exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
-exports.VirtualizedList = VirtualizedList;
 exports.ZStack = ZStack;
 exports.cvaButton = cvaButton;
 exports.cvaButtonPrefixSuffix = cvaButtonPrefixSuffix;
@@ -4442,6 +4494,9 @@ exports.cvaIndicatorIconBackground = cvaIndicatorIconBackground;
 exports.cvaIndicatorLabel = cvaIndicatorLabel;
 exports.cvaIndicatorPing = cvaIndicatorPing;
 exports.cvaInteractableItem = cvaInteractableItem;
+exports.cvaList = cvaList;
+exports.cvaListContainer = cvaListContainer;
+exports.cvaListItem = cvaListItem$1;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;
@@ -4455,9 +4510,6 @@ exports.cvaToggleGroupWithSlidingBackground = cvaToggleGroupWithSlidingBackgroun
 exports.cvaToggleItem = cvaToggleItem;
 exports.cvaToggleItemContent = cvaToggleItemContent;
 exports.cvaToggleItemText = cvaToggleItemText;
-exports.cvaVirtualizedList = cvaVirtualizedList;
-exports.cvaVirtualizedListContainer = cvaVirtualizedListContainer;
-exports.cvaVirtualizedListItem = cvaVirtualizedListItem;
 exports.cvaZStackContainer = cvaZStackContainer;
 exports.cvaZStackItem = cvaZStackItem;
 exports.docs = docs;