@trackunit/react-form-components 1.8.116 → 1.8.119

package/index.esm.js

@@ -274,7 +274,7 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
 /**
  * Renders the addon element if provided
  */
-const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) => {
+const AddonRenderer = ({ addon, "data-testid": dataTestId, className, fieldSize, position, }) => {
     if (!addon) {
         return null;
     }
@@ -315,7 +315,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -354,7 +354,7 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className, onCl
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
+    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
@@ -362,7 +362,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
     if (!genericAction) {
         return null;
     }
-    return (jsx(Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { dataTestId: "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
+    return (jsx(Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { "data-testid": "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
 };
 
 /**
@@ -382,7 +382,7 @@ const InputLockReasonTooltip = ({ reasons, kind }) => {
 };
 
 // Renders a tooltip for lock reasons if the prop is an object
-const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
+const LockReasonRenderer = ({ lockReason, "data-testid": dataTestId, }) => {
     // Only render if lockReason is an object
     if (typeof lockReason !== "object") {
         return null;
@@ -391,7 +391,7 @@ const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
 };
 
 // Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = forwardRef(({ prefix, type, dataTestId, disabled }, ref) => {
+const PrefixRenderer = forwardRef(({ prefix, type, "data-testid": dataTestId, disabled }, ref) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsx(Icon, { name: "AtSymbol", size: "small" }),
@@ -407,7 +407,7 @@ const PrefixRenderer = forwardRef(({ prefix, type, dataTestId, disabled }, ref)
 });
 
 // Renders the suffix element or shows an icon if invalid/warning
-const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, }) => {
+const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestId, disabled, }) => {
     // If user provided suffix that's not identical to addonBefore, render it
     if (suffix) {
         return (jsx("div", { className: cvaInputSuffix({
@@ -433,7 +433,7 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, })
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
-const BaseInput = ({ className, isInvalid = false, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
+const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
@@ -472,13 +472,13 @@ const BaseInput = ({ className, isInvalid = false, dataTestId, prefix, suffix, a
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsx("input", { "aria-required": required, className: cvaInputElement({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsx(AddonRenderer, { addon: addonBefore, "data-testid": dataTestId, fieldSize: fieldSize, position: "before" }), jsx(PrefixRenderer, { "data-testid": dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsx("input", { "aria-required": required, className: cvaInputElement({
                     size: fieldSize,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
                 }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, required: required, style: {
                     paddingLeft: `calc(var(--before-width, 0px) + ${themeSpacing[2]})`,
                     paddingRight: `calc(var(--after-width, 0px) + ${themeSpacing[2]})`,
-                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
+                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsx(LockReasonRenderer, { "data-testid": dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { "data-testid": dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { "data-testid": dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonRenderer, { addon: addonAfter, "data-testid": dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
 
@@ -501,7 +501,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, ...rest }) => {
         : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx(BaseInput, { defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value), ...rest }));
+    return (jsx(BaseInput, { defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsx(Icon, { "data-testid": "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value), ...rest }));
 };
 
 /**
@@ -609,7 +609,7 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
-const PhoneBaseInput = ({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }) => {
+const PhoneBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }) => {
     const [innerValue, setInnerValue] = useState(() => {
         return (value?.toString() || defaultValue?.toString()) ?? "";
     });
@@ -651,7 +651,7 @@ const PhoneBaseInput = ({ dataTestId, isInvalid, disabled = false, value, defaul
         onFocus?.(event);
         fieldIsFocused.current = true;
     }, [onFocus]);
-    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize ?? undefined, type: "PHONE_NUMBER", value: value?.toString() || "" })) : null, dataTestId: 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, ...rest }) }));
+    return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId ? `${dataTestId}-container` : null, children: jsx(BaseInput, { actions: !disableAction && innerValue && innerValue.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-phoneIcon` : undefined, disabled: isInvalid, size: fieldSize ?? undefined, 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, ...rest }) }));
 };
 
 const cvaTextAreaBaseInput = cvaMerge([
@@ -690,7 +690,7 @@ const cvaTextAreaBaseInput = cvaMerge([
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className, ref, ...rest }) => {
+const TextAreaBaseInput = ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, "data-testid": dataTestId, isInvalid, className, ref, ...rest }) => {
     return (jsx("textarea", { className: cvaTextAreaBaseInput({ className, resize, invalid: isInvalid, disabled }), defaultValue: defaultValue, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, ref: ref, required: required, rows: rows, tabIndex: tabIndex, value: value, ...rest, "data-testid": dataTestId, onChange: onChange }));
 };
 
@@ -865,7 +865,7 @@ const cvaLabel = cvaMerge([
  * @param {CheckIconProps} props - The props for the CheckIcon component
  * @returns {ReactElement} CheckIcon component
  */
-const CheckIcon = ({ className, dataTestId }) => {
+const CheckIcon = ({ className, "data-testid": dataTestId }) => {
     return (jsx("svg", { className: className, "data-testid": dataTestId, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m2 5.5 2 2L8.5 3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
@@ -990,7 +990,7 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
  * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  * @param {CheckboxProps} props - The props for the Checkbox component
  */
-const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ref, ...rest }) => {
+const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ref, ...rest }) => {
     const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = useRef(null);
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = useIsTextTruncated();
@@ -1029,8 +1029,8 @@ Checkbox.displayName = "Checkbox";
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
             ? cloneElement(optionPrefix, {
                 className: "mr-1 flex items-center",
                 size: "medium",
@@ -1043,8 +1043,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTes
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+    return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
@@ -1131,7 +1131,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, d
                     ...acc,
                     elements: [
                         ...acc.elements,
-                        jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", dataTestId: `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
+                        jsx(TagWithWidth, { className: "inline-flex shrink-0", color: item.disabled ? "neutral" : "white", "data-testid": `${item.text}-tag`, disabled: disabled, icon: item.Icon, onClose: e => {
                                 e.stopPropagation();
                                 item.onClick();
                             }, onWidthKnown: onWidthKnownHandler, children: item.text }, item.text + index),
@@ -1165,7 +1165,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 6, postFix, preFix, d
  * @param {ReactNode} prefix a prefix element
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
-const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
+const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEnabled, "data-testid": dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }) => {
     const [t] = useTranslation();
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = useMemo(() => {
@@ -1200,13 +1200,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                                 })
                                 : [], postFix: searchInput, preFix: placeholderElement ? jsx("span", { className: "absolute", children: placeholderElement }) : null, width: "100%" })) : (jsxs(Fragment, { children: [tags
                                     ? tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
-                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
+                                        return (jsx(Tag, { className: "inline-flex shrink-0", color: disabled ? "unknown" : "primary", "data-testid": tagProps.children ? `${tagProps.children.toString()}-tag` : undefined, onClose: e => {
                                                 e.stopPropagation();
                                                 setMenuIsEnabled(false);
                                                 tagProps.removeProps.onClick && tagProps.removeProps.onClick(e);
                                             }, children: tagProps.children }, tagProps.children?.toString()));
                                     })
-                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
+                                    : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", "data-testid": "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput, placeholderElement] })) }));
                 }
                 return (jsx(Fragment, { children: jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
             },
@@ -1271,7 +1271,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                         ...props.innerProps,
                         role: "option",
                         onClick: () => { },
-                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, dataTestId: typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
+                    }, children: props.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof props.label === "string" ? props.label : undefined, disabled: disabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof props.label === "string" ? props.label : undefined, disabled: disabled || props.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(props.data), optionPrefix: getOptionPrefix?.(props.data) })) }));
             },
             ...componentsProps,
         };
@@ -1400,7 +1400,7 @@ const useCustomStyles = ({ refContainer, maxSelectedDisplayCount, styles, disabl
  * @param {SelectProps} props - The props for the Select component
  * @returns {UseSelectProps} Select component
  */
-const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize = "medium", ...props }) => {
+const useSelect = ({ id, className, "data-testid": dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix = "", onMenuOpen, onMenuClose, maxSelectedDisplayCount = undefined, isClearable = false, isSearchable = true, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize = "medium", ...props }) => {
     const refContainer = useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
@@ -1416,7 +1416,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, maxMen
         disabled: Boolean(disabled),
         readOnly: Boolean(props.readOnly),
         setMenuIsEnabled,
-        dataTestId,
+        "data-testid": dataTestId,
         maxSelectedDisplayCount,
         prefix,
         hasError,
@@ -1458,7 +1458,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  * @returns {ReactElement} Select component
  */
 const BaseSelect = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
+    const { id, "data-testid": dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactSelectProps = useMemo(() => ({
         value,
@@ -1533,7 +1533,7 @@ BaseSelect.displayName = "BaseSelect";
  * @returns {ReactElement} CreatableSelect component
  */
 const CreatableSelect = (props) => {
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
+    const { id, "data-testid": dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "creatableSelect", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactCreatableSelectProps = useMemo(() => ({
         value,
@@ -1602,7 +1602,7 @@ CreatableSelect.displayName = "CreatableSelect";
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, }) => {
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
 };
 
@@ -1636,13 +1636,13 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
+const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, }) => {
     const [t] = useTranslation();
     const validationStateIcon = useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] }), tip ? (jsx(Tooltip, { className: "ml-1", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -1650,9 +1650,9 @@ const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className,
  *
  * _**Do use**_ the CheckboxField for boolean input.
  */
-const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
+const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, "data-testid": dataTestId, checkboxLabel, onChange, ref, ...rest }) => {
     const htmlForId = id ? id : "checkboxField-" + uuidv4();
-    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(Checkbox, { checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
+    return (jsx(FormGroup, { className: "flex flex-col gap-1", "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(Checkbox, { checked: checked, className: className, "data-testid": dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref, ...rest }) }));
 };
 CheckboxField.displayName = "CheckboxField";
 
@@ -1730,7 +1730,7 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
+const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
@@ -1755,7 +1755,7 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
         setRenderAsInvalid(!!errorType);
         onBlur?.(event);
     }, [errorType, onBlur]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
@@ -1774,10 +1774,10 @@ ColorField.displayName = "ColorField";
  *
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ref, ...rest }) => {
+const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlForId = id ? id : "dateField-" + uuidv4();
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(DateBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 DateField.displayName = "DateField";
 
@@ -1845,7 +1845,7 @@ const DropZoneDefaultLabel = () => (jsx(Trans, { components: {
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {ReactElement} DropZone component
  */
-const DropZone = ({ className, dataTestId, filesSelected, label = jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
+const DropZone = ({ className, "data-testid": dataTestId, filesSelected, label = jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept, multiple = false, ...rest }) => {
     const [dragActive, setDragActive] = useState(false);
     const [fileDropped, setFileDropped] = useState(false);
     const [t] = useTranslation();
@@ -1938,7 +1938,7 @@ const validateEmailId = (emailId, required) => {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
+const EmailBaseInput = ({ fieldSize = "medium", disabled = false, "data-testid": dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
     const [email, setEmail] = useState(rest.value?.toString() || rest.defaultValue?.toString());
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -1949,7 +1949,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { "data-testid": dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 };
 
 /**
@@ -1957,7 +1957,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
  * EmailField validates that user enters a valid email address.
  *
  */
-const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
+const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
     const htmlForId = id ? id : "emailField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -1978,7 +1978,7 @@ const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(EmailBaseInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -1995,7 +1995,7 @@ function isWritableRef(r) {
  * - passes through all remaining BaseSelect props with isMulti=true
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...selectProps } = props;
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = useRef(null);
     // Bridge external ref (supports both callback and object refs)
@@ -2028,7 +2028,7 @@ const FormFieldSelectAdapterMulti = (props) => {
         defaultValue,
         onChange: next => onChange?.(next),
     };
-    return (jsxs(FormGroup, { className: className, dataTestId: dataTestId, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
+    return (jsxs(FormGroup, { className: className, "data-testid": dataTestId, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))
             : false, tip: tip, children: [jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
@@ -2106,7 +2106,7 @@ const validateNumber = (number, required = false, min, max) => {
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
     const htmlForId = id ? id : "numberField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -2148,7 +2148,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(NumberBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 NumberField.displayName = "NumberField";
 
@@ -2231,7 +2231,7 @@ const cvaTag = cvaMerge([], {
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, "data-testid": dataTestId, customImage, layout = "default", ref, tagProps, ...rest }) => {
     const htmlForId = id ?? "option-card-" + uuidv4();
     const subContent = useMemo(() => (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "subheading", disabled }), type: "span", children: subheading })) : null, description ? (jsx(Text, { align: "center", className: cvaOptionCardText({ type: "description", disabled }), type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
     return (jsx(Tooltip, { className: "w-fit", disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: cvaInput(), "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
@@ -2257,13 +2257,13 @@ const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
+const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "passwordField-" + uuidv4();
     const handleChange = useCallback((event) => {
         onChange?.(event);
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(PasswordBaseInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, "data-testid": dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
 };
 PasswordField.displayName = "PasswordField";
 
@@ -2332,7 +2332,7 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
-const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
+const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "phoneField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -2366,7 +2366,7 @@ const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value,
         }
         onBlur?.(event);
     }, [errorMessage, onBlur, rest.required]);
-    return (jsx(FormGroup, { className: className, dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
+    return (jsx(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(PhoneBaseInput, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
 };
 PhoneField.displayName = "PhoneField";
 
@@ -2464,8 +2464,8 @@ const RadioGroupContext = createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }) => {
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -2482,7 +2482,7 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
+const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
@@ -2496,10 +2496,10 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: groupCtx?.isInvalid,
                         disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cvaMerge([
@@ -2518,7 +2518,7 @@ const cvaTimeRange = cvaMerge([
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
+const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, }) => {
     const [timeRange, setTimeRange] = useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
@@ -2530,7 +2530,7 @@ const TimeRange = ({ id, className, dataTestId, children, range, onChange, disab
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { dataTestId: `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { dataTestId: `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, children: [jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
 };
 const DEFAULT_TIME = "12:00";
 
@@ -2549,7 +2549,7 @@ const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
+const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], }) => {
     const [t] = useTranslation();
     const onRangeChange = (range, index) => {
         const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
@@ -2582,7 +2582,7 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
         onChange(newSchedule);
     };
     return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
-            return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, dataTestId: `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, dataTestId: `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { dataTestId: `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
+            return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
 
@@ -2739,9 +2739,9 @@ const cvaSearch = cvaMerge([
  *
  * @param {SearchProps} props - The props for the Search component
  */
-const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
+const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
     const { t } = useTranslation();
-    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsx(Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
+    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsx(Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
@@ -2752,7 +2752,7 @@ Search.displayName = "Search";
 /**
  *
  */
-const FormFieldSelectAdapter = ({ className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }) => {
+const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }) => {
     const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value || defaultValue);
     useEffect(() => {
@@ -2785,7 +2785,7 @@ const FormFieldSelectAdapter = ({ className, dataTestId, helpText, helpAddon, ti
     return (jsxs(FormGroup, { isInvalid: renderAsInvalid,
         htmlFor,
         className,
-        dataTestId,
+        "data-testid": dataTestId,
         helpText: (renderAsInvalid && errorMessage) || helpText,
         helpAddon,
         tip,
@@ -2852,7 +2852,7 @@ const TextLengthIndicator = ({ length, maxLength }) => {
 /**
  *
  */
-const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
+const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
     const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + uuidv4();
@@ -2862,15 +2862,15 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { className: twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", dataTestId: dataTestId, onChange: handleChange }) }));
+    return (jsx(FormGroup, { className: twMerge(className, "grid", "grid-rows-[auto_1fr_auto]"), "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextAreaBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextAreaField.displayName = "TextAreaField";
 
 /**
  * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
  */
-const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, isWarning, ref, ...rest }) => {
+const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, ...rest }) => {
     const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "textField-" + uuidv4();
@@ -2880,8 +2880,8 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
-            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId, onChange: handleChange }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon ||
+            (typeof maxLength === "number" && jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength })), helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(TextBaseInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, "data-testid": dataTestId, onChange: handleChange }) }));
 };
 TextField.displayName = "TextField";
 
@@ -2891,10 +2891,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuidv4();
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, 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"]);
@@ -2979,9 +2979,17 @@ const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "asp
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, className, dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
     const localInputRef = useRef(null);
     const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
+    // Extract data attributes to apply to wrapper
+    const dataAttributes = useMemo(() => Object.keys(rest).reduce((acc, key) => {
+        if (key.startsWith("data-")) {
+            acc[key] = rest[key];
+            delete rest[key];
+        }
+        return acc;
+    }, {}), [rest]);
     const handleWrapperClick = (e) => {
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
         const isFromLabel = e.target instanceof Element && e.target.closest("label");
@@ -3004,7 +3012,7 @@ const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, cla
         e.stopPropagation();
         onChange?.(!toggled, e);
     };
-    return (jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, children: jsxs("span", { className: cvaToggleSwitchTrack({
+    return (jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, ...dataAttributes, children: jsxs("span", { className: cvaToggleSwitchTrack({
                 toggled,
                 disabled: disabled || readOnly,
                 size,
@@ -3024,13 +3032,13 @@ ToggleSwitch.displayName = "ToggleSwitch";
  * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
  * @returns {ReactElement} ToggleSwitchOption component
  */
-const ToggleSwitchOption = ({ label, className, description, suffix, id, dataTestId = "toggle-switch-option", ...rest }) => {
+const ToggleSwitchOption = ({ label, className, description, suffix, id, "data-testid": dataTestId = "toggle-switch-option", ...rest }) => {
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
-    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsx(ToggleSwitch, { dataTestId: `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsx(ToggleSwitch, { "data-testid": `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         disabled: rest.disabled || rest.readOnly,
                         className: "select-none",
-                    }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));
+                    }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));
 };
 ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
@@ -3062,10 +3070,10 @@ UploadInput.displayName = "UploadInput";
 /**
  * Upload fields enable the user to upload Files.
  */
-const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ref, ...rest }) => {
+const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, "data-testid": dataTestId, ref, ...rest }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "uploadField-" + uuidv4();
-    return (jsx(FormGroup, { dataTestId: `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": `${dataTestId}-FormGroup`, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(UploadInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 UploadField.displayName = "UploadField";
 
@@ -3105,10 +3113,10 @@ const validateUrl = (url, required) => {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-const UrlBaseInput = ({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
+const UrlBaseInput = ({ "data-testid": dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
     const [url, setUrl] = useState(value?.toString() || defaultValue?.toString());
     const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
-    return (jsx(BaseInput, { dataTestId: dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize ?? undefined, type: "WEB_ADDRESS", value: url })) }));
+    return (jsx(BaseInput, { "data-testid": dataTestId ? `${dataTestId}-url-input` : undefined, disabled: disabled, id: "url-input", isInvalid: renderAsInvalid, onChange: e => setUrl(e.target.value), placeholder: rest.placeholder || "https://www.example.com", ref: ref, type: "url", value: url, ...rest, actions: !disableAction && (jsx(ActionButton, { "data-testid": (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", disabled: renderAsInvalid || Boolean(disabled) || disableAction, size: fieldSize ?? undefined, type: "WEB_ADDRESS", value: url })) }));
 };
 
 /**
@@ -3116,7 +3124,7 @@ const UrlBaseInput = ({ dataTestId, isInvalid, disabled = false, fieldSize = "me
  * UrlField validates that user enters a valid web address.
  *
  */
-const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
+const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "urlField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -3131,7 +3139,7 @@ const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className
         setRenderAsInvalid(!!validateUrl(newValue, rest.required));
         onBlur?.(event);
     }, [onBlur, rest.required]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(UrlBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: renderAsInvalid ? error : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsx(UrlBaseInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 UrlField.displayName = "UrlField";