@trackunit/react-components 2.13.0 → 2.13.1

package/index.esm.js

@@ -11,7 +11,7 @@ import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 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 { cva } from '@trackunit/css-class-variance-utilities';
 import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingNode, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow, useListNavigation, useTypeahead, FloatingList, useListItem } from '@floating-ui/react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { omit, isEqual } from 'es-toolkit';
@@ -73,7 +73,8 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"], {
+const cvaIcon = cva({
+    base: ["aspect-square", "inline-grid", "relative", "shrink-0"],
     variants: {
         color: {
             primary: "text-primary-600",
@@ -1362,8 +1363,9 @@ const isElementVisible = (element) => {
     return true;
 };
 
-const cvaPopoverContainer = cvaMerge(["z-popover", "animate-fade-in-fast"]);
-const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1"], {
+const cvaPopoverContainer = cva({ base: ["z-popover", "animate-fade-in-fast"] });
+const cvaPopoverTitleContainer = cva({
+    base: ["flex", "items-center", "px-2", "py-1"],
     variants: {
         divider: {
             true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
@@ -1371,7 +1373,7 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
         },
     },
 });
-const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
+const cvaPopoverTitleText = cva({ base: ["flex-1", "text-neutral-500"] });
 
 /**
  * Wraps a `returnFocus` ref so Floating UI's live `ref.current` read at close time (see
@@ -1443,7 +1445,8 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
 };
 
-const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
+const cvaSpinner = cva({
+    base: ["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"],
     variants: {
         size: {
             small: ["w-4", "h-4"],
@@ -1460,8 +1463,9 @@ const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "bord
         mode: "light",
     },
 });
-const cvaSpinnerContainerInner = cvaMerge(["gap-responsive-space-sm", "grid", "place-items-center"]);
-const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"], {
+const cvaSpinnerContainerInner = cva({ base: ["gap-responsive-space-sm", "grid", "place-items-center"] });
+const cvaSpinnerContainer = cva({
+    base: ["box-border", "p-0.5", "overflow-hidden"],
     variants: {
         centering: {
             centered: ["grid", "h-full", "w-full", "place-items-center"],
@@ -1478,7 +1482,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
         mode: "light",
     },
 });
-const cvaSpinnerLabel = cvaMerge(["self-center", "text-center", "text-current"]);
+const cvaSpinnerLabel = 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
@@ -1519,27 +1523,28 @@ const Spinner = ({ mode = "light", size = "medium", centering = "centered", clas
     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([
-    "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 = 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: [
@@ -1734,8 +1739,9 @@ const cvaButton = cvaMerge([
         disabled: false,
     },
 });
-const cvaButtonSpinnerContainer = cvaMerge(["p-0", "h-auto"]);
-const cvaButtonSpinner = cvaMerge([], {
+const cvaButtonSpinnerContainer = cva({ base: ["p-0", "h-auto"] });
+const cvaButtonSpinner = cva({
+    base: [],
     variants: {
         variant: {
             primary: ["border-white/[0.32]", "border-b-white"],
@@ -1751,7 +1757,8 @@ const cvaButtonSpinner = cvaMerge([], {
         variant: "primary",
     },
 });
-const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
+const cvaButtonPrefixSuffix = cva({
+    base: ["flex", "items-center"],
     variants: {
         size: {
             small: ["h-4"],
@@ -1820,7 +1827,8 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
         disabled: false,
     },
 });
-const cvaIconButton = cvaMerge([], {
+const cvaIconButton = cva({
+    base: [],
     variants: {
         size: {
             /**
@@ -1969,7 +1977,8 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     return (jsx(Button, { "data-state": dataState, ref: ref, type: "button", ...buttonProps, className: tree !== null ? twMerge(props.className, "pointer-events-auto") : props.className, children: children }));
 };
 
-const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
+const cvaText = cva({
+    base: ["text-black", "m-0", "relative", "text-sm", "font-normal"],
     variants: {
         align: {
             left: "text-left",
@@ -2078,7 +2087,8 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
 };
 Text.displayName = "Text";
 
-const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
+const cvaTooltipIcon = cva({
+    base: ["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"],
     variants: {
         color: {
             light: "hover:text-white",
@@ -2089,8 +2099,9 @@ const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor
         },
     },
 });
-const cvaTooltipPopover = cvaMerge(["origin-center"]);
-const cvaTooltipPopoverTail = cvaMerge("", {
+const cvaTooltipPopover = cva({ base: ["origin-center"] });
+const cvaTooltipPopoverTail = cva({
+    base: "",
     variants: {
         placement: {
             top: "left-2/4 top-full ml-[-5px]",
@@ -2116,7 +2127,8 @@ const cvaTooltipPopoverTail = cvaMerge("", {
         mode: "dark",
     },
 });
-const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
+const cvaTooltipPopoverContent = cva({
+    base: ["max-w-sm", "rounded", "p-2"],
     variants: {
         color: {
             light: "bg-white shadow-lg",
@@ -2210,26 +2222,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 = 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 = 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",
@@ -2271,7 +2284,8 @@ const cvaTag = cvaMerge([
         color: "info",
     },
 });
-const cvaTagText = cvaMerge(["whitespace-nowrap"], {
+const cvaTagText = cva({
+    base: ["whitespace-nowrap"],
     variants: {
         truncate: {
             true: ["truncate", TAG_TEXT_MIN_WIDTH_CLASS],
@@ -2282,8 +2296,10 @@ const cvaTagText = cvaMerge(["whitespace-nowrap"], {
         truncate: true,
     },
 });
-const cvaTagIconContainer = cvaMerge(["shrink-0", "inline-flex", "self-center"]);
-const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"]);
+const cvaTagIconContainer = cva({ base: ["shrink-0", "inline-flex", "self-center"] });
+const cvaTagIcon = cva({
+    base: ["cursor-pointer", "transition-opacity", "hover:opacity-70", "text-neutral-500"],
+});
 
 const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLASS);
 /**
@@ -2591,7 +2607,8 @@ const IconButton = ({ icon, size = "medium", square = true, loading = false, dis
 };
 IconButton.displayName = "IconButton";
 
-const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"], {
+const cvaAlert = cva({
+    base: ["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "@container"],
     variants: {
         color: {
             danger: ["bg-danger-100"],
@@ -2610,7 +2627,8 @@ const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "roun
         actionsInline: false,
     },
 });
-const cvaAlertActionsContainer = cvaMerge(["flex", "gap-2"], {
+const cvaAlertActionsContainer = cva({
+    base: ["flex", "gap-2"],
     variants: {
         inline: {
             true: ["flex-row", "shrink-0"],
@@ -2626,8 +2644,9 @@ const cvaAlertActionsContainer = cvaMerge(["flex", "gap-2"], {
         actionsInline: false,
     },
 });
-const cvaContent = cvaMerge(["flex-grow"]);
-const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
+const cvaContent = cva({ base: ["flex-grow"] });
+const cvaAlertContentContainer = cva({
+    base: ["flex", "flex-row", "h-full", "gap-2"],
     variants: {
         inline: {
             true: ["items-center", "justify-between"],
@@ -2643,7 +2662,8 @@ const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"
         actionsInline: false,
     },
 });
-const cvaAlertCloseButtonContainer = cvaMerge(["flex", "w-min", "shrink-0"], {
+const cvaAlertCloseButtonContainer = cva({
+    base: ["flex", "w-min", "shrink-0"],
     variants: {
         inline: {
             true: ["self-center"],
@@ -2659,7 +2679,8 @@ const cvaAlertCloseButtonContainer = cvaMerge(["flex", "w-min", "shrink-0"], {
         actionsInline: false,
     },
 });
-const cvaAlertIconContainer = cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
+const cvaAlertIconContainer = cva({
+    base: ["shrink-0", "grid", "w-min", "flex"],
     variants: {
         inline: {
             true: ["self-center"],
@@ -2784,19 +2805,20 @@ const getIconName = (color) => {
     }
 };
 
-const cvaBadge = 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 = 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",
@@ -2806,11 +2828,11 @@ const cvaBadge = 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",
@@ -2887,10 +2909,11 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
     return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
-const cvaBreadcrumb = cvaMerge(["my-4", "flex", "place-items-center"]);
-const cvaBreadcrumbItem = cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap", "items-center"]);
-const cvaBreadcrumbForMediumScreen = cvaMerge(["flex", "items-center"], {
+const cvaBreadcrumb = cva({ base: ["my-4", "flex", "place-items-center"] });
+const cvaBreadcrumbItem = cva({ base: ["flex", "items-center"] });
+const cvaBreadcrumbForLargeScreen = cva({ base: ["flex", "flex-nowrap", "items-center"] });
+const cvaBreadcrumbForMediumScreen = cva({
+    base: ["flex", "items-center"],
     variants: {
         expanded: {
             true: "flex-wrap",
@@ -3142,18 +3165,19 @@ const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, st
     return (jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
-const cvaCard = 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 = 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: "",
@@ -3169,7 +3193,8 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterContainerRoot = cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterContainerRoot = cva({
+    base: ["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"],
     variants: {
         border: {
             default: "",
@@ -3185,10 +3210,13 @@ const cvaCardFooterContainerRoot = cvaMerge(["flex", "border-t", "border-neutral
         padding: "default",
     },
 });
-const cvaCardFooterContainer = cvaMerge(["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"]);
-const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
-const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderContainer = cvaMerge(["flex", "border-b", "border-neutral-200"], {
+const cvaCardFooterContainer = cva({
+    base: ["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"],
+});
+const cvaCardHeader = cva({ base: ["flex", "justify-between", "flex-1"] });
+const cvaCardHeaderHeadingContainer = cva({ base: ["flex", "gap-4", "items-center"] });
+const cvaCardHeaderContainer = cva({
+    base: ["flex", "border-b", "border-neutral-200"],
     variants: {
         border: {
             default: "",
@@ -3204,7 +3232,8 @@ const cvaCardHeaderContainer = cvaMerge(["flex", "border-b", "border-neutral-200
         padding: "default",
     },
 });
-const cvaCardBodyContainer = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer = cva({
+    base: ["flex", "flex-grow", "overflow-auto"],
     variants: {
         direction: {
             row: "flex-row",
@@ -3390,7 +3419,8 @@ const CardFooter = ({ "data-testid": dataTestId, className, children, padding =
         }), "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"], {
+const cvaHeading = cva({
+    base: ["m-0", "leading-normal", "text-black"],
     variants: {
         subtle: {
             true: "text-neutral-600",
@@ -3518,17 +3548,18 @@ const CardHeader = ({ heading, headingVariant = "secondary", subHeading, "data-t
         }), "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] }), jsx("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: actions })] }) }));
 };
 
-const cvaClickable = 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 = 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: "",
@@ -3614,7 +3645,8 @@ const useMeasure = ({ skip = false, onChange, } = {}) => {
     return useMemo(() => ({ geometry, ref, element }), [geometry, ref, element]);
 };
 
-const cvaCollapse = cvaMerge(["flex", "flex-col", "overflow-hidden"], {
+const cvaCollapse = cva({
+    base: ["flex", "flex-col", "overflow-hidden"],
     variants: {
         variant: {
             primary: ["border", "border-solid", "border-neutral-300", "rounded-md", "bg-white"],
@@ -3622,7 +3654,8 @@ const cvaCollapse = cvaMerge(["flex", "flex-col", "overflow-hidden"], {
         },
     },
 });
-const cvaCollapseHeader = cvaMerge(["flex", "items-center", "cursor-pointer", "transition-all", "group/collapse"], {
+const cvaCollapseHeader = cva({
+    base: ["flex", "items-center", "cursor-pointer", "transition-all", "group/collapse"],
     variants: {
         expanded: { true: [], false: [] },
         variant: {
@@ -3667,7 +3700,8 @@ const cvaCollapseHeader = cvaMerge(["flex", "items-center", "cursor-pointer", "t
         },
     ],
 });
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
+const cvaCollapseLabelContainer = cva({
+    base: ["flex", "items-center"],
     variants: {
         variant: {
             primary: ["w-full", "justify-between"],
@@ -3675,7 +3709,8 @@ const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
         },
     },
 });
-const cvaCollapseLabel = cvaMerge([""], {
+const cvaCollapseLabel = cva({
+    base: [""],
     variants: {
         variant: {
             primary: [""],
@@ -3683,7 +3718,8 @@ const cvaCollapseLabel = cvaMerge([""], {
         },
     },
 });
-const cvaCollapsible = cvaMerge(["block", "relative"], {
+const cvaCollapsible = cva({
+    base: ["block", "relative"],
     variants: {
         variant: {
             primary: [],
@@ -3717,7 +3753,8 @@ const cvaCollapsible = cvaMerge(["block", "relative"], {
         },
     ],
 });
-const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
+const cvaCollapseAnimated = cva({
+    base: ["overflow-y-hidden", "transition-all"],
     variants: {
         expanded: {
             true: "block",
@@ -3728,7 +3765,8 @@ const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
         expanded: false,
     },
 });
-const cvaChevronIcon = cvaMerge(["transition-transform"], {
+const cvaChevronIcon = cva({
+    base: ["transition-transform"],
     variants: {
         expanded: {
             true: "rotate-180",
@@ -3950,21 +3988,22 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     }), [onMouseEnter, onMouseLeave, value]);
 };
 
-const cvaCopyableText = 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 = 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: "",
@@ -4130,7 +4169,8 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
 CopyButton.displayName = "CopyButton";
 const COPIED_FEEDBACK_DURATION_MS = 2000;
 
-const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
+const cvaDetailsList = 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",
@@ -4140,7 +4180,7 @@ const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "t
         hasLink: false,
     },
 });
-const cvaDetailsListItem = cvaMerge(["last:truncate"]);
+const cvaDetailsListItem = cva({ base: ["last:truncate"] });
 
 /**
  * DetailsList renders a one-line list of text values separated by slash icons.
@@ -4278,31 +4318,32 @@ const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
     return useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
 };
 
-const cvaSkeleton = 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 = 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)]"],
@@ -4359,20 +4400,22 @@ const SkeletonLabel = memo((props) => {
 });
 SkeletonLabel.displayName = "SkeletonLabel";
 
-const cvaContainerStyles = 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 = cvaMerge(["w-full", "min-w-[60px]", "max-w-[200px]"]);
+const cvaContainerStyles = 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 = cva({ base: ["w-full", "min-w-[60px]", "max-w-[200px]"] });
 
 /**
  * The Graphic for the BuildingError EmptyState
@@ -4492,7 +4535,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
     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"]);
+const cvaEmptyValue = cva({ base: ["text-neutral-400"] });
 
 /**
  * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
@@ -4522,7 +4565,8 @@ 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"], {
+const cvaExternalLink = cva({
+    base: ["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"],
     variants: {
         color: {
             primary: [
@@ -5344,21 +5388,22 @@ function useGridAreas(config) {
     }, [id, config, validationRef]);
 }
 
-const cvaHighlight = 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 = 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"],
@@ -5378,7 +5423,7 @@ const cvaHighlight = cvaMerge([
         color: "warning",
     },
 });
-const cvaHighlightText = cvaMerge(["truncate"]);
+const cvaHighlightText = cva({ base: ["truncate"] });
 
 /**
  * Highlight draws visual attention to data values that may require user action, monitoring, or investigation.
@@ -5701,8 +5746,8 @@ const useScrollDetection = (options) => {
     }), [ref, element, scrollState]);
 };
 
-const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1", "isolate"]);
-const cvaZStackItem = cvaMerge(["col-start-1", "col-end-1", "row-start-1", "row-end-2"]);
+const cvaZStackContainer = cva({ base: ["grid", "grid-cols-1", "grid-rows-1", "isolate"] });
+const cvaZStackItem = 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).
@@ -5742,28 +5787,25 @@ const ZStack = ({ children, className, "data-testid": dataTestId, style, ref })
         }) }));
 };
 
-const cvaHorizontalOverflowScroller = cvaMerge([
-    "flex",
-    "flex-nowrap",
-    "gap-1",
-    "overflow-y-hidden",
-    "overflow-x-scroll",
-    "w-full",
-    "no-scrollbar",
-]);
-const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cvaMerge(["group", "w-full", "overflow-clip"]);
-
-const cvaOverflowIndicatorContainer = cvaMerge(["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"]);
-const cvaOverflowIndicatorGradient = 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 = cva({
+    base: ["flex", "flex-nowrap", "gap-1", "overflow-y-hidden", "overflow-x-scroll", "w-full", "no-scrollbar"],
+});
+const cvaHorizontalOverflowScrollerAndIndicatorsContainer = cva({ base: ["group", "w-full", "overflow-clip"] });
+
+const cvaOverflowIndicatorContainer = cva({
+    base: ["pointer-events-none", "h-full", "w-full", "isolate", "pb-px"],
+});
+const cvaOverflowIndicatorGradient = 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"],
@@ -5771,7 +5813,8 @@ const cvaOverflowIndicatorGradient = cvaMerge([
         },
     },
 });
-const cvaJustificationContainer = cvaMerge(["flex", "w-full", "items-center", "pointer-events-none"], {
+const cvaJustificationContainer = cva({
+    base: ["flex", "w-full", "items-center", "pointer-events-none"],
     variants: {
         direction: {
             left: ["justify-start"],
@@ -5779,18 +5822,20 @@ const cvaJustificationContainer = cvaMerge(["flex", "w-full", "items-center", "p
         },
     },
 });
-const cvaOverflowIndicatorButton = 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 = 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
@@ -5865,9 +5910,10 @@ const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, chil
     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"]);
-const cvaIndicatorIcon = cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cvaMerge(["capitalize"], {
+const cvaIndicator = cva({ base: ["inline-flex", "items-center"] });
+const cvaIndicatorIcon = cva({ base: ["mr-2"] });
+const cvaIndicatorLabel = cva({
+    base: ["capitalize"],
     variants: {
         size: {
             small: "text-xs",
@@ -5888,7 +5934,17 @@ const cvaIndicatorLabel = cvaMerge(["capitalize"], {
         background: "visible",
     },
 });
-const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
+const cvaIndicatorPing = 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",
@@ -5931,7 +5987,8 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
         },
     },
 });
-const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+const cvaIndicatorIconBackground = cva({
+    base: ["rounded-full", "items-center", "justify-center", "flex", "relative"],
     variants: {
         color: {
             primary: "bg-primary-100 text-primary-600",
@@ -6038,7 +6095,8 @@ const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown",
  *
  * @returns tailwind class names on the basis on the provided props.
  */
-const cvaInteractableItem = cvaMerge(["transition-colors", "duration-100", "ease-in-out"], {
+const cvaInteractableItem = cva({
+    base: ["transition-colors", "duration-100", "ease-in-out"],
     variants: {
         cursor: {
             pointer: "cursor-pointer",
@@ -6085,7 +6143,8 @@ const cvaInteractableItem = cvaMerge(["transition-colors", "duration-100", "ease
     },
 });
 
-const cvaKPI = cvaMerge(["flex", "flex-col"], {
+const cvaKPI = cva({
+    base: ["flex", "flex-col"],
     variants: {
         variant: {
             small: ["px-3", "py-2"],
@@ -6097,7 +6156,8 @@ const cvaKPI = cvaMerge(["flex", "flex-col"], {
         variant: "default",
     },
 });
-const cvaKPITrendPercentage = cvaMerge([""], {
+const cvaKPITrendPercentage = cva({
+    base: [""],
     variants: {
         color: {
             success: ["text-success-600"],
@@ -6211,7 +6271,8 @@ const TrendIndicators = ({ trends, "data-testid": dataTestId, className, style,
 };
 
 const valueBarContainerClassName = "relative flex w-full items-center gap-2";
-const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
+const cvaValueBarText = cva({
+    base: ["whitespace-nowrap"],
     variants: {
         size: {
             small: "leading-xs text-xs font-medium text-neutral-600",
@@ -6223,16 +6284,17 @@ const cvaValueBarText = cvaMerge(["whitespace-nowrap"], {
     },
 });
 
-const cvaValueBar = 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 = 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",
@@ -6361,11 +6423,12 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     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([
-    "inline-flex",
-    "gap-1",
-    "hover:shadow-none", // overwriting the Card hover shadow when wrapped in a KPICard
-], {
+const cvaKPICard = 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"],
@@ -6381,9 +6444,10 @@ const cvaKPICard = cvaMerge([
         isActive: false,
     },
 });
-const cvaKPICardBody = cvaMerge(["grid", "gap-2", "px-3", "pb-2", "pt-3"]);
-const cvaKPICardHeader = cvaMerge(["grid", "grid-cols-[1fr_auto]", "justify-between", "gap-2"]);
-const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
+const cvaKPICardBody = cva({ base: ["grid", "gap-2", "px-3", "pb-2", "pt-3"] });
+const cvaKPICardHeader = cva({ base: ["grid", "grid-cols-[1fr_auto]", "justify-between", "gap-2"] });
+const cvaKPIIconContainer = cva({
+    base: ["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"],
     variants: {
         iconColor: {
             success: ["bg-success-600"],
@@ -6522,7 +6586,8 @@ const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = fal
     return (jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
-const cvaLabeledValue = cvaMerge(["flex", "text-sm"], {
+const cvaLabeledValue = cva({
+    base: ["flex", "text-sm"],
     variants: {
         orientation: {
             horizontal: ["flex-row", "items-start", "gap-6"],
@@ -6533,7 +6598,8 @@ const cvaLabeledValue = cvaMerge(["flex", "text-sm"], {
         orientation: "horizontal",
     },
 });
-const cvaLabeledValueLabel = cvaMerge(["font-medium", "text-neutral-500"], {
+const cvaLabeledValueLabel = cva({
+    base: ["font-medium", "text-neutral-500"],
     variants: {
         orientation: {
             horizontal: ["min-w-[40%]", "max-w-[40%]"],
@@ -6544,9 +6610,9 @@ const cvaLabeledValueLabel = cvaMerge(["font-medium", "text-neutral-500"], {
         orientation: "horizontal",
     },
 });
-const cvaLabeledValueValue = cvaMerge(["min-w-0", "font-medium", "text-neutral-900"]);
-const cvaLabeledValueList = cvaMerge(["flex", "flex-col", "gap-4"]);
-const cvaLabeledValueTooltip = cvaMerge(["ml-1", "inline-flex", "align-sub"]);
+const cvaLabeledValueValue = cva({ base: ["min-w-0", "font-medium", "text-neutral-900"] });
+const cvaLabeledValueList = cva({ base: ["flex", "flex-col", "gap-4"] });
+const cvaLabeledValueTooltip = cva({ base: ["ml-1", "inline-flex", "align-sub"] });
 
 /**
  * LabeledValue displays a single piece of labeled information, pairing a descriptive label with its corresponding value.
@@ -6609,7 +6675,8 @@ const LabeledValueList = ({ items, orientation = "horizontal", className, "data-
     return (jsx("div", { className: cvaLabeledValueList({ className }), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => (jsx(LabeledValue, { orientation: orientation, ...item }, item["data-testid"] ?? `${item.label}-${index}`))) }));
 };
 
-const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+const cvaListContainer = cva({
+    base: ["overflow-y-auto", "overflow-x-hidden", "h-full"],
     variants: {
         withTopSeparator: {
             true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
@@ -6620,8 +6687,9 @@ const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-fu
         withTopSeparator: false,
     },
 });
-const cvaList = cvaMerge(["relative"]);
-const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+const cvaList = cva({ base: ["relative"] });
+const cvaListItem$1 = cva({
+    base: ["absolute", "top-0", "left-0", "w-full"],
     variants: {
         separator: {
             line: "border-neutral-200",
@@ -6649,8 +6717,11 @@ const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     },
 });
 
-const cvaListItem = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
-const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
+const cvaListItem = cva({
+    base: ["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"],
+});
+const cvaMainInformationClass = cva({
+    base: ["grid", "items-center", "text-sm", "gap-2"],
     variants: {
         hasThumbnail: {
             true: "grid-cols-min-fr",
@@ -6658,20 +6729,20 @@ const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "ga
         },
     },
 });
-const cvaThumbnailContainer = cvaMerge([
-    "flex",
-    "h-8",
-    "w-8",
-    "items-center",
-    "justify-center",
-    "overflow-hidden",
-    "rounded-md",
-]);
-const cvaTextContainer = cvaMerge(["grid-rows-min-fr", "grid", "items-center", "text-sm"]);
-const cvaTitleRow = cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "text-sm"]);
-const cvaDescriptionRow = cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center"]);
-const cvaMetaRow = cvaMerge(["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "pt-0.5"]);
-const cvaDetailsContainer = cvaMerge(["flex", "items-center", "gap-0.5", "text-nowrap", "pl-2"]);
+const cvaThumbnailContainer = cva({
+    base: ["flex", "h-8", "w-8", "items-center", "justify-center", "overflow-hidden", "rounded-md"],
+});
+const cvaTextContainer = cva({ base: ["grid-rows-min-fr", "grid", "items-center", "text-sm"] });
+const cvaTitleRow = cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "text-sm"],
+});
+const cvaDescriptionRow = cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center"],
+});
+const cvaMetaRow = cva({
+    base: ["gap-responsive-space-sm", "flex", "w-full", "min-w-0", "items-center", "pt-0.5"],
+});
+const cvaDetailsContainer = cva({ base: ["flex", "items-center", "gap-0.5", "text-nowrap", "pl-2"] });
 
 /**
  * Default property values for ListItemSkeleton component.
@@ -7290,17 +7361,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 = cvaMerge([
-    "shadow",
-    "rounded-lg",
-    "bg-white",
-    "border",
-    "border-neutral-300",
-    "z-popover",
-    "grid",
-    "min-w-[200px]",
-    "overflow-clip",
-], {
+const cvaMenu = 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]",
@@ -7312,20 +7384,18 @@ const cvaMenu = cvaMerge([
     },
 });
 // * Note that the cvaMenuList is also used for Select component
-const cvaMenuList = cvaMerge([
-    "p-1",
-    "gap-y-0.5",
-    "grid",
-    "max-h-[max(40dvh,var(--spacing-64))]",
-    "overflow-y-auto",
-]);
-const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
-const cvaMenuListMultiSelect = cvaMerge([
-    "!has-[:checked]:bg-primary-100",
-    "!hover:has-[:checked]:bg-primary-200",
-    "!focus-within:has-[:checked]:bg-primary-100",
-]);
-const cvaMenuListItem = cvaMerge("max-w-full");
+const cvaMenuList = cva({
+    base: ["p-1", "gap-y-0.5", "grid", "max-h-[max(40dvh,var(--spacing-64))]", "overflow-y-auto"],
+});
+const cvaMenuListDivider = cva({ base: ["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"] });
+const cvaMenuListMultiSelect = cva({
+    base: [
+        "!has-[:checked]:bg-primary-100",
+        "!hover:has-[:checked]:bg-primary-200",
+        "!focus-within:has-[:checked]:bg-primary-100",
+    ],
+});
+const cvaMenuListItem = cva({ base: "max-w-full" });
 
 const MenuContentContext = createContext(null);
 /**
@@ -7759,44 +7829,44 @@ const cvaMenuItem = (props) => {
         focus: focused === true ? "focused" : "unfocused",
     }), className);
 };
-const cvaMenuItemStyle = 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 = 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"],
@@ -7819,9 +7889,7 @@ const cvaMenuItemStyle = 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",
             ],
@@ -7851,12 +7919,12 @@ const cvaMenuItemStyle = cvaMerge(
         disabled: false,
     },
 });
-const cvaMenuItemLabel = 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 = 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: [],
@@ -7872,15 +7940,16 @@ const cvaMenuItemLabel = cvaMerge(
         disabled: false,
     },
 });
-const cvaMenuItemPrefix = cvaMerge([
-    "text-neutral-400",
-    "hover:text-neutral-500",
-    "focus:text-neutral-500",
-    "h-min",
-    "leading-[0]",
-    "flex",
-    "items-center",
-], {
+const cvaMenuItemPrefix = 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",
@@ -7900,7 +7969,8 @@ const cvaMenuItemPrefix = cvaMerge([
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cvaMerge(["text-neutral-400", "text-sm", "flex", "items-center"], {
+const cvaMenuItemSuffix = cva({
+    base: ["text-neutral-400", "text-sm", "flex", "items-center"],
     variants: {
         selected: {
             true: "text-neutral-600",
@@ -8208,7 +8278,7 @@ const MenuItem = ({ className, "data-testid": dataTestId, label, children, selec
     return (jsxs(Popover, { activation: { click: !disabled, hover: disabled ? false : { delayed: true } }, isOpen: submenuOpen, onOpenStateChange: setSubmenuOpen, placement: "right-start", sizing: submenuSizing, children: [jsx(PopoverTrigger, { ref: mergedTriggerRef, children: jsx(MenuItemRow, { ...itemRowProps, "aria-expanded": submenuOpen, "aria-haspopup": "menu" }) }), jsx(PopoverContent, { initialFocus: 1, returnFocus: returnFocusRef, children: submenu })] }));
 };
 
-const cvaMoreMenu = cvaMerge(["p-0"]);
+const cvaMoreMenu = cva({ base: ["p-0"] });
 
 /**
  * MoreMenu (kebab menu) renders a three-dot button that opens a popover with a list of actions.
@@ -8268,8 +8338,9 @@ const MoreMenu = ({ className, "data-testid": dataTestId, popoverProps, iconProp
     return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : undefined, ref: mergedRef, style: style, children: jsx(MenuTree, { children: jsx(Popover, { placement: "bottom-end", ...popoverProps, children: modalState => (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: customButton ?? (jsx(IconButton, { ...iconButtonProps, "data-testid": iconButtonProps["data-testid"] ?? "more-menu-icon", icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }), ...(modalState.isOpen ? { ariaLabel: resolvedButtonLabel } : { title: resolvedButtonLabel }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }) }) }));
 };
 
-const cvaNotice = cvaMerge(["flex", "items-center", "gap-1"]);
-const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+const cvaNotice = cva({ base: ["flex", "items-center", "gap-1"] });
+const cvaNoticeLabel = cva({
+    base: ["font-medium", "text-sm", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"],
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -8288,7 +8359,8 @@ const cvaNoticeLabel = cvaMerge(["font-medium", "text-sm", "overflow-hidden", "t
         size: "medium",
     },
 });
-const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+const cvaNoticeIcon = cva({
+    base: ["rounded-full", "items-center", "justify-center", "flex", "relative"],
     variants: {
         color: {
             neutral: "text-neutral-400",
@@ -8347,7 +8419,8 @@ const Notice = ({ "data-testid": dataTestId, iconName = undefined, iconSize = "m
     return (jsxs("div", { "aria-label": label, className: cvaNotice({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: [nonNullable(iconName) ? (jsx("div", { className: cvaNoticeIcon({ color: iconColor || color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: jsx(Icon, { name: iconName, size: iconSize }) })) : null, label && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }));
 };
 
-const cvaPage = cvaMerge(["grid", "h-full"], {
+const cvaPage = cva({
+    base: ["grid", "h-full"],
     variants: {
         layout: {
             content: ["grid-rows-1"],
@@ -8360,7 +8433,8 @@ const cvaPage = cvaMerge(["grid", "h-full"], {
         layout: "none",
     },
 });
-const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-4"], {
+const cvaPageContent = cva({
+    base: ["overflow-auto", "page-content", "grid", "gap-4"],
     variants: {
         layout: {
             content: "grid-rows-fr",
@@ -8491,7 +8565,7 @@ const PRESET_CONFIGURATIONS = {
     ],
 };
 
-const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
+const cvaSkeletonContainer = cva({ base: ["flex", "flex-col"] });
 
 /**
  * SkeletonLines renders multiple animated placeholder text lines before data loads.
@@ -8693,7 +8767,8 @@ const useIsTextTruncated = (text, { skip = false } = {}) => {
     return useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
-const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
+const cvaPageHeaderContainer = cva({
+    base: ["bg-white", "tu-page-header"],
     variants: {
         withBorder: {
             true: ["border-b", "border-b-neutral-200"],
@@ -8701,8 +8776,8 @@ const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
         },
     },
 });
-const cvaPageHeader = cvaMerge(["box-border", "py-4", "px-4", "flex", "items-center", "gap-y-1"]);
-const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semibold", "truncate"]);
+const cvaPageHeader = cva({ base: ["box-border", "py-4", "px-4", "flex", "items-center", "gap-y-1"] });
+const cvaPageHeaderHeading = cva({ base: ["text-neutral-900", "text-xl", "font-semibold", "truncate"] });
 
 /**
  * The PageHeaderTitle component is used to display the title of the page header.
@@ -8794,8 +8869,8 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
                                     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"]);
-const cvaPaginationText = cvaMerge("whitespace-nowrap");
+const cvaPagination = cva({ base: ["flex", "items-center", "gap-1"] });
+const cvaPaginationText = cva({ base: "whitespace-nowrap" });
 
 /**
  * Pagination provides previous/next page navigation with an optional page counter and jump-to-page input.
@@ -8976,20 +9051,21 @@ const PopoverTitle = ({ children, action, divider = false, className, "data-test
     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([
-    "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 = 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: "",
@@ -9012,7 +9088,8 @@ const cvaPreferenceCard = cvaMerge([
         clickable: false,
     },
 });
-const cvaInputContainer = cvaMerge(["flex", "p-4", "rounded-l-lg", "border", "border-transparent", "bg-neutral-50", "border-r-neutral-200"], {
+const cvaInputContainer = cva({
+    base: ["flex", "p-4", "rounded-l-lg", "border", "border-transparent", "bg-neutral-50", "border-r-neutral-200"],
     variants: {
         itemPlacement: {
             center: "items-center",
@@ -9023,11 +9100,12 @@ const cvaInputContainer = cvaMerge(["flex", "p-4", "rounded-l-lg", "border", "bo
         itemPlacement: "start",
     },
 });
-const cvaContentContainer = cvaMerge([
-    "grid",
-    "gap-x-3",
-    //* Grid template areas are applied with GridAreas component)
-], {
+const cvaContentContainer = cva({
+    base: [
+        "grid",
+        "gap-x-3",
+        //* Grid template areas are applied with GridAreas component)
+    ],
     variants: {
         itemPlacement: {
             center: "items-center",
@@ -9038,7 +9116,8 @@ const cvaContentContainer = cvaMerge([
         itemPlacement: "start",
     },
 });
-const cvaTitleCard = cvaMerge(["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+const cvaTitleCard = cva({
+    base: ["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"],
     variants: {
         disabled: {
             true: "text-neutral-400",
@@ -9049,7 +9128,8 @@ const cvaTitleCard = cvaMerge(["min-w-0", "overflow-hidden", "text-ellipsis", "w
         disabled: false,
     },
 });
-const cvaDescriptionCard = cvaMerge([], {
+const cvaDescriptionCard = cva({
+    base: [],
     variants: {
         disabled: {
             true: "text-neutral-400",
@@ -9060,7 +9140,8 @@ const cvaDescriptionCard = cvaMerge([], {
         disabled: false,
     },
 });
-const cvaIconBackground = cvaMerge(["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md", "shrink-0"], {
+const cvaIconBackground = cva({
+    base: ["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md", "shrink-0"],
     variants: {
         disabled: {
             true: "bg-neutral-200",
@@ -9071,7 +9152,7 @@ const cvaIconBackground = cvaMerge(["flex", "h-8", "w-8", "items-center", "justi
         disabled: false,
     },
 });
-const cvaContentWrapper = cvaMerge(["grid", "gap-2", "px-4", "py-3"]);
+const cvaContentWrapper = cva({ base: ["grid", "gap-2", "px-4", "py-3"] });
 
 const CENTER_INPUT_HEIGHT_THRESHOLD = 92;
 /**
@@ -9305,7 +9386,8 @@ const Prompt = ({ when, message }) => {
     return null;
 };
 
-const cvaSpacer = cvaMerge([], {
+const cvaSpacer = cva({
+    base: [],
     variants: {
         border: {
             true: ["border-t", "border-solid", "border-neutral-100", "min-h-[1px]"],
@@ -9511,7 +9593,8 @@ const getSnapLevelCssHeight = (levelIndex, totalLevels, dockingEnabled, dockedHe
  *
  * Always absolutely positioned within the provided container element.
  */
-const cvaSheetContainer = cvaMerge(["absolute", "inset-0", "z-overlay", "overflow-clip", "[container-type:size]"], {
+const cvaSheetContainer = cva({
+    base: ["absolute", "inset-0", "z-overlay", "overflow-clip", "[container-type:size]"],
     variants: {
         docked: {
             true: ["pointer-events-none"],
@@ -9538,7 +9621,17 @@ const cvaSheetContainer = cvaMerge(["absolute", "inset-0", "z-overlay", "overflo
  * 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 = cvaMerge(["absolute", "bottom-0", "flex", "flex-col", "pointer-events-auto", "rounded-b-none", "rounded-t-xl", "z-overlay"], {
+const cvaSheetPanel = 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"],
@@ -9566,7 +9659,8 @@ const cvaSheetPanel = cvaMerge(["absolute", "bottom-0", "flex", "flex-col", "poi
  * for fit mode so that `scrollHeight` reflects natural content height rather
  * than the stretched layout — critical for correct fit-height measurement.
  */
-const cvaSheetScrollArea = cvaMerge(["flex", "flex-col", "min-h-0", "overflow-x-hidden", "overflow-y-auto"], {
+const cvaSheetScrollArea = cva({
+    base: ["flex", "flex-col", "min-h-0", "overflow-x-hidden", "overflow-y-auto"],
     variants: {
         fillHeight: {
             true: ["flex-grow"],
@@ -9696,17 +9790,18 @@ const HANDLE_VISUALS = {
         proximityWeight: 0.5,
     },
 };
-const cvaSheetHandle = cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-full",
-    "py-3",
-    "touch-action-none",
-    "select-none",
-    "shrink-0",
-    "bg-white",
-], {
+const cvaSheetHandle = 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]"],
@@ -9722,7 +9817,8 @@ const cvaSheetHandle = cvaMerge([
         isDragging: false,
     },
 });
-const cvaSheetHandleLine = cvaMerge(["w-8", "h-1", "rounded-full", "origin-center"], {
+const cvaSheetHandleLine = cva({
+    base: ["w-8", "h-1", "rounded-full", "origin-center"],
     variants: {
         isDragging: {
             true: [],
@@ -9763,7 +9859,14 @@ const SheetHandle = ({ onPointerDown, onPointerMove, onPointerUp, onLostPointerC
             } }) }));
 };
 
-const cvaSheetOverlay = cvaMerge(["absolute", "inset-0", "transition-opacity", "duration-300", "[transition-timing-function:cubic-bezier(0.2,0,0,1)]"], {
+const cvaSheetOverlay = 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"],
@@ -11449,8 +11552,9 @@ const useSheet = (props) => {
     }), [isOpen, state, variant, open, close, snap, floatingUi, onGeometryChange, onSnap, onClickHandle, onCloseGesture]);
 };
 
-const cvaSidebar = cvaMerge(["apply", "grid", "grid-cols-fr-min", "items-center"]);
-const cvaSidebarChildContainer = cvaMerge(["apply", "flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"], {
+const cvaSidebar = cva({ base: ["apply", "grid", "grid-cols-fr-min", "items-center"] });
+const cvaSidebarChildContainer = 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"],
@@ -11658,7 +11762,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 = cvaMerge(["grid", "min-h-0", "flex-1", "grid-rows-[min-content_minmax(0px,1fr)]"], {
+const cvaSidebarContentLayout = 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"],
@@ -11714,7 +11819,8 @@ const cvaSidebarContentLayout = cvaMerge(["grid", "min-h-0", "flex-1", "grid-row
  * `p-content-space` already owns - it is deliberately *not* zero, but not enough to look like a second
  * gap either.
  */
-const cvaSidebarContentLayoutSidebar = cvaMerge(["pt-4", "pl-4", "pr-4"], {
+const cvaSidebarContentLayoutSidebar = 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]"],
@@ -11741,7 +11847,8 @@ const cvaSidebarContentLayoutSidebar = cvaMerge(["pt-4", "pl-4", "pr-4"], {
  * ancestor. Callers rendering a route that must sit flush (e.g. a full-page extension iframe) opt
  * out with `contentSpace={false}`.
  */
-const cvaSidebarContentLayoutContent = cvaMerge(["relative", "h-full", "min-h-0", "overflow-y-auto"], {
+const cvaSidebarContentLayoutContent = cva({
+    base: ["relative", "h-full", "min-h-0", "overflow-y-auto"],
     variants: {
         contentSpace: {
             true: ["p-content-space"],
@@ -11793,42 +11900,38 @@ const SidebarContentLayout = ({ breakpoint = "lg", className, content, contentSp
     return (jsxs("div", { className: cvaSidebarContentLayout({ breakpoint, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("div", { className: cvaSidebarContentLayoutSidebar({ breakpoint }), "data-testid": `${dataTestId}-sidebar`, children: jsx(Sidebar, { breakpoint: breakpoint, children: sidebar }) }), jsx("div", { className: cvaSidebarContentLayoutContent({ contentSpace }), "data-testid": `${dataTestId}-content`, children: content })] }));
 };
 
-const cvaTabsRoot = cvaMerge([]);
-const cvaTabList = cvaMerge([
-    "flex",
-    "flex-row",
-    "border-b",
-    "border-b-neutral-200",
-    "overflow-auto",
-    "no-scrollbar",
-]);
-const cvaTabContent = cvaMerge([]);
-const cvaTab = 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 = cva({ base: [] });
+const cvaTabList = cva({
+    base: ["flex", "flex-row", "border-b", "border-b-neutral-200", "overflow-auto", "no-scrollbar"],
+});
+const cvaTabContent = cva({ base: [] });
+const cvaTab = 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",
@@ -12063,8 +12166,11 @@ const Tabs = ({ children, forceRender, className, "data-testid": dataTestId, ful
     return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 
-const cvaToggleGroup = cvaMerge(["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"]);
-const cvaToggleItem = cvaMerge(["z-10", "group"], {
+const cvaToggleGroup = cva({
+    base: ["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"],
+});
+const cvaToggleItem = cva({
+    base: ["z-10", "group"],
     variants: {
         selected: {
             true: [],
@@ -12083,7 +12189,8 @@ const cvaToggleItem = cvaMerge(["z-10", "group"], {
         },
     ],
 });
-const cvaToggleGroupWithSlidingBackground = cvaMerge([], {
+const cvaToggleGroupWithSlidingBackground = cva({
+    base: [],
     variants: {
         isMounted: {
             true: [
@@ -12104,7 +12211,8 @@ const cvaToggleGroupWithSlidingBackground = cvaMerge([], {
         },
     },
 });
-const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow", "font-medium"], {
+const cvaToggleItemText = cva({
+    base: ["text-ellipsis", "truncate", "flex-grow", "font-medium"],
     variants: {
         maxWidth: {
             sm: ["max-w-[80px]"],
@@ -12142,7 +12250,8 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow", "f
         },
     ],
 });
-const cvaToggleItemContent = cvaMerge([], {
+const cvaToggleItemContent = cva({
+    base: [],
     variants: {
         selected: {
             true: [],
@@ -12296,7 +12405,8 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsx("button", { ...rest, className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", children: isIconOnly ? (icon) : (jsxs(Fragment, { children: [iconPrefix, children] })) }));
 };
 
-const cvaSegmentedValueBar = cvaMerge(["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+const cvaSegmentedValueBar = cva({
+    base: ["flex-1", "overflow-hidden", "rounded", "bg-neutral-100", "flex"],
     variants: {
         size: {
             extraSmall: "h-1",
@@ -12308,7 +12418,8 @@ const cvaSegmentedValueBar = cvaMerge(["flex-1", "overflow-hidden", "rounded", "
         size: "small",
     },
 });
-const cvaSegmentedValueBarText = cvaMerge(["whitespace-nowrap", "tabular-nums", "shrink-0"], {
+const cvaSegmentedValueBarText = cva({
+    base: ["whitespace-nowrap", "tabular-nums", "shrink-0"],
     variants: {
         size: {
             small: "leading-xs text-xs font-medium text-neutral-600",