@trackunit/react-components 1.0.13 → 1.1.0

package/index.cjs.js

@@ -273,7 +273,7 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-const Tag = React__namespace.forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
+const Tag = React.forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
     return (jsxRuntime.jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, ref: ref, children: [children, Boolean(onClose) && !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: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
@@ -284,7 +284,7 @@ Tag.displayName = "Tag";
  * A component used to display the package name and version in the Storybook docs.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxRuntime.jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON?.name }), jsxRuntime.jsxs(Tag, { color: "secondary", children: ["v", packageJSON?.version] })] }));
 };
 
 /**
@@ -294,7 +294,6 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
  * @returns {boolean} True if the text spans multiple lines
  */
 const useIsTextWrapping = (ref) => {
-    var _a, _b;
     const [isWrapping, setIsWrapping] = React.useState(false);
     React.useEffect(() => {
         if (!ref.current) {
@@ -302,7 +301,7 @@ const useIsTextWrapping = (ref) => {
             return;
         }
         setIsWrapping(ref.current.clientHeight > ref.current.scrollHeight / 2);
-    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight, ref]);
+    }, [ref.current?.clientHeight, ref.current?.scrollHeight, ref]);
     return isWrapping;
 };
 
@@ -369,8 +368,8 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relati
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = React__namespace.forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
-    return React__namespace.createElement(type, {
+const Text = React.forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
+    return React.createElement(type, {
         ref,
         className: cvaText({
             inverted,
@@ -700,7 +699,7 @@ const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-const Button = React__namespace.forwardRef(({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ...rest }, ref) => {
+const Button = React.forwardRef(({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ...rest }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const sharedCompProps = {
         ref,
@@ -725,7 +724,7 @@ Button.displayName = "Button";
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
-const IconButton = React__namespace.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+const IconButton = React.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
     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 }));
@@ -775,14 +774,13 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
  * @returns {JSX.Element} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
-    const ref = React__namespace.useRef(null);
-    const titleRef = React__namespace.useRef(null);
+    const ref = React.useRef(null);
+    const titleRef = React.useRef(null);
     const isWrapping = useIsTextWrapping(titleRef);
-    React__namespace.useEffect(() => {
-        var _a, _b;
+    React.useEffect(() => {
         if (autoScroll) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
+            ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
     return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), 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: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, 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(), 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] }));
@@ -1048,7 +1046,7 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
                     retries.current++;
                 }
                 else {
-                    onMaxRetries === null || onMaxRetries === void 0 ? void 0 : onMaxRetries();
+                    onMaxRetries?.();
                     retries.current = 0;
                 }
                 startTimeout(); // Restart the timeout if it's still running
@@ -1084,7 +1082,7 @@ const useDebounce = (value, delay = 500, direction, onBounce) => {
             !direction) {
             handler = setTimeout(() => {
                 setDebouncedValue(value);
-                onBounce === null || onBounce === void 0 ? void 0 : onBounce(value);
+                onBounce?.(value);
             }, delay);
         }
         else {
@@ -1145,7 +1143,7 @@ function getDevicePixelRatio(options) {
  */
 const useElevatedState = (initialState, customState) => {
     const fallbackState = React.useState(initialState);
-    return customState !== null && customState !== void 0 ? customState : fallbackState;
+    return customState ?? fallbackState;
 };
 
 /**
@@ -1253,7 +1251,6 @@ const useIsFullscreen = () => {
  * @returns {boolean} True if the text is cut off.
  */
 const useIsTextCutOff = (ref) => {
-    var _a, _b;
     const [isTextCutOff, setIsTextCutOff] = React.useState(false);
     React.useEffect(() => {
         if (!ref.current) {
@@ -1261,7 +1258,7 @@ const useIsTextCutOff = (ref) => {
             return;
         }
         setIsTextCutOff(ref.current.offsetWidth < ref.current.scrollWidth);
-    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollWidth, ref]);
+    }, [ref.current?.offsetWidth, ref.current?.scrollWidth, ref]);
     return isTextCutOff;
 };
 
@@ -1424,11 +1421,11 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
     const [focused, setFocused] = React.useState(hasFocus());
     const onFocusInternal = React.useCallback(() => {
         setFocused(hasFocus());
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        onFocus?.();
     }, [onFocus]);
     const onBlurInternal = React.useCallback(() => {
         setFocused(hasFocus());
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        onBlur?.();
     }, [onBlur]);
     React.useEffect(() => {
         setFocused(hasFocus()); // Focus for additional renders
@@ -1726,7 +1723,7 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
         tertiary: "h3",
         subtitle: "h4",
     };
-    return React__namespace.createElement(semanticType[variant], {
+    return React.createElement(semanticType[variant], {
         ...rest,
         className: cvaHeading({ subtle, inverted, size: variant, className }),
         "data-testid": dataTestId,
@@ -1823,8 +1820,8 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = sharedUtils.uuidv4();
-    const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
-    const handleClick = React__namespace.useCallback((e) => {
+    const [expanded, setExpanded] = React.useState(initialExpanded);
+    const handleClick = React.useCallback((e) => {
         if (onToggle) {
             onToggle(e, !expanded);
         }
@@ -1896,8 +1893,7 @@ const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} CopyableText component
  */
 const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
-    var _a;
-    const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
+    const value = alternativeText ?? text ?? "";
     const [animating, setAnimating] = React.useState(false);
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const handleOnClick = () => {
@@ -3271,7 +3267,6 @@ var ForwardRef = /*#__PURE__*/React.forwardRef(SvgWorkerWithSign);
  * - 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, }) => {
-    var _a, _b, _c;
     const ImageSource = React.useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -3289,7 +3284,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return ForwardRef$2;
         }
     }, [image]);
-    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? 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 ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (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: "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 ? (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: (_a = additionalHelpAction.to) === null || _a === void 0 ? void 0 : _a.parameters, target: (_b = additionalHelpAction.to) === null || _b === void 0 ? void 0 : _b.target, to: (_c = additionalHelpAction.to) === null || _c === void 0 ? void 0 : _c.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 ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (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: "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 ? (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-gray-400"]);
@@ -3431,13 +3426,13 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
     const [labelId, setLabelId] = React.useState();
     const [descriptionId, setDescriptionId] = React.useState();
-    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
     const popoverData = react.useFloating({
         placement,
         open: isOpen,
         onOpenChange: open => {
             setUncontrolledIsOpen(open);
-            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
+            onOpenStateChange?.(open);
         },
         whileElementsMounted: react.autoUpdate,
         middleware: [
@@ -3567,8 +3562,7 @@ const getDefaultPortalContainer = () => {
  * alongside other portalled elements.
  */
 const Portal = (props) => {
-    var _a;
-    return jsxRuntime.jsx(react.FloatingPortal, { ...props, root: (_a = props.root) !== null && _a !== void 0 ? _a : getDefaultPortalContainer() });
+    return jsxRuntime.jsx(react.FloatingPortal, { ...props, root: props.root ?? getDefaultPortalContainer() });
 };
 
 const cvaPopoverContainer = cssClassVarianceUtilities.cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
@@ -3583,10 +3577,9 @@ const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "it
 const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
 
 const PopoverContent = React.forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
-    var _a;
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen ? (jsxRuntime.jsx(react.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 !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen ? (jsxRuntime.jsx(react.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,
@@ -3697,8 +3690,8 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @returns {JSX.Element} Tooltip component
  */
 const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
-    const [isOpen, setIsOpen] = React__namespace.useState(false);
-    const arrowRef = React__namespace.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const arrowRef = React.useRef(null);
     const { refs, floatingStyles, context } = react.useFloating({
         placement: placement === "auto" ? "bottom" : placement,
         open: isOpen,
@@ -3710,13 +3703,13 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     // Please don't try to move this into the component body directly
     // I tried and it caused infinite re-renders some places (for whatever reason)
     const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
-    const openTooltip = React__namespace.useCallback(() => {
+    const openTooltip = React.useCallback(() => {
         if (disabled) {
             return;
         }
         setIsOpen(true);
     }, [disabled]);
-    const closeTooltip = React__namespace.useCallback(() => {
+    const closeTooltip = React.useCallback(() => {
         if (disabled) {
             return;
         }
@@ -3905,15 +3898,14 @@ const KPICard = ({ asChild = false, title, value, loading, unit, className, data
     const Comp = asChild ? reactSlot.Slot : "div";
     const isSmallVariant = variant === "small";
     return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
-                                        isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                                        isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                     }), children: [jsxRuntime.jsxs("span", { children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    var _a, _b;
     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, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPICardTrendPercentage({ color: (_b = trend.variant) === null || _b === void 0 ? void 0 : _b.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 ? (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: cvaKPICardTrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
@@ -4003,7 +3995,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
+    const { selected, disabled, focused, className, variant } = props ?? {};
     return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
@@ -4120,8 +4112,8 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
             variant,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex !== null && tabIndex !== void 0 ? 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: [children !== null && children !== void 0 ? 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] }));
+            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: [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] }));
 };
 
 /**
@@ -4137,8 +4129,8 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
  */
 const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = React.Children.toArray(children);
-    const [internalSelectedItems, setInternalSelectedItems] = React.useState(controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : []);
-    const selectedItems = controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : internalSelectedItems;
+    const [internalSelectedItems, setInternalSelectedItems] = React.useState(controlledSelectedItems ?? []);
+    const selectedItems = controlledSelectedItems ?? internalSelectedItems;
     const handleItemClick = React.useCallback((id, disabled) => {
         if (disabled) {
             return;
@@ -4156,22 +4148,21 @@ 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) => {
-            var _a, _b;
             if (React.isValidElement(menuItem)) {
-                const isSelected = selectedItems.includes((_a = menuItem.props.id) !== null && _a !== void 0 ? _a : `${index}`) || menuItem.props.selected;
+                const isSelected = selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected;
                 return React.cloneElement(menuItem, {
                     ...menuItem.props,
                     key: index,
                     onClick: (event) => {
-                        var _a, _b, _c;
-                        (_b = (_a = menuItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-                        handleItemClick((_c = menuItem.props.id) !== null && _c !== void 0 ? _c : `${index}`, menuItem.props.disabled);
+                        menuItem.props.onClick?.(event);
+                        handleItemClick(menuItem.props.id ?? `${index}`, menuItem.props.disabled);
                     },
                     className: isMulti && isSelected
                         ? cvaMenuListMultiSelect({ className: menuItem.props.className })
                         : cvaMenuListItem({ className: menuItem.props.className }),
                     selected: isSelected,
-                    suffix: (_b = menuItem.props.suffix) !== null && _b !== void 0 ? _b : (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                    suffix: menuItem.props.suffix ??
+                        (isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
                 });
             }
             return null;
@@ -4197,7 +4188,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton ?? (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -4302,7 +4293,7 @@ const Page = ({ layout, className, children, dataTestId }) => {
  * Applies padding to content. To be used within a <Page/>
  *
  * @param {PageContentProps} props - The component props.
- * @returns {React.ReactNode} - The rendered component.
+ * @returns {ReactNode} - The rendered component.
  */
 const PageContent = ({ className, children, dataTestId, layout }) => {
     return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
@@ -4362,7 +4353,7 @@ const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading
             withBorder: !tabsList,
         }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
                             actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon !== null && descriptionIcon !== void 0 ? descriptionIcon : "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon ?? "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -4406,7 +4397,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
             setPage(to);
             setCurrentPage(String(to + 1));
         }
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({ from, to, description });
+        onPageChange?.({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
         return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) }));
@@ -4577,7 +4568,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
     }, [handleIntersection, threshold]);
     const unobserve = React.useCallback(() => {
         const currentObserver = observerRef.current;
-        currentObserver === null || currentObserver === void 0 ? void 0 : currentObserver.disconnect();
+        currentObserver?.disconnect();
         observerRef.current = null;
     }, []);
     const initializeObserver = React.useCallback(() => {
@@ -4608,7 +4599,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
-        threshold: overflowThreshold !== null && overflowThreshold !== void 0 ? overflowThreshold : 0.8,
+        threshold: overflowThreshold ?? 0.8,
     });
     const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
@@ -4623,12 +4614,11 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
                     variant: "ghost-neutral",
-                }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React.Children.map(children, child => {
+                }, ...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]
                             ? React.cloneElement(child, {
                                 onClick: () => {
-                                    var _a, _b;
-                                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    child.props.onClick?.();
                                     close();
                                 },
                                 className: "w-full",
@@ -4752,7 +4742,7 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
                 setSelected(item.id);
-                onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
+                onChange?.(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 /**
@@ -4760,7 +4750,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
     // eslint-disable-next-line sonarjs/no-selector-parameter
-    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
@@ -4843,14 +4833,13 @@ const getDefaultFillColor = (score) => {
  * @returns {string} color value
  */
 const getFillColor = (score, levelColors) => {
-    var _a, _b;
     if (levelColors.low && score < (levelColors.low.level || 0)) {
         return levelColors.low.color;
     }
     if (levelColors.high && score >= (levelColors.high.level || 0)) {
         return levelColors.high.color;
     }
-    return (_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : uiDesignTokens.color("WARNING", 300);
+    return levelColors.medium?.color ?? uiDesignTokens.color("WARNING", 300);
 };
 /**
  * Helper function to get color used by the ValueBar
@@ -4876,7 +4865,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const barWidth = showValue && size === "small" ? 90 : 100;
-    return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? uiDesignTokens.color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
 const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "overflow-auto"]);
@@ -4907,13 +4896,12 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @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, }) => {
-    var _a;
     const containerRef = React.useRef(null);
     const listRef = React.useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
         pagination: pagination || reactTablePagination.noPagination,
         containerRef,
-        rowSize: ((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage) && pagination.isLoading ? count + 1 : count,
+        rowSize: pagination?.pageInfo?.hasNextPage && pagination.isLoading ? count + 1 : count,
         rowHeight,
     });
     return (jsxRuntime.jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
@@ -4922,7 +4910,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 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 === null || pagination === void 0 ? void 0 : 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));
+                    }, 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));
             }) }) }));
 };