@trackunit/react-form-components 0.0.1

package/index.js

@@ -0,0 +1,1210 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { IconButton, Icon, Tip, MenuItem, Tag, Spinner, Text } from '@trackunit/react-components';
+import { tw, twx, tws } from '@trackunit/tailwind-styled-components';
+import * as React from 'react';
+import React__default, { forwardRef, useState, useEffect } from 'react';
+import { v4 } from 'uuid';
+import { format } from 'date-fns';
+import ReactSelect, { components } from 'react-select';
+export { default as ValueType } from 'react-select';
+import ReactAsyncSelect from 'react-select/async';
+import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+import ReactAsyncCreatableSelect from 'react-select/async-creatable';
+import ReactCreatableSelect from 'react-select/creatable';
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.form-components";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => import('./translation.js'),
+        da: () => import('./translation2.js'),
+        cs: () => import('./translation3.js'),
+        nl: () => import('./translation4.js'),
+        fr: () => import('./translation5.js'),
+        fi: () => import('./translation6.js'),
+        hu: () => import('./translation7.js'),
+        it: () => import('./translation8.js'),
+        nb: () => import('./translation9.js'),
+        pl: () => import('./translation10.js'),
+        pt: () => import('./translation11.js'),
+        ru: () => import('./translation12.js'),
+        ro: () => import('./translation13.js'),
+        es: () => import('./translation14.js'),
+        sv: () => import('./translation15.js'),
+        ja: () => import('./translation16.js'),
+        th: () => import('./translation17.js'),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    registerTranslations(translations);
+};
+
+/**
+ * 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
+ */
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
+    const getIconName = () => {
+        switch (type) {
+            case "PHONE_NUMBER":
+                return "PhoneArrowUpRightIcon";
+            case "WEB_ADDRESS":
+                return "ArrowTopRightOnSquareIcon";
+            case "EMAIL":
+            default:
+                return "EnvelopeIcon";
+        }
+    };
+    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":
+            default:
+                return window.open(`tel:${value}`);
+        }
+    };
+    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+};
+const ActionContainer = tw.div `
+  tu-action-container
+`;
+const StyledIconButton = twx(IconButton) `
+  tu-action-button
+${({ $fieldSize }) => $fieldSize === "small" && tws `tu-action-button--small`}
+`;
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/**
+ * 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 TextInput, NumberInput, PasswordInput, etc.
+ */
+const BaseInput = React.forwardRef((_a, ref) => {
+    var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
+    return (jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsx(AddonBefore, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsx(InputPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))) : null, jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tws `tu-input__field` }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx(InputSuffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx(AddonAfter, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
+});
+const InputPrefix = tw.div `
+  tu-input__prefix
+`;
+const InputSuffix = tw.div `
+  tu-input__suffix
+`;
+const AddonBefore = tw.div `
+  tu-input__addon-before
+`;
+const AddonAfter = tw.div `
+  tu-input__addon-after
+`;
+const InputContainer$1 = tw.label `
+  tu-input
+  ${({ $invalid }) => ($invalid ? tws `tu-input--invalid` : null)}
+  ${({ $disabled }) => ($disabled ? tws `tu-input--disabled` : null)}
+  ${({ $fieldSize }) => ($fieldSize === "small" ? tws `tu-input--small` : null)}
+`;
+
+/**
+ * The Label component is used for labels for input fields.
+ * 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
+ */
+const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
+};
+const Root$2 = tw.label `
+tu-label
+${({ $disabled }) => $disabled && tws `tu-label--disabled`}
+${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
+`;
+
+/**
+ * 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
+ */
+const CheckIcon = ({ className, dataTestId }) => {
+    return (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", className: className, "data-testid": dataTestId, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2" }, { children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m2 5.5 2 2L8.5 3" }) })));
+};
+
+/**
+ * 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
+ */
+const IndeterminateIcon = ({ className }) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", className: className, fill: "none", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "2" }, { children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 5h4" }) })));
+
+/**
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @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 = React.forwardRef((_a, ref) => {
+    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, children, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "children", "label", "tabIndex"]);
+    const icon = indeterminate ? jsx(StyledIndeterminateIcon, {}) : checked && jsx(StyledCheckIcon, {});
+    const internalRef = React.useRef(null);
+    const isReadonly = disabled || readOnly;
+    const onKeyPress = e => {
+        var _a;
+        if ("Space" === e.code) {
+            (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    const uuid = rest.id || dataTestId;
+    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+});
+const StyledCheckIcon = twx(CheckIcon) `tu-checkbox--icon`;
+const StyledIndeterminateIcon = twx(IndeterminateIcon) `tu-checkbox--icon`;
+const CheckboxContainer = tw.label `tu-checkbox--container group`;
+const HiddenInput$1 = tw.input `tu-checkbox--input`;
+const CheckboxWrapper = tw.span `
+  tu-checkbox
+  ${({ $checked, $disabled, $indeterminate }) => {
+    if ($disabled) {
+        return tws `tu-checkbox--disabled`;
+    }
+    return $indeterminate
+        ? tws `tu-checkbox--indeterminate`
+        : $checked
+            ? tws `tu-checkbox--selected`
+            : tws `tu-checkbox--deselected`;
+}}
+
+  ${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
+`;
+
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+const DateInput = forwardRef((_a, ref) => {
+    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
+    // @ts-ignore
+    // Chrome needs it's default icon to have datepicker functionality.
+    // window.chrome doesn't exist in TS but is available on chrome browsers.
+    // If it fails it will just show our icon.
+    const hideOnChrome = () => (window.chrome !== null && typeof window.chrome !== "undefined" ? "hidden" : "");
+    return (jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: jsx(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid", className: hideOnChrome() }) }, rest)));
+});
+
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ *
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
+ */
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
+    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+};
+const FormGroupRoot = tw.div `
+  tu-form-group
+  ${({ $disabled }) => {
+    return $disabled ? "pointer-events-none" : null;
+}}
+`;
+const ContainerBefore = tw.div `
+  tu-form-group__container-before
+`;
+const FormGroupLabel = twx(Label) `
+  component-formGroup-font
+`;
+const ContainerAfter = tw.div `
+  tu-form-group__container-after
+  ${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
+`;
+const HelpAddon = tw.span `
+  tu-form-group__help-addon
+`;
+
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+const DateField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlForId = id ? id : "dateField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+});
+
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+const DropZone = (_a) => {
+    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
+    const [dragActive, setDragActive] = React__default.useState(false);
+    const [fileDropped, setFileDropped] = React__default.useState(false);
+    // function that handles drag enter, drag leave and drag over
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if ((e.type === "dragenter" || e.type === "dragover") && !disabled) {
+            setDragActive(true);
+        }
+        else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+    //function to handle when user clicks on dropzone to upload
+    const handleChange = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.target.files && !disabled) {
+            filesSelected(e.target.files);
+        }
+    };
+    //funtion to handle drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0] && !disabled) {
+            filesSelected(e.dataTransfer.files);
+            setFileDropped(true);
+        }
+    };
+    return (jsxs(Root$1, Object.assign({ "$disabled": disabled, "$isInvalid": isInvalid, "$dragActive": dragActive, "$fileDropped": fileDropped, "$size": size, className: className, "data-testid": dataTestId, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, onClick: e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        } }, rest, { children: [jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs(DropZoneLabel, Object.assign({ htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label` }, { children: [jsx(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx("span", { children: label })] }))] })));
+};
+const Root$1 = tw.div `
+  tu-drop-zone
+   ${({ $size }) => ($size === "small" ? tws `tu-drop-zone--small` : null)}
+   ${({ $size }) => ($size === "medium" ? tws `tu-drop-zone--medium` : null)}
+   ${({ $size }) => ($size === "large" ? tws `tu-drop-zone--large` : null)}
+   ${({ $dragActive }) => ($dragActive ? tws `tu-drop-zone--drag-active` : null)}
+   ${({ $fileDropped }) => ($fileDropped ? tws `tu-drop-zone--drop-complete` : null)}
+   ${({ $isInvalid }) => ($isInvalid ? tws `tu-drop-zone--invalid` : null)}
+   ${({ $disabled }) => ($disabled ? tws `tu-drop-zone--disabled` : null)}
+`;
+const DropZoneLabel = tw.label `
+  tu-drop-zone__label
+`;
+
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * 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 = React.forwardRef((_a, ref) => {
+    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
+    const [email, setEmail] = React.useState("");
+    const sendEmail = () => {
+        return window.open(`mailto:${email}`);
+    };
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+});
+
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+const EmailField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    const [value, setValue] = useState(defaultValue);
+    const htmlForId = id ? id : "emailField-" + v4();
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    // Check the regular expression only if value is a string
+    const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+});
+
+/**
+ * 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 = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: "number" }, props))));
+
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+const NumberField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlForId = id ? id : "numberField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+});
+
+/**
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
+ */
+function isMultiValue(arg) {
+    return Array.isArray(arg);
+}
+function isGroupBase(arg) {
+    return arg.options !== undefined;
+}
+const isSelectedOption = (option, selected) => {
+    if (isGroupBase(option)) {
+        return false;
+    }
+    return isMultiValue(selected)
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            selected.some(v => v.value === option.value)
+        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            option.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+};
+const removeSelectedFromGroups = (group, selected) => {
+    if (isGroupBase(group)) {
+        return Object.assign(Object.assign({}, group), { options: group.options.filter(option => !isSelectedOption(option, selected)) });
+    }
+    return group;
+};
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+const getOrderedOptions = (options, value) => {
+    if (value && options) {
+        const orderedValues = isMultiValue(value)
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                [...value].sort((a, b) => a.label.localeCompare(b.label))
+            : [value];
+        const selectableOptions = options
+            .filter(option => !isSelectedOption(option, value))
+            .map(option => removeSelectedFromGroups(option, value));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return orderedValues.concat(selectableOptions) || [];
+    }
+    return options || [];
+};
+const SelectPrefix = tw.div `
+  tu-select__prefix 
+`;
+
+/**
+ * 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
+ */
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx(Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+};
+/**
+ * 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
+ */
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, disabled: disabled, prefix: jsx(Checkbox, { checked: selected, readOnly: false, onChange: () => null, disabled: disabled, onClick: e => {
+                e.stopPropagation();
+            } }), onClick: e => {
+            e.stopPropagation();
+            onClick && onClick(e);
+        }, selected: selected, focused: focused }));
+};
+
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+const TagWithWidth = (_a) => {
+    var { onWidthKnown, children } = _a, rest = __rest(_a, ["onWidthKnown", "children"]);
+    const ref = React__default.useRef(null);
+    React__default.useLayoutEffect(() => {
+        var _a;
+        onWidthKnown && onWidthKnown({ width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0 });
+    }, [ref, onWidthKnown]);
+    return (jsx(Tag, Object.assign({ ref: ref }, rest, { children: children })));
+};
+
+/**
+ * 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
+ */
+const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
+    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 itemsCount = items.length;
+    React__default.useLayoutEffect(() => {
+        var _a;
+        availableWidth.current = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    }, [containerRef]);
+    const onWidthKnownHandler = ({ width: reportedWidth }) => {
+        childrenWidth.current.push({ width: reportedWidth + itemsGap });
+        if (childrenWidth.current.length === itemsCount) {
+            setIsReady(true);
+        }
+    };
+    const requiredSpace = childrenWidth.current.reduce((previous, current) => {
+        return previous + current.width;
+    }, 0);
+    let counter = 0;
+    const availableSpace = ((availableWidth === null || availableWidth === void 0 ? void 0 : availableWidth.current) || 0) - counterWidth;
+    const renderedElements = items
+        .concat({ text: "", onClick: () => null, disabled: false }) // reserved element for a potential counter
+        .map((item, index) => {
+        const spaceNeeded = childrenWidth.current.slice(0, index + 1).reduce((previous, current) => {
+            return previous + current.width;
+        }, 0);
+        const isLast = index === items.length;
+        const counterRequired = requiredSpace > availableSpace && counter !== 0;
+        if (isLast && counterRequired) {
+            return (jsx(TagWithWidth, Object.assign({ onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral" }, { children: jsxs(Counter, { children: ["+", counter] }) }), item.text + index));
+        }
+        if (isLast) {
+            return null;
+        }
+        const itemCanFit = spaceNeeded <= availableSpace;
+        if (itemCanFit) {
+            return (jsx(TagWithWidth, Object.assign({ onWidthKnown: onWidthKnownHandler, className: tws `shrink-0 inline-flex`, onClose: e => {
+                    e.stopPropagation();
+                    item.onClick();
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text }, { children: item.text }), item.text + index));
+        }
+        const fromTheItems = item.text !== "";
+        if (fromTheItems) {
+            counter = counter + 1;
+        }
+        return null;
+    })
+        .filter(element => element !== null);
+    return (jsxs(Container$2, Object.assign({ style: {
+            width: `${width}`,
+        }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
+};
+const Container$2 = tw.div `
+tu-select__dynamic-tag--container
+${({ $ready }) => {
+    return $ready ? tws `visible` : tws `invisible`;
+}}
+`;
+const Counter = tw.div `
+tu-select__counter
+`;
+
+/**
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ *
+ * @template IsMulti
+ * @template Group
+ * @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 {React.MutableRefObject<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
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
+ */
+const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
+    const customComponents = React.useMemo(() => {
+        return Object.assign({ ValueContainer: props => {
+                if (props.isMulti) {
+                    const PLACEHOLDER_KEY = "placeholder";
+                    const key = props && props.children && props.children[0] ? props.children[0].key : "";
+                    const values = props && props.children ? props.children[0] : [];
+                    const tags = key === PLACEHOLDER_KEY ? [] : values;
+                    const searchInput = props && props.children && props.children[1];
+                    return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled }, { children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { width: "100%", items: tags
+                                ? tags.map(({ props: tagProps }) => {
+                                    return {
+                                        text: tagProps.children,
+                                        onClick: disabled
+                                            ? undefined
+                                            : (e) => {
+                                                var _a, _b;
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            },
+                                        disabled: disabled,
+                                    };
+                                })
+                                : [], postFix: searchInput })) : (jsxs(Fragment, { children: [tags &&
+                                    tags.slice(0, maxSelectedDisplayCount).map(({ props: tagProps }) => {
+                                        var _a, _b;
+                                        return (jsx(Tag, Object.assign({ className: tws `shrink-0 inline-flex`, onClose: e => {
+                                                var _a, _b;
+                                                e.stopPropagation();
+                                                refMenuIsEnabled.current = false;
+                                                ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString() }, { children: tagProps.children }), (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, Object.assign({ color: "neutral", dataTestId: "counter" }, { children: ["+", tags.length - maxSelectedDisplayCount] }))), searchInput] })) })));
+                }
+                return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled }, { children: props.children })));
+            }, LoadingIndicator: props => {
+                return jsx(Spinner, { size: "small", className: tws `mt-1.5 mr-1` });
+            }, DropdownIndicator: props => {
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
+            }, IndicatorSeparator: () => null, ClearIndicator: props => {
+                if (disabled) {
+                    return null;
+                }
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XMarkIcon, Object.assign({ onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
+            }, Control: props => {
+                return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
+            }, SingleValue: props => {
+                return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__single-value--disabled` : "" }, { children: jsx("div", Object.assign({ "data-testid": dataTestId + "-singleValue" }, { children: props.children })) })));
+            }, Menu: props => {
+                return (jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
+                        ? tws `tu-select__menu-list animate-fade-in-fast`
+                        : tws `tu-select__menu-list animate-fade-out-fast` })));
+            }, Option: props => {
+                const componentProps = {
+                    label: props.label,
+                    focused: props.isFocused,
+                    selected: props.isSelected,
+                    onClick: props.innerProps.onClick,
+                };
+                return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }) }, { children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: props.label }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: props.label }))) })));
+            } }, componentsProps);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    return customComponents;
+};
+const StyledIcon = tw.div `
+tu-select--icon
+`;
+const XMarkIcon = tw.div `
+tu-select--icon
+tu-select__x-icon
+`;
+
+/**
+ * @template IsMulti
+ * @template Group
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
+ */
+const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, styles) => {
+    const customStyles = React.useMemo(() => {
+        return Object.assign({ control: base => {
+                return Object.assign(Object.assign({}, base), { border: "0", boxShadow: "0", "&:hover": {
+                        border: "0",
+                    }, marginRight: "2px", backgroundColor: "" });
+            }, singleValue: base => (Object.assign({}, base)), multiValue: base => (Object.assign({}, base)), multiValueLabel: base => (Object.assign({}, base)), indicatorsContainer: base => (Object.assign({}, base)), indicatorSeparator: () => ({
+                width: "0px",
+            }), menu: base => {
+                return Object.assign(Object.assign({}, base), { width: "100%", marginTop: "4px", marginBottom: "18px", transition: "all 1s ease-in-out" });
+            }, input: base => (Object.assign(Object.assign({}, base), { marginLeft: "0px" })), placeholder: base => (Object.assign({}, base)), option: () => ({}), menuPortal: base => (Object.assign(Object.assign({}, base), { width: (refContainer === null || refContainer === void 0 ? void 0 : refContainer.current) ? `${refContainer.current.clientWidth}px` : base.width, transform: (refPrefix === null || refPrefix === void 0 ? void 0 : refPrefix.current) ? `translate(-${refPrefix.current.clientWidth + 2}px)` : "translate(-2px)", backgroundColor: "#ffffff", borderRadius: "var(--border-radius-lg)", zIndex: 20, borderColor: "rgb(var(--color-slate-300))", boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)" })), menuList: base => {
+                return Object.assign(Object.assign({}, base), { position: "relative", padding: "var(--spacing-1)", display: "grid", gap: "var(--spacing-1)", width: "100%", borderRadius: "0px", boxShadow: "none", paddingTop: "0px" });
+            }, valueContainer: base => {
+                return Object.assign(Object.assign({}, base), { flexWrap: maxSelectedDisplayCount !== undefined ? "wrap" : "nowrap", gap: "0.25rem" });
+            }, container: base => (Object.assign(Object.assign({}, base), { border: "none", width: "calc(100% - 2px)", paddingLeft: "2px" })), dropdownIndicator: base => (Object.assign(Object.assign({}, base), { padding: "0px" })), clearIndicator: base => {
+                return Object.assign(Object.assign({}, base), { padding: "0px" });
+            } }, styles);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refContainer, refPrefix]);
+    return { customStyles };
+};
+
+/**
+ * A hook used by selects to share the common code
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
+ */
+const useSelect = (_a) => {
+    var _b;
+    var { 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 } = _a, props = __rest(_a, ["id", "className", "dataTestId", "prefix", "async", "dropdownIcon", "maxMenuHeight", "label", "hasError", "disabled", "isMulti", "components", "value", "options", "onChange", "isLoading", "classNamePrefix", "onMenuOpen", "onMenuClose", "maxSelectedDisplayCount", "isClearable", "isSearchable", "onMenuScrollToBottom", "styles", "filterOption", "onInputChange"]);
+    const refContainer = React__default.useRef(null);
+    const refPrefix = React__default.useRef(null);
+    const { customStyles } = useCustomStyles(refContainer, refPrefix, maxSelectedDisplayCount, styles);
+    const [menuIsOpen, setMenuIsOpen] = React__default.useState((_b = props.menuIsOpen) !== null && _b !== void 0 ? _b : false);
+    const refMenuIsEnabled = React__default.useRef(true);
+    const customComponents = useCustomComponents(components, disabled || false, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon);
+    const menuPlacement = "auto";
+    const openMenuHandler = () => __awaiter(void 0, void 0, void 0, function* () {
+        onMenuOpen && onMenuOpen();
+        if (refMenuIsEnabled.current) {
+            setMenuIsOpen(true);
+        }
+        else {
+            refMenuIsEnabled.current = true;
+        }
+    });
+    const closeMenuHandler = () => {
+        setMenuIsOpen(false);
+        onMenuClose && onMenuClose();
+    };
+    const orderedOptions = React__default.useMemo(() => {
+        return disabled
+            ? getOrderedOptions(options, value).map(option => {
+                return Object.assign(Object.assign({}, option), { disabled: true });
+            })
+            : getOrderedOptions(options, value);
+    }, [options, value, disabled]);
+    return {
+        refContainer,
+        refPrefix,
+        customStyles,
+        menuIsOpen,
+        customComponents,
+        menuPlacement,
+        openMenuHandler,
+        closeMenuHandler,
+        orderedOptions,
+    };
+};
+
+/**
+ * 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
+ */
+const Select = (props) => {
+    const { className } = props, propsNoClassName = __rest(props, ["className"]);
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = "", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, } = props;
+    const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: props.menuPortalTarget || document.body,
+        isSearchable: disabled ? false : isSearchable,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: true,
+        menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti,
+        classNamePrefix,
+        isLoading,
+        isClearable,
+        id,
+        onMenuScrollToBottom,
+        onInputChange,
+    };
+    return (jsxs(SelectContainer$1, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
+};
+const SelectContainer$1 = tw.div `
+  tu-select
+  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
+`;
+Select.displayName = "Select";
+
+const COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND = ["53", "98", "211", "247", "249", "383", "850", "963"];
+const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
+    "1242",
+    "1246",
+    "1264",
+    "1268",
+    "1284",
+    "1340",
+    "1345",
+    "1441",
+    "1473",
+    "1649",
+    "1664",
+    "1670",
+    "1671",
+    "1684",
+    "1721",
+    "1758",
+    "1767",
+    "1784",
+    "1809",
+    "1868",
+    "1869",
+    "1876",
+    "379",
+    "5999",
+    "881",
+    "882",
+    "883",
+];
+const countryCodesSet = [
+    ...new Set(getCountries().map(code => getCountryCallingCode(code))),
+    ...ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND,
+]
+    .filter(code => !COUNTRY_CODES_NOT_SUPPORTED_BY_BACKEND.includes(code))
+    .sort((a, b) => Number(a) - Number(b));
+const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: code }));
+
+/**
+ * The CountryCodeSelect component is used to select a country code for a phone number.
+ *
+ * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
+ * @returns {JSX.Element} CountryCodeSelect component
+ */
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCountryCode, }) => {
+    const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
+    useEffect(() => {
+        countryCode && setIsCountryCodeMissing(false);
+    }, [countryCode]);
+    const filteredCodes = countryCodes.filter(code => {
+        return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
+    });
+    return (jsx(Select, { className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value: currentValue }) => currentValue === countryCode), onChange: input => {
+            setCountryCode(input === null || input === void 0 ? void 0 : input.value);
+        }, placeholder: "+45", hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200 }));
+};
+
+/**
+ * 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 {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((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction"]);
+    const [phoneNumber, setPhoneNumber] = useState();
+    const [renderAsInvalid, setRenderAsInvalid] = useState(false);
+    const [countryCode, setCountryCode] = useState(undefined);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = useState(false);
+    const handlePhoneNumberChange = (e) => {
+        const input = e.target.value;
+        setIsPhoneNumberInvalid(!Boolean(input));
+        setPhoneNumber(input);
+    };
+    useEffect(() => {
+        setRenderAsInvalid(isInvalid || isPhoneNumberInvalid);
+    }, [isInvalid, isPhoneNumberInvalid]);
+    return (jsxs(Container$1, { children: [jsx(CountryCodeSelect, { isInvalid: renderAsInvalid, countryCode: countryCode, setCountryCode: setCountryCode }), jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, isInvalid: renderAsInvalid, fieldSize: fieldSize, type: "tel", value: phoneNumber, onChange: handlePhoneNumberChange, disabled: disabled, actions: !disableAction && (jsx(ActionButton, { disabled: !countryCode || !phoneNumber || disabled || renderAsInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+});
+const Container$1 = tw.div `
+  grid
+  grid-cols-min-fr
+  gap-2
+`;
+
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @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((_a, ref) => {
+    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "phoneField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+});
+
+const RadioGroupContext = React.createContext(null);
+
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**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
+ */
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }) => {
+    return (jsx(FormGroup, Object.assign({ label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsx(RadioGroupContext.Provider, Object.assign({ value: {
+                    id,
+                    value,
+                    name: name || id,
+                    onChange,
+                    disabled,
+                    isInvalid,
+                } }, { children: children })) })) })));
+};
+RadioGroup.displayName = "RadioGroup";
+const Flex = tw.div `
+${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)}
+`;
+
+/**
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
+ */
+const RadioItem = ({ label, value, dataTestId, className, description }) => {
+    const groupCtx = React.useContext(RadioGroupContext);
+    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+};
+const InputWrapper = tw.label `tu-radioitem__wrapper`;
+const Input = tw.input `
+tu-radioitem
+${({ $checked }) => $checked && tws `tu-radioitem--checked`}
+${({ $disabled }) => $disabled && tws `tu-radioitem--disabled`}
+${({ $isInvalid }) => $isInvalid && tws `tu-radioitem--invalid`}
+`;
+const LabelContainer$1 = tw.div `tu-radioitem__label-container`;
+const Description$1 = tw.label `
+tu-radioitem__description
+${({ $disabled }) => $disabled && tws `tu-radioitem__description--disabled`}
+`;
+
+/**
+ * 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 = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: "text" }, props))));
+
+/**
+ * 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 = (_a) => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
+    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+                onClear();
+            } }, { children: jsx(Icon, { name: "XMarkIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+};
+const StyledTextInput = twx(TextInput) `
+  tu-search
+  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tws `tu-search--border`}
+  ${({ $widenOnFocus }) => $widenOnFocus && tws `tu-search--widen-on-focus`}
+`;
+
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+const SelectContainer = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
+    return (jsxs(Container, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsx(Label, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
+};
+const Container = tw.label `
+  tu-select__container 
+  tu-select
+  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
+`;
+const InformativeText = twx(Text) `
+  tu-informative-text
+  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
+`;
+
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+const CreatableSelect = (props) => {
+    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
+    const hasError = !!error;
+    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: document.body,
+        isSearchable: disabled ? false : true,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: disabled ? false : true,
+        menuIsOpen: disabled ? false : menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti: isMulti,
+        classNamePrefix,
+        isLoading,
+        id,
+    };
+    return (jsx(SelectContainer, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxs(Fragment, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } }))) : (jsx(ReactCreatableSelect, Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } })))] }) })));
+};
+
+/**
+ * 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((_a, ref) => {
+    var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
+    return (jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
+});
+const StyledTextArea = tw.textarea `
+  tu-textarea
+  ${({ $invalid }) => ($invalid ? tws `tu-textarea--invalid` : null)}
+  ${({ disabled }) => (disabled ? tws `tu-textarea--disabled` : null)}
+  ${({ $resize }) => {
+    switch ($resize) {
+        case "both":
+            return tws `resize`;
+        case "horizontal":
+            return tws `resize-x`;
+        case "vertical":
+            return tws `resize-y`;
+        case "none":
+            return tws `resize-none`;
+        default:
+            return null;
+    }
+}};
+`;
+
+/**
+ * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
+ * Used for TextFields to communicate a maximum allowed input length.
+ *
+ * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
+ * @returns {JSX.Element} TextLengthIndicator component
+ */
+const TextLengthIndicator = ({ length, maxLength }) => {
+    return (jsxs(Root, { children: [length, "/", maxLength] }));
+};
+const Root = tw.span `
+ font-mono
+`;
+
+const TextAreaField = React.forwardRef((_a, ref) => {
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "textAreaField-" + v4();
+    const handleChange = React.useCallback((event) => {
+        setValueLength(event.target.value.length);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+});
+
+/**
+ * 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.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+const TextField = React.forwardRef((_a, ref) => {
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "textField-" + v4();
+    const handleChange = React.useCallback((event) => {
+        setValueLength(event.target.value.length);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+});
+
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+const Toggle = React.forwardRef(({ toggled = false, onChange, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
+    return (jsxs(ToggleWrapper, { children: [jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+                            e.stopPropagation();
+                            onChange(!toggled, e);
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+});
+Toggle.displayName = "Toggle";
+const ToggleWrapper = tw.div `tu-toggle__wrapper`;
+const InputContainer = tw.label `tu-toggle__input-container `;
+const HiddenInput = tw.input `tu-toggle__input`;
+const Switch = tw.label `
+  ${({ $toggled }) => ($toggled ? tws `tu-toggle__switch` : tws `tu-toggle`)}`;
+const SwitchContainer = tw.label `
+tu-toggle__switch-container
+  ${({ $disabled }) => $disabled && tws `tu-toggle--disabled`};
+  ${({ $size }) => ($size === "small" ? tws `tu-toggle--small` : tws `tu-toggle--medium`)};
+  ${({ $toggled }) => $toggled && tws `tu-toggle--toggled`}`;
+const LabelContainer = tw.div `tu-toggle__label-container`;
+const Description = tw.label `
+tu-toggle__description
+${({ $disabled }) => $disabled && tws `tu-toggle__description--disabled`}
+`;
+
+/**
+ * A thin wrapper around the `BaseInput` component for upload input fields.
+ *
+ * NOTE: If shown with a label, please use the `UploadField` component instead.
+ */
+const UploadInput = forwardRef((_a, ref) => {
+    var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
+    return (jsx(UploadInputContainer, { children: jsx(BaseInput, Object.assign({ addonBefore: uploadLabel, ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+            // onClick used to work with nonInteractive option
+            onClick: event => {
+                if (nonInteractive) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            } }, rest)) }));
+});
+const UploadInputContainer = tw.label `
+tu-upload-input`;
+
+/**
+ * Upload fields enable the user to upload Files.
+ */
+const UploadField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "uploadField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+});
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Search, Select, SelectPrefix, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, Toggle, UploadField, UploadInput, getOrderedOptions, isMultiValue, useCustomComponents };