@trackunit/react-components 1.22.2 → 1.22.5

package/index.esm.js

@@ -10,7 +10,7 @@ import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slot, Slottable } from '@radix-ui/react-slot';
-import { Link, useBlocker, useNavigate, useLocation, useSearch } from '@tanstack/react-router';
+import { Link, useBlocker, useNavigate, useLocation, useRouter, useSearch } from '@tanstack/react-router';
 import { isEqual, omit } from 'es-toolkit';
 import { useFloating, offset, flip, shift, size, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { twMerge } from 'tailwind-merge';
@@ -158,7 +158,7 @@ const Icon = ({ name, size = "medium", className, "data-testid": dataTestId, col
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, children: jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsx("span", { ...rest, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: iconContainerId, onClick: onClick, ref: ref, style: style, children: jsx("svg", { "aria-labelledby": iconContainerId, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 /**
@@ -289,7 +289,7 @@ const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLA
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, style, }) => {
     const textRef = useRef(null);
     const [shouldTruncate, setShouldTruncate] = useState(false);
     useLayoutEffect(() => {
@@ -324,7 +324,7 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
             color,
             layout,
             border: color === "white" ? "default" : "none",
-        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, style: style, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
 /**
@@ -629,8 +629,8 @@ const cvaSpinnerLabel = cvaMerge(["self-center", "text-center", "text-current"])
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {ReactElement} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, "data-testid": dataTestId = "spinner", label, ref, }) => {
-    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), ref: ref, children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, "data-testid": dataTestId = "spinner", label, style, ref, }) => {
+    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), ref: ref, style: style, children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
 };
 
 const cvaButton = cvaMerge([
@@ -1159,7 +1159,7 @@ const cvaAlertIconContainer = cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, ref, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, style, ref, }) => {
     const scrollRef = useRef(null);
     const mergedRef = useMergeRefs([scrollRef, ref]);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
@@ -1171,7 +1171,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             }
         }
     }, [autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: mergedRef, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({
+    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: mergedRef, role: "alert", style: style, children: [jsxs("div", { className: cvaAlertContentContainer({
                     inline: !isTextWrapping && (children === null || children === undefined),
                     actionsInline,
                 }), children: [jsx("div", { className: cvaAlertIconContainer({
@@ -1293,7 +1293,7 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, "data-testid": dataTestId, ref, }) => {
+const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, "data-testid": dataTestId, style, ref, }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -1303,7 +1303,7 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
             : count
         : count;
     const isSingleChar = displayedCount?.toString().length === 1;
-    return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, children: compact ? null : displayedCount }));
+    return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
 /**
@@ -1414,22 +1414,22 @@ const cvaBreadcrumbForMediumScreen = cvaMerge(["flex", "items-center"], {
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
-const BreadcrumbItem = ({ item, "data-testid": dataTestId }) => {
+const BreadcrumbItem = ({ item, "data-testid": dataTestId, className, style, }) => {
     const id = uuidv4();
-    return (jsx("div", { className: cvaBreadcrumbItem(), "data-testid": dataTestId, id: `${item.props.label}-${id}`, children: item }));
+    return (jsx("div", { className: cvaBreadcrumbItem({ className }), "data-testid": dataTestId, id: `${item.props.label}-${id}`, style: style, children: item }));
 };
 
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
-const BreadcrumbForLargeScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
-    return (jsx("div", { className: cvaBreadcrumbForLargeScreen(), "data-testid": dataTestId, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
+const BreadcrumbForLargeScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
+    return (jsx("div", { className: cvaBreadcrumbForLargeScreen({ className }), "data-testid": dataTestId, style: style, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
 /**
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
-const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
+const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
     const [expanded, setExpanded] = useState(false);
     const getReducedArray = useCallback(() => {
         let reducedArrayElements = [];
@@ -1442,15 +1442,15 @@ const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems,
         return reducedArrayElements;
     }, [breadcrumbItems, dataTestId]);
     const reducedArray = getReducedArray();
-    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
+    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ className, expanded }), "data-testid": dataTestId, style: style, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
 };
 
 /**
  * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
  */
-const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
+const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
     const lastBreadcrumbItem = breadcrumbItems.slice(-1);
-    return (jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
+    return (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
 /**
@@ -1502,9 +1502,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, ref, }) => {
+const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, style, ref, }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
+    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -1731,13 +1731,13 @@ Card.displayName = "Card";
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, ref, }) => {
+const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, style, ref, }) => {
     return (jsx("div", { className: cvaCardBodyContainer({
             gap,
             padding,
             className,
             direction,
-        }), "data-card-body": true, "data-testid": dataTestId, id: id, ref: ref, children: children }));
+        }), "data-card-body": true, "data-testid": dataTestId, id: id, ref: ref, style: style, children: children }));
 };
 
 /**
@@ -1789,12 +1789,12 @@ const CardBody = ({ children, "data-testid": dataTestId, className, direction =
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, ref, }) => {
+const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, style, ref, }) => {
     return (jsx("div", { className: cvaCardFooterContainerRoot({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-footer": true, "data-testid": dataTestId, ref: ref, children: jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
+        }), "data-card-footer": true, "data-testid": dataTestId, ref: ref, style: style, children: jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -1917,12 +1917,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, ref, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, style, ref, }) => {
     return (jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-header": true, "data-testid": dataTestId, ref: ref, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, ref: ref, style: style, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cvaMerge([
@@ -2193,7 +2193,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate = true, extraPadding = true, ref, }) => {
+const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate = true, extraPadding = true, style, ref, }) => {
     const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = useState(initialExpanded);
     const handleClick = useCallback((e) => {
@@ -2202,7 +2202,7 @@ const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle,
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, ref: ref, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronDown", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
+    return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronDown", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
     const { geometry, ref } = useMeasure();
@@ -2555,9 +2555,20 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         customProps: {
             id,
             className,
-            "data-testid": dataTestId
+            "data-testid": dataTestId,
         },
-    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, id, className, dataTestId]);
+    }), [
+        isOpen,
+        setUncontrolledIsOpen,
+        combinedInteractions,
+        popoverData,
+        isModal,
+        labelId,
+        descriptionId,
+        id,
+        className,
+        dataTestId,
+    ]);
 };
 
 const PopoverContext = createContext(null);
@@ -2995,7 +3006,7 @@ const Content = ({ text, withIcon, }) => {
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy", copiedLabel = "Copied!", "data-testid": dataTestId, className, ref, }) => {
+const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy", copiedLabel = "Copied!", "data-testid": dataTestId, className, style, ref, }) => {
     const [animating, setAnimating] = useState(false);
     const [showCopied, setShowCopied] = useState(false);
     const [, copyToClipboard] = useCopyToClipboard();
@@ -3020,7 +3031,7 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
                 if (hovering) {
                     e.currentTarget.blur();
                 }
-            }, onMouseEnter: onMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, type: "button", children: jsx(Content, { text: text, withIcon: withIcon }) }) }));
+            }, onMouseEnter: onMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, type: "button", children: jsx(Content, { text: text, withIcon: withIcon }) }) }));
 };
 
 const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
@@ -3066,10 +3077,26 @@ const cvaDetailsListItem = cvaMerge(["last:truncate"]);
  * @param {DetailsListProps} props - The props for the DetailsList component
  * @returns {ReactElement} DetailsList component
  */
-const DetailsList = ({ details, className, hasLink = false, ref }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), ref: ref, children: details.map((value, index, array) => (jsxs(Fragment$1, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, "data-testid": dataTestId, hasLink = false, style, ref, }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), "data-testid": dataTestId, ref: ref, style: style, children: details.map((value, index, array) => (jsxs(Fragment$1, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
+/**
+ * Merges inline styles where `base` defines component defaults and `override` (typically from props) wins on conflicts.
+ */
+function mergeDomStyles(base, override) {
+    if (base === undefined && override === undefined) {
+        return undefined;
+    }
+    if (base === undefined) {
+        return override;
+    }
+    if (override === undefined) {
+        return base;
+    }
+    return { ...base, ...override };
+}
+
 const VALID_SIZE_KEYS = [
     "xs",
     "sm",
@@ -3225,14 +3252,14 @@ const cvaSkeleton = cvaMerge([
  * @returns {ReactElement} SkeletonLabel component
  */
 const SkeletonLabel = memo((props) => {
-    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, ref, } = props;
+    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, style, ref, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = getHeightValue(textSize);
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, ref: ref, role: "status", style: {
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
-        }, children: children }));
+        }, style), children: children }));
 });
 SkeletonLabel.displayName = "SkeletonLabel";
 
@@ -3348,7 +3375,7 @@ WorkerWithSignSVG.displayName = "WorkerWithSignSVG";
  * );
  * ```
  */
-const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customImageSrc, loading = false, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
+const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customImageSrc, loading = false, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, style, ref, }) => {
     const ImageSource = useMemo(() => {
         switch (image) {
             case "WORKER_WITH_SIGN":
@@ -3366,7 +3393,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return SearchDocumentSVG;
         }
     }, [image]);
-    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxs(Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsx(Text, { align: "center", size: "medium", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
+    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", ref: ref, style: style, children: loading ? (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxs(Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsx(Text, { align: "center", size: "medium", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
@@ -3395,8 +3422,8 @@ const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
  * @param {EmptyValueProps} props - The props for the EmptyValue component
  * @returns {ReactElement} EmptyValue component
  */
-const EmptyValue = ({ className, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
+const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
+    return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
 };
 
 const cvaExternalLink = cvaMerge(["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"], {
@@ -3467,8 +3494,8 @@ const cvaExternalLink = cvaMerge(["underline", "decoration-[1.5px]", "underline-
  * @param {ExternalLinkProps} props - The props for the ExternalLink component
  * @returns {ReactElement} ExternalLink component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, "data-testid": dataTestId, onClick, color = "primary", ref, }) => {
-    return (jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, ref: ref, rel: rel, target: target, title: title, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, "data-testid": dataTestId, onClick, color = "primary", style, ref, }) => {
+    return (jsx("a", { className: cvaExternalLink({ className, color }), "data-testid": dataTestId, href: href, onClick: onClick, ref: ref, rel: rel, style: style, target: target, title: title, children: children }));
 };
 
 // =============================================================================
@@ -3611,9 +3638,9 @@ function createGrid() {
  * }
  * ```
  */
-function GridAreas({ slots, css, containerProps, validationRef, className, children, asChild = false, }) {
+function GridAreas({ slots, css, containerProps, validationRef, className, style, children, asChild = false, }) {
     const Comp = asChild ? Slot : "div";
-    return (jsxs(Fragment, { children: [jsx("style", { children: css }), jsx(Comp, { ref: validationRef, ...containerProps, className: twMerge("@container grid", className), children: children(slots) })] }));
+    return (jsxs(Fragment, { children: [jsx("style", { children: css }), jsx(Comp, { ref: validationRef, ...containerProps, className: twMerge("@container grid", className), style: style, children: children(slots) })] }));
 }
 
 /**
@@ -4292,8 +4319,8 @@ const cvaHighlightText = cvaMerge(["truncate"]);
  * @param {HighlightProps} props - The props for the Highlight component
  * @returns {ReactElement} Highlight component
  */
-const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", ref, }) => {
-    return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
+const Highlight = ({ className, "data-testid": dataTestId, children, size = "small", color = "warning", style, ref, }) => {
+    return (jsx("div", { className: cvaHighlight({ className, size, color }), "data-testid": dataTestId, ref: ref, style: style, children: jsx("span", { className: cvaHighlightText(), children: children }) }));
 };
 Highlight.displayName = "Highlight";
 
@@ -4577,8 +4604,8 @@ const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-
  * @param {ZStackProps} props - The props for the ZStack component
  * @returns {ReactElement} ZStack component
  */
-const ZStack = ({ children, className, "data-testid": dataTestId, ref }) => {
-    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, ref: ref, children: Children.map(children, (child, index) => {
+const ZStack = ({ children, className, "data-testid": dataTestId, style, ref }) => {
+    return (jsx("div", { className: cvaZStackContainer({ className }), "data-testid": dataTestId, ref: ref, style: style, children: Children.map(children, (child, index) => {
             if (!isValidElement(child)) {
                 return child;
             }
@@ -4646,9 +4673,9 @@ const cvaOverflowIndicatorButton = cvaMerge([
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, }) => {
+const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, onClickScroll, style, }) => {
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
+    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), "data-testid": dataTestId, style: style, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
 };
 
 /**
@@ -4678,7 +4705,7 @@ const OverflowIndicator = ({ className, "data-testid": dataTestId, direction, on
  * @param {HorizontalOverflowScrollerProps} props - The props for the HorizontalOverflowScroller component
  * @returns {ReactElement} HorizontalOverflowScroller component
  */
-const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, ref, }) => {
+const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, children, onScrollStateChange, style, ref, }) => {
     const childrenArray = Children.toArray(children);
     const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
     const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
@@ -4708,7 +4735,7 @@ const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, chil
             behavior: "smooth",
         });
     };
-    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment$1, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment$1, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["inline-flex", "items-center"]);
@@ -5042,8 +5069,8 @@ const KPISkeleton = ({ variant = "default", className, "data-testid": dataTestId
  * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
  * @returns {ReactElement} TrendIndicator component
  */
-const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, ref, }) => {
-    return (jsxs("div", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: [value !== undefined ? (jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxs("div", { className: "flex items-center", children: [icon ? (jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
+const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefined, "data-testid": dataTestId, className, style, ref, }) => {
+    return (jsxs("div", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, style: style, children: [value !== undefined ? (jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: "small", weight: "normal", children: value })) : null, jsxs("div", { className: "flex items-center", children: [icon ? (jsx(Icon, { color: color, "data-testid": dataTestId ? `${dataTestId}-icon` : undefined, name: icon, size: "small" })) : null, jsx(Text, { className: cvaKPITrendPercentage({ color }), "data-testid": dataTestId ? `${dataTestId}-trend` : undefined, size: "small", weight: "bold", children: trend })] }), jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-label` : undefined, size: "small", weight: "normal", children: label })] }));
 };
 
 /**
@@ -5052,8 +5079,8 @@ const TrendIndicator = ({ value, trend, label, icon = undefined, color = undefin
  * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
  * @returns {ReactElement} TrendIndicators component
  */
-const TrendIndicators = ({ trends, "data-testid": dataTestId, className, ref, }) => {
-    return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
+const TrendIndicators = ({ trends, "data-testid": dataTestId, className, style, ref, }) => {
+    return (jsx("span", { className: twMerge("flex flex-row items-center gap-1", className), "data-testid": dataTestId, ref: ref, style: style, children: trends.map((trend, index) => (jsx(TrendIndicator, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-${index}` : undefined, ...trend }, index))) }));
 };
 
 const valueBarContainerClassName = "relative flex w-full items-center gap-2";
@@ -5200,11 +5227,11 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {ReactElement} ValueBar component
  */
-const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, ref, }) => {
+const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue = false, className, "data-testid": dataTestId, zeroScoreAllowed = false, style, ref, }) => {
     const score = getScore(value, min, max, zeroScoreAllowed);
     const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
     const valueText = `${Number(value.toFixed(1))}${nonNullable(unit) ? unit : ""}`;
-    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, style: style, children: [jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
 const cvaKPICard = cvaMerge([
@@ -5328,14 +5355,14 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
  * @returns {ReactElement} SkeletonBlock component
  */
 const SkeletonBlock = memo((props) => {
-    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children, ref, } = props;
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children, style, ref, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = typeof height === "number" ? `${height}px` : height;
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, ref: ref, role: "status", style: {
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
-        }, children: children }));
+        }, style), children: children }));
 });
 SkeletonBlock.displayName = "SkeletonBlock";
 
@@ -5467,29 +5494,29 @@ const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
  * @param {ListItemSkeletonProps} props - The props for the ListItemSkeleton component
  * @returns {ReactElement} ListItemSkeleton component
  */
-const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
+const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, className, "data-testid": dataTestId, style, }) => {
     // Generate stable random widths once and never change them
     const [titleWidth, descriptionWidth, metaWidth, detailsWidth] = useRandomCSSLengths({
         count: 4,
         min: 25,
         max: 85,
     });
-    return (jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-neutral-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: cvaTextContainer(), children: [jsx("div", { className: cvaTitleRow(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: titleWidth }) }), hasDescription ? (jsx("div", { className: cvaDescriptionRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: descriptionWidth }) })) : null, hasMeta ? (jsx("div", { className: cvaMetaRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: metaWidth }) })) : null] })] }), hasDetails ? (jsx("div", { className: cvaDetailsContainer(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: detailsWidth }) })) : null] }));
+    return (jsxs("div", { className: cvaListItem({ className: twMerge("w-full", className) }), "data-testid": dataTestId, style: style, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-neutral-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: cvaTextContainer(), children: [jsx("div", { className: cvaTitleRow(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: titleWidth }) }), hasDescription ? (jsx("div", { className: cvaDescriptionRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: descriptionWidth }) })) : null, hasMeta ? (jsx("div", { className: cvaMetaRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: metaWidth }) })) : null] })] }), hasDetails ? (jsx("div", { className: cvaDetailsContainer(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: detailsWidth }) })) : null] }));
 };
 
 /**
  *
  */
-const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescription, component, hasMeta, hasDetails, }) => {
+const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescription, component, hasMeta, hasDetails, style, }) => {
     switch (type) {
         case "none":
             return null;
         case "spinner":
-            return jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" });
+            return jsx(Spinner, { centering: "horizontally", containerClassName: "p-4", style: style });
         case "custom":
-            return component;
+            return (jsx("div", { className: "flex w-full justify-center p-4", style: style, children: component }));
         case "skeleton":
-            return (jsx(ListItemSkeleton, { hasDescription: hasDescription, hasDetails: hasDetails, hasMeta: hasMeta, hasThumbnail: hasThumbnail, thumbnailShape: thumbnailShape }));
+            return (jsx(ListItemSkeleton, { hasDescription: hasDescription, hasDetails: hasDetails, hasMeta: hasMeta, hasThumbnail: hasThumbnail, style: style, thumbnailShape: thumbnailShape }));
         default: {
             throw new Error(`${type} is not known`);
         }
@@ -5563,7 +5590,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, "data-testid": dataTestId, 
+const List = ({ children, className, "data-testid": dataTestId, style, 
 // UseListResult properties
 containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
 // Unused but part of UseListResult interface (can be used from parent)
@@ -5571,7 +5598,7 @@ scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getV
     return (jsx("div", { className: cvaListContainer({
             withTopSeparator: topSeparatorOnScroll && !isAtTop,
             className,
-        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
+        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, style: style, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with clean separator styling
                 const listItemProps = getListItemProps(row, {
                     className: cvaListItem$1({
@@ -6113,8 +6140,8 @@ const cvaMenuListItem = cvaMerge("max-w-full");
  * ```
  * @returns {ReactElement} MenuDivider component
  */
-const MenuDivider = () => {
-    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
+const MenuDivider = ({ style }) => {
+    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider", style: style });
 };
 
 /**
@@ -6271,7 +6298,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-neutral-400", "text-sm", "flex", "item
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, "data-testid": dataTestId, label, children, selected = false, focused = false, prefix, suffix, disabled = false, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", ref, }) => {
+const MenuItem = ({ className, "data-testid": dataTestId, label, children, selected = false, focused = false, prefix, suffix, disabled = false, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize = "medium", variant = "primary", style, ref, }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick !== undefined && disabled !== true) {
@@ -6294,7 +6321,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, ref: ref, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, ref: ref, role: "menuitem", style: style, tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -6353,7 +6380,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ref, ...args }) => {
+const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, style, ref, ...args }) => {
     const childrenArr = Children.toArray(children);
     const [internalSelectedItems, setInternalSelectedItems] = useState(controlledSelectedItems ?? []);
     const selectedItems = controlledSelectedItems ?? internalSelectedItems;
@@ -6370,7 +6397,7 @@ const MenuList = ({ "data-testid": dataTestId, className, children, isMulti = fa
             setInternalSelectedItems(newSelectedItems);
         }
     }, [isMulti, selectedItems, onSelectionChange]);
-    return (jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, ref: ref, role: "list", tabIndex: 0, children: jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
+    return (jsx("div", { className: cvaMenu({ className, limitWidth: true }), "data-testid": dataTestId ? `${dataTestId}-menu-list` : "menu-list", onClick: args.onClick, ref: ref, role: "list", style: style, tabIndex: 0, children: jsx("div", { className: cvaMenuList(), children: childrenArr.map((menuItem, index) => {
                 if (isValidElement(menuItem)) {
                     const isSelected = (selectedItems.includes(menuItem.props.id ?? `${index}`) || menuItem.props.selected) ?? false;
                     return cloneElement(menuItem, {
@@ -6446,10 +6473,10 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     size: "medium",
     square: true,
     variant: "secondary",
-}, customButton, customPortalId, children, ref, }) => {
+}, customButton, customPortalId, children, style, ref, }) => {
     const actionMenuRef = useRef(null);
     const mergedRef = useMergeRefs([actionMenuRef, ref]);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: mergedRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: mergedRef, style: style, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { "data-testid": "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -6587,8 +6614,8 @@ const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-r
  * @param {PageProps} props - The props for the Page component
  * @returns {ReactElement} Page component
  */
-const Page = ({ layout, className, children, "data-testid": dataTestId, ref }) => {
-    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", ref: ref, children: children }));
+const Page = ({ layout, className, children, "data-testid": dataTestId, style, ref, }) => {
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId ? dataTestId : "page", ref: ref, style: style, children: children }));
 };
 
 /**
@@ -6621,8 +6648,8 @@ const Page = ({ layout, className, children, "data-testid": dataTestId, ref }) =
  * @param {PageContentProps} props - The props for the PageContent component
  * @returns {ReactElement} PageContent component
  */
-const PageContent = ({ className, children, "data-testid": dataTestId, layout, ref, }) => {
-    return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", ref: ref, children: children }));
+const PageContent = ({ className, children, "data-testid": dataTestId, layout, style, ref, }) => {
+    return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", ref: ref, style: style, children: children }));
 };
 
 /**
@@ -6707,7 +6734,7 @@ const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
  * <SkeletonLines variant="preset" preset="title-paragraph" />
  */
 const SkeletonLines = memo((props) => {
-    const { className, "data-testid": dataTestId, ref } = props;
+    const { className, "data-testid": dataTestId, style, ref } = props;
     // Generate line configs based on variant
     let lineConfigs;
     if (props.variant === "preset") {
@@ -6728,24 +6755,27 @@ const SkeletonLines = memo((props) => {
         }));
     }
     const lineCount = lineConfigs.length;
-    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, ref: ref, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
+    return (jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, ref: ref, role: "status", style: style, ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
 });
 SkeletonLines.displayName = "SkeletonLines";
 
-const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { lines: [
-                { textSize: "text-xs", width: 50 },
-                { textSize: "text-lg", width: 40 },
-            ], variant: "custom" }) }) }));
+const LoadingContent = () => (jsx(SkeletonLines, { "data-testid": "kpi-card-loading-content", lines: [
+        { textSize: "text-xs", width: 50, flexibleWidth: false },
+        { textSize: "text-lg", width: 40, flexibleWidth: false },
+    ], variant: "custom" }));
 /**
  * Renders KPI metrics in the PageHeader component.
  *
  * @param {object} props - The props for the PageHeaderKpiMetrics component
  * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
+ * @param {string} [props.className] - Additional class names for the metrics row
+ * @param {string} [props."data-testid"] - Test id for the metrics row
+ * @param {import("react").CSSProperties} [props.style] - Inline styles for the metrics row
  * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderKpiMetrics component
  */
-const PageHeaderKpiMetrics = ({ kpiMetrics, ref, }) => {
-    return (jsx("div", { className: "hidden items-center gap-4 md:flex", ref: ref, children: kpiMetrics
+const PageHeaderKpiMetrics = ({ kpiMetrics, className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsx("div", { className: twMerge("hidden items-center gap-4 md:flex", className), "data-testid": dataTestId, ref: ref, style: style, children: kpiMetrics
             .filter(kpi => kpi.hidden === false || kpi.hidden === undefined)
             .map((kpi, index) => {
             if (kpi.loading === true) {
@@ -6762,16 +6792,16 @@ const PageHeaderKpiMetrics = ({ kpiMetrics, ref, }) => {
  * @returns {ReactElement} ActionRenderer component
  */
 function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
-    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, "data-testid": dataTestId, target, variant, } = action;
+    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, "data-testid": dataTestId, target, style, variant, } = action;
     // This component handles all the "wrapping" logic for Link/Tooltip
     // The "content" is either a Button or a MenuItem, depending on `isMenuItem`
     const content = isMenuItem ? (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, label: actionText, onClick: e => {
             actionCallback?.(e);
             externalOnClick?.();
-        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "medium" }) : null, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsx(Button, { "data-testid": dataTestId, disabled: disabled, onClick: e => {
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "medium" }) : null, style: style, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsx(Button, { "data-testid": dataTestId, disabled: disabled, onClick: e => {
             actionCallback?.(e);
             externalOnClick?.();
-        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", variant: variant, children: actionText }));
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", style: style, variant: variant, children: actionText }));
     // Wrap `content` with Tooltip
     const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { label: tooltipLabel, children: jsx("span", { className: "block", children: content }) })) : (content);
     // Finally, wrap with Link if `to` is provided
@@ -6887,12 +6917,13 @@ const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semi
  * @param {string} props.title - The title of the page header
  * @param {string} props.className - The class name of the page header title
  * @param {string} [props."data-testid"] - The data test id of the page header title
+ * @param {import("react").CSSProperties} [props.style] - Inline styles for the title wrapper
  * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderTitle component
  */
-const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }) => {
+const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, style, ref: forwardedRef, }) => {
     const { ref, isTextTruncated } = useIsTextTruncated();
-    return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, children: jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsx("div", { className: "min-w-16 grid", children: jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
+    return (jsx("div", { className: "flex flex-row items-center", ref: forwardedRef, style: style, children: jsx(Tooltip, { disabled: !isTextTruncated, label: title, placement: "top", children: jsx("div", { className: "min-w-16 grid", children: jsx("h1", { className: cvaPageHeaderHeading({ className }), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }) }));
 };
 
 /**
@@ -6948,7 +6979,7 @@ const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, ref: for
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, ref, ...discriminatedProps }) => {
+const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, style, ref, ...discriminatedProps }) => {
     const tagRenderer = useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -6959,14 +6990,14 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, ref: ref, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     "data-testid": "page-header-description-icon",
                                 }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
                                 discriminatedProps.primaryAction !== undefined &&
                                 (discriminatedProps.primaryAction.hidden === false ||
                                     discriminatedProps.primaryAction.hidden === undefined) ? (jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
-                                    discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
+                                    discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { "data-testid": discriminatedProps.primaryAction["data-testid"], disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", style: discriminatedProps.primaryAction.style, variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -7007,7 +7038,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPage = false, pageCount, pageIndex, loading = false, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase = false, ref, }) => {
+const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPage = false, pageCount, pageIndex, loading = false, className, "data-testid": dataTestId, style, getTranslatedCount, onPageChange, cursorBase = false, ref, }) => {
     const [page, setPage] = useState(pageIndex);
     const [currentPage, setCurrentPage] = useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
@@ -7050,9 +7081,9 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
         onPageChange?.({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
-        return (jsx("div", { className: cvaPagination({ className }), ref: ref, children: jsx(SkeletonLabel, { textSize: "text-sm", width: 150 }) }));
+        return (jsx("div", { className: cvaPagination({ className }), ref: ref, style: style, children: jsx(SkeletonLabel, { textSize: "text-sm", width: 150 }) }));
     }
-    return (jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, ref: ref, 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
+    return (jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, ref: ref, style: style, 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, icon: jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
@@ -7083,7 +7114,7 @@ const STROKE_WIDTH_THRESHOLD = 32;
  * @param {PolygonProps} props - The props for the Polygon component
  * @returns {ReactElement} Polygon component
  */
-const Polygon = ({ points, size, color = "black", opaque = true, className, "data-testid": dataTestId, ref, }) => {
+const Polygon = ({ points, size, color = "black", opaque = true, className, "data-testid": dataTestId, style, ref, }) => {
     // Calculate the bounds of the points
     const minX = Math.min(...points.map(coord => coord[0]));
     const maxX = Math.max(...points.map(coord => coord[0]));
@@ -7100,7 +7131,7 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, "dat
         size: sizeToNormalizeAgainst,
     })}`)
         .join(" ");
-    return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, ref: ref, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
+    return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, ref: ref, style: mergeDomStyles({ width: `${size}px`, height: `${size}px` }, style), viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
                 fill: color,
                 fillOpacity: opaque ? 0.2 : undefined,
                 stroke: color,
@@ -7147,8 +7178,8 @@ const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) *
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, ref, }) => {
-    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, ref: ref, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
+const PopoverTitle = ({ children, action, divider = false, className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
 const cvaPreferenceCard = cvaMerge([
@@ -7312,14 +7343,14 @@ const preferenceCardGrid = createGrid()
  * @param {PreferenceCardProps} props - The props for the PreferenceCard component
  * @returns {ReactNode} PreferenceCard component
  */
-const PreferenceCard = ({ title, description, icon, input, titleTag, cardTag, disabled = false, className, "data-testid": dataTestId, children, ref: forwardedRef, }) => {
+const PreferenceCard = ({ title, description, icon, input, titleTag, cardTag, disabled = false, className, "data-testid": dataTestId, style, children, ref: forwardedRef, }) => {
     const { ref: measureRef, geometry } = useMeasure();
     const ref = useMergeRefs([measureRef, forwardedRef]);
     const gridAreas = useGridAreas(preferenceCardGrid);
     return (jsxs("div", { className: cvaPreferenceCard({
             disabled,
             className,
-        }), "data-testid": dataTestId, ref: ref, children: [input ? (jsx("label", { className: twMerge(cvaInputContainer({
+        }), "data-testid": dataTestId, ref: ref, style: style, children: [input ? (jsx("label", { className: twMerge(cvaInputContainer({
                     itemPlacement: geometry && geometry.height < CENTER_INPUT_HEIGHT_THRESHOLD ? "center" : "start",
                 }), cvaInteractableItem({
                     disabled,
@@ -7384,7 +7415,7 @@ const getRandomWidth = (min, max) => {
  * @param {PreferenceCardSkeletonProps} props - The props for the PreferenceCardSkeleton component
  * @returns {ReactElement} PreferenceCardSkeleton component
  */
-const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasIcon, hasTitleTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasTitleTag, hasCardTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasCardTag, hasInput = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasInput, ref, }) => {
+const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasIcon, hasTitleTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasTitleTag, hasCardTag = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasCardTag, hasInput = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS.hasInput, className, "data-testid": dataTestId, style, ref, }) => {
     const gridAreas = useGridAreas(preferenceCardGrid);
     // Generate stable random widths once and never change them
     const lineWidths = useMemo(() => {
@@ -7393,7 +7424,7 @@ const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PRO
             description: getRandomWidth(160, 240),
         };
     }, []);
-    return (jsxs("div", { className: cvaPreferenceCard(), ref: ref, children: [hasInput ? (jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsx(SkeletonBlock, { height: 20, width: 20 }) })) : null, jsx("div", { className: cvaContentWrapper(), children: jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxs(Fragment, { children: [hasIcon ? (jsx("div", { ...slots.icon, children: jsx(SkeletonBlock, { className: cvaIconBackground({ disabled: false }), height: 32, width: 32 }) })) : null, jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }), hasTitleTag ? jsx(TagSkeleton, { size: "small" }) : null] }) }), jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
+    return (jsxs("div", { className: cvaPreferenceCard({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [hasInput ? (jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsx(SkeletonBlock, { height: 20, width: 20 }) })) : null, jsx("div", { className: cvaContentWrapper(), children: jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxs(Fragment, { children: [hasIcon ? (jsx("div", { ...slots.icon, children: jsx(SkeletonBlock, { className: cvaIconBackground({ disabled: false }), height: 32, width: 32 }) })) : null, jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }), hasTitleTag ? jsx(TagSkeleton, { size: "small" }) : null] }) }), jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
 };
 /**
  * Simple tag skeleton for use within PreferenceCardSkeleton.
@@ -7522,8 +7553,8 @@ const cvaSpacer = cvaMerge([], {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, className, ref, }) => {
-    return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId, ref: ref });
+const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, className, style, ref, }) => {
+    return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId, ref: ref, style: style });
 };
 
 /**
@@ -7552,8 +7583,8 @@ const Spacer = ({ size = "medium", border = false, "data-testid": dataTestId, cl
  * @param {SectionHeaderProps} props - The props for the SectionHeader component
  * @returns {ReactElement} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, "data-testid": dataTestId, addons, ref, }) => {
-    return (jsxs("div", { className: "flex flex-col", ref: ref, 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, { "data-testid": dataTestId, variant: "secondary", children: title }), subtitle ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons !== null && addons !== undefined ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
+const SectionHeader = ({ title, subtitle, "data-testid": dataTestId, addons, style, ref, }) => {
+    return (jsxs("div", { className: "flex flex-col", ref: ref, style: style, 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, { "data-testid": dataTestId, variant: "secondary", children: title }), subtitle ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons !== null && addons !== undefined ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
 };
 
 /**
@@ -9137,7 +9168,7 @@ const useSheetMotionOverflow = ({ panelEl, isDragging, scrollAreaEl, separatorEl
  * CSS transitions on transform; the component stays mounted during the
  * close animation and unmounts after the transition completes.
  */
-const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, onCloseGesture, floatingUi, ref, anchor = "center", snapping = true, resizable = true, variant = "default", trapFocus = true, container, dockedContent, persistentContent, className, "data-testid": dataTestId, onCloseComplete, entryAnimation = "subsequent", children, }) => {
+const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, onCloseGesture, floatingUi, ref, anchor = "center", snapping = true, resizable = true, variant = "default", trapFocus = true, container, dockedContent, persistentContent, className, style, "data-testid": dataTestId, onCloseComplete, entryAnimation = "subsequent", children, }) => {
     const isFirstRender = useIsFirstRender();
     const skipEntryAnimation = entryAnimation === "never" || (entryAnimation === "subsequent" && isFirstRender);
     const effectiveSnapping = resizable && snapping;
@@ -9243,7 +9274,7 @@ const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, o
             onLostPointerCapture: gestures.onLostPointerCapture,
         }
         : {};
-    const panel = (jsxs(Card, { ...(shouldTrapFocus === true ? { "aria-modal": true, role: "dialog" } : {}), ...(floatingUi?.getFloatingProps() ?? {}), className: cvaSheetPanel({ anchor, variant, className }), "data-testid": dataTestId, onTransitionEnd: handleTransitionEnd, ref: panelRefWithFloating, style: getSheetPanelStyle({
+    const panel = (jsxs(Card, { ...(shouldTrapFocus === true ? { "aria-modal": true, role: "dialog" } : {}), ...(floatingUi?.getFloatingProps() ?? {}), className: cvaSheetPanel({ anchor, variant, className }), "data-testid": dataTestId, onTransitionEnd: handleTransitionEnd, ref: panelRefWithFloating, style: mergeDomStyles(getSheetPanelStyle({
             autoHeight: state.sizingMode === "fit" && !fitHeightMeasured,
             closePhase: animState.closePhase,
             isDragging: gestures.isDragging,
@@ -9252,7 +9283,7 @@ const Sheet = ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, o
             snapHeight: snapHeightCss,
             suppressTransition: skipEntryAnimation && animState.visuallyOpen,
             variant,
-        }), children: [resizable ? (jsx(SheetHandle, { "data-testid": dataTestId !== undefined ? `${dataTestId}-handle` : undefined, isDragging: gestures.isDragging, onClick: handleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...gestureHandlers })) : null, jsx("div", { className: "h-px shrink-0 bg-neutral-200 opacity-0 transition-opacity duration-200", ref: setSeparatorEl }), jsxs("div", { className: cvaSheetScrollArea({ fillHeight: state.sizingMode !== "fit" }), "data-sheet-scroll-area": true, ref: setScrollAreaEl, children: [persistentContent, state.sizingMode === "docked" ? dockedContent : children] })] }));
+        }), style), children: [resizable ? (jsx(SheetHandle, { "data-testid": dataTestId !== undefined ? `${dataTestId}-handle` : undefined, isDragging: gestures.isDragging, onClick: handleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...gestureHandlers })) : null, jsx("div", { className: "h-px shrink-0 bg-neutral-200 opacity-0 transition-opacity duration-200", ref: setSeparatorEl }), jsxs("div", { className: cvaSheetScrollArea({ fillHeight: state.sizingMode !== "fit" }), "data-sheet-scroll-area": true, ref: setScrollAreaEl, children: [persistentContent, state.sizingMode === "docked" ? dockedContent : children] })] }));
     return (jsx(Portal, { root: container, children: jsxs("div", { className: cvaSheetContainer({
                 docked: state.sizingMode === "docked",
             }), "data-testid": dataTestId !== undefined ? `${dataTestId}-container` : undefined, ref: containerRef, children: [jsx(SheetOverlay, { "data-testid": dataTestId !== undefined ? `${dataTestId}-overlay` : undefined, visible: showOverlay }), shouldTrapFocus === true ? (jsx(FloatingFocusManager, { context: floatingUi.context, children: panel })) : (panel)] }) }));
@@ -9703,7 +9734,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */
-const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, "data-testid": dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, ref, }) => {
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, "data-testid": dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, style, ref, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -9716,7 +9747,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return "visible";
     };
-    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: Children.map(children, child => {
+    return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("div", { className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": `${dataTestId}-child-container`, ref: overflowContainerRef, children: Children.map(children, child => {
                     return cloneElement(child, {
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
@@ -10149,7 +10180,7 @@ const cvaToggleItemContent = cvaMerge([], {
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
  * @returns {ReactElement} ToggleGroup component
  */
-const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, "data-testid": dataTestId, ref, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, "data-testid": dataTestId, style, ref, }) => {
     const [isMounted, setIsMounted] = useState(false);
     const [slidingLeft, setSlidingLeft] = useState(0);
     const [slidingWidth, setSlidingWidth] = useState(0);
@@ -10170,27 +10201,26 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
         setSlidingLeft(left);
         setSlidingWidth(width);
     }, [validIndex]);
-    return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: 
-        // eslint-disable-next-line @trackunit/no-typescript-assertion
-        {
-            "--sliding-left": `${slidingLeft}px`,
-            "--sliding-width": `${slidingWidth}px`,
-            "--transition-duration": "200ms",
-        }, children: list.map((item, index) => (jsx(ToggleItem, { className: item.className, "data-testid": item["data-testid"], disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+    const slidingIndicatorStyle = {
+        "--sliding-left": `${slidingLeft}px`,
+        "--sliding-width": `${slidingWidth}px`,
+        "--transition-duration": "200ms",
+    };
+    return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, ref: ref, style: mergeDomStyles(style, slidingIndicatorStyle), children: list.map((item, index) => (jsx(ToggleItem, { className: item.className, "data-testid": item["data-testid"], disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
-            }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+            }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, style: item.style, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
-const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, ref, }) => {
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName = undefined, size, className, selected, text, tooltip, "data-testid": dataTestId, style, ref, }) => {
     return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
-            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+            }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, style: style, title: title }) })) : (jsx(Tooltip, { disabled: !tooltip?.content && text?.truncate === false, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
                 className,
                 selected,
                 disabled,
-            }), "data-testid": dataTestId, disabled: disabled, iconPrefix: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title, children: jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
+            }), "data-testid": dataTestId, disabled: disabled, iconPrefix: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, style: style, title: title, children: jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
 };
 const ToggleButton = ({ title, size, children, "data-testid": dataTestId, className, icon, iconPrefix, isIconOnly, ...rest }) => {
     const sizeClasses = {
@@ -10267,13 +10297,13 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, style, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
     const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaSegmentedValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, style: style, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
                         ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
                         : formatValue(segment.value, tooltipUnit ?? unit);
@@ -11012,6 +11042,7 @@ const MAX_URL_LENGTH = 5000;
 const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: replaceOption, }) => {
     const navigate = useNavigate();
     const location = useLocation();
+    const router = useRouter();
     const search = useSearch({ strict: false, shouldThrow: false });
     const lastWrittenRef = useRef(undefined);
     const onExternalChangeRef = useRef(onExternalChange);
@@ -11069,6 +11100,9 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
             return;
         }
         requestAnimationFrame(() => {
+            if (router.state.status === "pending") {
+                return;
+            }
             const shouldReplace = options?.replace ?? replaceOption ?? !Boolean(currentSearchValue);
             void navigate({
                 to: ".",
@@ -11084,7 +11118,7 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
                 replace: shouldReplace,
             });
         });
-    }, [enabled, navigate, key, replaceOption, location.hash, getUrlLengthWithSearchParam, currentSearchValue]);
+    }, [enabled, navigate, key, replaceOption, location.hash, getUrlLengthWithSearchParam, currentSearchValue, router.state.status]);
     return useMemo(() => ({ searchValue: currentSearchValue, updateSearchParam }), [currentSearchValue, updateSearchParam]);
 };