@trackunit/react-form-components 1.7.33 → 1.7.36

package/index.esm.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
+import { Temporal } from '@js-temporal/polyfill';
 import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
-import { useCopyToClipboard } from 'usehooks-ts';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState, useMemo, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { titleCase } from 'string-ts';
-import { uuidv4, nonNullable } from '@trackunit/shared-utils';
-import { Temporal } from '@js-temporal/polyfill';
+import { useCopyToClipboard } from 'usehooks-ts';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
+import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Controller } from 'react-hook-form';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
@@ -98,82 +98,6 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
-    variants: {
-        size: {
-            small: ["w-6", "h-6", "min-h-0"],
-            medium: ["w-6", "h-6", "min-h-0"],
-            large: ["w-8", "h-8"],
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-    },
-});
-const cvaActionContainer = cvaMerge(["flex", "items-center"], {
-    variants: {
-        size: {
-            //I just measured manually the top/bottom spacing
-            //when using the action button inside an input
-            //might need tweaking in the future
-            small: ["m-[1px]"],
-            medium: ["m-[3px]"],
-            large: ["m-[7px]"],
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-    },
-});
-
-/**
- * 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 {ReactElement} ActionButton component
- */
-const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
-    const [, copyToClipboard] = useCopyToClipboard();
-    const getIconName = () => {
-        switch (type) {
-            case "PHONE_NUMBER":
-                return "PhoneArrowUpRight";
-            case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquare";
-            case "EMAIL":
-                return "Envelope";
-            case "EDIT":
-                return "Pencil";
-            case "COPY":
-            default:
-                return "ClipboardDocument";
-        }
-    };
-    const buttonAction = () => {
-        switch (type) {
-            case "EMAIL":
-                return window.open(`mailto:${value}`);
-            case "WEB_ADDRESS":
-                if (value) {
-                    return window.open(value, "_blank", "noopener,noreferrer");
-                }
-                return null;
-            case "PHONE_NUMBER":
-                return window.open(`tel:${value}`);
-            case "EDIT":
-                return value?.current?.click();
-            case "COPY":
-                // Typescript seems to be unable to detect RefObject
-                // as one of the members of the union RefObject | string | null which gives access to the `current` property
-                return copyToClipboard(value?.current?.value ?? "");
-            default:
-                return null;
-        }
-    };
-    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" }) }));
-};
-
 const cvaInputBase = cvaMerge([
     "component-baseInput-shadow",
     "component-baseInput-border",
@@ -343,6 +267,82 @@ const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) =>
     return (jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${titleCase(position)}` : null, children: addon }));
 };
 
+const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"], {
+    variants: {
+        size: {
+            small: ["w-6", "h-6", "min-h-0"],
+            medium: ["w-6", "h-6", "min-h-0"],
+            large: ["w-8", "h-8"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const cvaActionContainer = cvaMerge(["flex", "items-center"], {
+    variants: {
+        size: {
+            //I just measured manually the top/bottom spacing
+            //when using the action button inside an input
+            //might need tweaking in the future
+            small: ["m-[1px]"],
+            medium: ["m-[3px]"],
+            large: ["m-[7px]"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+
+/**
+ * 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 {ReactElement} ActionButton component
+ */
+const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
+    const [, copyToClipboard] = useCopyToClipboard();
+    const getIconName = () => {
+        switch (type) {
+            case "PHONE_NUMBER":
+                return "PhoneArrowUpRight";
+            case "WEB_ADDRESS":
+                return "ArrowTopRightOnSquare";
+            case "EMAIL":
+                return "Envelope";
+            case "EDIT":
+                return "Pencil";
+            case "COPY":
+            default:
+                return "ClipboardDocument";
+        }
+    };
+    const buttonAction = () => {
+        switch (type) {
+            case "EMAIL":
+                return window.open(`mailto:${value}`);
+            case "WEB_ADDRESS":
+                if (value) {
+                    return window.open(value, "_blank", "noopener,noreferrer");
+                }
+                return null;
+            case "PHONE_NUMBER":
+                return window.open(`tel:${value}`);
+            case "EDIT":
+                return value?.current?.click();
+            case "COPY":
+                // Typescript seems to be unable to detect RefObject
+                // as one of the members of the union RefObject | string | null which gives access to the `current` property
+                return copyToClipboard(value?.current?.value ?? "");
+            default:
+                return null;
+        }
+    };
+    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" }) }));
+};
+
 const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
@@ -412,41 +412,260 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, })
 };
 
 /**
- * A base input component that can be used for text inputs, password inputs, etc.
- * A reference to the input element is provided as the `ref` prop.
- * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * A base input component that can be used for text inputs, password inputs, etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ *
+ * 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, 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);
+    const beforeContainerRef = useRef(null);
+    const { width: beforeContainerWidth } = useGeometry(beforeContainerRef);
+    const afterContainerRef = useRef(null);
+    const { width: afterContainerWidth } = useGeometry(afterContainerRef);
+    // Keep a reference to the input element
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
+    return (jsxs("div", { className: cvaInput$1({
+            disabled: renderAsDisabled,
+            invalid: isInvalid,
+            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": rest.required, className: cvaInputField({
+                    readOnly: renderAsReadonly,
+                    size: fieldSize,
+                    disabled: renderAsDisabled,
+                    className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
+                    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";
+
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * The value is formatted to an ISO date string (YYYY-MM-DD)
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+const DateBaseInput = ({ 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()
+        : 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 }));
+};
+
+/**
+ * A thin wrapper around the `BaseInput` component for number input fields.
+ *
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
+ */
+const NumberBaseInput = ({ ref, ...rest }) => {
+    const inputElementRef = useRef(null);
+    const preventDefaultWheelEvent = useCallback((event) => {
+        const inputElement = inputElementRef.current;
+        const activeElement = document.activeElement;
+        if (inputElement && activeElement === inputElement) {
+            event.preventDefault();
+        }
+    }, []);
+    const forwardAndStoreInputRef = useCallback((node) => {
+        const previousNode = inputElementRef.current;
+        if (previousNode) {
+            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
+        }
+        inputElementRef.current = node;
+        if (node) {
+            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
+            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
+        }
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [preventDefaultWheelEvent, ref]);
+    useEffect(() => {
+        return () => {
+            const element = inputElementRef.current;
+            if (element) {
+                element.removeEventListener("wheel", preventDefaultWheelEvent);
+            }
+        };
+    }, [preventDefaultWheelEvent]);
+    return jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
+};
+
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+/**
+ * Generates a flag emoji based on the given country code.
+ *
+ * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
+ * @returns {string} - The corresponding flag emoji for the given country code.
+ * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
+ */
+const countryCodeToFlagEmoji = (countryCode) => {
+    let code = countryCode;
+    if (countryCode.startsWith("+")) {
+        code = getCountryAbbreviation(countryCode.substring(1));
+    }
+    else if (!isNaN(Number(countryCode))) {
+        code = getCountryAbbreviation(countryCode);
+    }
+    return isSupportedCountry(code.toUpperCase())
+        ? code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)))
+        : "";
+};
+/**
+ * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
+ *
+ * @param {string} callCode - The international calling code for a country.
+ * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
+ * @example getCountryAbbreviation("45") // "DK"
+ * @example getCountryAbbreviation("+45") // "DK"
+ */
+const getCountryAbbreviation = (callCode) => {
+    let code = callCode;
+    if (callCode.startsWith("+")) {
+        code = callCode.substring(1);
+    }
+    return getCountries().find(c => getCountryCallingCode(c) === code) || "";
+};
+
+const DEFAULT_COUNTRY_CODE = undefined;
+/**
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
+ *
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
+ * @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.
+ */
+const PhoneBaseInput = ({ 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()) ?? "";
+    });
+    const fieldIsFocused = useRef(false);
+    const [countryCode, setCountryCode] = useState(DEFAULT_COUNTRY_CODE);
+    const determineCountry = useCallback((newValue) => {
+        const asYouType = new AsYouType();
+        asYouType.input(newValue);
+        setCountryCode(asYouType.getCountry());
+    }, []);
+    const handleChange = useCallback(event => {
+        const newValue = event.target.value;
+        event.target.value = parseIncompletePhoneNumber(newValue);
+        onChange?.(event);
+        setInnerValue(newValue);
+        determineCountry(newValue);
+    }, [onChange, determineCountry]);
+    const makePretty = useCallback((newValue) => {
+        const asYouType = new AsYouType();
+        const pretty = asYouType.input(newValue);
+        setInnerValue(pretty);
+        setCountryCode(asYouType.getCountry());
+    }, []);
+    useEffect(() => {
+        if (!fieldIsFocused.current) {
+            makePretty(typeof value === "string" ? value : "");
+        }
+    }, [makePretty, value]);
+    const handleBlur = useCallback(event => {
+        const newValue = event.target.value;
+        makePretty(newValue);
+        onBlur?.(event);
+        fieldIsFocused.current = false;
+    }, [makePretty, onBlur]);
+    const handleFocus = useCallback(event => {
+        const newValue = event.target.value;
+        const noneFormattedValue = parseIncompletePhoneNumber(newValue);
+        setInnerValue(noneFormattedValue);
+        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 }) }));
+};
+
+const cvaTextAreaBaseInput = cvaMerge([
+    cvaInputBase(),
+    "block",
+    "overflow-auto",
+    "appearance-none",
+    "px-3",
+    "py-2",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "w-full",
+    "h-20",
+    "transition",
+], {
+    variants: {
+        disabled: {
+            true: cvaInputBaseDisabled(),
+            false: "",
+        },
+        invalid: {
+            true: cvaInputBaseInvalid(),
+            false: "",
+        },
+        resize: {
+            both: "resize",
+            vertical: "resize-y",
+            horizontal: "resize-x",
+            none: "resize-none",
+        },
+    },
+});
+
+/**
+ * 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 }) => {
+    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 }));
+};
+
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
  *
- * 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.
+ * NOTE: If shown with a label, please use the `TextField` component instead.
  */
-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);
-    const beforeContainerRef = useRef(null);
-    const { width: beforeContainerWidth } = useGeometry(beforeContainerRef);
-    const afterContainerRef = useRef(null);
-    const { width: afterContainerWidth } = useGeometry(afterContainerRef);
-    // Keep a reference to the input element
-    const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current, []);
-    return (jsxs("div", { className: cvaInput$1({
-            disabled: renderAsDisabled,
-            invalid: isInvalid,
-            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": rest.required, className: cvaInputField({
-                    readOnly: renderAsReadonly,
-                    size: fieldSize,
-                    disabled: renderAsDisabled,
-                    className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
-                    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";
+const TextBaseInput = ({ ref, ...rest }) => jsx(BaseInput, { ref: ref, type: "text", ...rest });
 
 /**
  * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
@@ -713,7 +932,7 @@ const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className,
         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: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (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] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : 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", 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] }));
 };
 
 /**
@@ -839,29 +1058,6 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
 });
 ColorField.displayName = "ColorField";
 
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * The value is formatted to an ISO date string (YYYY-MM-DD)
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-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()
-        : 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";
-
 /**
  * The date field component is used for entering date values.
  *
@@ -872,7 +1068,7 @@ DateInput.displayName = "DateInput";
 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 }) }));
+    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 }) }));
 };
 DateField.displayName = "DateField";
 
@@ -1027,8 +1223,8 @@ 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 = ({ fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange, disableAction = false, ref, ...rest }) => {
-    const [email, setEmail] = useState("");
+const EmailBaseInput = ({ fieldSize = "medium", disabled = false, 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}`);
     };
@@ -1040,7 +1236,6 @@ const EmailInput = ({ fieldSize = "medium", disabled = false, dataTestId, isInva
     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";
 
 /**
  * The EmailField component is used to enter email.
@@ -1068,7 +1263,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(EmailInput, { "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, { 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 }) }));
 };
 EmailField.displayName = "EmailField";
 
@@ -1122,49 +1317,6 @@ const validateNumber = (number, required = false, min, max) => {
     return "INVALID_NUMBER";
 };
 
-/**
- * A thin wrapper around the `BaseInput` component for number input fields.
- *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
- */
-const NumberInput = ({ ref, ...rest }) => {
-    const inputElementRef = useRef(null);
-    const preventDefaultWheelEvent = useCallback((event) => {
-        const inputElement = inputElementRef.current;
-        const activeElement = document.activeElement;
-        if (inputElement && activeElement === inputElement) {
-            event.preventDefault();
-        }
-    }, []);
-    const forwardAndStoreInputRef = useCallback((node) => {
-        const previousNode = inputElementRef.current;
-        if (previousNode) {
-            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
-        }
-        inputElementRef.current = node;
-        if (node) {
-            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
-            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
-        }
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref && typeof ref === "object") {
-            ref.current = node;
-        }
-    }, [preventDefaultWheelEvent, ref]);
-    useEffect(() => {
-        return () => {
-            const element = inputElementRef.current;
-            if (element) {
-                element.removeEventListener("wheel", preventDefaultWheelEvent);
-            }
-        };
-    }, [preventDefaultWheelEvent]);
-    return jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
-};
-NumberInput.displayName = "NumberInput";
-
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
  *
@@ -1214,7 +1366,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(NumberInput, { "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, { 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 }) }));
 };
 NumberField.displayName = "NumberField";
 
@@ -1328,11 +1480,10 @@ OptionCard.displayName = "OptionCard";
  *
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
  */
-const PasswordInput = ({ ref, fieldSize, ...rest }) => {
+const PasswordBaseInput = ({ ref, fieldSize, ...rest }) => {
     const [showPassword, setShowPassword] = useState(false);
     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";
 
 /**
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -1347,119 +1498,10 @@ const PasswordField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
     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 }) }));
+    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 }) }));
 };
 PasswordField.displayName = "PasswordField";
 
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {boolean} true if the phone number starts with a plus sign
- * @example checkIfPhoneNumberHasPlus("123456789") // false
- * checkIfPhoneNumberHasPlus("+123456789") // true
- */
-const checkIfPhoneNumberHasPlus = (phoneNumber) => {
-    return phoneNumber.startsWith("+");
-};
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {string|number} the phone number with a plus sign in front of it
- * @example getPhoneNumberWithPlus("123456789") // "+123456789"
- */
-const getPhoneNumberWithPlus = (phoneNumber) => {
-    const stringPhoneNumber = phoneNumber.toString();
-    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
-};
-/**
- * Generates a flag emoji based on the given country code.
- *
- * @param {string} countryCode - The two-letter country code (ISO 3166-1 alpha-2).
- * @returns {string} - The corresponding flag emoji for the given country code.
- * @example getPhoneNumberWithPlus("DK") // "🇩🇰"
- */
-const countryCodeToFlagEmoji = (countryCode) => {
-    let code = countryCode;
-    if (countryCode.startsWith("+")) {
-        code = getCountryAbbreviation(countryCode.substring(1));
-    }
-    else if (!isNaN(Number(countryCode))) {
-        code = getCountryAbbreviation(countryCode);
-    }
-    return isSupportedCountry(code.toUpperCase())
-        ? code.toUpperCase().replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)))
-        : "";
-};
-/**
- * Retrieves the ISO 3166-1 alpha-2 country code associated with a given international calling code.
- *
- * @param {string} callCode - The international calling code for a country.
- * @returns {string} The abbreviation for a country or an empty string if no matching country is found.
- * @example getCountryAbbreviation("45") // "DK"
- * @example getCountryAbbreviation("+45") // "DK"
- */
-const getCountryAbbreviation = (callCode) => {
-    let code = callCode;
-    if (callCode.startsWith("+")) {
-        code = callCode.substring(1);
-    }
-    return getCountries().find(c => getCountryCallingCode(c) === code) || "";
-};
-
-const DEFAULT_COUNTRY_CODE = undefined;
-/**
- * A component for inputting phone numbers with an optional action button for initiating a phone call.
- *
- * @param {string} [dataTestId] - The data test ID for the component.
- * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
- * @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.
- */
-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()) ?? "";
-    });
-    const fieldIsFocused = useRef(false);
-    const [countryCode, setCountryCode] = useState(DEFAULT_COUNTRY_CODE);
-    const determineCountry = useCallback((newValue) => {
-        const asYouType = new AsYouType();
-        asYouType.input(newValue);
-        setCountryCode(asYouType.getCountry());
-    }, []);
-    const handleChange = useCallback(event => {
-        const newValue = event.target.value;
-        event.target.value = parseIncompletePhoneNumber(newValue);
-        onChange?.(event);
-        setInnerValue(newValue);
-        determineCountry(newValue);
-    }, [onChange, determineCountry]);
-    const makePretty = useCallback((newValue) => {
-        const asYouType = new AsYouType();
-        const pretty = asYouType.input(newValue);
-        setInnerValue(pretty);
-        setCountryCode(asYouType.getCountry());
-    }, []);
-    useEffect(() => {
-        if (!fieldIsFocused.current) {
-            makePretty(typeof value === "string" ? value : "");
-        }
-    }, [makePretty, value]);
-    const handleBlur = useCallback(event => {
-        const newValue = event.target.value;
-        makePretty(newValue);
-        onBlur?.(event);
-        fieldIsFocused.current = false;
-    }, [makePretty, onBlur]);
-    const handleFocus = useCallback(event => {
-        const newValue = event.target.value;
-        const noneFormattedValue = parseIncompletePhoneNumber(newValue);
-        setInnerValue(noneFormattedValue);
-        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 }) }));
-};
-PhoneInput.displayName = "PhoneInput";
-
 /**
  * Validates a phone number
  */
@@ -1559,7 +1601,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(PhoneInput, { "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, 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 }) }));
 };
 PhoneField.displayName = "PhoneField";
 
@@ -1900,14 +1942,6 @@ const hasConsecutiveDays = (schedule) => {
     return schedule.every(({ day }, index) => day === days[index]);
 };
 
-/**
- * A thin wrapper around the `BaseInput` component for text input fields.
- *
- * NOTE: If shown with a label, please use the `TextField` component instead.
- */
-const TextInput = ({ ref, ...rest }) => jsx(BaseInput, { ref: ref, type: "text", ...rest });
-TextInput.displayName = "TextInput";
-
 const cvaSearch = cvaMerge([
     "shadow-none",
     "component-search-border",
@@ -1939,7 +1973,7 @@ const cvaSearch = cvaMerge([
  */
 const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
     const { t } = useTranslation();
-    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 ?? 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 }), 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: 
         //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();
@@ -2705,47 +2739,6 @@ const SelectField = ({ ref, ...props }) => {
 };
 SelectField.displayName = "SelectField";
 
-const cvaTextArea = cvaMerge([
-    cvaInputBase(),
-    "block",
-    "overflow-auto",
-    "appearance-none",
-    "px-3",
-    "py-2",
-    "text-base",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "w-full",
-    "h-20",
-    "transition",
-], {
-    variants: {
-        disabled: {
-            true: cvaInputBaseDisabled(),
-            false: "",
-        },
-        invalid: {
-            true: cvaInputBaseInvalid(),
-            false: "",
-        },
-        resize: {
-            both: "resize",
-            vertical: "resize-y",
-            horizontal: "resize-x",
-            none: "resize-none",
-        },
-    },
-});
-
-/**
- * The TextArea is a base component, and should not be used very often.
- * For most cases the TextAreaField is the correct component.
- */
-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";
-
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
  * Used for TextFields to communicate a maximum allowed input length.
@@ -2771,7 +2764,7 @@ const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isIn
         }
     }, [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 }) }));
+            (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 }) }));
 };
 TextAreaField.displayName = "TextAreaField";
 
@@ -2789,7 +2782,7 @@ const TextField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvali
         }
     }, [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 }) }));
+            (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 }) }));
 };
 TextField.displayName = "TextField";
 
@@ -3013,12 +3006,11 @@ const validateUrl = (url, required) => {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-const UrlInput = ({ dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue, ref, ...rest }) => {
+const UrlBaseInput = ({ 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";
 
 /**
  * The UrlField component is used to enter url.
@@ -3040,7 +3032,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(UrlInput, { "aria-labelledby": htmlForId + "-label", id: htmlForId, isInvalid: renderAsInvalid, onBlur: handleBlur, ref: ref, value: value || defaultValue, ...rest, className: className, dataTestId: dataTestId }) }));
+    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 }) }));
 };
 UrlField.displayName = "UrlField";
 
@@ -3156,4 +3148,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };