@trackunit/react-form-components 2.6.48 → 2.6.50-alpha-7317206cecd.0

package/index.cjs.js

@@ -398,7 +398,8 @@ const useDateFieldLocale = () => {
     }, [browserLocale, selectedLanguage]);
 };
 
-const cvaActionButton = cssClassVarianceUtilities.cvaMerge(["drop-shadow-none", "rounded-md"], {
+const cvaActionButton = cssClassVarianceUtilities.cva({
+    base: ["drop-shadow-none", "rounded-md"],
     variants: {
         size: {
             small: ["w-6", "h-6", "min-h-0"],
@@ -410,7 +411,8 @@ const cvaActionButton = cssClassVarianceUtilities.cvaMerge(["drop-shadow-none",
         size: "medium",
     },
 });
-const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+const cvaActionContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center"],
     variants: {
         size: {
             //I just measured manually the top/bottom spacing
@@ -426,24 +428,24 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
     },
 });
 
-const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
-    "component-baseInput-shadow",
-    "component-baseInput-border",
-    "component-baseInput-background",
-    "border-neutral-300",
-    "hover:border-neutral-400",
-    "hover:bg-neutral-50",
-    "transition",
-]);
-const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge([
-    "bg-neutral-100",
-    "hover:bg-neutral-100",
-    "hover:border-neutral-300",
-    "text-neutral-400",
-]);
-const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
-const cvaInputBaseReadOnly = cssClassVarianceUtilities.cvaMerge(["text-neutral-500"]);
-const cvaInputBaseSize = cssClassVarianceUtilities.cvaMerge("", {
+const cvaInputBase = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cva({
+    base: ["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300", "text-neutral-400"],
+});
+const cvaInputBaseInvalid = cssClassVarianceUtilities.cva({ base: ["border-danger-600"] });
+const cvaInputBaseReadOnly = cssClassVarianceUtilities.cva({ base: ["text-neutral-500"] });
+const cvaInputBaseSize = cssClassVarianceUtilities.cva({
+    base: "",
     variants: {
         size: {
             small: ["h-7", "text-xs"],
@@ -455,18 +457,19 @@ const cvaInputBaseSize = cssClassVarianceUtilities.cvaMerge("", {
         },
     },
 });
-const cvaInput$1 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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" }),
@@ -514,7 +517,8 @@ const cvaInput$1 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([], {
+const cvaInputItemPlacementManager = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         position: {
             before: ["col-start-1", "col-end-2", "row-start-1", "row-end-1"],
@@ -526,11 +530,12 @@ const cvaInputItemPlacementManager = cssClassVarianceUtilities.cvaMerge([], {
         position: "span",
     },
 });
-const cvaAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
+const cvaAccessoriesContainer = cssClassVarianceUtilities.cva({ base: ["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"] });
 /**
  * Text size and color is handled by cvaInput
  */
-const cvaInputElement = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"], {
+const cvaInputElement = cssClassVarianceUtilities.cva({
+    base: ["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"],
     variants: {
         size: {
             small: ["py-0.5"],
@@ -542,16 +547,17 @@ const cvaInputElement = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "b
         size: "medium",
     },
 });
-const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "px-3",
-    "border-neutral-300",
-    "text-neutral-500",
-    "bg-neutral-50",
-    "text-nowrap",
-], {
+const cvaInputAddon = cssClassVarianceUtilities.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"],
@@ -567,16 +573,17 @@ const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
         size: "medium",
     },
 });
-const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "text-neutral-400",
-    "hover:component-search-prefix",
-    "component-baseInput-prefix",
-    "component-search-borderless",
-    "pl-2",
-], {
+const cvaInputPrefix = cssClassVarianceUtilities.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"],
@@ -587,7 +594,8 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
         disabled: false,
     },
 });
-const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"], {
+const cvaInputSuffix = cssClassVarianceUtilities.cva({
+    base: ["flex", "justify-center", "items-center", "text-neutral-400", "pr-2"],
     variants: {
         disabled: {
             true: ["text-neutral-500"],
@@ -1517,20 +1525,21 @@ const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false
     return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsxRuntime.jsx(BaseInput, { ...rest, actions: !disableAction && innerValue && innerValue.length > 0 ? (jsxRuntime.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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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(),
@@ -1568,7 +1577,8 @@ const TextBaseInput = ({ ref, ...rest }) => jsxRuntime.jsx(BaseInput, { ref: ref
  * 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 = cssClassVarianceUtilities.cvaMerge([cvaInputBase(), "relative", "transition", "min-h-0"], {
+const cvaSelectContainer = cssClassVarianceUtilities.cva({
+    base: [cvaInputBase(), "relative", "transition", "min-h-0"],
     variants: {
         fieldSize: {
             small: cvaInputBaseSize({ size: "small" }),
@@ -1600,26 +1610,18 @@ const cvaSelectContainer = cssClassVarianceUtilities.cvaMerge([cvaInputBase(), "
         },
     },
 });
-const cvaSelectControl = cssClassVarianceUtilities.cvaMerge(["px-3", "gap-x-1", "flex", "h-full"]);
-const cvaSelectLoadingMessage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-center"]);
-const cvaSelectNoOptionsMessage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-center"]);
-const cvaSelectDropdownIconContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "cursor-pointer",
-    "place-items-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-]);
-const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "text-neutral-400"]);
-const cvaSelectClearIndicator = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "cursor-pointer",
-    "items-center",
-    "justify-center",
-    "text-neutral-400",
-    "hover:text-neutral-500",
-]);
-const cvaSelectDropdownIndicator = cssClassVarianceUtilities.cvaMerge(["transition-transform", "duration-200"], {
+const cvaSelectControl = cssClassVarianceUtilities.cva({ base: ["px-3", "gap-x-1", "flex", "h-full"] });
+const cvaSelectLoadingMessage = cssClassVarianceUtilities.cva({ base: ["text-neutral-400", "text-center"] });
+const cvaSelectNoOptionsMessage = cssClassVarianceUtilities.cva({ base: ["text-neutral-400", "text-center"] });
+const cvaSelectDropdownIconContainer = cssClassVarianceUtilities.cva({
+    base: ["flex", "cursor-pointer", "place-items-center", "text-neutral-400", "hover:text-neutral-500"],
+});
+const cvaSelectPrefixSuffix = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "text-neutral-400"] });
+const cvaSelectClearIndicator = cssClassVarianceUtilities.cva({
+    base: ["flex", "cursor-pointer", "items-center", "justify-center", "text-neutral-400", "hover:text-neutral-500"],
+});
+const cvaSelectDropdownIndicator = cssClassVarianceUtilities.cva({
+    base: ["transition-transform", "duration-200"],
     variants: {
         menuIsOpen: {
             true: "rotate-180",
@@ -1627,29 +1629,20 @@ const cvaSelectDropdownIndicator = cssClassVarianceUtilities.cvaMerge(["transiti
         },
     },
 });
-const cvaSelectValueContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-nowrap",
-    "items-center",
-    "grow",
-    "overflow-hidden",
-    "relative",
-    "gap-x-1",
-]);
+const cvaSelectValueContainer = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["col-start-1", "col-end-3", "row-start-1", "row-end-2"]);
-const cvaSelectSingleValue = cssClassVarianceUtilities.cvaMerge([
-    insideValueContainerClasses(),
-    "max-w-full",
-    "overflow-hidden",
-    "text-ellipsis",
-    "whitespace-nowrap",
-]);
+const insideValueContainerClasses = cssClassVarianceUtilities.cva({ base: ["col-start-1", "col-end-3", "row-start-1", "row-end-2"] });
+const cvaSelectSingleValue = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenu({ limitWidth: false }), "absolute"], {
+const cvaSelectMenu = cssClassVarianceUtilities.cva({
+    base: [reactComponents.cvaMenu({ limitWidth: false }), "absolute"],
     variants: {
         placement: {
             bottom: "top-[calc(100%+var(--spacing-1))]",
@@ -1660,10 +1653,11 @@ const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMen
         placement: "bottom",
     },
 });
-const cvaSelectMenuList = cssClassVarianceUtilities.cvaMerge([reactComponents.cvaMenuList(), "relative", "w-full"]);
-const cvaSelectPlaceholder = cssClassVarianceUtilities.cvaMerge(["absolute", "text-neutral-400"]);
-const cvaSelectIndicatorsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-x-1"]);
-const cvaSelectMultiValue = cssClassVarianceUtilities.cvaMerge([], {
+const cvaSelectMenuList = cssClassVarianceUtilities.cva({ base: [reactComponents.cvaMenuList(), "relative", "w-full"] });
+const cvaSelectPlaceholder = cssClassVarianceUtilities.cva({ base: ["absolute", "text-neutral-400"] });
+const cvaSelectIndicatorsContainer = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-x-1"] });
+const cvaSelectMultiValue = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         hidden: {
             true: "!hidden",
@@ -1712,26 +1706,29 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
  */
-const cvaBinaryControlWrapper = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge(["col-start-2", "w-full", "min-w-0", "self-center"]);
-const cvaBinaryControlDescriptionTooltip = cssClassVarianceUtilities.cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
-const cvaBinaryControlDescription = cssClassVarianceUtilities.cvaMerge([
-    "text-sm",
-    "font-normal",
-    "text-neutral-500",
-    "text-left",
-    "whitespace-nowrap",
-    "select-none",
-    "text-ellipsis",
-    "overflow-hidden",
-], {
+const cvaBinaryControlWrapper = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cva({ base: ["col-start-2", "w-full", "min-w-0", "self-center"] });
+const cvaBinaryControlDescriptionTooltip = cssClassVarianceUtilities.cva({ base: ["col-span-2", "col-start-2", "row-start-2", "w-full"] });
+const cvaBinaryControlDescription = cssClassVarianceUtilities.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"],
@@ -1739,16 +1736,17 @@ const cvaBinaryControlDescription = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaBinaryControlSuffixContainer = cssClassVarianceUtilities.cvaMerge(["flex", "col-start-3", "items-center"]);
+const cvaBinaryControlSuffixContainer = cssClassVarianceUtilities.cva({ base: ["flex", "col-start-3", "items-center"] });
 
-const cvaLabel = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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",
@@ -1784,30 +1782,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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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"],
@@ -1882,15 +1881,10 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
 /**
  * Icon overlay container - positioned on top of the input, receives no pointer events
  */
-const cvaCheckboxIconOverlay = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-4",
-    "h-4",
-    "pointer-events-none",
-]);
-const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+const cvaCheckboxIconOverlay = cssClassVarianceUtilities.cva({
+    base: ["flex", "items-center", "justify-center", "w-4", "h-4", "pointer-events-none"],
+});
+const cvaCheckboxIcon = cssClassVarianceUtilities.cva({ base: ["w-2.5", "h-2.5", "text-white"] });
 
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
@@ -3067,9 +3061,10 @@ const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, di
     return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, style: style, children: children }));
 };
 
-const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
-const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cvaMerge(["flex", "mb-1", "items-center"]);
-const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"], {
+const cvaFormGroup = cssClassVarianceUtilities.cva({ base: ["component-formGroup-gap", "group", "form-group"] });
+const cvaFormGroupContainerBefore = cssClassVarianceUtilities.cva({ base: ["flex", "mb-1", "items-center"] });
+const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cva({
+    base: ["flex", "justify-between", "mt-1", "text-xs", "text-neutral-500"],
     variants: {
         invalid: {
             true: "text-danger-500",
@@ -3088,7 +3083,7 @@ const cvaFormGroupContainerAfter = cssClassVarianceUtilities.cvaMerge(["flex", "
         },
     ],
 });
-const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
+const cvaHelpAddon = cssClassVarianceUtilities.cva({ base: ["ml-auto"] });
 
 /**
  * FormGroup wraps an input element with a label, optional tooltip, help text, and validation styling.
@@ -3193,16 +3188,17 @@ const validateColorCode = (colorCode, required) => {
     return "INVALID_HEX_CODE";
 };
 
-const cvaInputColorField = cssClassVarianceUtilities.cvaMerge([
-    "ml-3",
-    "h-4",
-    "w-4",
-    "self-center",
-    "bg-inherit",
-    "disabled:opacity-50",
-    "disabled:pointer-events-none",
-    "rounded-[4px]",
-], {
+const cvaInputColorField = cssClassVarianceUtilities.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",
@@ -3400,19 +3396,20 @@ const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvali
 };
 DateField.displayName = "DateField";
 
-const cvaDropZone = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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"],
@@ -3422,29 +3419,17 @@ const cvaDropZone = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.cvaMerge([
-    "h-full",
-    "pt-1",
-    "pb-1",
-    "gap-2",
-    "items-center",
-    "flex-col",
-    "flex",
-    "justify-center",
-]);
-const cvaDropZoneIconBackground = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
+const cvaDropZoneLabel = cssClassVarianceUtilities.cva({
+    base: ["h-full", "pt-1", "pb-1", "gap-2", "items-center", "flex-col", "flex", "justify-center"],
+});
+const cvaDropZoneIconBackground = cssClassVarianceUtilities.cva({
+    base: ["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"],
     variants: {
         invalid: { true: ["bg-danger-100"], false: ["bg-neutral-200"] },
     },
@@ -4005,27 +3990,28 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
 };
 NumberField.displayName = "NumberField";
 
-const cvaOptionCardLabel = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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"],
@@ -4037,9 +4023,10 @@ const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
-const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["flex", "grow-0"]);
-const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"], {
+const cvaOptionCardContent = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "items-center"] });
+const cvaOptionCardContainer = cssClassVarianceUtilities.cva({ base: ["flex", "grow-0"] });
+const cvaOptionCardTitle = cssClassVarianceUtilities.cva({
+    base: ["text-neutral-600"],
     variants: {
         layout: {
             default: ["text-lg", "line-clamp-2"],
@@ -4051,7 +4038,8 @@ const cvaOptionCardTitle = cssClassVarianceUtilities.cvaMerge(["text-neutral-600
         },
     },
 });
-const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge(["text-neutral-600", "text-sm"], {
+const cvaOptionCardText = cssClassVarianceUtilities.cva({
+    base: ["text-neutral-600", "text-sm"],
     variants: {
         type: {
             subheading: ["font-medium"],
@@ -4063,8 +4051,9 @@ const cvaOptionCardText = cssClassVarianceUtilities.cvaMerge(["text-neutral-600"
         },
     },
 });
-const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
-const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"], {
+const cvaInput = cssClassVarianceUtilities.cva({ base: ["peer", "absolute", "h-0", "w-0", "opacity-0"] });
+const cvaCustomImage = cssClassVarianceUtilities.cva({
+    base: ["text-neutral-400"],
     variants: {
         disabled: {
             true: ["!text-neutral-400"],
@@ -4072,7 +4061,8 @@ const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"],
         },
     },
 });
-const cvaTag = cssClassVarianceUtilities.cvaMerge([], {
+const cvaTag = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         layout: {
             default: ["absolute", "top-2", "right-2"],
@@ -4343,31 +4333,33 @@ const PhoneFieldWithController = ({ control, controllerProps, name, value, ref,
 };
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
-const cvaInputGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+const cvaInputGroup = cssClassVarianceUtilities.cva({
+    base: ["flex", "gap-2", "flex-col", "items-start"],
     variants: {
         layout: {
             inline: ["flex", "gap-3", "flex-row", "items-center"],
         },
     },
 });
-const cvaRadioItem = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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: [
@@ -4467,7 +4459,7 @@ const RadioGroupContext = react.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 (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : undefined, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -4531,15 +4523,9 @@ const useRadioItemChecked = (value) => {
     return radioGroupContext?.value === value;
 };
 
-const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-1",
-    "items-center",
-    "gap-4",
-    "max-sm:gap-2",
-    "border-transparent",
-    "rounded-md",
-]);
+const cvaTimeRange = cssClassVarianceUtilities.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.
@@ -4581,14 +4567,10 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
 };
 const DEFAULT_TIME = "12:00";
 
-const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge([
-    "grid",
-    "pb-4",
-    "gap-2",
-    "grid-cols-[60px_200px_60px_2fr]",
-    "max-sm:grid-cols-1",
-]);
-const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bold", "self-center"]);
+const cvaScheduleItem = cssClassVarianceUtilities.cva({
+    base: ["grid", "pb-4", "gap-2", "grid-cols-[60px_200px_60px_2fr]", "max-sm:grid-cols-1"],
+});
+const cvaScheduleItemText = cssClassVarianceUtilities.cva({ base: ["flex", "font-bold", "self-center"] });
 
 /**
  * Schedule renders a weekly time-range editor where each row represents a day with an active toggle,
@@ -4780,15 +4762,16 @@ const hasConsecutiveDays = (schedule) => {
     return schedule.every(({ day }, index) => day === days[index]);
 };
 
-const cvaSearch = cssClassVarianceUtilities.cvaMerge([
-    "shadow-none",
-    "component-search-border",
-    "component-search-background",
-    "hover:component-search-background",
-    "hover:component-search-focus-hover",
-    "transition-all",
-    "duration-300",
-], {
+const cvaSearch = cssClassVarianceUtilities.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: {
@@ -5246,9 +5229,10 @@ const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInva
     return (jsxRuntime.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: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
-const cvaToggleSwitchWrapper = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
-const cvaToggleSwitchInput = cssClassVarianceUtilities.cvaMerge(["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"]);
-const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center", "shrink-0", "rounded-full", "transition-colors"], {
+const cvaToggleSwitchWrapper = cssClassVarianceUtilities.cva({ base: ["grid", "grid-cols-[auto]", "items-center"] });
+const cvaToggleSwitchInput = cssClassVarianceUtilities.cva({ base: ["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"] });
+const cvaToggleSwitchTrack = cssClassVarianceUtilities.cva({
+    base: ["items-center", "shrink-0", "rounded-full", "transition-colors"],
     variants: {
         size: {
             small: ["w-5", "p-0.5"],
@@ -5287,7 +5271,8 @@ const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center",
         disabled: false,
     },
 });
-const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cssClassVarianceUtilities.cva({
+    base: ["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"],
     variants: {
         toggled: {
             true: "",
@@ -5485,16 +5470,9 @@ const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-t
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
-const cvaUploadInputField = cssClassVarianceUtilities.cvaMerge([
-    "px-0",
-    "py-0",
-    "file:w-0",
-    "file:h-0",
-    "file:invisible",
-    "file:px-0",
-    "dark:text-neutral-400",
-    "self-center",
-]);
+const cvaUploadInputField = cssClassVarianceUtilities.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"`