@trackunit/react-components 2.12.0 → 2.13.1

package/index.cjs.js

@@ -74,7 +74,8 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
-const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"], {
+const cvaIcon = cssClassVarianceUtilities.cva({
+    base: ["aspect-square", "inline-grid", "relative", "shrink-0"],
     variants: {
         color: {
             primary: "text-primary-600",
@@ -1363,8 +1364,9 @@ const isElementVisible = (element) => {
     return true;
 };
 
-const cvaPopoverContainer = cssClassVarianceUtilities.cvaMerge(["z-popover", "animate-fade-in-fast"]);
-const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "px-2", "py-1"], {
+const cvaPopoverContainer = cssClassVarianceUtilities.cva({ base: ["z-popover", "animate-fade-in-fast"] });
+const cvaPopoverTitleContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "px-2", "py-1"],
     variants: {
         divider: {
             true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
@@ -1372,7 +1374,7 @@ const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "it
         },
     },
 });
-const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
+const cvaPopoverTitleText = cssClassVarianceUtilities.cva({ base: ["flex-1", "text-neutral-500"] });
 
 /**
  * Wraps a `returnFocus` ref so Floating UI's live `ref.current` read at close time (see
@@ -1444,7 +1446,8 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
 };
 
-const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
+const cvaSpinner = cssClassVarianceUtilities.cva({
+    base: ["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"],
     variants: {
         size: {
             small: ["w-4", "h-4"],
@@ -1461,8 +1464,9 @@ const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounde
         mode: "light",
     },
 });
-const cvaSpinnerContainerInner = cssClassVarianceUtilities.cvaMerge(["gap-responsive-space-sm", "grid", "place-items-center"]);
-const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p-0.5", "overflow-hidden"], {
+const cvaSpinnerContainerInner = cssClassVarianceUtilities.cva({ base: ["gap-responsive-space-sm", "grid", "place-items-center"] });
+const cvaSpinnerContainer = cssClassVarianceUtilities.cva({
+    base: ["box-border", "p-0.5", "overflow-hidden"],
     variants: {
         centering: {
             centered: ["grid", "h-full", "w-full", "place-items-center"],
@@ -1479,7 +1483,7 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
         mode: "light",
     },
 });
-const cvaSpinnerLabel = cssClassVarianceUtilities.cvaMerge(["self-center", "text-center", "text-current"]);
+const cvaSpinnerLabel = cssClassVarianceUtilities.cva({ base: ["self-center", "text-center", "text-current"] });
 
 /**
  * Spinner provides visual feedback that data is being processed. It reassures users that their action is being handled
@@ -1520,27 +1524,28 @@ const Spinner = ({ mode = "light", size = "medium", centering = "centered", clas
     return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), ref: ref, style: style, children: jsxRuntime.jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsxRuntime.jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsxRuntime.jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
 };
 
-const cvaButton = cssClassVarianceUtilities.cvaMerge([
-    "flex-row",
-    "inline-flex",
-    "gap-2",
-    "box-border",
-    "justify-center",
-    "items-center",
-    "whitespace-nowrap",
-    "max-w-full",
-    "transition-all",
-    "ease-in-out",
-    "cursor-pointer",
-    "flex-none",
-    "component-button-border",
-    "component-button-padding",
-    "component-button-height",
-    "disabled:cursor-not-allowed",
-    "font-medium",
-    "align-middle",
-    "rounded-md",
-], {
+const cvaButton = cssClassVarianceUtilities.cva({
+    base: [
+        "flex-row",
+        "inline-flex",
+        "gap-2",
+        "box-border",
+        "justify-center",
+        "items-center",
+        "whitespace-nowrap",
+        "max-w-full",
+        "transition-all",
+        "ease-in-out",
+        "cursor-pointer",
+        "flex-none",
+        "component-button-border",
+        "component-button-padding",
+        "component-button-height",
+        "disabled:cursor-not-allowed",
+        "font-medium",
+        "align-middle",
+        "rounded-md",
+    ],
     variants: {
         variant: {
             primary: [
@@ -1735,8 +1740,9 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
         disabled: false,
     },
 });
-const cvaButtonSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["p-0", "h-auto"]);
-const cvaButtonSpinner = cssClassVarianceUtilities.cvaMerge([], {
+const cvaButtonSpinnerContainer = cssClassVarianceUtilities.cva({ base: ["p-0", "h-auto"] });
+const cvaButtonSpinner = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         variant: {
             primary: ["border-white/[0.32]", "border-b-white"],
@@ -1752,7 +1758,8 @@ const cvaButtonSpinner = cssClassVarianceUtilities.cvaMerge([], {
         variant: "primary",
     },
 });
-const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center"],
     variants: {
         size: {
             small: ["h-4"],
@@ -1821,7 +1828,8 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
         disabled: false,
     },
 });
-const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
+const cvaIconButton = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         size: {
             /**
@@ -1970,7 +1978,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsxRuntime.jsx(Button, { "data-state": dataState, ref: ref, type: "button", ...buttonProps, className: tree !== null ? tailwindMerge.twMerge(props.className, "pointer-events-auto") : props.className, children: children }));
 };
 
-const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
+const cvaText = cssClassVarianceUtilities.cva({
+    base: ["text-black", "m-0", "relative", "text-sm", "font-normal"],
     variants: {
         align: {
             left: "text-left",
@@ -2079,7 +2088,8 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
 };
 Text.displayName = "Text";
 
-const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
+const cvaTooltipIcon = cssClassVarianceUtilities.cva({
+    base: ["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"],
     variants: {
         color: {
             light: "hover:text-white",
@@ -2090,8 +2100,9 @@ const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "
         },
     },
 });
-const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge(["origin-center"]);
-const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
+const cvaTooltipPopover = cssClassVarianceUtilities.cva({ base: ["origin-center"] });
+const cvaTooltipPopoverTail = cssClassVarianceUtilities.cva({
+    base: "",
     variants: {
         placement: {
             top: "left-2/4 top-full ml-[-5px]",
@@ -2117,7 +2128,8 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
         mode: "dark",
     },
 });
-const cvaTooltipPopoverContent = cssClassVarianceUtilities.cvaMerge(["max-w-sm", "rounded", "p-2"], {
+const cvaTooltipPopoverContent = cssClassVarianceUtilities.cva({
+    base: ["max-w-sm", "rounded", "p-2"],
     variants: {
         color: {
             light: "bg-white shadow-lg",
@@ -2211,26 +2223,27 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
  * This is the source of truth - use parseTailwindArbitraryValue to derive the numeric value.
  */
 const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
-const cvaTag = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "grid-cols-[1fr]",
-    "has-[[data-slot=icon]]:grid-cols-[auto_1fr]",
-    "has-[[data-slot=dismiss]]:grid-cols-[1fr_auto]",
-    "has-[[data-slot=icon]]:has-[[data-slot=dismiss]]:grid-cols-[auto_1fr_auto]",
-    "justify-center",
-    "items-center",
-    "rounded-full",
-    "py-1",
-    "px-2",
-    "text-center",
-    "h-min",
-    "font-medium",
-    "max-w-full",
-    "w-fit",
-    "overflow-hidden",
-    "min-w-min",
-    "text-xs",
-], {
+const cvaTag = cssClassVarianceUtilities.cva({
+    base: [
+        "grid",
+        "grid-cols-[1fr]",
+        "has-[[data-slot=icon]]:grid-cols-[auto_1fr]",
+        "has-[[data-slot=dismiss]]:grid-cols-[1fr_auto]",
+        "has-[[data-slot=icon]]:has-[[data-slot=dismiss]]:grid-cols-[auto_1fr_auto]",
+        "justify-center",
+        "items-center",
+        "rounded-full",
+        "py-1",
+        "px-2",
+        "text-center",
+        "h-min",
+        "font-medium",
+        "max-w-full",
+        "w-fit",
+        "overflow-hidden",
+        "min-w-min",
+        "text-xs",
+    ],
     variants: {
         size: {
             small: "px-2 py-px",
@@ -2272,7 +2285,8 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         color: "info",
     },
 });
-const cvaTagText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
+const cvaTagText = cssClassVarianceUtilities.cva({
+    base: ["whitespace-nowrap"],
     variants: {
         truncate: {
             true: ["truncate", TAG_TEXT_MIN_WIDTH_CLASS],
@@ -2283,8 +2297,10 @@ const cvaTagText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
         truncate: true,
     },
 });
-const cvaTagIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "inline-flex", "self-center"]);
-const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
+const cvaTagIconContainer = cssClassVarianceUtilities.cva({ base: ["shrink-0", "inline-flex", "self-center"] });
+const cvaTagIcon = cssClassVarianceUtilities.cva({
+    base: ["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"],
+});
 
 const TAG_TEXT_MIN_WIDTH_PX = sharedUtils.parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLASS);
 /**
@@ -2592,7 +2608,8 @@ const IconButton = ({ icon, size = "medium", square = true, loading = false, dis
 };
 IconButton.displayName = "IconButton";
 
-const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"], {
+const cvaAlert = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"],
     variants: {
         color: {
             danger: ["bg-danger-100"],
@@ -2611,7 +2628,8 @@ const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3"
         actionsInline: false,
     },
 });
-const cvaAlertActionsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"], {
+const cvaAlertActionsContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "gap-2"],
     variants: {
         inline: {
             true: ["flex-row", "shrink-0"],
@@ -2627,8 +2645,9 @@ const cvaAlertActionsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "ga
         actionsInline: false,
     },
 });
-const cvaContent = cssClassVarianceUtilities.cvaMerge(["flex-grow"]);
-const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
+const cvaContent = cssClassVarianceUtilities.cva({ base: ["flex-grow"] });
+const cvaAlertContentContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-row", "h-full", "gap-2"],
     variants: {
         inline: {
             true: ["items-center", "justify-between"],
@@ -2644,7 +2663,8 @@ const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "fl
         actionsInline: false,
     },
 });
-const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "w-min", "shrink-0"], {
+const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "w-min", "shrink-0"],
     variants: {
         inline: {
             true: ["self-center"],
@@ -2660,7 +2680,8 @@ const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex",
         actionsInline: false,
     },
 });
-const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
+const cvaAlertIconContainer = cssClassVarianceUtilities.cva({
+    base: ["shrink-0", "grid", "w-min", "flex"],
     variants: {
         inline: {
             true: ["self-center"],
@@ -2785,19 +2806,20 @@ const getIconName = (color) => {
     }
 };
 
-const cvaBadge = cssClassVarianceUtilities.cvaMerge([
-    "box-border",
-    "whitespace-nowrap",
-    "overflow-hidden",
-    "text-ellipsis",
-    "inline-flex",
-    "items-center",
-    "justify-center",
-    "rounded-full",
-    "font-bold",
-    "text-center",
-    "tabular-nums",
-], {
+const cvaBadge = cssClassVarianceUtilities.cva({
+    base: [
+        "box-border",
+        "whitespace-nowrap",
+        "overflow-hidden",
+        "text-ellipsis",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "rounded-full",
+        "font-bold",
+        "text-center",
+        "tabular-nums",
+    ],
     variants: {
         color: {
             primary: "bg-primary-600 text-white",
@@ -2807,11 +2829,11 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
         },
         compact: {
             true: "size-2",
-            false: "h-fit min-h-4 w-fit min-w-4",
+            false: "min-h-4 min-w-4 h-fit w-fit",
         },
         size: {
             default: "text-xs",
-            condensed: "h-3.5 min-h-3.5 min-w-3.5 text-[10px]",
+            condensed: "min-h-3.5 min-w-3.5 h-3.5 text-[10px]",
         },
         isSingleChar: {
             true: "aspect-square",
@@ -2888,10 +2910,11 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
     return (jsxRuntime.jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
-const cvaBreadcrumb = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "place-items-center"]);
-const cvaBreadcrumbItem = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap", "items-center"]);
-const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+const cvaBreadcrumb = cssClassVarianceUtilities.cva({ base: ["my-4", "flex", "place-items-center"] });
+const cvaBreadcrumbItem = cssClassVarianceUtilities.cva({ base: ["flex", "items-center"] });
+const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cva({ base: ["flex", "flex-nowrap", "items-center"] });
+const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center"],
     variants: {
         expanded: {
             true: "flex-wrap",
@@ -3143,18 +3166,19 @@ const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, st
     return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
-const cvaCard = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "border",
-    "flex-col",
-    "relative",
-    "bg-white",
-    "component-card-shadow",
-    "component-card-border",
-    "transition-colors",
-    "ease-in-out",
-    "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
-], {
+const cvaCard = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "border",
+        "flex-col",
+        "relative",
+        "bg-white",
+        "component-card-shadow",
+        "component-card-border",
+        "transition-colors",
+        "ease-in-out",
+        "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
+    ],
     variants: {
         clickable: {
             false: "",
@@ -3170,7 +3194,8 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterContainerRoot = cssClassVarianceUtilities.cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterContainerRoot = cssClassVarianceUtilities.cva({
+    base: ["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"],
     variants: {
         border: {
             default: "",
@@ -3186,10 +3211,13 @@ const cvaCardFooterContainerRoot = cssClassVarianceUtilities.cvaMerge(["flex", "
         padding: "default",
     },
 });
-const cvaCardFooterContainer = cssClassVarianceUtilities.cvaMerge(["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"]);
-const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "flex-1"]);
-const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-b", "border-neutral-200"], {
+const cvaCardFooterContainer = cssClassVarianceUtilities.cva({
+    base: ["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"],
+});
+const cvaCardHeader = cssClassVarianceUtilities.cva({ base: ["flex", "justify-between", "flex-1"] });
+const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cva({ base: ["flex", "gap-4", "items-center"] });
+const cvaCardHeaderContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "border-b", "border-neutral-200"],
     variants: {
         border: {
             default: "",
@@ -3205,7 +3233,8 @@ const cvaCardHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "bord
         padding: "default",
     },
 });
-const cvaCardBodyContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-grow", "overflow-auto"],
     variants: {
         direction: {
             row: "flex-row",
@@ -3391,7 +3420,8 @@ const CardFooter = ({ "data-testid": dataTestId, className, children, padding =
         }), "data-card-footer": true, "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
 };
 
-const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal", "text-black"], {
+const cvaHeading = cssClassVarianceUtilities.cva({
+    base: ["m-0", "leading-normal", "text-black"],
     variants: {
         subtle: {
             true: "text-neutral-600",
@@ -3519,17 +3549,18 @@ const CardHeader = ({ heading, headingVariant = "secondary", subHeading, "data-t
         }), "data-card-header": true, "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsx("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: actions })] }) }));
 };
 
-const cvaClickable = cssClassVarianceUtilities.cvaMerge([
-    "rounded-lg",
-    "p-3",
-    "bg-neutral-50",
-    "transition-all",
-    "border-2",
-    "border-solid",
-    "border-neutral-100",
-    "cursor-pointer",
-    "hover:border-neutral-300",
-], {
+const cvaClickable = cssClassVarianceUtilities.cva({
+    base: [
+        "rounded-lg",
+        "p-3",
+        "bg-neutral-50",
+        "transition-all",
+        "border-2",
+        "border-solid",
+        "border-neutral-100",
+        "cursor-pointer",
+        "hover:border-neutral-300",
+    ],
     variants: {
         disabled: {
             false: "",
@@ -3615,7 +3646,8 @@ const useMeasure = ({ skip = false, onChange, } = {}) => {
     return react.useMemo(() => ({ geometry, ref, element }), [geometry, ref, element]);
 };
 
-const cvaCollapse = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "overflow-hidden"], {
+const cvaCollapse = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "overflow-hidden"],
     variants: {
         variant: {
             primary: ["border", "border-solid", "border-neutral-300", "rounded-md", "bg-white"],
@@ -3623,7 +3655,8 @@ const cvaCollapse = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "ove
         },
     },
 });
-const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "cursor-pointer", "transition-all", "group/collapse"], {
+const cvaCollapseHeader = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "cursor-pointer", "transition-all", "group/collapse"],
     variants: {
         expanded: { true: [], false: [] },
         variant: {
@@ -3668,7 +3701,8 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge(["flex", "items-cen
         },
     ],
 });
-const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center"],
     variants: {
         variant: {
             primary: ["w-full", "justify-between"],
@@ -3676,7 +3710,8 @@ const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "i
         },
     },
 });
-const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge([""], {
+const cvaCollapseLabel = cssClassVarianceUtilities.cva({
+    base: [""],
     variants: {
         variant: {
             primary: [""],
@@ -3684,7 +3719,8 @@ const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge([""], {
         },
     },
 });
-const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative"], {
+const cvaCollapsible = cssClassVarianceUtilities.cva({
+    base: ["block", "relative"],
     variants: {
         variant: {
             primary: [],
@@ -3718,7 +3754,8 @@ const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative"],
         },
     ],
 });
-const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"], {
+const cvaCollapseAnimated = cssClassVarianceUtilities.cva({
+    base: ["overflow-y-hidden", "transition-all"],
     variants: {
         expanded: {
             true: "block",
@@ -3729,7 +3766,8 @@ const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidd
         expanded: false,
     },
 });
-const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform"], {
+const cvaChevronIcon = cssClassVarianceUtilities.cva({
+    base: ["transition-transform"],
     variants: {
         expanded: {
             true: "rotate-180",
@@ -3951,21 +3989,22 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     }), [onMouseEnter, onMouseLeave, value]);
 };
 
-const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
-    "rounded",
-    "cursor-pointer",
-    "transition-all",
-    "ease-in-out",
-    "inline-flex",
-    "items-center",
-    "gap-1",
-    "bg-transparent",
-    "border-none",
-    "outline-none",
-    "hover:bg-neutral-200",
-    "py-0.5",
-    "px-1",
-], {
+const cvaCopyableText = cssClassVarianceUtilities.cva({
+    base: [
+        "rounded",
+        "cursor-pointer",
+        "transition-all",
+        "ease-in-out",
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-transparent",
+        "border-none",
+        "outline-none",
+        "hover:bg-neutral-200",
+        "py-0.5",
+        "px-1",
+    ],
     variants: {
         animating: {
             false: "",
@@ -4131,7 +4170,8 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
 CopyButton.displayName = "CopyButton";
 const COPIED_FEEDBACK_DURATION_MS = 2000;
 
-const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
+const cvaDetailsList = cssClassVarianceUtilities.cva({
+    base: ["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"],
     variants: {
         hasLink: {
             true: "pl-1",
@@ -4141,7 +4181,7 @@ const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "mi
         hasLink: false,
     },
 });
-const cvaDetailsListItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"]);
+const cvaDetailsListItem = cssClassVarianceUtilities.cva({ base: ["last:truncate"] });
 
 /**
  * DetailsList renders a one-line list of text values separated by slash icons.
@@ -4279,31 +4319,32 @@ const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
     return react.useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
 };
 
-const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-linear-to-r",
-    "from-neutral-200/80",
-    "via-neutral-300/60",
-    "to-neutral-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-linear-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-], {
+const cvaSkeleton = cssClassVarianceUtilities.cva({
+    base: [
+        "relative",
+        "overflow-hidden",
+        "rounded-lg",
+        // Gradient background
+        "bg-linear-to-r",
+        "from-neutral-200/80",
+        "via-neutral-300/60",
+        "to-neutral-200/80",
+        // Pulse animation
+        "animate-pulse",
+        // Shimmer overlay
+        "before:absolute",
+        "before:inset-0",
+        "before:bg-linear-to-r",
+        "before:from-transparent",
+        "before:via-white/50",
+        "before:to-transparent",
+        "before:opacity-0",
+        "before:animate-pulse",
+        // Smooth transitions for accessibility
+        "transition-all",
+        "duration-300",
+        "ease-in-out",
+    ],
     variants: {
         textSize: {
             "text-xs": ["my-[calc((var(--line-height-xs)-var(--font-size-xs)*0.7)/2)]"],
@@ -4360,20 +4401,22 @@ const SkeletonLabel = react.memo((props) => {
 });
 SkeletonLabel.displayName = "SkeletonLabel";
 
-const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-col",
-    "items-center",
-    "gap-0",
-    "p-4",
-    "sm:p-6",
-    "md:p-12",
-    "text-center",
-    "justify-center",
-    "h-full",
-    "self-center",
-]);
-const cvaImgStyles = cssClassVarianceUtilities.cvaMerge(["w-full", "min-w-[60px]", "max-w-[200px]"]);
+const cvaContainerStyles = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "flex-col",
+        "items-center",
+        "gap-0",
+        "p-4",
+        "sm:p-6",
+        "md:p-12",
+        "text-center",
+        "justify-center",
+        "h-full",
+        "self-center",
+    ],
+});
+const cvaImgStyles = cssClassVarianceUtilities.cva({ base: ["w-full", "min-w-[60px]", "max-w-[200px]"] });
 
 /**
  * The Graphic for the BuildingError EmptyState
@@ -4493,7 +4536,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
     return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", ref: ref, style: style, children: loading ? (jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsxRuntime.jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsxRuntime.jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsxRuntime.jsx(Text, { align: "center", size: "medium", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
-const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"]);
+const cvaEmptyValue = cssClassVarianceUtilities.cva({ base: ["text-neutral-400"] });
 
 /**
  * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
@@ -4523,7 +4566,8 @@ const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
     return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
 };
 
-const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"], {
+const cvaExternalLink = cssClassVarianceUtilities.cva({
+    base: ["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"],
     variants: {
         color: {
             primary: [
@@ -5345,21 +5389,22 @@ function useGridAreas(config) {
     }, [id, config, validationRef]);
 }
 
-const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
-    "inline-flex",
-    "justify-center",
-    "items-center",
-    "rounded",
-    "py-0.5",
-    "px-1",
-    "text-center",
-    "h-min",
-    "min-w-[1.5rem]",
-    "font-medium",
-    "truncate",
-    "max-w-full",
-    "w-fit",
-], {
+const cvaHighlight = cssClassVarianceUtilities.cva({
+    base: [
+        "inline-flex",
+        "justify-center",
+        "items-center",
+        "rounded",
+        "py-0.5",
+        "px-1",
+        "text-center",
+        "h-min",
+        "min-w-[1.5rem]",
+        "font-medium",
+        "truncate",
+        "max-w-full",
+        "w-fit",
+    ],
     variants: {
         size: {
             small: ["text-xs"],
@@ -5379,7 +5424,7 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
         color: "warning",
     },
 });
-const cvaHighlightText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
+const cvaHighlightText = cssClassVarianceUtilities.cva({ base: ["truncate"] });
 
 /**
  * Highlight draws visual attention to data values that may require user action, monitoring, or investigation.
@@ -5702,8 +5747,8 @@ const useScrollDetection = (options) => {
     }), [ref, element, scrollState]);
 };
 
-const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1", "isolate"]);
-const cvaZStackItem = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
+const cvaZStackContainer = cssClassVarianceUtilities.cva({ base: ["grid", "grid-cols-1", "grid-rows-1", "isolate"] });
+const cvaZStackItem = cssClassVarianceUtilities.cva({ base: ["col-start-1", "col-end-1", "row-start-1", "row-end-2"] });
 
 /**
  * ZStack stacks its children on the z-axis (overlaying them on top of each other).
@@ -5743,28 +5788,25 @@ const ZStack = ({ children, className, "data-testid": dataTestId, style, ref })
         }) }));
 };
 
-const cvaHorizontalOverflowScroller = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-nowrap",
-    "gap-1",
-    "overflow-y-hidden",
-    "overflow-x-scroll",
-    "w-full",
-    "no-scrollbar",
-]);
-const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cssClassVarianceUtilities.cvaMerge(["group", "w-full", "overflow-clip"]);
-
-const cvaOverflowIndicatorContainer = cssClassVarianceUtilities.cvaMerge(["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"]);
-const cvaOverflowIndicatorGradient = cssClassVarianceUtilities.cvaMerge([
-    "pointer-events-none",
-    "self-stretch",
-    "w-16",
-    "opacity-0",
-    "transition-opacity",
-    "duration-200",
-    "group-hover:opacity-100",
-    "group-focus-within:opacity-100",
-], {
+const cvaHorizontalOverflowScroller = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-nowrap", "gap-1", "overflow-y-hidden", "overflow-x-scroll", "w-full", "no-scrollbar"],
+});
+const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cssClassVarianceUtilities.cva({ base: ["group", "w-full", "overflow-clip"] });
+
+const cvaOverflowIndicatorContainer = cssClassVarianceUtilities.cva({
+    base: ["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"],
+});
+const cvaOverflowIndicatorGradient = cssClassVarianceUtilities.cva({
+    base: [
+        "pointer-events-none",
+        "self-stretch",
+        "w-16",
+        "opacity-0",
+        "transition-opacity",
+        "duration-200",
+        "group-hover:opacity-100",
+        "group-focus-within:opacity-100",
+    ],
     variants: {
         direction: {
             left: ["bg-gradient-to-r", "from-white", "from-30%", "to-transparent"],
@@ -5772,7 +5814,8 @@ const cvaOverflowIndicatorGradient = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaJustificationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "items-center", "pointer-events-none"], {
+const cvaJustificationContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "w-full", "items-center", "pointer-events-none"],
     variants: {
         direction: {
             left: ["justify-start"],
@@ -5780,18 +5823,20 @@ const cvaJustificationContainer = cssClassVarianceUtilities.cvaMerge(["flex", "w
         },
     },
 });
-const cvaOverflowIndicatorButton = cssClassVarianceUtilities.cvaMerge([
-    "shadow-md",
-    "opacity-0",
-    "transition-opacity",
-    "duration-200",
-    "pointer-events-auto",
-    "starting:opacity-0",
-    "group-hover:opacity-100",
-    "group-focus-within:opacity-100",
-    "rounded-full",
-    "mx-1",
-]);
+const cvaOverflowIndicatorButton = cssClassVarianceUtilities.cva({
+    base: [
+        "shadow-md",
+        "opacity-0",
+        "transition-opacity",
+        "duration-200",
+        "pointer-events-auto",
+        "starting:opacity-0",
+        "group-hover:opacity-100",
+        "group-focus-within:opacity-100",
+        "rounded-full",
+        "mx-1",
+    ],
+});
 
 /**
  * Overflow indicator component that shows visual cues when content extends beyond visible area
@@ -5866,9 +5911,10 @@ const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, chil
     return (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), style: style, children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { "data-testid": `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
-const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["inline-flex", "items-center"]);
-const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize"], {
+const cvaIndicator = cssClassVarianceUtilities.cva({ base: ["inline-flex", "items-center"] });
+const cvaIndicatorIcon = cssClassVarianceUtilities.cva({ base: ["mr-2"] });
+const cvaIndicatorLabel = cssClassVarianceUtilities.cva({
+    base: ["capitalize"],
     variants: {
         size: {
             small: "text-xs",
@@ -5889,7 +5935,17 @@ const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize"], {
         background: "visible",
     },
 });
-const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
+const cvaIndicatorPing = cssClassVarianceUtilities.cva({
+    base: [
+        "animate-ping-sm",
+        "absolute",
+        "inline-flex",
+        "h-full",
+        "w-full",
+        "rounded-full",
+        "opacity-75",
+        "bg-neutral-600",
+    ],
     variants: {
         color: {
             primary: "bg-primary-600",
@@ -5932,7 +5988,8 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
         },
     },
 });
-const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+const cvaIndicatorIconBackground = cssClassVarianceUtilities.cva({
+    base: ["rounded-full", "items-center", "justify-center", "flex", "relative"],
     variants: {
         color: {
             primary: "bg-primary-100 text-primary-600",
@@ -6039,7 +6096,8 @@ const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown",
  *
  * @returns tailwind class names on the basis on the provided props.
  */
-const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["transition-colors", "duration-100", "ease-in-out"], {
+const cvaInteractableItem = cssClassVarianceUtilities.cva({
+    base: ["transition-colors", "duration-100", "ease-in-out"],
     variants: {
         cursor: {
             pointer: "cursor-pointer",
@@ -6086,7 +6144,8 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["transition-colo
     },
 });
 
-const cvaKPI = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"], {
+const cvaKPI = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col"],
     variants: {
         variant: {
             small: ["px-3", "py-2"],
@@ -6098,7 +6157,8 @@ const cvaKPI = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"], {
         variant: "default",
     },
 });
-const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
+const cvaKPITrendPercentage = cssClassVarianceUtilities.cva({
+    base: [""],
     variants: {
         color: {
             success: ["text-success-600"],
@@ -6212,7 +6272,8 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, style,
 };
 
 const valueBarContainerClassName = "relative flex w-full items-center gap-2";
-const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"], {
+const cvaValueBarText = cssClassVarianceUtilities.cva({
+    base: ["whitespace-nowrap"],
     variants: {
         size: {
             small: "leading-xs text-xs font-medium text-neutral-600",
@@ -6224,16 +6285,17 @@ const cvaValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap"]
     },
 });
 
-const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "overflow-hidden",
-    "rounded",
-    "bg-neutral-100",
-    "appearance-none",
-    "[&::-webkit-progress-bar]:bg-transparent",
-    "[&::-webkit-progress-value]:bg-current",
-    "[&::-moz-progress-bar]:bg-current",
-], {
+const cvaValueBar = cssClassVarianceUtilities.cva({
+    base: [
+        "w-full",
+        "overflow-hidden",
+        "rounded",
+        "bg-neutral-100",
+        "appearance-none",
+        "[&::-webkit-progress-bar]:bg-transparent",
+        "[&::-webkit-progress-value]:bg-current",
+        "[&::-moz-progress-bar]:bg-current",
+    ],
     variants: {
         size: {
             extraSmall: "h-1",
@@ -6362,11 +6424,12 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("progress", { "aria-label": valueText, className: cvaValueBar({ className, size }), max: 100, style: { color: barFillColor }, value: score * 100 }), showValue && (size === "small" || size === "large") ? (jsxRuntime.jsx(Text, { className: cvaValueBarText({ size }), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
 };
 
-const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
-    "inline-flex",
-    "gap-1",
-    "hover:shadow-none", // overwriting the Card hover shadow when wrapped in a KPICard
-], {
+const cvaKPICard = cssClassVarianceUtilities.cva({
+    base: [
+        "inline-flex",
+        "gap-1",
+        "hover:shadow-none", // overwriting the Card hover shadow when wrapped in a KPICard
+    ],
     variants: {
         isClickable: {
             true: ["hover:bg-neutral-50", "component-card-border"],
@@ -6382,9 +6445,10 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
         isActive: false,
     },
 });
-const cvaKPICardBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "px-3", "pb-2", "pt-3"]);
-const cvaKPICardHeader = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "justify-between", "gap-2"]);
-const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+const cvaKPICardBody = cssClassVarianceUtilities.cva({ base: ["grid", "gap-2", "px-3", "pb-2", "pt-3"] });
+const cvaKPICardHeader = cssClassVarianceUtilities.cva({ base: ["grid", "grid-cols-[1fr_auto]", "justify-between", "gap-2"] });
+const cvaKPIIconContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"],
     variants: {
         iconColor: {
             success: ["bg-success-600"],
@@ -6523,7 +6587,8 @@ const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = fal
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
-const cvaLabeledValue = cssClassVarianceUtilities.cvaMerge(["flex", "text-sm"], {
+const cvaLabeledValue = cssClassVarianceUtilities.cva({
+    base: ["flex", "text-sm"],
     variants: {
         orientation: {
             horizontal: ["flex-row", "items-start", "gap-6"],
@@ -6534,7 +6599,8 @@ const cvaLabeledValue = cssClassVarianceUtilities.cvaMerge(["flex", "text-sm"],
         orientation: "horizontal",
     },
 });
-const cvaLabeledValueLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-neutral-500"], {
+const cvaLabeledValueLabel = cssClassVarianceUtilities.cva({
+    base: ["font-medium", "text-neutral-500"],
     variants: {
         orientation: {
             horizontal: ["min-w-[40%]", "max-w-[40%]"],
@@ -6545,9 +6611,9 @@ const cvaLabeledValueLabel = cssClassVarianceUtilities.cvaMerge(["font-medium",
         orientation: "horizontal",
     },
 });
-const cvaLabeledValueValue = cssClassVarianceUtilities.cvaMerge(["min-w-0", "font-medium", "text-neutral-900"]);
-const cvaLabeledValueList = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-4"]);
-const cvaLabeledValueTooltip = cssClassVarianceUtilities.cvaMerge(["ml-1", "inline-flex", "align-sub"]);
+const cvaLabeledValueValue = cssClassVarianceUtilities.cva({ base: ["min-w-0", "font-medium", "text-neutral-900"] });
+const cvaLabeledValueList = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "gap-4"] });
+const cvaLabeledValueTooltip = cssClassVarianceUtilities.cva({ base: ["ml-1", "inline-flex", "align-sub"] });
 
 /**
  * LabeledValue displays a single piece of labeled information, pairing a descriptive label with its corresponding value.
@@ -6610,7 +6676,8 @@ const LabeledValueList = ({ items, orientation = "horizontal", className, "data-
     return (jsxRuntime.jsx("div", { className: cvaLabeledValueList({ className }), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => (jsxRuntime.jsx(LabeledValue, { orientation: orientation, ...item }, item["data-testid"] ?? `${item.label}-${index}`))) }));
 };
 
-const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+const cvaListContainer = cssClassVarianceUtilities.cva({
+    base: ["overflow-y-auto", "overflow-x-hidden", "h-full"],
     variants: {
         withTopSeparator: {
             true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
@@ -6621,8 +6688,9 @@ const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto",
         withTopSeparator: false,
     },
 });
-const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+const cvaList = cssClassVarianceUtilities.cva({ base: ["relative"] });
+const cvaListItem$1 = cssClassVarianceUtilities.cva({
+    base: ["absolute", "top-0", "left-0", "w-full"],
     variants: {
         separator: {
             line: "border-neutral-200",
@@ -6650,8 +6718,11 @@ const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "
     },
 });
 
-const cvaListItem = cssClassVarianceUtilities.cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
-const cvaMainInformationClass = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
+const cvaListItem = cssClassVarianceUtilities.cva({
+    base: ["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"],
+});
+const cvaMainInformationClass = cssClassVarianceUtilities.cva({
+    base: ["grid", "items-center", "text-sm", "gap-2"],
     variants: {
         hasThumbnail: {
             true: "grid-cols-min-fr",
@@ -6659,20 +6730,20 @@ const cvaMainInformationClass = cssClassVarianceUtilities.cvaMerge(["grid", "ite
         },
     },
 });
-const cvaThumbnailContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "h-8",
-    "w-8",
-    "items-center",
-    "justify-center",
-    "overflow-hidden",
-    "rounded-md",
-]);
-const cvaTextContainer = cssClassVarianceUtilities.cvaMerge(["grid-rows-min-fr", "grid", "items-center", "text-sm"]);
-const cvaTitleRow = cssClassVarianceUtilities.cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "text-sm"]);
-const cvaDescriptionRow = cssClassVarianceUtilities.cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center"]);
-const cvaMetaRow = cssClassVarianceUtilities.cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "pt-0.5"]);
-const cvaDetailsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-0.5", "text-nowrap", "pl-2"]);
+const cvaThumbnailContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "h-8", "w-8", "items-center", "justify-center", "overflow-hidden", "rounded-md"],
+});
+const cvaTextContainer = cssClassVarianceUtilities.cva({ base: ["grid-rows-min-fr", "grid", "items-center", "text-sm"] });
+const cvaTitleRow = cssClassVarianceUtilities.cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "text-sm"],
+});
+const cvaDescriptionRow = cssClassVarianceUtilities.cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center"],
+});
+const cvaMetaRow = cssClassVarianceUtilities.cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "pt-0.5"],
+});
+const cvaDetailsContainer = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-0.5", "text-nowrap", "pl-2"] });
 
 /**
  * Default property values for ListItemSkeleton component.
@@ -7291,17 +7362,18 @@ const useListItemHeight = () => {
 
 // These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
 // * Note that the cvaMenu is also used for Select component
-const cvaMenu = cssClassVarianceUtilities.cvaMerge([
-    "shadow",
-    "rounded-lg",
-    "bg-white",
-    "border",
-    "border-neutral-300",
-    "z-popover",
-    "grid",
-    "min-w-[200px]",
-    "overflow-clip",
-], {
+const cvaMenu = cssClassVarianceUtilities.cva({
+    base: [
+        "shadow",
+        "rounded-lg",
+        "bg-white",
+        "border",
+        "border-neutral-300",
+        "z-popover",
+        "grid",
+        "min-w-[200px]",
+        "overflow-clip",
+    ],
     variants: {
         limitWidth: {
             true: "max-w-[300px]",
@@ -7313,20 +7385,18 @@ const cvaMenu = cssClassVarianceUtilities.cvaMerge([
     },
 });
 // * Note that the cvaMenuList is also used for Select component
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
-    "p-1",
-    "gap-y-0.5",
-    "grid",
-    "max-h-[max(40dvh,var(--spacing-64))]",
-    "overflow-y-auto",
-]);
-const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
-const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge([
-    "!has-[:checked]:bg-primary-100",
-    "!hover:has-[:checked]:bg-primary-200",
-    "!focus-within:has-[:checked]:bg-primary-100",
-]);
-const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
+const cvaMenuList = cssClassVarianceUtilities.cva({
+    base: ["p-1", "gap-y-0.5", "grid", "max-h-[max(40dvh,var(--spacing-64))]", "overflow-y-auto"],
+});
+const cvaMenuListDivider = cssClassVarianceUtilities.cva({ base: ["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"] });
+const cvaMenuListMultiSelect = cssClassVarianceUtilities.cva({
+    base: [
+        "!has-[:checked]:bg-primary-100",
+        "!hover:has-[:checked]:bg-primary-200",
+        "!focus-within:has-[:checked]:bg-primary-100",
+    ],
+});
+const cvaMenuListItem = cssClassVarianceUtilities.cva({ base: "max-w-full" });
 
 const MenuContentContext = react.createContext(null);
 /**
@@ -7760,44 +7830,44 @@ const cvaMenuItem = (props) => {
         focus: focused === true ? "focused" : "unfocused",
     }), className);
 };
-const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(
-// `min-w-0` overrides the flex/grid item default of `min-width: auto`, which otherwise refuses to
-// shrink this row below the intrinsic (unwrapped) width of its `truncate`d label -- without it, the
-// label's ellipsis truncation never kicks in and the ancestor menu list scrolls horizontally instead.
-//
-// `outline-hidden`: `MenuContent`'s roving-tabindex keyboard nav calls this element's own `.focus()`
-// on hover too (to keep keyboard nav in sync with the pointer -- see `onMouseMove` on `MenuItemProps`),
-// and Chromium's `:focus-visible` heuristic treats a script-triggered `.focus()` on a non-native
-// control as visible-by-default, so the browser's native ring was showing on every hover. The active
-// item is already indicated by `cvaInteractableItem`'s `hover:`/`focus-within:` background tint, so the
-// native ring is redundant (and, via hover, actively misleading) for both mouse and keyboard users.
-//
-// `data-[state=open]:…` / `data-hover-scroll-suppressed`: a submenu trigger's open state is held still
-// across scroll-induced phantom `:hover` flips (see `hoverScrollGuard`). Non-open rows freeze their
-// *hover* tint back to their own resting background (added per-`selected` value below, since that
-// resting background differs) while the guard's root attribute is set -- matching the open-state
-// freeze without a React render per scroll tick, and *without* `pointer-events-none`: an earlier
-// version took the row out of hit-testing entirely, which silently swallowed real clicks landing
-// within the same ~100ms window (not just the phantom hover this guards against) -- see the
-// "Service Management Edit notification" e2e flake this caused. Excludes `:focus-within`
-// (`:not(:focus-within)`): the frozen background is `!important`, so without the exclusion it would
-// outrank `cvaInteractableItem`'s plain `focus-within:` tint whenever the hovered row is also the
-// keyboard-navigated one (the common case, since `MenuContent`'s roving tabindex focuses the row
-// under the cursor) -- blanking the keyboard-navigated row's only visual indicator (the native ring
-// is suppressed by `outline-hidden` above) for the whole scroll-suppression window.
-[
-    "px-2",
-    "h-auto",
-    "flex",
-    "flex-row",
-    "items-center",
-    "gap-x-2",
-    "select-none",
-    "rounded",
-    "min-w-0",
-    "outline-hidden",
-    "data-[state=open]:bg-neutral-600/5",
-], {
+const cvaMenuItemStyle = cssClassVarianceUtilities.cva({
+    // `min-w-0` overrides the flex/grid item default of `min-width: auto`, which otherwise refuses to
+    // shrink this row below the intrinsic (unwrapped) width of its `truncate`d label -- without it, the
+    // label's ellipsis truncation never kicks in and the ancestor menu list scrolls horizontally instead.
+    //
+    // `outline-hidden`: `MenuContent`'s roving-tabindex keyboard nav calls this element's own `.focus()`
+    // on hover too (to keep keyboard nav in sync with the pointer -- see `onMouseMove` on `MenuItemProps`),
+    // and Chromium's `:focus-visible` heuristic treats a script-triggered `.focus()` on a non-native
+    // control as visible-by-default, so the browser's native ring was showing on every hover. The active
+    // item is already indicated by `cvaInteractableItem`'s `hover:`/`focus-within:` background tint, so the
+    // native ring is redundant (and, via hover, actively misleading) for both mouse and keyboard users.
+    //
+    // `data-[state=open]:…` / `data-hover-scroll-suppressed`: a submenu trigger's open state is held still
+    // across scroll-induced phantom `:hover` flips (see `hoverScrollGuard`). Non-open rows freeze their
+    // *hover* tint back to their own resting background (added per-`selected` value below, since that
+    // resting background differs) while the guard's root attribute is set -- matching the open-state
+    // freeze without a React render per scroll tick, and *without* `pointer-events-none`: an earlier
+    // version took the row out of hit-testing entirely, which silently swallowed real clicks landing
+    // within the same ~100ms window (not just the phantom hover this guards against) -- see the
+    // "Service Management Edit notification" e2e flake this caused. Excludes `:focus-within`
+    // (`:not(:focus-within)`): the frozen background is `!important`, so without the exclusion it would
+    // outrank `cvaInteractableItem`'s plain `focus-within:` tint whenever the hovered row is also the
+    // keyboard-navigated one (the common case, since `MenuContent`'s roving tabindex focuses the row
+    // under the cursor) -- blanking the keyboard-navigated row's only visual indicator (the native ring
+    // is suppressed by `outline-hidden` above) for the whole scroll-suppression window.
+    base: [
+        "px-2",
+        "h-auto",
+        "flex",
+        "flex-row",
+        "items-center",
+        "gap-x-2",
+        "select-none",
+        "rounded",
+        "min-w-0",
+        "outline-hidden",
+        "data-[state=open]:bg-neutral-600/5",
+    ],
     variants: {
         fieldSize: {
             small: ["text-xs", "py-1.5"],
@@ -7820,9 +7890,7 @@ const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(
         // `cvaInteractableItem`), everything else rests transparent. The `selected` + `variant="danger"`
         // compound below rests on `!bg-white` instead and gets its own freeze override there.
         selected: {
-            true: [
-                "[:root[data-hover-scroll-suppressed]_&:not([data-state=open]):not(:focus-within)]:hover:!bg-primary-50",
-            ],
+            true: ["[:root[data-hover-scroll-suppressed]_&:not([data-state=open]):not(:focus-within)]:hover:!bg-primary-50"],
             false: [
                 "[:root[data-hover-scroll-suppressed]_&:not([data-state=open]):not(:focus-within)]:hover:!bg-transparent",
             ],
@@ -7852,12 +7920,12 @@ const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(
         disabled: false,
     },
 });
-const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(
-// No `truncate` here: `text-overflow: ellipsis` only applies to block containers, not flex containers,
-// and this wrapper is `flex` (to align prefix/label/description). The actual truncation lives on the
-// nested label `<span>` in `MenuItem.tsx`, which gets auto-blockified for being a flex item. `min-w-0`
-// (rather than `truncate`'s `overflow-hidden`) is what lets this wrapper shrink below its content size.
-["flex-grow", "min-w-0", "text-black", "font-normal", "flex", "items-center"], {
+const cvaMenuItemLabel = cssClassVarianceUtilities.cva({
+    // No `truncate` here: `text-overflow: ellipsis` only applies to block containers, not flex containers,
+    // and this wrapper is `flex` (to align prefix/label/description). The actual truncation lives on the
+    // nested label `<span>` in `MenuItem.tsx`, which gets auto-blockified for being a flex item. `min-w-0`
+    // (rather than `truncate`'s `overflow-hidden`) is what lets this wrapper shrink below its content size.
+    base: ["flex-grow", "min-w-0", "text-black", "font-normal", "flex", "items-center"],
     variants: {
         variant: {
             primary: [],
@@ -7873,15 +7941,16 @@ const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(
         disabled: false,
     },
 });
-const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
-    "text-neutral-400",
-    "hover:text-neutral-500",
-    "focus:text-neutral-500",
-    "h-min",
-    "leading-[0]",
-    "flex",
-    "items-center",
-], {
+const cvaMenuItemPrefix = cssClassVarianceUtilities.cva({
+    base: [
+        "text-neutral-400",
+        "hover:text-neutral-500",
+        "focus:text-neutral-500",
+        "h-min",
+        "leading-[0]",
+        "flex",
+        "items-center",
+    ],
     variants: {
         selected: {
             true: "text-primary-600",
@@ -7901,7 +7970,8 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-sm", "flex", "items-center"], {
+const cvaMenuItemSuffix = cssClassVarianceUtilities.cva({
+    base: ["text-neutral-400", "text-sm", "flex", "items-center"],
     variants: {
         selected: {
             true: "text-neutral-600",
@@ -8209,7 +8279,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
     return (jsxRuntime.jsxs(Popover, { activation: { click: !disabled, hover: disabled ? false : { delayed: true } }, isOpen: submenuOpen, onOpenStateChange: setSubmenuOpen, placement: "right-start", sizing: submenuSizing, children: [jsxRuntime.jsx(PopoverTrigger, { ref: mergedTriggerRef, children: jsxRuntime.jsx(MenuItemRow, { ...itemRowProps, "aria-expanded": submenuOpen, "aria-haspopup": "menu" }) }), jsxRuntime.jsx(PopoverContent, { initialFocus: 1, returnFocus: returnFocusRef, children: submenu })] }));
 };
 
-const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
+const cvaMoreMenu = cssClassVarianceUtilities.cva({ base: ["p-0"] });
 
 /**
  * MoreMenu (kebab menu) renders a three-dot button that opens a popover with a list of actions.
@@ -8269,8 +8339,9 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: mergedRef, style: style, children: jsxRuntime.jsx(MenuTree, { children: jsxRuntime.jsx(Popover, { placement: "bottom-end", ...popoverProps, children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton ?? (jsxRuntime.jsx(IconButton, { ...iconButtonProps, "data-testid": iconButtonProps["data-testid"] ?? "more-menu-icon", icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }), ...(modalState.isOpen ? { ariaLabel: resolvedButtonLabel } : { title: resolvedButtonLabel }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }) }) }));
 };
 
-const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
-const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+const cvaNotice = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-1"] });
+const cvaNoticeLabel = cssClassVarianceUtilities.cva({
+    base: ["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"],
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -8289,7 +8360,8 @@ const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-
         size: "medium",
     },
 });
-const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+const cvaNoticeIcon = cssClassVarianceUtilities.cva({
+    base: ["rounded-full", "items-center", "justify-center", "flex", "relative"],
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -8348,7 +8420,8 @@ const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "m
     return (jsxRuntime.jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [sharedUtils.nonNullable(iconName) ? (jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsxRuntime.jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }));
 };
 
-const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
+const cvaPage = cssClassVarianceUtilities.cva({
+    base: ["grid", "h-full"],
     variants: {
         layout: {
             content: ["grid-rows-1"],
@@ -8361,7 +8434,8 @@ const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
         layout: "none",
     },
 });
-const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "page-content", "grid", "gap-4"], {
+const cvaPageContent = cssClassVarianceUtilities.cva({
+    base: ["overflow-auto", "page-content", "grid", "gap-4"],
     variants: {
         layout: {
             content: "grid-rows-fr",
@@ -8492,7 +8566,7 @@ const PRESET_CONFIGURATIONS = {
     ],
 };
 
-const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
+const cvaSkeletonContainer = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col"] });
 
 /**
  * SkeletonLines renders multiple animated placeholder text lines before data loads.
@@ -8694,7 +8768,8 @@ const useIsTextTruncated = (text, { skip = false } = {}) => {
     return react.useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
-const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {
+const cvaPageHeaderContainer = cssClassVarianceUtilities.cva({
+    base: ["bg-white", "tu-page-header"],
     variants: {
         withBorder: {
             true: ["border-b", "border-b-neutral-200"],
@@ -8702,8 +8777,8 @@ const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "
         },
     },
 });
-const cvaPageHeader = cssClassVarianceUtilities.cvaMerge(["box-border", "py-4", "px-4", "flex", "items-center", "gap-y-1"]);
-const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-neutral-900", "text-xl", "font-semibold", "truncate"]);
+const cvaPageHeader = cssClassVarianceUtilities.cva({ base: ["box-border", "py-4", "px-4", "flex", "items-center", "gap-y-1"] });
+const cvaPageHeaderHeading = cssClassVarianceUtilities.cva({ base: ["text-neutral-900", "text-xl", "font-semibold", "truncate"] });
 
 /**
  * The PageHeaderTitle component is used to display the title of the page header.
@@ -8795,8 +8870,8 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
                                     discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsxRuntime.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 ? (jsxRuntime.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 = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
-const cvaPaginationText = cssClassVarianceUtilities.cvaMerge("whitespace-nowrap");
+const cvaPagination = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-1"] });
+const cvaPaginationText = cssClassVarianceUtilities.cva({ base: "whitespace-nowrap" });
 
 /**
  * Pagination provides previous/next page navigation with an optional page counter and jump-to-page input.
@@ -8977,20 +9052,21 @@ const PopoverTitle = ({ children, action, divider = false, className, "data-test
     return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
-const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge([
-    "rounded-lg",
-    "border",
-    "border-neutral-200",
-    "bg-white",
-    "w-full",
-    "grid",
-    "gap-y-2",
-    "@container",
-    "grid-rows-1",
-    "grid-cols-1",
-    "[&:has([data-slot=input-container])]:grid-cols-min-fr", // When the input container is present, the grid columns are set to min-fr
-    "[&:has([data-slot=input-container]_:focus-visible)]:outline-native",
-], {
+const cvaPreferenceCard = cssClassVarianceUtilities.cva({
+    base: [
+        "rounded-lg",
+        "border",
+        "border-neutral-200",
+        "bg-white",
+        "w-full",
+        "grid",
+        "gap-y-2",
+        "@container",
+        "grid-rows-1",
+        "grid-cols-1",
+        "[&:has([data-slot=input-container])]:grid-cols-min-fr", // When the input container is present, the grid columns are set to min-fr
+        "[&:has([data-slot=input-container]_:focus-visible)]:outline-native",
+    ],
     variants: {
         disabled: {
             true: "",
@@ -9013,7 +9089,8 @@ const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge([
         clickable: false,
     },
 });
-const cvaInputContainer = cssClassVarianceUtilities.cvaMerge(["flex", "p-4", "rounded-l-lg", "border", "border-transparent", "bg-neutral-50", "border-r-neutral-200"], {
+const cvaInputContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "p-4", "rounded-l-lg", "border", "border-transparent", "bg-neutral-50", "border-r-neutral-200"],
     variants: {
         itemPlacement: {
             center: "items-center",
@@ -9024,11 +9101,12 @@ const cvaInputContainer = cssClassVarianceUtilities.cvaMerge(["flex", "p-4", "ro
         itemPlacement: "start",
     },
 });
-const cvaContentContainer = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "gap-x-3",
-    //* Grid template areas are applied with GridAreas component)
-], {
+const cvaContentContainer = cssClassVarianceUtilities.cva({
+    base: [
+        "grid",
+        "gap-x-3",
+        //* Grid template areas are applied with GridAreas component)
+    ],
     variants: {
         itemPlacement: {
             center: "items-center",
@@ -9039,7 +9117,8 @@ const cvaContentContainer = cssClassVarianceUtilities.cvaMerge([
         itemPlacement: "start",
     },
 });
-const cvaTitleCard = cssClassVarianceUtilities.cvaMerge(["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+const cvaTitleCard = cssClassVarianceUtilities.cva({
+    base: ["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"],
     variants: {
         disabled: {
             true: "text-neutral-400",
@@ -9050,7 +9129,8 @@ const cvaTitleCard = cssClassVarianceUtilities.cvaMerge(["min-w-0", "overflow-hi
         disabled: false,
     },
 });
-const cvaDescriptionCard = cssClassVarianceUtilities.cvaMerge([], {
+const cvaDescriptionCard = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         disabled: {
             true: "text-neutral-400",
@@ -9061,7 +9141,8 @@ const cvaDescriptionCard = cssClassVarianceUtilities.cvaMerge([], {
         disabled: false,
     },
 });
-const cvaIconBackground = cssClassVarianceUtilities.cvaMerge(["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md", "shrink-0"], {
+const cvaIconBackground = cssClassVarianceUtilities.cva({
+    base: ["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md", "shrink-0"],
     variants: {
         disabled: {
             true: "bg-neutral-200",
@@ -9072,7 +9153,7 @@ const cvaIconBackground = cssClassVarianceUtilities.cvaMerge(["flex", "h-8", "w-
         disabled: false,
     },
 });
-const cvaContentWrapper = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "px-4", "py-3"]);
+const cvaContentWrapper = cssClassVarianceUtilities.cva({ base: ["grid", "gap-2", "px-4", "py-3"] });
 
 const CENTER_INPUT_HEIGHT_THRESHOLD = 92;
 /**
@@ -9306,7 +9387,8 @@ const Prompt = ({ when, message }) => {
     return null;
 };
 
-const cvaSpacer = cssClassVarianceUtilities.cvaMerge([], {
+const cvaSpacer = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         border: {
             true: ["border-t", "border-solid", "border-neutral-100", "min-h-[1px]"],
@@ -9512,7 +9594,8 @@ const getSnapLevelCssHeight = (levelIndex, totalLevels, dockingEnabled, dockedHe
  *
  * Always absolutely positioned within the provided container element.
  */
-const cvaSheetContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "inset-0", "z-overlay", "overflow-clip", "[container-type:size]"], {
+const cvaSheetContainer = cssClassVarianceUtilities.cva({
+    base: ["absolute", "inset-0", "z-overlay", "overflow-clip", "[container-type:size]"],
     variants: {
         docked: {
             true: ["pointer-events-none"],
@@ -9539,7 +9622,17 @@ const cvaSheetContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "inset
  * During drag, the gesture hook sets `--sheet-drag-height` and `transition: none`
  * directly on the element for immediate visual feedback, then restores on release.
  */
-const cvaSheetPanel = cssClassVarianceUtilities.cvaMerge(["absolute", "bottom-0", "flex", "flex-col", "pointer-events-auto", "rounded-b-none", "rounded-t-xl", "z-overlay"], {
+const cvaSheetPanel = cssClassVarianceUtilities.cva({
+    base: [
+        "absolute",
+        "bottom-0",
+        "flex",
+        "flex-col",
+        "pointer-events-auto",
+        "rounded-b-none",
+        "rounded-t-xl",
+        "z-overlay",
+    ],
     variants: {
         anchor: {
             center: ["inset-x-0", "mx-auto", "max-w-3xl"],
@@ -9567,7 +9660,8 @@ const cvaSheetPanel = cssClassVarianceUtilities.cvaMerge(["absolute", "bottom-0"
  * for fit mode so that `scrollHeight` reflects natural content height rather
  * than the stretched layout — critical for correct fit-height measurement.
  */
-const cvaSheetScrollArea = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "min-h-0", "overflow-x-hidden", "overflow-y-auto"], {
+const cvaSheetScrollArea = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "min-h-0", "overflow-x-hidden", "overflow-y-auto"],
     variants: {
         fillHeight: {
             true: ["flex-grow"],
@@ -9697,17 +9791,18 @@ const HANDLE_VISUALS = {
         proximityWeight: 0.5,
     },
 };
-const cvaSheetHandle = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-full",
-    "py-3",
-    "touch-action-none",
-    "select-none",
-    "shrink-0",
-    "bg-white",
-], {
+const cvaSheetHandle = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "w-full",
+        "py-3",
+        "touch-action-none",
+        "select-none",
+        "shrink-0",
+        "bg-white",
+    ],
     variants: {
         isDragging: {
             true: ["cursor-grabbing", "[--handle-interaction:0.25]"],
@@ -9723,7 +9818,8 @@ const cvaSheetHandle = cssClassVarianceUtilities.cvaMerge([
         isDragging: false,
     },
 });
-const cvaSheetHandleLine = cssClassVarianceUtilities.cvaMerge(["w-8", "h-1", "rounded-full", "origin-center"], {
+const cvaSheetHandleLine = cssClassVarianceUtilities.cva({
+    base: ["w-8", "h-1", "rounded-full", "origin-center"],
     variants: {
         isDragging: {
             true: [],
@@ -9764,7 +9860,14 @@ const SheetHandle = ({ onPointerDown, onPointerMove, onPointerUp, onLostPointerC
             } }) }));
 };
 
-const cvaSheetOverlay = cssClassVarianceUtilities.cvaMerge(["absolute", "inset-0", "transition-opacity", "duration-300", "[transition-timing-function:cubic-bezier(0.2,0,0,1)]"], {
+const cvaSheetOverlay = cssClassVarianceUtilities.cva({
+    base: [
+        "absolute",
+        "inset-0",
+        "transition-opacity",
+        "duration-300",
+        "[transition-timing-function:cubic-bezier(0.2,0,0,1)]",
+    ],
     variants: {
         visible: {
             true: ["bg-black/50", "pointer-events-auto"],
@@ -11450,8 +11553,9 @@ const useSheet = (props) => {
     }), [isOpen, state, variant, open, close, snap, floatingUi, onGeometryChange, onSnap, onClickHandle, onCloseGesture]);
 };
 
-const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
-const cvaSidebarChildContainer = cssClassVarianceUtilities.cvaMerge(["apply", "flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"], {
+const cvaSidebar = cssClassVarianceUtilities.cva({ base: ["apply", "grid", "grid-cols-fr-min", "items-center"] });
+const cvaSidebarChildContainer = cssClassVarianceUtilities.cva({
+    base: ["apply", "flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"],
     variants: {
         breakpoint: {
             xs: ["xs:overflow-visible", "xs:p-0", "xs:grid", "xs:grid-cols-1", "xs:w-full"],
@@ -11659,7 +11763,8 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
  * would never appear as a complete literal string anywhere in this file and so would silently fail
  * to generate any CSS at all.
  */
-const cvaSidebarContentLayout = cssClassVarianceUtilities.cvaMerge(["grid", "min-h-0", "flex-1", "grid-rows-[min-content_minmax(0px,1fr)]"], {
+const cvaSidebarContentLayout = cssClassVarianceUtilities.cva({
+    base: ["grid", "min-h-0", "flex-1", "grid-rows-[min-content_minmax(0px,1fr)]"],
     variants: {
         breakpoint: {
             xs: ["grid-cols-1", "xs:grid-cols-[200px_minmax(0px,1fr)]", "xs:grid-rows-none"],
@@ -11715,7 +11820,8 @@ const cvaSidebarContentLayout = cssClassVarianceUtilities.cvaMerge(["grid", "min
  * `p-content-space` already owns - it is deliberately *not* zero, but not enough to look like a second
  * gap either.
  */
-const cvaSidebarContentLayoutSidebar = cssClassVarianceUtilities.cvaMerge(["pt-4", "pl-4", "pr-4"], {
+const cvaSidebarContentLayoutSidebar = cssClassVarianceUtilities.cva({
+    base: ["pt-4", "pl-4", "pr-4"],
     variants: {
         breakpoint: {
             xs: ["xs:pr-2", "xs:h-full", "xs:min-h-0", "xs:overflow-y-auto", "xs:[scrollbar-gutter:stable]"],
@@ -11742,7 +11848,8 @@ const cvaSidebarContentLayoutSidebar = cssClassVarianceUtilities.cvaMerge(["pt-4
  * ancestor. Callers rendering a route that must sit flush (e.g. a full-page extension iframe) opt
  * out with `contentSpace={false}`.
  */
-const cvaSidebarContentLayoutContent = cssClassVarianceUtilities.cvaMerge(["relative", "h-full", "min-h-0", "overflow-y-auto"], {
+const cvaSidebarContentLayoutContent = cssClassVarianceUtilities.cva({
+    base: ["relative", "h-full", "min-h-0", "overflow-y-auto"],
     variants: {
         contentSpace: {
             true: ["p-content-space"],
@@ -11794,42 +11901,38 @@ const SidebarContentLayout = ({ breakpoint = "lg", className, content, contentSp
     return (jsxRuntime.jsxs("div", { className: cvaSidebarContentLayout({ breakpoint, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("div", { className: cvaSidebarContentLayoutSidebar({ breakpoint }), "data-testid": `${dataTestId}-sidebar`, children: jsxRuntime.jsx(Sidebar, { breakpoint: breakpoint, children: sidebar }) }), jsxRuntime.jsx("div", { className: cvaSidebarContentLayoutContent({ contentSpace }), "data-testid": `${dataTestId}-content`, children: content })] }));
 };
 
-const cvaTabsRoot = cssClassVarianceUtilities.cvaMerge([]);
-const cvaTabList = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-row",
-    "border-b",
-    "border-b-neutral-200",
-    "overflow-auto",
-    "no-scrollbar",
-]);
-const cvaTabContent = cssClassVarianceUtilities.cvaMerge([]);
-const cvaTab = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "gap-2",
-    "text-sm",
-    "px-4",
-    "py-2",
-    "cursor-pointer",
-    "transition",
-    "duration-200",
-    "ease-in-out",
-    "whitespace-nowrap",
-    "border-b-2",
-    "border-b-transparent",
-    "hover:border-b-transparent",
-    "data-[state=active]:border-b-primary-600",
-    "data-[state=active]:font-semibold",
-    "data-[state=active]:text-neutral-900",
-    "data-[state=inactive]:font-medium",
-    "data-[state=inactive]:text-neutral-700",
-    "data-[state=inactive]:hover:text-neutral-900",
-    "disabled:cursor-not-allowed",
-    "data-[state=active]disabled:text-neutral-400",
-    "data-[state=inactive]:disabled:text-neutral-400",
-], {
+const cvaTabsRoot = cssClassVarianceUtilities.cva({ base: [] });
+const cvaTabList = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-row", "border-b", "border-b-neutral-200", "overflow-auto", "no-scrollbar"],
+});
+const cvaTabContent = cssClassVarianceUtilities.cva({ base: [] });
+const cvaTab = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "gap-2",
+        "text-sm",
+        "px-4",
+        "py-2",
+        "cursor-pointer",
+        "transition",
+        "duration-200",
+        "ease-in-out",
+        "whitespace-nowrap",
+        "border-b-2",
+        "border-b-transparent",
+        "hover:border-b-transparent",
+        "data-[state=active]:border-b-primary-600",
+        "data-[state=active]:font-semibold",
+        "data-[state=active]:text-neutral-900",
+        "data-[state=inactive]:font-medium",
+        "data-[state=inactive]:text-neutral-700",
+        "data-[state=inactive]:hover:text-neutral-900",
+        "disabled:cursor-not-allowed",
+        "data-[state=active]disabled:text-neutral-400",
+        "data-[state=inactive]:disabled:text-neutral-400",
+    ],
     variants: {
         isFullWidth: {
             true: "w-full",
@@ -12064,8 +12167,11 @@ const Tabs = ({ children, forceRender, className, "data-testid": dataTestId, ful
     return (jsxRuntime.jsx(reactTabs.Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 
-const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"]);
-const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["z-10", "group"], {
+const cvaToggleGroup = cssClassVarianceUtilities.cva({
+    base: ["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"],
+});
+const cvaToggleItem = cssClassVarianceUtilities.cva({
+    base: ["z-10", "group"],
     variants: {
         selected: {
             true: [],
@@ -12084,7 +12190,8 @@ const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["z-10", "group"], {
         },
     ],
 });
-const cvaToggleGroupWithSlidingBackground = cssClassVarianceUtilities.cvaMerge([], {
+const cvaToggleGroupWithSlidingBackground = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         isMounted: {
             true: [
@@ -12105,7 +12212,8 @@ const cvaToggleGroupWithSlidingBackground = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow", "font-medium"], {
+const cvaToggleItemText = cssClassVarianceUtilities.cva({
+    base: ["text-ellipsis", "truncate", "flex-grow", "font-medium"],
     variants: {
         maxWidth: {
             sm: ["max-w-[80px]"],
@@ -12143,7 +12251,8 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
         },
     ],
 });
-const cvaToggleItemContent = cssClassVarianceUtilities.cvaMerge([], {
+const cvaToggleItemContent = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         selected: {
             true: [],
@@ -12297,7 +12406,8 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsxRuntime.jsx("button", { ...rest, className: tailwindMerge.twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", children: isIconOnly ? (icon) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconPrefix, children] })) }));
 };
 
-const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+const cvaSegmentedValueBar = cssClassVarianceUtilities.cva({
+    base: ["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"],
     variants: {
         size: {
             extraSmall: "h-1",
@@ -12309,7 +12419,8 @@ const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["flex-1", "over
         size: "small",
     },
 });
-const cvaSegmentedValueBarText = cssClassVarianceUtilities.cvaMerge(["whitespace-nowrap", "tabular-nums", "shrink-0"], {
+const cvaSegmentedValueBarText = cssClassVarianceUtilities.cva({
+    base: ["whitespace-nowrap", "tabular-nums", "shrink-0"],
     variants: {
         size: {
             small: "leading-xs text-xs font-medium text-neutral-600",