@trackunit/react-form-components 2.6.48 → 2.6.49

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@
 import { IconButton, Icon, Tooltip, Button, Popover, PopoverTrigger, PopoverContent, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading } from '@trackunit/react-components';
 import { useMemo, useRef, useEffect, useImperativeHandle, useState, useCallback, useLayoutEffect, isValidElement, cloneElement, useReducer, createContext, useContext, useId } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
 import { titleCase } from 'string-ts';
 import { useCopyToClipboard } from 'usehooks-ts';
@@ -397,7 +397,8 @@ const useDateFieldLocale = () => {
     }, [browserLocale, selectedLanguage]);
 };
 
-const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
+const cvaActionButton = cva({
+    base: ["drop-shadow-none", "rounded-md"],
     variants: {
         size: {
             small: ["w-6", "h-6", "min-h-0"],
@@ -409,7 +410,8 @@ const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
         size: "medium",
     },
 });
-const cvaActionContainer = cvaMerge(["flex", "items-center"], {
+const cvaActionContainer = cva({
+    base: ["flex", "items-center"],
     variants: {
         size: {
             //I just measured manually the top/bottom spacing
@@ -425,24 +427,24 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
     },
 });
 
-const cvaInputBase = cvaMerge([
-    "component-baseInput-shadow",
-    "component-baseInput-border",
-    "component-baseInput-background",
-    "border-neutral-300",
-    "hover:border-neutral-400",
-    "hover:bg-neutral-50",
-    "transition",
-]);
-const cvaInputBaseDisabled = cvaMerge([
-    "bg-neutral-100",
-    "hover:bg-neutral-100",
-    "hover:border-neutral-300",
-    "text-neutral-400",
-]);
-const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
-const cvaInputBaseReadOnly = cvaMerge(["text-neutral-500"]);
-const cvaInputBaseSize = cvaMerge("", {
+const cvaInputBase = cva({
+    base: [
+        "component-baseInput-shadow",
+        "component-baseInput-border",
+        "component-baseInput-background",
+        "border-neutral-300",
+        "hover:border-neutral-400",
+        "hover:bg-neutral-50",
+        "transition",
+    ],
+});
+const cvaInputBaseDisabled = cva({
+    base: ["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300", "text-neutral-400"],
+});
+const cvaInputBaseInvalid = cva({ base: ["border-danger-600"] });
+const cvaInputBaseReadOnly = cva({ base: ["text-neutral-500"] });
+const cvaInputBaseSize = cva({
+    base: "",
     variants: {
         size: {
             small: ["h-7", "text-xs"],
@@ -454,18 +456,19 @@ const cvaInputBaseSize = cvaMerge("", {
         },
     },
 });
-const cvaInput$1 = cvaMerge([
-    "overflow-clip",
-    "grid",
-    // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
-    // The min restriction of the middle column (--spacing-20) is
-    // effectively the minimum width available for the text input
-    "grid-cols-[min-content_minmax(var(--spacing-20),1fr)_min-content]",
-    "grid-rows-1",
-    cvaInputBase(),
-    "focus-within:outline-native",
-    "text-neutral-900",
-], {
+const cvaInput$1 = cva({
+    base: [
+        "overflow-clip",
+        "grid",
+        // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
+        // The min restriction of the middle column (--spacing-20) is
+        // effectively the minimum width available for the text input
+        "grid-cols-[min-content_minmax(var(--spacing-20),1fr)_min-content]",
+        "grid-rows-1",
+        cvaInputBase(),
+        "focus-within:outline-native",
+        "text-neutral-900",
+    ],
     variants: {
         size: {
             small: cvaInputBaseSize({ size: "small" }),
@@ -513,7 +516,8 @@ const cvaInput$1 = cvaMerge([
  * The span position is used for the input field, which spans the entire grid.
  *! Relies on the specific grid layout of cvaInput ☝️
  */
-const cvaInputItemPlacementManager = cvaMerge([], {
+const cvaInputItemPlacementManager = cva({
+    base: [],
     variants: {
         position: {
             before: ["col-start-1", "col-end-2", "row-start-1", "row-end-1"],
@@ -525,11 +529,12 @@ const cvaInputItemPlacementManager = cvaMerge([], {
         position: "span",
     },
 });
-const cvaAccessoriesContainer = cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
+const cvaAccessoriesContainer = cva({ base: ["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"] });
 /**
  * Text size and color is handled by cvaInput
  */
-const cvaInputElement = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"], {
+const cvaInputElement = cva({
+    base: ["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"],
     variants: {
         size: {
             small: ["py-0.5"],
@@ -541,16 +546,17 @@ const cvaInputElement = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent"
         size: "medium",
     },
 });
-const cvaInputAddon = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "px-3",
-    "border-neutral-300",
-    "text-neutral-500",
-    "bg-neutral-50",
-    "text-nowrap",
-], {
+const cvaInputAddon = cva({
+    base: [
+        "flex",
+        "justify-center",
+        "items-center",
+        "px-3",
+        "border-neutral-300",
+        "text-neutral-500",
+        "bg-neutral-50",
+        "text-nowrap",
+    ],
     variants: {
         size: {
             small: ["text-xs"],
@@ -566,16 +572,17 @@ const cvaInputAddon = cvaMerge([
         size: "medium",
     },
 });
-const cvaInputPrefix = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-neutral-400",
-    "hover:component-search-prefix",
-    "component-baseInput-prefix",
-    "component-search-borderless",
-    "pl-2",
-], {
+const cvaInputPrefix = cva({
+    base: [
+        "flex",
+        "justify-center",
+        "items-center",
+        "text-neutral-400",
+        "hover:component-search-prefix",
+        "component-baseInput-prefix",
+        "component-search-borderless",
+        "pl-2",
+    ],
     variants: {
         disabled: {
             true: ["text-neutral-500"],
@@ -586,7 +593,8 @@ const cvaInputPrefix = cvaMerge([
         disabled: false,
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"], {
+const cvaInputSuffix = cva({
+    base: ["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"],
     variants: {
         disabled: {
             true: ["text-neutral-500"],
@@ -1516,20 +1524,21 @@ const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false
     return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { ...rest, actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize, title: t("phoneField.phoneNumber.label"), type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, "data-testid": dataTestId ? `${dataTestId}-phoneNumberInput` : undefined, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }) }));
 };
 
-const cvaTextAreaBaseInput = cvaMerge([
-    cvaInputBase(),
-    "block",
-    "overflow-auto",
-    "appearance-none",
-    "px-3",
-    "py-2",
-    "text-sm",
-    "text-neutral-900",
-    "placeholder-neutral-400",
-    "w-full",
-    "h-20",
-    "transition",
-], {
+const cvaTextAreaBaseInput = cva({
+    base: [
+        cvaInputBase(),
+        "block",
+        "overflow-auto",
+        "appearance-none",
+        "px-3",
+        "py-2",
+        "text-sm",
+        "text-neutral-900",
+        "placeholder-neutral-400",
+        "w-full",
+        "h-20",
+        "transition",
+    ],
     variants: {
         disabled: {
             true: cvaInputBaseDisabled(),
@@ -1567,7 +1576,8 @@ const TextBaseInput = ({ ref, ...rest }) => jsx(BaseInput, { ref: ref, type: "te
  * The container for the select component — with state styling
  * !This is _the_ place in select styles to manage the aperance of the text and background
  */
-const cvaSelectContainer = cvaMerge([cvaInputBase(), "relative", "transition", "min-h-0"], {
+const cvaSelectContainer = cva({
+    base: [cvaInputBase(), "relative", "transition", "min-h-0"],
     variants: {
         fieldSize: {
             small: cvaInputBaseSize({ size: "small" }),
@@ -1599,26 +1609,18 @@ const cvaSelectContainer = cvaMerge([cvaInputBase(), "relative", "transition", "
         },
     },
 });
-const cvaSelectControl = cvaMerge(["px-3", "gap-x-1", "flex", "h-full"]);
-const cvaSelectLoadingMessage = cvaMerge(["text-neutral-400", "text-center"]);
-const cvaSelectNoOptionsMessage = cvaMerge(["text-neutral-400", "text-center"]);
-const cvaSelectDropdownIconContainer = cvaMerge([
-    "flex",
-    "cursor-pointer",
-    "place-items-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-]);
-const cvaSelectPrefixSuffix = cvaMerge(["flex", "items-center", "text-neutral-400"]);
-const cvaSelectClearIndicator = cvaMerge([
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-]);
-const cvaSelectDropdownIndicator = cvaMerge(["transition-transform", "duration-200"], {
+const cvaSelectControl = cva({ base: ["px-3", "gap-x-1", "flex", "h-full"] });
+const cvaSelectLoadingMessage = cva({ base: ["text-neutral-400", "text-center"] });
+const cvaSelectNoOptionsMessage = cva({ base: ["text-neutral-400", "text-center"] });
+const cvaSelectDropdownIconContainer = cva({
+    base: ["flex", "cursor-pointer", "place-items-center", "text-neutral-400", "hover:text-neutral-500"],
+});
+const cvaSelectPrefixSuffix = cva({ base: ["flex", "items-center", "text-neutral-400"] });
+const cvaSelectClearIndicator = cva({
+    base: ["flex", "cursor-pointer", "items-center", "justify-center", "text-neutral-400", "hover:text-neutral-500"],
+});
+const cvaSelectDropdownIndicator = cva({
+    base: ["transition-transform", "duration-200"],
     variants: {
         menuIsOpen: {
             true: "rotate-180",
@@ -1626,29 +1628,20 @@ const cvaSelectDropdownIndicator = cvaMerge(["transition-transform", "duration-2
         },
     },
 });
-const cvaSelectValueContainer = cvaMerge([
-    "flex",
-    "flex-nowrap",
-    "items-center",
-    "grow",
-    "overflow-hidden",
-    "relative",
-    "gap-x-1",
-]);
+const cvaSelectValueContainer = cva({
+    base: ["flex", "flex-nowrap", "items-center", "grow", "overflow-hidden", "relative", "gap-x-1"],
+});
 // for the placement of items inside the value container
-const insideValueContainerClasses = cvaMerge(["col-start-1", "col-end-3", "row-start-1", "row-end-2"]);
-const cvaSelectSingleValue = cvaMerge([
-    insideValueContainerClasses(),
-    "max-w-full",
-    "overflow-hidden",
-    "text-ellipsis",
-    "whitespace-nowrap",
-]);
+const insideValueContainerClasses = cva({ base: ["col-start-1", "col-end-3", "row-start-1", "row-end-2"] });
+const cvaSelectSingleValue = cva({
+    base: [insideValueContainerClasses(), "max-w-full", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"],
+});
 // No `w-full`: useCustomComponents.tsx's custom `Menu` applies edge-aware min/max-width and
 // left/right alignment as an inline style (see utils/computeMenuGeometry.ts), so a
 // static Tailwind width class here would just compete with that. The menu sizes intrinsically
 // (shrink-to-fit, bounded by that inline min/max-width) as a result.
-const cvaSelectMenu = cvaMerge([cvaMenu({ limitWidth: false }), "absolute"], {
+const cvaSelectMenu = cva({
+    base: [cvaMenu({ limitWidth: false }), "absolute"],
     variants: {
         placement: {
             bottom: "top-[calc(100%+var(--spacing-1))]",
@@ -1659,10 +1652,11 @@ const cvaSelectMenu = cvaMerge([cvaMenu({ limitWidth: false }), "absolute"], {
         placement: "bottom",
     },
 });
-const cvaSelectMenuList = cvaMerge([cvaMenuList(), "relative", "w-full"]);
-const cvaSelectPlaceholder = cvaMerge(["absolute", "text-neutral-400"]);
-const cvaSelectIndicatorsContainer = cvaMerge(["flex", "items-center", "gap-x-1"]);
-const cvaSelectMultiValue = cvaMerge([], {
+const cvaSelectMenuList = cva({ base: [cvaMenuList(), "relative", "w-full"] });
+const cvaSelectPlaceholder = cva({ base: ["absolute", "text-neutral-400"] });
+const cvaSelectIndicatorsContainer = cva({ base: ["flex", "items-center", "gap-x-1"] });
+const cvaSelectMultiValue = cva({
+    base: [],
     variants: {
         hidden: {
             true: "!hidden",
@@ -1711,26 +1705,29 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
  */
-const cvaBinaryControlWrapper = cvaMerge([
-    "grid-rows-subgrid", //* Children align to this parent grid
-    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
-    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
-    "group",
-    "grid",
-    "gap-x-2",
-]);
-const cvaBinaryControlLabelTooltip = cvaMerge(["col-start-2", "w-full", "min-w-0", "self-center"]);
-const cvaBinaryControlDescriptionTooltip = cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
-const cvaBinaryControlDescription = cvaMerge([
-    "text-sm",
-    "font-normal",
-    "text-neutral-500",
-    "text-left",
-    "whitespace-nowrap",
-    "select-none",
-    "text-ellipsis",
-    "overflow-hidden",
-], {
+const cvaBinaryControlWrapper = cva({
+    base: [
+        "grid-rows-subgrid", //* Children align to this parent grid
+        "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
+        "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
+        "group",
+        "grid",
+        "gap-x-2",
+    ],
+});
+const cvaBinaryControlLabelTooltip = cva({ base: ["col-start-2", "w-full", "min-w-0", "self-center"] });
+const cvaBinaryControlDescriptionTooltip = cva({ base: ["col-span-2", "col-start-2", "row-start-2", "w-full"] });
+const cvaBinaryControlDescription = cva({
+    base: [
+        "text-sm",
+        "font-normal",
+        "text-neutral-500",
+        "text-left",
+        "whitespace-nowrap",
+        "select-none",
+        "text-ellipsis",
+        "overflow-hidden",
+    ],
     variants: {
         disabled: {
             true: ["text-neutral-400", "hover:text-neutral-400", "group-hover:text-neutral-400"],
@@ -1738,16 +1735,17 @@ const cvaBinaryControlDescription = cvaMerge([
         },
     },
 });
-const cvaBinaryControlSuffixContainer = cvaMerge(["flex", "col-start-3", "items-center"]);
+const cvaBinaryControlSuffixContainer = cva({ base: ["flex", "col-start-3", "items-center"] });
 
-const cvaLabel = cvaMerge([
-    "text-sm",
-    "text-neutral-700",
-    "hover:text-neutral-800",
-    "group-hover:text-neutral-800",
-    "active:text-neutral-800",
-    "group-active:text-neutral-800",
-], {
+const cvaLabel = cva({
+    base: [
+        "text-sm",
+        "text-neutral-700",
+        "hover:text-neutral-800",
+        "group-hover:text-neutral-800",
+        "active:text-neutral-800",
+        "group-active:text-neutral-800",
+    ],
     variants: {
         invalid: {
             true: "text-danger-600 hover:text-danger-700 active:text-danger-700 group-hover:text-danger-700 group-active:text-danger-700",
@@ -1783,30 +1781,31 @@ const CheckIcon = ({ className, "data-testid": dataTestId }) => {
  * Checkbox input styling - directly styles the input element (no wrapper span needed).
  * Uses appearance-none to remove native styling, similar to RadioItem.
  */
-const cvaCheckbox = cvaMerge([
-    "appearance-none",
-    "w-4",
-    "h-4",
-    "border-solid",
-    "border",
-    "shrink-0",
-    "border-neutral-300",
-    "rounded",
-    "hover:bg-neutral-100",
-    "bg-white",
-    "shadow-sm",
-    "box-border",
-    "transition",
-    "cursor-pointer",
-    "active:bg-neutral-200",
-    "active:ring-2",
-    "active:ring-inset",
-    "active:ring-primary-700",
-    "group-active:ring-2",
-    "group-active:ring-inset",
-    "group-active:ring-primary-700",
-    "focus:outline-native",
-], {
+const cvaCheckbox = cva({
+    base: [
+        "appearance-none",
+        "w-4",
+        "h-4",
+        "border-solid",
+        "border",
+        "shrink-0",
+        "border-neutral-300",
+        "rounded",
+        "hover:bg-neutral-100",
+        "bg-white",
+        "shadow-sm",
+        "box-border",
+        "transition",
+        "cursor-pointer",
+        "active:bg-neutral-200",
+        "active:ring-2",
+        "active:ring-inset",
+        "active:ring-primary-700",
+        "group-active:ring-2",
+        "group-active:ring-inset",
+        "group-active:ring-primary-700",
+        "focus:outline-native",
+    ],
     variants: {
         invalid: {
             true: ["border-danger-600", "active:ring-danger-700", "group-focus:ring-2", "group-focus:ring-inset"],
@@ -1881,15 +1880,10 @@ const cvaCheckbox = cvaMerge([
 /**
  * Icon overlay container - positioned on top of the input, receives no pointer events
  */
-const cvaCheckboxIconOverlay = cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-4",
-    "h-4",
-    "pointer-events-none",
-]);
-const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+const cvaCheckboxIconOverlay = cva({
+    base: ["flex", "items-center", "justify-center", "w-4", "h-4", "pointer-events-none"],
+});
+const cvaCheckboxIcon = cva({ base: ["w-2.5", "h-2.5", "text-white"] });
 
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
@@ -3066,9 +3060,10 @@ const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, di
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, style: style, children: children }));
 };
 
-const cvaFormGroup = cvaMerge(["component-formGroup-gap", "group", "form-group"]);
-const cvaFormGroupContainerBefore = cvaMerge(["flex", "mb-1", "items-center"]);
-const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
+const cvaFormGroup = cva({ base: ["component-formGroup-gap", "group", "form-group"] });
+const cvaFormGroupContainerBefore = cva({ base: ["flex", "mb-1", "items-center"] });
+const cvaFormGroupContainerAfter = cva({
+    base: ["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"],
     variants: {
         invalid: {
             true: "text-danger-500",
@@ -3087,7 +3082,7 @@ const cvaFormGroupContainerAfter = cvaMerge(["flex", "justify-between", "mt-1",
         },
     ],
 });
-const cvaHelpAddon = cvaMerge(["ml-auto"]);
+const cvaHelpAddon = cva({ base: ["ml-auto"] });
 
 /**
  * FormGroup wraps an input element with a label, optional tooltip, help text, and validation styling.
@@ -3192,16 +3187,17 @@ const validateColorCode = (colorCode, required) => {
     return "INVALID_HEX_CODE";
 };
 
-const cvaInputColorField = cvaMerge([
-    "ml-3",
-    "h-4",
-    "w-4",
-    "self-center",
-    "bg-inherit",
-    "disabled:opacity-50",
-    "disabled:pointer-events-none",
-    "rounded-[4px]",
-], {
+const cvaInputColorField = cva({
+    base: [
+        "ml-3",
+        "h-4",
+        "w-4",
+        "self-center",
+        "bg-inherit",
+        "disabled:opacity-50",
+        "disabled:pointer-events-none",
+        "rounded-[4px]",
+    ],
     variants: {
         readOnly: {
             true: "pointer-events-none",
@@ -3399,19 +3395,20 @@ const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvali
 };
 DateField.displayName = "DateField";
 
-const cvaDropZone = cvaMerge([
-    "flex",
-    "component-baseInput-background",
-    "justify-center",
-    "text-neutral-500",
-    "rounded-lg",
-    "border-2",
-    "border-neutral-200",
-    "border-dashed",
-    "hover:bg-neutral-100",
-    "hover:border-solid",
-    "hover:border-primary-500",
-], {
+const cvaDropZone = cva({
+    base: [
+        "flex",
+        "component-baseInput-background",
+        "justify-center",
+        "text-neutral-500",
+        "rounded-lg",
+        "border-2",
+        "border-neutral-200",
+        "border-dashed",
+        "hover:bg-neutral-100",
+        "hover:border-solid",
+        "hover:border-primary-500",
+    ],
     variants: {
         size: {
             small: ["p-2"],
@@ -3421,29 +3418,17 @@ const cvaDropZone = cvaMerge([
         disabled: { true: ["bg-neutral-100", "hover:bg-neutral-100"], false: "" },
         dragActive: { true: ["border-neutral-200", "bg-neutral-100"], false: "" },
         dropComplete: {
-            true: [
-                "border-solid",
-                "border-primary-500",
-                "bg-neutral-100",
-                "hover:border-solid",
-                "hover:border-neutral-200",
-            ],
+            true: ["border-solid", "border-primary-500", "bg-neutral-100", "hover:border-solid", "hover:border-neutral-200"],
             false: "",
         },
         invalid: { true: ["border-danger-600", "text-danger-500"], false: "" },
     },
 });
-const cvaDropZoneLabel = cvaMerge([
-    "h-full",
-    "pt-1",
-    "pb-1",
-    "gap-2",
-    "items-center",
-    "flex-col",
-    "flex",
-    "justify-center",
-]);
-const cvaDropZoneIconBackground = cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
+const cvaDropZoneLabel = cva({
+    base: ["h-full", "pt-1", "pb-1", "gap-2", "items-center", "flex-col", "flex", "justify-center"],
+});
+const cvaDropZoneIconBackground = cva({
+    base: ["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"],
     variants: {
         invalid: { true: ["bg-danger-100"], false: ["bg-neutral-200"] },
     },
@@ -4004,27 +3989,28 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
 };
 NumberField.displayName = "NumberField";
 
-const cvaOptionCardLabel = cvaMerge([
-    "group",
-    "transition",
-    "bg-white",
-    "outline",
-    "outline-1",
-    "outline-neutral-300",
-    "hover:bg-neutral-100",
-    "focus:bg-neutral-200",
-    "active:bg-neutral-200",
-    "peer-checked:bg-primary-50",
-    "peer-checked:outline-primary-600",
-    "peer-checked:outline-2",
-    "flex",
-    "gap-2",
-    "justify-center",
-    "items-center",
-    "text-center",
-    "rounded-md",
-    "relative",
-], {
+const cvaOptionCardLabel = cva({
+    base: [
+        "group",
+        "transition",
+        "bg-white",
+        "outline",
+        "outline-1",
+        "outline-neutral-300",
+        "hover:bg-neutral-100",
+        "focus:bg-neutral-200",
+        "active:bg-neutral-200",
+        "peer-checked:bg-primary-50",
+        "peer-checked:outline-primary-600",
+        "peer-checked:outline-2",
+        "flex",
+        "gap-2",
+        "justify-center",
+        "items-center",
+        "text-center",
+        "rounded-md",
+        "relative",
+    ],
     variants: {
         disabled: {
             true: ["cursor-not-allowed", "bg-neutral-100"],
@@ -4036,9 +4022,10 @@ const cvaOptionCardLabel = cvaMerge([
         },
     },
 });
-const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cvaMerge(["flex", "grow-0"]);
-const cvaOptionCardTitle = cvaMerge(["text-neutral-600"], {
+const cvaOptionCardContent = cva({ base: ["flex", "flex-col", "items-center"] });
+const cvaOptionCardContainer = cva({ base: ["flex", "grow-0"] });
+const cvaOptionCardTitle = cva({
+    base: ["text-neutral-600"],
     variants: {
         layout: {
             default: ["text-lg", "line-clamp-2"],
@@ -4050,7 +4037,8 @@ const cvaOptionCardTitle = cvaMerge(["text-neutral-600"], {
         },
     },
 });
-const cvaOptionCardText = cvaMerge(["text-neutral-600", "text-sm"], {
+const cvaOptionCardText = cva({
+    base: ["text-neutral-600", "text-sm"],
     variants: {
         type: {
             subheading: ["font-medium"],
@@ -4062,8 +4050,9 @@ const cvaOptionCardText = cvaMerge(["text-neutral-600", "text-sm"], {
         },
     },
 });
-const cvaInput = cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
-const cvaCustomImage = cvaMerge(["text-neutral-400"], {
+const cvaInput = cva({ base: ["peer", "absolute", "h-0", "w-0", "opacity-0"] });
+const cvaCustomImage = cva({
+    base: ["text-neutral-400"],
     variants: {
         disabled: {
             true: ["!text-neutral-400"],
@@ -4071,7 +4060,8 @@ const cvaCustomImage = cvaMerge(["text-neutral-400"], {
         },
     },
 });
-const cvaTag = cvaMerge([], {
+const cvaTag = cva({
+    base: [],
     variants: {
         layout: {
             default: ["absolute", "top-2", "right-2"],
@@ -4342,31 +4332,33 @@ const PhoneFieldWithController = ({ control, controllerProps, name, value, ref,
 };
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
-const cvaInputGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+const cvaInputGroup = cva({
+    base: ["flex", "gap-2", "flex-col", "items-start"],
     variants: {
         layout: {
             inline: ["flex", "gap-3", "flex-row", "items-center"],
         },
     },
 });
-const cvaRadioItem = cvaMerge([
-    "self-center",
-    "w-4",
-    "h-4",
-    "appearance-none",
-    "rounded-3xl",
-    "bg-white",
-    "border-solid",
-    "border",
-    "border-neutral-300",
-    "shadow-sm",
-    "shrink-0",
-    "transition",
-    "box-border",
-    "hover:cursor-pointer",
-    "hover:bg-neutral-100",
-    "focus:outline-native",
-], {
+const cvaRadioItem = cva({
+    base: [
+        "self-center",
+        "w-4",
+        "h-4",
+        "appearance-none",
+        "rounded-3xl",
+        "bg-white",
+        "border-solid",
+        "border",
+        "border-neutral-300",
+        "shadow-sm",
+        "shrink-0",
+        "transition",
+        "box-border",
+        "hover:cursor-pointer",
+        "hover:bg-neutral-100",
+        "focus:outline-native",
+    ],
     variants: {
         checked: {
             true: [
@@ -4466,7 +4458,7 @@ const RadioGroupContext = createContext(null);
  * @returns {ReactElement} RadioGroup component
  */
 const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, style, ref, }) => {
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsx(RadioGroupContext.Provider, { value: {
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : undefined, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -4530,15 +4522,9 @@ const useRadioItemChecked = (value) => {
     return radioGroupContext?.value === value;
 };
 
-const cvaTimeRange = cvaMerge([
-    "flex",
-    "flex-1",
-    "items-center",
-    "gap-4",
-    "max-sm:gap-2",
-    "border-transparent",
-    "rounded-md",
-]);
+const cvaTimeRange = cva({
+    base: ["flex", "flex-1", "items-center", "gap-4", "max-sm:gap-2", "border-transparent", "rounded-md"],
+});
 
 /**
  * TimeRange renders a pair of native `<input type="time">` fields for selecting a start and end time.
@@ -4580,14 +4566,10 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
 };
 const DEFAULT_TIME = "12:00";
 
-const cvaScheduleItem = cvaMerge([
-    "grid",
-    "pb-4",
-    "gap-2",
-    "grid-cols-[60px_200px_60px_2fr]",
-    "max-sm:grid-cols-1",
-]);
-const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
+const cvaScheduleItem = cva({
+    base: ["grid", "pb-4", "gap-2", "grid-cols-[60px_200px_60px_2fr]", "max-sm:grid-cols-1"],
+});
+const cvaScheduleItemText = cva({ base: ["flex", "font-bold", "self-center"] });
 
 /**
  * Schedule renders a weekly time-range editor where each row represents a day with an active toggle,
@@ -4779,15 +4761,16 @@ const hasConsecutiveDays = (schedule) => {
     return schedule.every(({ day }, index) => day === days[index]);
 };
 
-const cvaSearch = cvaMerge([
-    "shadow-none",
-    "component-search-border",
-    "component-search-background",
-    "hover:component-search-background",
-    "hover:component-search-focus-hover",
-    "transition-all",
-    "duration-300",
-], {
+const cvaSearch = cva({
+    base: [
+        "shadow-none",
+        "component-search-border",
+        "component-search-background",
+        "hover:component-search-background",
+        "hover:component-search-focus-hover",
+        "transition-all",
+        "duration-300",
+    ],
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
@@ -5245,9 +5228,10 @@ const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInva
     return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, style: style, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
-const cvaToggleSwitchWrapper = cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
-const cvaToggleSwitchInput = cvaMerge(["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"]);
-const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full", "transition-colors"], {
+const cvaToggleSwitchWrapper = cva({ base: ["grid", "grid-cols-[auto]", "items-center"] });
+const cvaToggleSwitchInput = cva({ base: ["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"] });
+const cvaToggleSwitchTrack = cva({
+    base: ["items-center", "shrink-0", "rounded-full", "transition-colors"],
     variants: {
         size: {
             small: ["w-5", "p-0.5"],
@@ -5286,7 +5270,8 @@ const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full
         disabled: false,
     },
 });
-const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cva({
+    base: ["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"],
     variants: {
         toggled: {
             true: "",
@@ -5484,16 +5469,9 @@ const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-t
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
-const cvaUploadInputField = cvaMerge([
-    "px-0",
-    "py-0",
-    "file:w-0",
-    "file:h-0",
-    "file:invisible",
-    "file:px-0",
-    "dark:text-neutral-400",
-    "self-center",
-]);
+const cvaUploadInputField = cva({
+    base: ["px-0", "py-0", "file:w-0", "file:h-0", "file:invisible", "file:px-0", "dark:text-neutral-400", "self-center"],
+});
 
 /**
  * UploadInput renders a file upload input with a styled button label. It wraps `BaseInput` with `type="file"`