@trackunit/react-form-components 1.3.28 → 1.3.33

package/index.esm.js

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
 import * as React from 'react';
-import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, cloneElement, useEffect, useContext } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, cloneElement, useEffect, useContext, useLayoutEffect } from 'react';
 import { titleCase } from 'string-ts';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
@@ -130,7 +130,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
  *
  * @param {ActionButtonProps} props - The props for the ActionButton component
- * @returns {JSX.Element} ActionButton component
+ * @returns {ReactElement} ActionButton component
  */
 const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
     const [, copyToClipboard] = useCopyToClipboard();
@@ -419,7 +419,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 TextInput, NumberInput, PasswordInput, etc.
  */
-const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ...rest }, ref) => {
+const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }) => {
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
@@ -445,7 +445,7 @@ const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix
                     paddingLeft: beforeContainerWidth ? `calc(${beforeContainerWidth}px + ${themeSpacing[2]})` : undefined,
                     paddingRight: afterContainerWidth ? `calc(${afterContainerWidth}px + ${themeSpacing[2]})` : undefined,
                 }, 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: rest.readOnly && !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" })] })] }));
-});
+};
 BaseInput.displayName = "BaseInput";
 
 /**
@@ -513,7 +513,7 @@ const cvaLabel = cvaMerge([
  * The CheckIcon component is used by the checkbox to display the checked state.
  *
  * @param {CheckIconProps} props - The props for the CheckIcon component
- * @returns {JSX.Element} CheckIcon component
+ * @returns {ReactElement} CheckIcon component
  */
 const CheckIcon = ({ className, 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" }) }));
@@ -623,7 +623,7 @@ const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
  *
  * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
- * @returns {JSX.Element} IndeterminateIcon component
+ * @returns {ReactElement} IndeterminateIcon component
  */
 const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3 5h4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 
@@ -639,9 +639,8 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
  * @description A reference to the input element is provided as the `ref` prop.
  * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  * @param {CheckboxProps} props - The props for the Checkbox component
- * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
+const Checkbox = ({ className, 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();
@@ -664,7 +663,7 @@ const Checkbox = forwardRef(({ className, dataTestId = "checkbox", onChange, che
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
                     }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
-});
+};
 Checkbox.displayName = "Checkbox";
 
 /**
@@ -672,7 +671,7 @@ Checkbox.displayName = "Checkbox";
  * This component is **not used directly**, but is part of the FormGroup and Field components.
  *
  * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
+ * @returns {ReactElement} Label component
  */
 const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
     return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", children: children }));
@@ -706,11 +705,11 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * Besides a label the component supplies an optional Tooltip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
- * @returns {JSX.Element} FormGroup component
+ * @returns {ReactElement} FormGroup component
  */
 const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, required = false, }) => {
     const [t] = useTranslation();
-    const validationStateIcon = React.useMemo(() => {
+    const validationStateIcon = useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
@@ -722,10 +721,10 @@ const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className,
  *
  * _**Do use**_ the CheckboxField for boolean input.
  */
-const CheckboxField = forwardRef(({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange, ...rest }, ref) => {
+const CheckboxField = ({ label, id, tip, helpText, helpAddon, isInvalid, className, checked, 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 }) }));
-});
+};
 CheckboxField.displayName = "CheckboxField";
 
 /**
@@ -806,37 +805,37 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
-    const innerRef = React__default.useRef(null);
-    React__default.useImperativeHandle(ref, () => innerRef.current, []);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
     // Internal state for color value
     const [innerValue, setInnerValue] = useState(propValue || defaultValue || "");
     const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
     const errorType = useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
     const error = useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
-    const handleBlur = useCallback(event => {
-        const newValue = event.target.value;
-        setInnerValue(newValue);
-        setRenderAsInvalid(!!errorType);
-        onBlur?.(event);
-    }, [errorType, onBlur]);
-    const handleChange = useCallback((event) => {
+    const handleInputChange = useCallback((event) => {
         const newValue = event.target.value;
         setInnerValue(newValue);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
+    const handleBlur = useCallback(event => {
+        const newValue = event.target.value;
+        setInnerValue(newValue);
+        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({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
                         readOnly: renderAsReadonly,
                         disabled: renderAsDisabled,
                         className: "px-1 focus-visible:outline-none",
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 
@@ -845,18 +844,23 @@ ColorField.displayName = "ColorField";
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-const DateInput = forwardRef(({ min, max, defaultValue, value, ...rest }, ref) => {
+/**
+ *
+ */
+const DateInput = ({ min, max, defaultValue, value, ref, ...rest }) => {
     const formatDateToInputString = (date) => date instanceof Date
         ? Temporal.PlainDateTime.from({
             year: date.getFullYear(),
             month: date.getMonth() + 1,
             day: date.getDate(),
-        }).toPlainDate().toString()
+        })
+            .toPlainDate()
+            .toString()
         : 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 }));
-});
+};
 DateInput.displayName = "DateInput";
 
 /**
@@ -866,11 +870,11 @@ DateInput.displayName = "DateInput";
  *
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
-const DateField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId, ...rest }, ref) => {
+const DateField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, 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(DateInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, ...rest, className: className, dataTestId: dataTestId }) }));
-});
+};
 DateField.displayName = "DateField";
 
 const cvaDropZone = cvaMerge([
@@ -929,7 +933,7 @@ const DropZoneDefaultLabel = () => (jsx(Trans, { components: {
  * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
  * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {JSX.Element} 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 [dragActive, setDragActive] = useState(false);
@@ -1024,7 +1028,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 EmailInput = forwardRef(({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ...rest }, ref) => {
+const EmailInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
     const [email, setEmail] = useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
@@ -1036,7 +1040,7 @@ const EmailInput = forwardRef(({ fieldSize = "medium", disabled = false, dataTes
     }, [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, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
-});
+};
 EmailInput.displayName = "EmailInput";
 
 /**
@@ -1044,7 +1048,7 @@ EmailInput.displayName = "EmailInput";
  * EmailField validates that user enters a valid email address.
  *
  */
-const EmailField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ...rest }, ref) => {
+const EmailField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value, onChange, onBlur, isInvalid = false, ref, ...rest }) => {
     const htmlForId = id ? id : "emailField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -1066,7 +1070,7 @@ const EmailField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
         }
     }, [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(EmailInput, { "aria-labelledby": htmlForId + "-label", defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
-});
+};
 EmailField.displayName = "EmailField";
 
 const isNumberValid = (number) => {
@@ -1124,9 +1128,9 @@ const validateNumber = (number, required = false, min, max) => {
  *
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
-const NumberInput = forwardRef((props, ref) => {
-    return jsx(BaseInput, { ref: ref, type: "number", ...props, value: props.value });
-});
+const NumberInput = ({ ref, ...rest }) => {
+    return jsx(BaseInput, { ref: ref, type: "number", ...rest, value: rest.value });
+};
 NumberInput.displayName = "NumberInput";
 
 /**
@@ -1136,7 +1140,7 @@ NumberInput.displayName = "NumberInput";
  *
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
-const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ...rest }, ref) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId, defaultValue, onBlur, onChange, ref, ...rest }) => {
     const htmlForId = id ? id : "numberField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -1175,7 +1179,7 @@ const NumberField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAd
         }
     }, [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(NumberInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId }) }));
-});
+};
 NumberField.displayName = "NumberField";
 
 const cvaOptionCardLabel = cvaMerge([
@@ -1207,12 +1211,12 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = forwardRef(({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ...rest }, ref) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ref, ...rest }) => {
     const htmlForId = id ?? "option-card-" + uuidv4();
     return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
                         ? cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
                         : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
-});
+};
 OptionCard.displayName = "OptionCard";
 
 /**
@@ -1220,10 +1224,10 @@ OptionCard.displayName = "OptionCard";
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordInput = forwardRef((props, ref) => {
+const PasswordInput = ({ ref, fieldSize, ...rest }) => {
     const [showPassword, setShowPassword] = useState(false);
-    return (jsx(BaseInput, { ref: ref, ...props, actions: jsx("div", { className: cvaActionContainer({ size: props.fieldSize }), children: jsx(IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
-});
+    return (jsx(BaseInput, { ref: ref, ...rest, actions: jsx("div", { className: cvaActionContainer({ size: fieldSize }), children: jsx(IconButton, { className: cvaActionButton({ size: fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" }));
+};
 PasswordInput.displayName = "PasswordInput";
 
 /**
@@ -1233,14 +1237,14 @@ PasswordInput.displayName = "PasswordInput";
  *
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
-const PasswordField = forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
+const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, 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(PasswordInput, { ...rest, "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value }) }));
-});
+};
 PasswordField.displayName = "PasswordField";
 
 /**
@@ -1305,9 +1309,8 @@ const DEFAULT_COUNTRY_CODE = undefined;
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneInput component.
  */
-const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, readOnly, onFocus, onBlur, name, ...rest }, ref) => {
+const PhoneInput = ({ 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()) ?? "";
     });
@@ -1320,8 +1323,7 @@ const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value,
     }, []);
     const handleChange = useCallback(event => {
         const newValue = event.target.value;
-        const noneFormattedValue = parseIncompletePhoneNumber(newValue);
-        event.target.value = noneFormattedValue;
+        event.target.value = parseIncompletePhoneNumber(newValue);
         onChange?.(event);
         setInnerValue(newValue);
         determineCountry(newValue);
@@ -1351,7 +1353,7 @@ const PhoneInput = forwardRef(({ dataTestId, isInvalid, disabled = false, value,
         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 }) }));
-});
+};
 PhoneInput.displayName = "PhoneInput";
 
 /**
@@ -1418,9 +1420,8 @@ const phoneErrorMessage = (phoneNumber, required) => {
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
  */
-const PhoneField = forwardRef(({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ...rest }, ref) => {
+const PhoneField = ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, name, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "phoneField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -1453,17 +1454,16 @@ const PhoneField = forwardRef(({ label, id, tip, helpText, isInvalid, errorMessa
         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(PhoneInput, { "aria-labelledby": htmlForId + "-label", dataTestId: dataTestId, defaultValue: defaultValue, id: htmlForId, isInvalid: renderAsInvalid, name: name, onBlur: handleBlur, ref: ref, value: value, ...rest }) }));
-});
+};
 PhoneField.displayName = "PhoneField";
 
 /**
  * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
  *
- * @returns {JSX.Element} - The PhoneFieldWithController component.
  */
-const PhoneFieldWithController = forwardRef(({ control, controllerProps, name, value, ...rest }, ref) => {
+const PhoneFieldWithController = ({ control, controllerProps, name, value, ref, ...rest }) => {
     return (jsx(Controller, { control: control, defaultValue: value, name: name, ...controllerProps, render: ({ field }) => jsx(PhoneField, { ...rest, ...field, ref: ref }) }));
-});
+};
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
 const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
@@ -1549,7 +1549,7 @@ const RadioGroupContext = React.createContext(null);
  * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
- * @returns {JSX.Element} 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: {
@@ -1567,7 +1567,7 @@ RadioGroup.displayName = "RadioGroup";
  * The RadioItem component.
  *
  * @param {RadioItemProps} props - The props for the RadioItem component
- * @returns {JSX.Element} RadioItem component
+ * @returns {ReactElement} RadioItem component
  */
 const RadioItem = ({ label, value, dataTestId, className, description, suffix, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
@@ -1600,10 +1600,10 @@ const cvaTimeRange = cvaMerge([
  * TimeRange is used to create a time range entry.
  *
  * @param {TimeRangeProps} props - The props for the TimeRange component
- * @returns {JSX.Element} TimeRange component
+ * @returns {ReactElement} TimeRange component
  */
 const TimeRange = ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }) => {
-    const [timeRange, setTimeRange] = React__default.useState(range ?? {
+    const [timeRange, setTimeRange] = useState(range ?? {
         timeFrom: "",
         timeTo: "",
     });
@@ -1630,7 +1630,7 @@ const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
  * Schedule is used to create a time range entries.
  *
  * @param {ScheduleProps} props - The props for the Schedule component
- * @returns {JSX.Element} Schedule component
+ * @returns {ReactElement} Schedule component
  */
 const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = [] }) => {
     const [t] = useTranslation();
@@ -1786,7 +1786,7 @@ const hasConsecutiveDays = (schedule) => {
  *
  * NOTE: If shown with a label, please use the `TextField` component instead.
  */
-const TextInput = forwardRef((props, ref) => (jsx(BaseInput, { ref: ref, type: "text", ...props })));
+const TextInput = ({ ref, ...rest }) => jsx(BaseInput, { ref: ref, type: "text", ...rest });
 TextInput.displayName = "TextInput";
 
 const cvaSearch = cvaMerge([
@@ -1817,15 +1817,14 @@ const cvaSearch = cvaMerge([
  * The Search component is used to render a search input field.
  *
  * @param {SearchProps} props - The props for the Search component
- * @returns {JSX.Element} Search component
  */
-const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", xMarkRef, ...rest }, ref) => {
+const Search = ({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
     return (jsx(TextInput, { ...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, 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();
             }, ref: xMarkRef, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
-});
+};
 Search.displayName = "Search";
 
 const cvaSelect = cvaMerge([
@@ -1929,7 +1928,7 @@ const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {JSX.Element} SingleSelectMenuItem
+ * @returns {ReactElement} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
     return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
@@ -1938,7 +1937,7 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {JSX.Element} multi select menu item
+ * @returns {ReactElement} multi select menu item
  */
 const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
     return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: e => {
@@ -1954,11 +1953,11 @@ const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, o
  * Used in the select component.
  *
  * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} TagWithWidth component
+ * @returns {ReactElement} TagWithWidth component
  */
 const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
-    const ref = React__default.useRef(null);
-    React__default.useLayoutEffect(() => {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
         onWidthKnown && onWidthKnown({ width: ref.current?.offsetWidth || 0 });
     }, [ref, onWidthKnown]);
     return (jsx(Tag, { ref: ref, ...rest, children: children }));
@@ -1968,16 +1967,16 @@ const TagWithWidth = ({ onWidthKnown, children, ...rest }) => {
  * TagsContainer component to display tags in limited space when children can't fit space it displays counter
  *
  * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {JSX.Element} TagsContainer
+ * @returns {ReactElement} TagsContainer
  */
 const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled }) => {
-    const [isReady, setIsReady] = React__default.useState(false);
-    const [counterWidth, setCounterWidth] = React__default.useState(0);
-    const containerRef = React__default.useRef(null);
-    const availableWidth = React__default.useRef();
-    const childrenWidth = React__default.useRef([]);
+    const [isReady, setIsReady] = useState(false);
+    const [counterWidth, setCounterWidth] = useState(0);
+    const containerRef = useRef(null);
+    const availableWidth = useRef(undefined);
+    const childrenWidth = useRef([]);
     const itemsCount = items.length;
-    React__default.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         availableWidth.current = containerRef.current?.offsetWidth || 0;
     }, [containerRef]);
     const onWidthKnownHandler = ({ width: reportedWidth }) => {
@@ -2033,12 +2032,12 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
  * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
  * @param {boolean} disabled decide to override disabled variant
  * @param {boolean} menuIsOpen menu is open state
- * @param {MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {RefObject<boolean>} refMenuIsEnabled a flag to block menu from open
  * @param {string} dataTestId a test id
  * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @param {ReactElement} dropdownIcon an custom dropdown icon
  * @param {boolean} hasError decide to override hasError variant
- * @param {JSX.Element} prefix a prefix element
+ * @param {ReactElement} 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, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }) => {
@@ -2079,7 +2078,7 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, refMenuIsEna
                                     })
                                     : null, tags && tags.length > maxSelectedDisplayCount ? (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })) : null, searchInput] })) }));
                 }
-                return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }));
+                return (jsx(Fragment, { children: jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }) }));
             },
             LoadingIndicator: () => {
                 return jsx(Spinner, { centering: "vertically", className: "mr-2", size: "small" });
@@ -2261,8 +2260,8 @@ const useCustomStyles = ({ refContainer, refPrefix, maxSelectedDisplayCount, sty
  * @returns {UseSelectProps} Select component
  */
 const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdownIcon, 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, fieldSize = "medium", ...props }) => {
-    const refContainer = React__default.useRef(null);
-    const refPrefix = React__default.useRef(null);
+    const refContainer = useRef(document.createElement("div"));
+    const refPrefix = useRef(document.createElement("div"));
     const { customStyles } = useCustomStyles({
         refContainer,
         refPrefix,
@@ -2271,8 +2270,8 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
         disabled: Boolean(disabled),
         fieldSize,
     });
-    const [menuIsOpen, setMenuIsOpen] = React__default.useState(props.menuIsOpen ?? false);
-    const refMenuIsEnabled = React__default.useRef(true);
+    const [menuIsOpen, setMenuIsOpen] = useState(props.menuIsOpen ?? false);
+    const refMenuIsEnabled = useRef(true);
     const customComponents = useCustomComponents({
         componentsProps: components,
         disabled: Boolean(disabled),
@@ -2316,7 +2315,7 @@ const useSelect = ({ id, className, dataTestId = "select", prefix, async, dropdo
  * CreatableSelects are input components used to choose a value from a set.
  *
  * @param {CreatableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
+ * @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;
@@ -2388,7 +2387,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  * Selects are input components used to choose a value from a set.
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {JSX.Element} Select component
+ * @returns {ReactElement} Select component
  */
 const Select = (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 = !disabled, hideSelectedOptions = false, } = props;
@@ -2459,7 +2458,10 @@ const Select = (props) => {
 };
 Select.displayName = "Select";
 
-const FormFieldSelectAdapter = forwardRef(({ className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ...rest }, ref) => {
+/**
+ *
+ */
+const FormFieldSelectAdapter = ({ className, 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(() => {
@@ -2513,7 +2515,7 @@ const FormFieldSelectAdapter = forwardRef(({ className, dataTestId, helpText, he
                 value: selectedOption,
                 defaultValue: selectedOption,
             })] }));
-});
+};
 FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
 
 /**
@@ -2524,12 +2526,11 @@ FormFieldSelectAdapter.displayName = "FormFieldSelectAdapter";
  * This is done to make the field compatible with the React-hook-form library.
  *
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
- * @returns {JSX.Element} CreatableSelectField component
  */
-const CreatableSelectField = forwardRef(({ allowCreateWhileLoading, onCreateOption, ...props }, ref) => {
+const CreatableSelectField = ({ allowCreateWhileLoading, onCreateOption, ref, ...props }) => {
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
     return (jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsx(CreatableSelect, { ...convertedProps, ...creatableSelectOnlyProps }) }));
-});
+};
 CreatableSelectField.displayName = "CreatableSelectField";
 
 /**
@@ -2540,11 +2541,10 @@ CreatableSelectField.displayName = "CreatableSelectField";
  * This is done to make the field compatible with the React-hook-form library.
  *
  * @param {SelectFieldProps} props - The props for the SelectField component
- * @returns {JSX.Element} SelectField component
  */
-const SelectField = forwardRef(({ ...props }, ref) => {
+const SelectField = ({ ref, ...props }) => {
     return (jsx(FormFieldSelectAdapter, { ...props, ref: ref, children: convertedProps => jsx(Select, { ...convertedProps }) }));
-});
+};
 SelectField.displayName = "SelectField";
 
 const cvaTextArea = cvaMerge([
@@ -2583,9 +2583,9 @@ const cvaTextArea = cvaMerge([
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-const TextArea = React.forwardRef(({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className, ...rest }, ref) => {
+const TextArea = ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, required, dataTestId, isInvalid, className, ref, ...rest }) => {
     return (jsx("textarea", { className: cvaTextArea({ 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 }));
-});
+};
 TextArea.displayName = "TextArea";
 
 /**
@@ -2593,17 +2593,20 @@ TextArea.displayName = "TextArea";
  * Used for TextFields to communicate a maximum allowed input length.
  *
  * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
- * @returns {JSX.Element} TextLengthIndicator component
+ * @returns {ReactElement} TextLengthIndicator component
  */
 const TextLengthIndicator = ({ length, maxLength }) => {
     return (jsxs("span", { className: "font-mono", children: [length, "/", maxLength] }));
 };
 
-const TextAreaField = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ...rest }, ref) => {
-    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+/**
+ *
+ */
+const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }) => {
+    const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "textAreaField-" + uuidv4();
-    const handleChange = React.useCallback((event) => {
+    const handleChange = useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
@@ -2611,17 +2614,17 @@ const TextAreaField = React.forwardRef(({ id, label, tip, helpText, helpAddon, e
     }, [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(TextArea, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, ref: ref, value: value, ...rest, className: "h-auto", dataTestId: 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 = React.forwardRef(({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, isWarning, ...rest }, ref) => {
-    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, 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();
-    const handleChange = React.useCallback((event) => {
+    const handleChange = useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
@@ -2629,14 +2632,14 @@ const TextField = React.forwardRef(({ id, label, tip, helpText, helpAddon, error
     }, [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(TextInput, { "aria-labelledby": htmlFor + "-label", id: htmlFor, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, ref: ref, value: value, ...rest, className: className, dataTestId: dataTestId, onChange: handleChange }) }));
-});
+};
 TextField.displayName = "TextField";
 
 /**
  * TimeRangeField Description. <-- Please add a proper Description this is used in Storybook.
  *
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
- * @returns {JSX.Element} TimeRangeField component
+ * @returns {ReactElement} TimeRangeField component
  */
 const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
@@ -2797,23 +2800,23 @@ const cvaUploadInputField = cvaMerge([
  *
  * NOTE: If shown with a label, please use the `UploadField` component instead.
  */
-const UploadInput = forwardRef(({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ...rest }, ref) => (jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
-        // onClick used to work with nonInteractive option
-        if (nonInteractive) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, ref: ref, type: "file", ...rest })));
+const UploadInput = ({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ref, ...rest }) => (jsx("label", { className: "tu-upload-input", children: jsx(BaseInput, { accept: acceptedTypes, addonBefore: uploadLabel, disabled: disabled, inputClassName: cvaUploadInputField(), multiple: multipleFiles, nonInteractive: nonInteractive, onClick: event => {
+            // onClick used to work with nonInteractive option
+            if (nonInteractive) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }, ref: ref, type: "file", ...rest }) }));
 UploadInput.displayName = "UploadInput";
 
 /**
  * Upload fields enable the user to upload Files.
  */
-const UploadField = forwardRef(({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ...rest }, ref) => {
+const UploadField = ({ label, id, tip, helpText, errorMessage, isInvalid, className, value, 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 }) }));
-});
+};
 UploadField.displayName = "UploadField";
 
 /**
@@ -2852,11 +2855,11 @@ const validateUrl = (url, required) => {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-const UrlInput = forwardRef(({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ...rest }, ref) => {
+const UrlInput = ({ 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 })) }));
-});
+};
 UrlInput.displayName = "UrlField";
 
 /**
@@ -2864,7 +2867,7 @@ UrlInput.displayName = "UrlField";
  * UrlField validates that user enters a valid web address.
  *
  */
-const UrlField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ...rest }, ref) => {
+const UrlField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value, onBlur, ref, ...rest }) => {
     const htmlForId = id ? id : "urlField-" + uuidv4();
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -2880,7 +2883,7 @@ const UrlField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon
         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(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
-});
+};
 UrlField.displayName = "UrlField";
 
 /**