@trackunit/react-components 0.1.257 → 0.1.260

package/index.cjs.js

@@ -198,7 +198,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsxRuntime.jsx("title", { children: title ? title : iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: [jsxRuntime.jsx("title", { children: title ? title : iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -280,7 +280,7 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
 const Tag = React__namespace.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, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) })) : null] }));
+            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] }));
 });
 Tag.displayName = "Tag";
 
@@ -461,7 +461,7 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", }) => {
-    return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }) }));
 };
 
 const cvaButton = cssClassVarianceUtilities.cvaMerge([
@@ -711,7 +711,7 @@ const Button = React__namespace.forwardRef((_a, ref) => {
         type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading ? (jsxRuntime.jsx(Spinner, { size: "small", centering: "vertically", containerClassName: cvaButtonSpinnerContainer(), className: cvaButtonSpinner({ variant }) })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
 });
 Button.displayName = "Button";
 
@@ -720,7 +720,7 @@ Button.displayName = "Button";
  */
 const IconButton = React__namespace.forwardRef((_a, ref) => {
     var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
-    return (jsxRuntime.jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref, className: cvaIconButton({ size: size, className }) }, rest)));
+    return (jsxRuntime.jsx(Button, Object.assign({ className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, prefix: !loading ? icon : undefined, ref: ref, size: size, square: square }, rest)));
 });
 IconButton.displayName = "IconButton";
 
@@ -731,7 +731,7 @@ IconButton.displayName = "IconButton";
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
+    return (jsxRuntime.jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "border", "@container"], {
@@ -764,13 +764,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsxRuntime.jsx(Icon, { name: "ExclamationTriangle", color: "danger" });
+                return jsxRuntime.jsx(Icon, { color: "danger", name: "ExclamationTriangle" });
             case "warning":
-                return jsxRuntime.jsx(Icon, { name: "ExclamationCircle", color: "warning" });
+                return jsxRuntime.jsx(Icon, { color: "warning", name: "ExclamationCircle" });
             case "success":
-                return jsxRuntime.jsx(Icon, { name: "CheckCircle", color: "success" });
+                return jsxRuntime.jsx(Icon, { color: "success", name: "CheckCircle" });
             case "info":
-                return jsxRuntime.jsx(Icon, { name: "InformationCircle", color: "info" });
+                return jsxRuntime.jsx(Icon, { color: "info", name: "InformationCircle" });
             default:
                 return jsxRuntime.jsx(Icon, { name: "InformationCircle" });
         }
@@ -782,7 +782,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, 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, { size: "small", variant: "ghost-neutral", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { size: "small", variant: "ghost-neutral", onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { size: "small", variant: color === "danger" ? "primary-danger" : "primary", onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, 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] }));
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([
@@ -935,7 +935,7 @@ const ROLE_CARD = "region";
  */
 const Card = (_a) => {
     var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId"]);
-    return (jsxRuntime.jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD }, rest, { children: children })));
 };
 
 /**
@@ -946,8 +946,8 @@ const Card = (_a) => {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -959,11 +959,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+    return (jsxRuntime.jsx("div", { className: cvaCardFooterDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: children }));
+        }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -1021,11 +1021,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+    return (jsxRuntime.jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "ghost-neutral", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
+        }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
@@ -1069,7 +1069,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaCollapseHeader({ expanded, className: headerClassName }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
@@ -1116,7 +1116,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
         copyToClipboard(value);
         setAnimating(true);
     };
-    return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), title: value, children: text }));
+    return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
 const localeLookup = {
@@ -1159,7 +1159,7 @@ const useLocale = (language) => {
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
-    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
 };
 
 /**
@@ -1180,7 +1180,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             onRangeSelect({ from, to });
         }
     }, [onRangeSelect]);
-    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", onSelect: onSelect, selected: selectedDays, defaultMonth: selectedDays ? selectedDays.from : undefined, locale: locale, disabled: disabledDays, className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
 };
 
 const cvaDrawerOverlay = cssClassVarianceUtilities.cvaMerge([
@@ -1228,7 +1228,7 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
             window.removeEventListener("keyup", onKeyPress);
         };
     }, [open, onClose]);
-    return (jsxRuntime.jsx(react.FloatingFocusManager, { context: context, children: open ? (jsxRuntime.jsxs("div", { id: "drawer", children: [!disableOverlay && (jsxRuntime.jsx("div", { className: cvaDrawerOverlay(), "aria-hidden": open, onClick: onClose, id: "drawer__overlay" })), jsxRuntime.jsx(Card, { "aria-hidden": open, "data-testid": dataTestId, id: "drawer__card", className: cvaDrawerCard({ position, className }), children: children })] })) : (
+    return (jsxRuntime.jsx(react.FloatingFocusManager, { context: context, children: open ? (jsxRuntime.jsxs("div", { id: "drawer", children: [!disableOverlay && (jsxRuntime.jsx("div", { "aria-hidden": open, className: cvaDrawerOverlay(), id: "drawer__overlay", onClick: onClose })), jsxRuntime.jsx(Card, { "aria-hidden": open, className: cvaDrawerCard({ position, className }), "data-testid": dataTestId, id: "drawer__card", children: children })] })) : (
         // eslint-disable-next-line react/jsx-no-useless-fragment
         jsxRuntime.jsx(jsxRuntime.Fragment, {})) }));
 };
@@ -1264,7 +1264,7 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsxRuntime.jsx("div", { "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", className: cvaSkeletonLine({ className }), style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
@@ -1334,7 +1334,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, 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, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), title ? jsxRuntime.jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsxRuntime.jsx(Text, { align: "center", children: description }) : null, action] })) }));
+    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", size: "large" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc ? customImageSrc : imageSource, width: 200 }), title ? jsxRuntime.jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsxRuntime.jsx(Text, { align: "center", children: description }) : null, action] })) }));
 };
 
 const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
@@ -1346,7 +1346,7 @@ const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-p
  * @returns {JSX.Element} External Link component
  */
 const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
-    return (jsxRuntime.jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
+    return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
 /**
@@ -1451,7 +1451,7 @@ const PopoverContent = React__default["default"].forwardRef(function PopoverCont
     var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
     const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
+    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", ref: ref, style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style) }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
 });
 
 /**
@@ -1461,7 +1461,7 @@ const PopoverContent = React__default["default"].forwardRef(function PopoverCont
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
+    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
 const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
@@ -1474,7 +1474,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
         return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
     }
     else {
-        return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+        return (jsxRuntime.jsx(Button, Object.assign({ "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button" }, context.getReferenceProps(props), { children: children })));
     }
 });
 
@@ -1537,7 +1537,7 @@ const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge(["max-w-sm",
  */
 const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
     const { context: floatingContext } = usePopoverContext();
-    return (jsxRuntime.jsx(react.FloatingArrow, { ref: arrowRef, context: floatingContext, className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }) }));
+    return (jsxRuntime.jsx(react.FloatingArrow, { className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }), context: floatingContext, ref: arrowRef }));
 };
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
@@ -1566,7 +1566,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId ? `${dataTestId}-icon` : undefined }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small" }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -1669,7 +1669,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }) : null, icon] }), label !== undefined && withLabel ? jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }) : null] })) }));
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }) : null, icon] }), label !== undefined && withLabel ? jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }) : null] })) }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -1747,13 +1747,13 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
  */
 const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
-    return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { id: id, className: cvaMenuItem({
+    return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
             selected,
             focused,
             disabled,
             size,
             className: containerProps.className,
-        }), onClick: e => {
+        }), id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
         }, tabIndex: 0, children: [prefix ? jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix }) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }) : null] })));
@@ -1784,7 +1784,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsxRuntime.jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
+    return (jsxRuntime.jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsxRuntime.jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
 };
 
 const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);
@@ -1805,7 +1805,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ 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, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
 const cvaModalContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full", "flex", "items-center"]);
@@ -1850,12 +1850,12 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
  */
 const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
     const ref = React__namespace.useRef(null);
-    return (jsxRuntime.jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
+    return (jsxRuntime.jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
             // only react on click on backdrop - accessing first child to get around styled element element
             if (ref.current !== null && e.target === ref.current.children[0]) {
                 onClick();
             }
-        }, children: children }));
+        }, ref: ref, children: children }));
 };
 
 /**
@@ -1867,7 +1867,7 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
 const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, noShadow: noBackdropShadow, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
+    return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
 });
 Modal.displayName = "Modal";
 
@@ -1893,7 +1893,7 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
             }
         },
     });
-    const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, Object.assign({ ref: modalRef, isOpen: isOpen }, props)) }));
+    const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, Object.assign({ isOpen: isOpen, ref: modalRef }, props)) }));
     PortalWrapper.displayName = "Modal";
     const WrappedModal = React.useCallback(PortalWrapper, [Portal, isOpen]);
     return {
@@ -1957,7 +1957,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, variant: "ghost-neutral", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouterDom.Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }), renderAs: reactRouterDom.Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouterDom.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2006,9 +2006,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsxRuntime.jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxRuntime.jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { "data-testid": "prev-page", disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), onClick: () => handlePageChange("prev"), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsxRuntime.jsx(IconButton, { "data-testid": "next-page", disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", variant: "ghost-neutral" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2092,7 +2092,7 @@ const cvaSpacer = cssClassVarianceUtilities.cvaMerge([], {
  * @returns {JSX.Element} Spacer component
  */
 const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
-    return jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaSpacer({ className, border, size }) });
+    return jsxRuntime.jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
 };
 
 /**
@@ -2102,7 +2102,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle ? jsxRuntime.jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }) : null] }), addons ? jsxRuntime.jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle }) : null] }), addons ? jsxRuntime.jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -2197,7 +2197,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, children: React__default["default"].Children.map(children, child => {
+    return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, ref: overflowContainerRef, children: React__default["default"].Children.map(children, child => {
                     return React__default["default"].cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -2280,7 +2280,7 @@ const Tab = (_a) => {
  */
 const TabContent = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsxRuntime.jsx(reactTabs.Content, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-content` : undefined, className: cvaTabContent({ className }) }, rest, { children: children })));
+    return (jsxRuntime.jsx(reactTabs.Content, Object.assign({ className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined }, rest, { children: children })));
 };
 
 /**
@@ -2288,7 +2288,7 @@ const TabContent = (_a) => {
  */
 const TabList = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsxRuntime.jsx(reactTabs.List, Object.assign({ "data-testid": dataTestId, className: cvaTabList({ className }) }, rest, { children: children })));
+    return (jsxRuntime.jsx(reactTabs.List, Object.assign({ className: cvaTabList({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 
 /**
@@ -2447,7 +2447,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max);
     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" }), width: `${barWidth}%`, rx: "5", "data-testid": "value-bar-svg-rect-0" }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5", "data-testid": "value-bar-svg-rect-1" }), showValue && size === "large" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), 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" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "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] }) }));
 };
 
 const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
@@ -2496,7 +2496,7 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} WidgetBody component
  */
 const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), children: children }));
+    return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -167,7 +167,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: title ? title : iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxs("svg", { "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: [jsx("title", { children: title ? title : iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -249,7 +249,7 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
 const Tag = React.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, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) })) : null] }));
+            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] }));
 });
 Tag.displayName = "Tag";
 
@@ -430,7 +430,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", }) => {
-    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) }));
+    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }) }));
 };
 
 const cvaButton = cvaMerge([
@@ -680,7 +680,7 @@ const Button = React.forwardRef((_a, ref) => {
         type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? (jsx(Spinner, { size: "small", centering: "vertically", containerClassName: cvaButtonSpinnerContainer(), className: cvaButtonSpinner({ variant }) })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
 });
 Button.displayName = "Button";
 
@@ -689,7 +689,7 @@ Button.displayName = "Button";
  */
 const IconButton = React.forwardRef((_a, ref) => {
     var { icon, size = "medium", square = true, loading, disabled, className } = _a, rest = __rest(_a, ["icon", "size", "square", "loading", "disabled", "className"]);
-    return (jsx(Button, Object.assign({ size: size, prefix: !loading ? icon : undefined, square: square, loading: loading, disabled: disabled || loading, ref: ref, className: cvaIconButton({ size: size, className }) }, rest)));
+    return (jsx(Button, Object.assign({ className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, prefix: !loading ? icon : undefined, ref: ref, size: size, square: square }, rest)));
 });
 IconButton.displayName = "IconButton";
 
@@ -700,7 +700,7 @@ IconButton.displayName = "IconButton";
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
+    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
 const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "border", "@container"], {
@@ -733,13 +733,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon, { name: "ExclamationTriangle", color: "danger" });
+                return jsx(Icon, { color: "danger", name: "ExclamationTriangle" });
             case "warning":
-                return jsx(Icon, { name: "ExclamationCircle", color: "warning" });
+                return jsx(Icon, { color: "warning", name: "ExclamationCircle" });
             case "success":
-                return jsx(Icon, { name: "CheckCircle", color: "success" });
+                return jsx(Icon, { color: "success", name: "CheckCircle" });
             case "info":
-                return jsx(Icon, { name: "InformationCircle", color: "info" });
+                return jsx(Icon, { color: "info", name: "InformationCircle" });
             default:
                 return jsx(Icon, { name: "InformationCircle" });
         }
@@ -751,7 +751,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, 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, { size: "small", variant: "ghost-neutral", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { size: "small", variant: "ghost-neutral", onClick: secondaryAction.onClick, loading: secondaryAction.loading, children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { size: "small", variant: color === "danger" ? "primary-danger" : "primary", onClick: primaryAction.onClick, loading: primaryAction.loading, children: primaryAction.label })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, 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] }));
 };
 
 const cvaBadge = cvaMerge([
@@ -904,7 +904,7 @@ const ROLE_CARD = "region";
  */
 const Card = (_a) => {
     var { children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId } = _a, rest = __rest(_a, ["children", "onClick", "fullHeight", "onMouseEnter", "onMouseLeave", "className", "dataTestId"]);
-    return (jsx("div", Object.assign({ onClick: onClick, className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-testid": dataTestId, role: ROLE_CARD }, rest, { children: children })));
+    return (jsx("div", Object.assign({ className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD }, rest, { children: children })));
 };
 
 /**
@@ -915,8 +915,8 @@ const Card = (_a) => {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx("div", { "data-testid": dataTestId, className: cvaCardBodyDensityContainer({ density, disableGap, className }), children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
+    return (jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -928,11 +928,11 @@ const CardBody = ({ density = "auto", children, dataTestId, className, disableGa
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx("div", { "data-testid": dataTestId, className: cvaCardFooterDensityContainer({
+    return (jsx("div", { className: cvaCardFooterDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: children }));
+        }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -990,11 +990,11 @@ const Heading = (_a) => {
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
-    return (jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
+    return (jsx("div", { className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "ghost-neutral", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
+        }), "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaCollapse = cvaMerge([
@@ -1038,7 +1038,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaCollapseHeader({ expanded, className: headerClassName }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
@@ -1085,7 +1085,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
         copyToClipboard(value);
         setAnimating(true);
     };
-    return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onClick: handleOnClick, onAnimationEnd: () => setAnimating(false), title: value, children: text }));
+    return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
 const localeLookup = {
@@ -1128,7 +1128,7 @@ const useLocale = (language) => {
  */
 const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
     const locale = useLocale(language);
-    return (jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
+    return (jsx(DayPicker$1, { className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
 };
 
 /**
@@ -1149,7 +1149,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             onRangeSelect({ from, to });
         }
     }, [onRangeSelect]);
-    return (jsx(DayPicker$1, { mode: "range", onSelect: onSelect, selected: selectedDays, defaultMonth: selectedDays ? selectedDays.from : undefined, locale: locale, disabled: disabledDays, className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
+    return (jsx(DayPicker$1, { className: `custom-day-picker range-picker ${className !== null && className !== void 0 ? className : ""}`, defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: onSelect, selected: selectedDays }));
 };
 
 const cvaDrawerOverlay = cvaMerge([
@@ -1197,7 +1197,7 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
             window.removeEventListener("keyup", onKeyPress);
         };
     }, [open, onClose]);
-    return (jsx(FloatingFocusManager, { context: context, children: open ? (jsxs("div", { id: "drawer", children: [!disableOverlay && (jsx("div", { className: cvaDrawerOverlay(), "aria-hidden": open, onClick: onClose, id: "drawer__overlay" })), jsx(Card, { "aria-hidden": open, "data-testid": dataTestId, id: "drawer__card", className: cvaDrawerCard({ position, className }), children: children })] })) : (
+    return (jsx(FloatingFocusManager, { context: context, children: open ? (jsxs("div", { id: "drawer", children: [!disableOverlay && (jsx("div", { "aria-hidden": open, className: cvaDrawerOverlay(), id: "drawer__overlay", onClick: onClose })), jsx(Card, { "aria-hidden": open, className: cvaDrawerCard({ position, className }), "data-testid": dataTestId, id: "drawer__card", children: children })] })) : (
         // eslint-disable-next-line react/jsx-no-useless-fragment
         jsx(Fragment, {})) }));
 };
@@ -1233,7 +1233,7 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", className: cvaSkeletonLine({ className }), style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
@@ -1303,7 +1303,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, image]);
-    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), title ? jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsx(Text, { align: "center", children: description }) : null, action] })) }));
+    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", size: "large" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc ? customImageSrc : imageSource, width: 200 }), title ? jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsx(Text, { align: "center", children: description }) : null, action] })) }));
 };
 
 const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
@@ -1315,7 +1315,7 @@ const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-p
  * @returns {JSX.Element} External Link component
  */
 const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
-    return (jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
+    return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
 /**
@@ -1420,7 +1420,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
     var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
     const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
+    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: false, modal: context.isModal, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", ref: ref, style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style) }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
 });
 
 /**
@@ -1430,7 +1430,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
+    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
 const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
@@ -1443,7 +1443,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
         return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
     }
     else {
-        return (jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+        return (jsx(Button, Object.assign({ "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button" }, context.getReferenceProps(props), { children: children })));
     }
 });
 
@@ -1506,7 +1506,7 @@ const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
  */
 const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
     const { context: floatingContext } = usePopoverContext();
-    return (jsx(FloatingArrow, { ref: arrowRef, context: floatingContext, className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }) }));
+    return (jsx(FloatingArrow, { className: cvaTooltipPopoverTail({ mode, placement: floatingContext.placement }), context: floatingContext, ref: arrowRef }));
 };
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
@@ -1535,7 +1535,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     if (disabled) {
         return wrappedChildren;
     }
-    return (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement === "auto" ? "bottom" : placement, activation: { hover: true }, dataTestId: dataTestId, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), ref: refs.setReference, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircle", size: "small", dataTestId: dataTestId ? `${dataTestId}-icon` : undefined }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small" }, iconProps)) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -1638,7 +1638,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ className: cvaIndicator(), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }) : null, icon] }), label !== undefined && withLabel ? jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }) : null] })) }));
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }) : null, icon] }), label !== undefined && withLabel ? jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }) : null] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -1716,13 +1716,13 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
  */
 const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
-    return (jsxs("div", Object.assign({}, containerProps, { id: id, className: cvaMenuItem({
+    return (jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
             selected,
             focused,
             disabled,
             size,
             className: containerProps.className,
-        }), onClick: e => {
+        }), id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
         }, tabIndex: 0, children: [prefix ? jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix }) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }) : null] })));
@@ -1753,7 +1753,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
+    return (jsx("div", { className: cvaMenuList({ stickyHeader: withStickyHeader, className }), "data-testid": dataTestId, onClick: args.onClick, role: "list", tabIndex: 0, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) ? jsx("hr", { className: cvaMenuListDivider() }) : null] }))) }));
 };
 
 const cvaMoreMenu = cvaMerge(["p-4"]);
@@ -1774,7 +1774,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
 const cvaModalContainer = cvaMerge(["h-full", "w-full", "flex", "items-center"]);
@@ -1819,12 +1819,12 @@ const cvaModalBackdrop = cvaMerge([
  */
 const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
     const ref = React.useRef(null);
-    return (jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
+    return (jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
             // only react on click on backdrop - accessing first child to get around styled element element
             if (ref.current !== null && e.target === ref.current.children[0]) {
                 onClick();
             }
-        }, children: children }));
+        }, ref: ref, children: children }));
 };
 
 /**
@@ -1836,7 +1836,7 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
 const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, noShadow: noBackdropShadow, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
+    return (jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
 });
 Modal.displayName = "Modal";
 
@@ -1862,7 +1862,7 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
             }
         },
     });
-    const PortalWrapper = (props) => (jsx(Portal, { children: jsx(Modal, Object.assign({ ref: modalRef, isOpen: isOpen }, props)) }));
+    const PortalWrapper = (props) => (jsx(Portal, { children: jsx(Modal, Object.assign({ isOpen: isOpen, ref: modalRef }, props)) }));
     PortalWrapper.displayName = "Modal";
     const WrappedModal = useCallback(PortalWrapper, [Portal, isOpen]);
     return {
@@ -1926,7 +1926,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { to: backTo, renderAs: Link, variant: "ghost-neutral", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { label: description, dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, placement: "bottom" }), link ? (jsxs(Link, { to: link, "data-testid": "tooltip-link", target: "_blank", className: cvaPageHeaderLink(), children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, color: tagColor, children: tag })) : undefined, showLoading ? (jsx(Spinner, { dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined, centering: "vertically" })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { icon: jsx(Icon, { name: "ArrowLeft" }), renderAs: Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -1975,9 +1975,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
     if (loading) {
         return (jsx("div", { className: cvaPagination({ className }), children: jsx(SkeletonLines, { height: 16, width: 150 }) }));
     }
-    return (jsxs("div", { "data-testid": dataTestId, className: cvaPagination({ className }), children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": "prev-page", disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, icon: jsx(Icon, { name: "ChevronLeft", size: "small" }), onClick: () => handlePageChange("prev"), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxs(Fragment, { children: [jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsx(IconButton, { "data-testid": "next-page", disabled: cursorBase
                     ? !canNextPage || false
-                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRight", size: "small" }), size: "small", variant: "ghost-neutral" })] }));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, icon: jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2061,7 +2061,7 @@ const cvaSpacer = cvaMerge([], {
  * @returns {JSX.Element} Spacer component
  */
 const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
-    return jsx("div", { "data-testid": dataTestId, className: cvaSpacer({ className, border, size }) });
+    return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
 };
 
 /**
@@ -2071,7 +2071,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle ? jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }) : null] }), addons ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
+    return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle }) : null] }), addons ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
@@ -2166,7 +2166,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId ? `${dataTestId}-child-container` : null, children: React__default.Children.map(children, 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: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -2249,7 +2249,7 @@ const Tab = (_a) => {
  */
 const TabContent = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsx(Content, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-content` : undefined, className: cvaTabContent({ className }) }, rest, { children: children })));
+    return (jsx(Content, Object.assign({ className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined }, rest, { children: children })));
 };
 
 /**
@@ -2257,7 +2257,7 @@ const TabContent = (_a) => {
  */
 const TabList = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
-    return (jsx(List, Object.assign({ "data-testid": dataTestId, className: cvaTabList({ className }) }, rest, { children: children })));
+    return (jsx(List, Object.assign({ className: cvaTabList({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 
 /**
@@ -2416,7 +2416,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     const score = getScore(value, min, max);
     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" }), width: `${barWidth}%`, rx: "5", "data-testid": "value-bar-svg-rect-0" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5", "data-testid": "value-bar-svg-rect-1" }), showValue && size === "large" ? (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })) : null, showValue && size === "small" ? (jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), 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" }), "data-testid": "value-bar-svg-rect-0", rx: "5", width: `${barWidth}%` }), jsx("rect", { className: cvaValueBarProgress(), "data-testid": "value-bar-svg-rect-1", fill: barFillColor, rx: "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] }) }));
 };
 
 const cvaWidgetBodyDensityContainer = cvaMerge([
@@ -2465,7 +2465,7 @@ const cvaWidgetBodyDensityContainer = cvaMerge([
  * @returns {JSX.Element} WidgetBody component
  */
 const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
-    return (jsx("div", { "data-testid": dataTestId, className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), children: children }));
+    return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
 const cvaClickable = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.257",
+  "version": "0.1.260",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,7 +13,6 @@
     "react-use": "^17.4.0",
     "react-day-picker": "^8.9.1",
     "date-fns": "^2.30.0",
-    "@floating-ui/react": "^0.26.6",
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
@@ -23,7 +22,8 @@
     "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
-    "@testing-library/react": "14.0.0"
+    "@testing-library/react": "14.0.0",
+    "@floating-ui/react": "^0.26.6"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

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

@@ -13,6 +13,10 @@ export interface CardBodyProps extends CommonProps {
      * Child elements to render in the body
      */
     children: React.ReactNode | null;
+    /**
+     * The id of the element.
+     */
+    id?: string;
 }
 /**
  * The CardBody component should be used to inform the user of important information.
@@ -22,4 +26,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, children, dataTestId, className, disableGap }: CardBodyProps) => JSX.Element;
+export declare const CardBody: ({ density, children, dataTestId, className, disableGap, id }: CardBodyProps) => JSX.Element;