@trackunit/react-components 1.0.13 → 1.1.1

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useRef, useMemo, useEffect, useState, useCallback, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
+import { useRef, useMemo, useEffect, forwardRef, useState, createElement, useCallback, memo, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -253,7 +253,7 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-const Tag = React.forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
+const Tag = forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
     return (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
             jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
@@ -264,7 +264,7 @@ Tag.displayName = "Tag";
  * A component used to display the package name and version in the Storybook docs.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON === null || packageJSON === void 0 ? void 0 : packageJSON.version] })] }));
+    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON?.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON?.version] })] }));
 };
 
 /**
@@ -274,7 +274,6 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
  * @returns {boolean} True if the text spans multiple lines
  */
 const useIsTextWrapping = (ref) => {
-    var _a, _b;
     const [isWrapping, setIsWrapping] = useState(false);
     useEffect(() => {
         if (!ref.current) {
@@ -282,7 +281,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;
 };
 
@@ -349,8 +348,8 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-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, {
+const Text = 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 createElement(type, {
         ref,
         className: cvaText({
             inverted,
@@ -680,7 +679,7 @@ const cvaIconButton = cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-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 Button = 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 ? Slot : "button";
     const sharedCompProps = {
         ref,
@@ -705,7 +704,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.forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+const IconButton = forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
     return (jsx(Button, { className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
         // eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
         prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
@@ -755,14 +754,13 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
  * @returns {JSX.Element} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
-    const ref = React.useRef(null);
-    const titleRef = React.useRef(null);
+    const ref = useRef(null);
+    const titleRef = useRef(null);
     const isWrapping = useIsTextWrapping(titleRef);
-    React.useEffect(() => {
-        var _a, _b;
+    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 (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsx("div", { className: cvaAlertIconContainer(), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
@@ -1028,7 +1026,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
@@ -1064,7 +1062,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 {
@@ -1125,7 +1123,7 @@ function getDevicePixelRatio(options) {
  */
 const useElevatedState = (initialState, customState) => {
     const fallbackState = useState(initialState);
-    return customState !== null && customState !== void 0 ? customState : fallbackState;
+    return customState ?? fallbackState;
 };
 
 /**
@@ -1233,7 +1231,6 @@ const useIsFullscreen = () => {
  * @returns {boolean} True if the text is cut off.
  */
 const useIsTextCutOff = (ref) => {
-    var _a, _b;
     const [isTextCutOff, setIsTextCutOff] = useState(false);
     useEffect(() => {
         if (!ref.current) {
@@ -1241,7 +1238,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;
 };
 
@@ -1404,11 +1401,11 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
     const [focused, setFocused] = useState(hasFocus());
     const onFocusInternal = useCallback(() => {
         setFocused(hasFocus());
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        onFocus?.();
     }, [onFocus]);
     const onBlurInternal = useCallback(() => {
         setFocused(hasFocus());
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        onBlur?.();
     }, [onBlur]);
     useEffect(() => {
         setFocused(hasFocus()); // Focus for additional renders
@@ -1454,8 +1451,8 @@ const BreadcrumbForLargeScreen = ({ dataTestId, breadcrumbItems }) => {
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
 const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
-    const [expanded, setExpanded] = React__default.useState(false);
-    const getReducedArray = React__default.useCallback(() => {
+    const [expanded, setExpanded] = useState(false);
+    const getReducedArray = useCallback(() => {
         let reducedArrayElements = [];
         const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "secondary", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
@@ -1706,7 +1703,7 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
         tertiary: "h3",
         subtitle: "h4",
     };
-    return React.createElement(semanticType[variant], {
+    return createElement(semanticType[variant], {
         ...rest,
         className: cvaHeading({ subtle, inverted, size: variant, className }),
         "data-testid": dataTestId,
@@ -1803,8 +1800,8 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = uuidv4();
-    const [expanded, setExpanded] = React.useState(initialExpanded);
-    const handleClick = React.useCallback((e) => {
+    const [expanded, setExpanded] = useState(initialExpanded);
+    const handleClick = useCallback((e) => {
         if (onToggle) {
             onToggle(e, !expanded);
         }
@@ -1876,8 +1873,7 @@ const cvaCopyableText = 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] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
     const handleOnClick = () => {
@@ -3251,7 +3247,6 @@ var ForwardRef = /*#__PURE__*/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 = useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -3269,7 +3264,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return ForwardRef$2;
         }
     }, [image]);
-    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [customImageSrc ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction ? (jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: (_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 (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [customImageSrc ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction ? (jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to?.parameters, target: additionalHelpAction.to?.target, to: additionalHelpAction.to?.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-gray-400"]);
@@ -3411,13 +3406,13 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
-    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
     const popoverData = useFloating({
         placement,
         open: isOpen,
         onOpenChange: open => {
             setUncontrolledIsOpen(open);
-            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
+            onOpenStateChange?.(open);
         },
         whileElementsMounted: autoUpdate,
         middleware: [
@@ -3547,8 +3542,7 @@ const getDefaultPortalContainer = () => {
  * alongside other portalled elements.
  */
 const Portal = (props) => {
-    var _a;
-    return jsx(FloatingPortal, { ...props, root: (_a = props.root) !== null && _a !== void 0 ? _a : getDefaultPortalContainer() });
+    return jsx(FloatingPortal, { ...props, root: props.root ?? getDefaultPortalContainer() });
 };
 
 const cvaPopoverContainer = cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
@@ -3562,11 +3556,10 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
 });
 const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 
-const PopoverContent = React__default.forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
-    var _a;
+const PopoverContent = forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(Portal, { id: portalId, children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== 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 (jsx(Portal, { id: portalId, children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps.dataTestId ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -3677,8 +3670,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.useState(false);
-    const arrowRef = React.useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
         placement: placement === "auto" ? "bottom" : placement,
         open: isOpen,
@@ -3690,13 +3683,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 = (jsx("div", { className: cvaTooltipContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
-    const openTooltip = React.useCallback(() => {
+    const openTooltip = useCallback(() => {
         if (disabled) {
             return;
         }
         setIsOpen(true);
     }, [disabled]);
-    const closeTooltip = React.useCallback(() => {
+    const closeTooltip = useCallback(() => {
         if (disabled) {
             return;
         }
@@ -3885,15 +3878,14 @@ const KPICard = ({ asChild = false, title, value, loading, unit, className, data
     const Comp = asChild ? Slot : "div";
     const isSmallVariant = variant === "small";
     return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
-                                        isDefaultAndHasTrendValue: Boolean((trend === null || trend === void 0 ? void 0 : trend.value) && !isSmallVariant),
+                                        isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                     }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
-    var _a, _b;
     if (!trend) {
         return null;
     }
-    return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, ((_a = trend.variant) === null || _a === void 0 ? void 0 : _a.icon) ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (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 (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPICardTrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
 const cvaMenuList = cvaMerge([
@@ -3983,7 +3975,7 @@ const cvaInteractableItem = 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 twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
@@ -4100,8 +4092,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 ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children !== null && children !== void 0 ? children : label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+            onClick?.(e);
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [children ?? label, optionLabelDescription ? jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] }) : null] })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -4117,8 +4109,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 = Children.toArray(children);
-    const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : []);
-    const selectedItems = controlledSelectedItems !== null && controlledSelectedItems !== void 0 ? controlledSelectedItems : internalSelectedItems;
+    const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
+    const selectedItems = controlledSelectedItems ?? internalSelectedItems;
     const handleItemClick = useCallback((id, disabled) => {
         if (disabled) {
             return;
@@ -4136,22 +4128,21 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
         }
     }, [isMulti, selectedItems, onSelectionChange]);
     return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, role: "list", tabIndex: 0, children: childrenArr.map((menuItem, index) => {
-            var _a, _b;
             if (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 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 ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
+                    suffix: menuItem.props.suffix ??
+                        (isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null),
                 });
             }
             return null;
@@ -4177,7 +4168,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center"]);
@@ -4282,7 +4273,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 (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
@@ -4342,7 +4333,7 @@ const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading
             withBorder: !tabsList,
         }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
                             actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon !== null && descriptionIcon !== void 0 ? descriptionIcon : "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon ?? "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -4386,7 +4377,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 (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, width: 150 }) }));
@@ -4557,7 +4548,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
     }, [handleIntersection, threshold]);
     const unobserve = useCallback(() => {
         const currentObserver = observerRef.current;
-        currentObserver === null || currentObserver === void 0 ? void 0 : currentObserver.disconnect();
+        currentObserver?.disconnect();
         observerRef.current = null;
     }, []);
     const initializeObserver = useCallback(() => {
@@ -4588,7 +4579,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 = objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
@@ -4597,18 +4588,17 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React__default.Children.map(children, child => {
-                    return React__default.cloneElement(child, {
+    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: Children.map(children, child => {
+                    return cloneElement(child, {
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (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 => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React__default.Children.map(children, child => {
+                }, ...moreMenuProps, className: moreMenuProps?.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: Children.map(children, child => {
                         return itemOverflowMap[child.props.id]
-                            ? React__default.cloneElement(child, {
+                            ? 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",
@@ -4669,12 +4659,12 @@ const cvaTab = cvaMerge([
  * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
 const Tab = ({ value, isFullWidth = false, iconName, dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild = true, ...rest }) => {
-    const renderContent = () => (jsxs(Fragment, { children: [iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, React__default.isValidElement(children) ? children.props.children : children, suffix] }));
+    const renderContent = () => (jsxs(Fragment, { children: [iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, isValidElement(children) ? children.props.children : children, suffix] }));
     const commonProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
     };
-    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (React__default.cloneElement(children, {
+    return (jsx(Trigger, { asChild: true, value: value, children: asChild && typeof children !== "string" ? (cloneElement(children, {
             ...commonProps,
             children: renderContent(),
         })) : (jsx("button", { ...commonProps, "data-testid": dataTestId, children: renderContent() })) }));
@@ -4732,7 +4722,7 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: 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))) }));
 };
 /**
@@ -4740,7 +4730,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 ? (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: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (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: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+    return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
 const cvaValueBar = cvaMerge(["w-full"], {
@@ -4823,14 +4813,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 : color("WARNING", 300);
+    return levelColors.medium?.color ?? color("WARNING", 300);
 };
 /**
  * Helper function to get color used by the ValueBar
@@ -4856,7 +4845,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 (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (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" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
+    return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, role: "img", children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background", className }), "data-testid": "value-bar-svg-rect-0", rx: size === "extraSmall" ? "2" : "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: size === "extraSmall" ? "2" : "5", width: `${score * barWidth}%` }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? "white", x: "12", y: "23", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), fill: valueColor ?? color("NEUTRAL", 400, "CSS"), x: `${barWidth + 2}%`, y: "11", children: [Number(value.toFixed(1)), unit || ""] })) : null] }) }));
 };
 
 const cvaVirtualizedListContainer = cvaMerge(["h-full", "overflow-auto"]);
@@ -4887,13 +4876,12 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @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 = useRef(null);
     const listRef = useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
         pagination: pagination || 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 (jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
@@ -4902,7 +4890,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 const isLoaderRow = virtualRow.index > count - 1;
                 return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, tabIndex: -1, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, tabIndex: -1, children: isLoaderRow ? (pagination?.isLoading ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.0.13",
+  "version": "1.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -22,7 +22,7 @@
     "@trackunit/ui-design-tokens": "^1.0.1",
     "@trackunit/css-class-variance-utilities": "^1.0.1",
     "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/ui-icons": "^1.0.3",
+    "@trackunit/ui-icons": "^1.0.4",
     "@trackunit/react-table-pagination": "^1.0.1"
   },
   "module": "./index.esm.js",

package/src/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { IntentColors } from "@trackunit/ui-design-tokens";
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type AlertActionType = "primary" | "secondary";
 export type AlertAction = {
@@ -11,7 +11,7 @@ export interface AlertProps extends CommonProps {
     /**
      * Child nodes.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Color of the alert component.
      *

package/src/components/Card/Card.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { InputHTMLAttributes, MouseEventHandler, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
-export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDivElement> {
+export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */
@@ -9,19 +9,19 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
     /**
      * Children to show in the card
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * A Click handler function
      */
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * A MouseEnter handler function
      */
-    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
     /**
      * A MouseLeave handler function
      */
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 }
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.

package/src/components/Card/CardBody.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 export interface CardBodyProps extends CommonProps {
     /**
@@ -16,7 +16,7 @@ export interface CardBodyProps extends CommonProps {
     /**
      * Child elements to render in the body
      */
-    children: React.ReactNode | null;
+    children: ReactNode | null;
     /**
      * The id of the element.
      */