@trackunit/react-components 0.1.76 → 0.1.77

package/index.js

@@ -1,23 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useMemo, createContext, useContext, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
+import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { useMeasure, useCopyToClipboard } from 'react-use';
-import { v4 } from 'uuid';
-import { format, formatDistance } from 'date-fns';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import usePortal from 'react-useportal';
-import ReactSelect, { components } from 'react-select';
-export { default as ValueType } from 'react-select';
-import ReactAsyncCreatableSelect from 'react-select/async-creatable';
-import ReactCreatableSelect from 'react-select/creatable';
-import ReactAsyncSelect from 'react-select/async';
-import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
+import { format, formatDistance } from 'date-fns';
 import { color } from '@trackunit/ui-design-tokens';
 
 const docs = {
@@ -71,16 +64,6 @@ function __rest(s, e) {
                 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());
-    });
 }
 
 /**
@@ -98,7 +81,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
-    return (jsx(Container$a, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsx(Container$7, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -128,7 +111,7 @@ const StyledSpinner$1 = tw.span `
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$a = tw.div `
+const Container$7 = tw.div `
   tu-spinner--container
   ${getCenteringStyles()}
   
@@ -238,12 +221,12 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!IconComponent) {
         return null;
     }
-    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$9, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$6, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
 };
 const LoadingDot = tw.span `
   tu-loading-dot
 `;
-const Root$9 = tw.span `
+const Root$6 = tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -287,48 +270,6 @@ const Root$9 = tw.span `
 }}
 `;
 
-/**
- * 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`}
-`;
-
 /**
  * The StarButton component is used for favorite actions or similar.
  *
@@ -336,9 +277,9 @@ ${({ $fieldSize }) => $fieldSize === "small" && tws `tu-action-button--small`}
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx(Flex$2, Object.assign({ onClick: onClick, "data-test-id": "starred-filter" }, { children: jsx(CustomIcon, { name: "StarIcon", "$starred": starred }) })));
+    return (jsx(Flex$1, Object.assign({ onClick: onClick, "data-test-id": "starred-filter" }, { children: jsx(CustomIcon, { name: "StarIcon", "$starred": starred }) })));
 };
-const Flex$2 = tw.div `
+const Flex$1 = tw.div `
   flex
   items-center
 `;
@@ -434,13 +375,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxs("div", { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description$2, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] })) : (jsxs(Fragment, { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description$2, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] }));
+    const body = inline ? (jsxs("div", { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] })) : (jsxs(Fragment, { children: [title && jsx(Text$1, Object.assign({ weight: "bold" }, { children: title !== null && title !== void 0 ? title : children })), children && (jsx(Description, Object.assign({ weight: !title ? "bold" : "normal", "$hasTitle": !!title }, { children: children })))] }));
     React.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$9, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+    return (jsxs(Container$6, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
 };
 const CloseButtonContainer = tw.div `
   ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
@@ -454,7 +395,7 @@ const getBackgroundColor = () => ({ $color }) => {
     };
     return colors[$color];
 };
-const Container$9 = tw.div `
+const Container$6 = tw.div `
   tu-alert
   ${p => (p.$inline ? tws `tu-alert--inline` : null)}
   ${getBackgroundColor()}
@@ -468,7 +409,7 @@ const ContentDetails = tw.div `
 const ContentBody = tw.div `
   tu-alert__content-body
 `;
-const Description$2 = twx(Text$1) `
+const Description = twx(Text$1) `
   ${p => (p.$hasTitle ? tws `tu-alert__description` : null)}
 `;
 const RightAligned = tw.div `
@@ -507,37 +448,6 @@ const StyledText$2 = tw.text `
   ${getBadgeModifierClass()}
 `;
 
-/**
- * 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)}
-`;
-
 const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
@@ -655,9 +565,9 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(Container$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
+    return (jsx(Container$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
 };
-const Container$8 = twx(DensityContainer) `
+const Container$5 = twx(DensityContainer) `
   tu-card__footer-density-container
   ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
 `;
@@ -704,101 +614,19 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$7, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
+    return (jsx(Root$5, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$4, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
 };
-const Root$8 = twx(DensityContainer) `
+const Root$5 = twx(DensityContainer) `
   tu-card__header-density-container 
   ${p => p.$hideSeparator && tws `tu-card__header-density-container--borderless`}
 `;
-const Container$7 = tw.div `
+const Container$4 = tw.div `
   tu-card__header
 `;
 const HeadingContainer$1 = tw.div `
   tu-card__header-heading-container
 `;
 
-/**
- * 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$2 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsx(Root$7, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
-};
-const Root$7 = 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$2, 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`}
-`;
-
 /**
  * The Collapse component is used to condense non-important information.
  *
@@ -813,7 +641,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer$2, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
 const Rotate = twx(Icon) `
   ${p => (p.$expanded ? tws `tu-icon--animated-rotate-expanded` : null)}
@@ -825,7 +653,7 @@ const StyledCollapse = tw.div `
 const CollapseLabel = tw.div `
   tu-collapse__label
 `;
-const LabelContainer$2 = tw.div `
+const LabelContainer = tw.div `
   tu-collapse__label__container
 `;
 const Collapsible = ({ children, expanded, id }) => {
@@ -860,21 +688,48 @@ const StyledCopyableText = tw.span `
   tu-copyable-text
   ${p => (p.$animating ? tws `tu-copyable-text--animating` : null)}`;
 
+const localeLookup = {
+    en: enGB,
+    "en-US": enUS,
+    "en-GB": enGB,
+    da,
+    de,
+    cs,
+    nl,
+    fr,
+    fi,
+    hu,
+    it,
+    nb,
+    pl,
+    pt,
+    ru,
+    ro,
+    es,
+    sv,
+    ja,
+    th,
+};
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+const useLocale = (language) => {
+    return localeLookup[language] || localeLookup.en;
+};
+
 /**
- * A wrapper around BaseInput with a pop-up day picker.
+ * The DayPicker component is used when the user needs to select a date.
  *
- * NOTE: If shown with a label, please use the `DateField` component instead.
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
  */
-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)));
-});
+const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
+    const locale = useLocale(language);
+    return (jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
+};
 
 /**
  * The hook that powers the Popover component.
@@ -977,9 +832,9 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxs(Container$6, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
+    return (jsxs(Container$3, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
 };
-const Container$6 = tw.div `
+const Container$3 = tw.div `
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -1001,134 +856,6 @@ const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
     }
 });
 
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsx(Flex$1, Object.assign({ className: className, "data-testid": dataTestId && `${dataTestId}-parent` }, { children: children })));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
-const Flex$1 = tw.div `
-  inline-flex
-`;
-const StyledPopover = twx(Popover) `
-  tu-tooltip__container
-`;
-const Content = tw.div `
-  tu-tooltip__content
-  ${p => (p.$mode === "light" ? tws `tu-tooltip--light` : null)}
-`;
-
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- *
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
-    const ifAnchorTag = renderAs === "a";
-    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: dataTestId && `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) })));
-};
-const TipContainer = tw.text `
-  tu-tip
-`;
-
-/**
- * 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$2) `
-  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 })) })));
-});
-
-const localeLookup = {
-    en: enGB,
-    "en-US": enUS,
-    "en-GB": enGB,
-    da,
-    de,
-    cs,
-    nl,
-    fr,
-    fi,
-    hu,
-    it,
-    nb,
-    pl,
-    pt,
-    ru,
-    ro,
-    es,
-    sv,
-    ja,
-    th,
-};
-/**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-const useLocale = (language) => {
-    return localeLookup[language] || localeLookup.en;
-};
-
-/**
- * The DayPicker component is used when the user needs to select a date.
- *
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {JSX.Element} DayPicker component
- */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
-    const locale = useLocale(language);
-    return (jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
-};
-
 /**
  * The DayPickerPopover component returns a button which when clicked shows the daypicker.
  *
@@ -1182,7 +909,7 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
             window.removeEventListener("keyup", onKeyPress);
         };
     }, [open, onClose]);
-    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs(Root$6, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
+    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs(Root$4, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
         // eslint-disable-next-line react/jsx-no-useless-fragment
         jsx(Fragment, {})) })));
 };
@@ -1204,7 +931,7 @@ const StyledCard$1 = twx(Card) `
   ${({ $open }) => $open && tws `tu-drawer__card--open`}
   ${({ $position }) => getPositionStyles($position)}
 `;
-const Root$6 = tw.div `
+const Root$4 = tw.div `
   tu-drawer
 `;
 const Overlay = tw.div `
@@ -1212,103 +939,6 @@ const Overlay = tw.div `
   ${({ $open }) => $open && tws `tu-drawer__overlay--open`}
 `;
 
-/**
- * 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$5, 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$5 = 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 })) })));
-});
-
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  *
@@ -1333,9 +963,9 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
-    return (jsxs(Container$5, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
+    return (jsxs(Container$2, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
 };
-const Container$5 = tw.div `
+const Container$2 = tw.div `
  tu-indicator
  ${({ $color }) => {
     switch ($color) {
@@ -1418,12 +1048,12 @@ const Ping = tw.span `
  */
 const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }) => {
     const containerProps = useContainerProps({ className, dataTestId });
-    return (jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
+    return (jsxs(Container$1, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children && typeof children !== "string" ? (children) : (jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: children !== null && children !== void 0 ? children : label }))), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
-const Container$4 = tw.div `
+const Container$1 = tw.div `
   group tu-menu-item
   ${({ $selected }) => ($selected ? tws `tu-menu-item--selected ` : "tu-menu-item--unselected")}
   ${({ $focused }) => ($focused ? tws `tu-menu-item--focused ` : "")}
@@ -1452,9 +1082,9 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
+    return (jsx(Container, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
 };
-const Container$3 = tw.div `
+const Container = tw.div `
   tu-menu-list
   ${props => props.$withStickyHeader && tws `tu-menu-list--sticky-header`}
 `;
@@ -1701,11 +1331,11 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
                         } })) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
-const Root$4 = tw.div `
+const Root$3 = tw.div `
   tu-more-menu
   ${({ variant }) => (variant === "primary" ? tws `tu-more-menu--primary` : "")}
 `;
@@ -1784,27 +1414,6 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
-/**
- * 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 })) })));
-});
-
 /**
  *  The tag component is used to categorize elements in the ui.
  *
@@ -1859,6 +1468,47 @@ const IconContainer = tw.div `
   tu-tag__icon-container
 `;
 
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsx(Flex, Object.assign({ className: className, "data-testid": dataTestId && `${dataTestId}-parent` }, { children: children })));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
+const Flex = tw.div `
+  inline-flex
+`;
+const StyledPopover = twx(Popover) `
+  tu-tooltip__container
+`;
+const Content = tw.div `
+  tu-tooltip__content
+  ${p => (p.$mode === "light" ? tws `tu-tooltip--light` : null)}
+`;
+
+/**
+ * The Tip component is used to show helpful tips or contextual information to the users.
+ * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
+ *
+ * @param {TipProps} props - The props for the Tip component
+ * @returns {JSX.Element} Tip component
+ */
+const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
+    const ifAnchorTag = renderAs === "a";
+    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: dataTestId && `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: dataTestId && `${dataTestId}-icon` }, iconProps)) })) })));
+};
+const TipContainer = tw.text `
+  tu-tip
+`;
+
 /**
  * Pageheader component is used to display a page header.
  *
@@ -1970,573 +1620,19 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
-        return (jsx(Root$3, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
+        return (jsx(Root$2, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(TextStyled, Object.assign({ dataTestId: "current-page" }, { children: currentPage })), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs(Root$2, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(TextStyled, Object.assign({ dataTestId: "current-page" }, { children: currentPage })), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
 };
-const Root$3 = tw.div `
+const Root$2 = tw.div `
 tu-pagination
 `;
 const TextStyled = twx(Text$1) `
   tu-pagination__text
 `;
 
-/**
- * The SelectContainer component.
- *
- * @param {SelectContainerProps} props - The props for the SelectContainer component
- * @returns {JSX.Element} SelectContainer component
- */
-const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxs(Container$2, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsx(Label$2, 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$2 = 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$1) `
-  tu-informative-text
-  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
-`;
-
-/**
- * @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$1, Object.assign({ style: {
-            width: `${width}`,
-        }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
-};
-const Container$1 = 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,
-    };
-};
-
-/**
- * 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$1, 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();
-                    } })))] }) })));
-};
-
-/**
- * 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, 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 = 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, { 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 = 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)) })));
-});
-
 function useConfirmExit(confirmExit, when = true) {
     const { navigator } = useContext(UNSAFE_NavigationContext);
     useEffect(() => {
@@ -2590,84 +1686,6 @@ const Prompt = ({ when, message }) => {
     return null;
 };
 
-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$2, 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 Spacer component is used for adding a bit of space in the ui.
  *
@@ -2780,7 +1798,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         }
         return tws `visible`;
     };
-    return (jsxs(Root$2, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
+    return (jsxs(Root$1, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": dataTestId && `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
@@ -2800,7 +1818,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                             : null;
                     }) }))) }))) : null] })));
 };
-const Root$2 = tw.div `
+const Root$1 = tw.div `
   tu-sidebar
 `;
 const breakpointClasses = {
@@ -2817,85 +1835,6 @@ const ChildContainer = tw.div `
   ${({ $breakpoint }) => breakpointClasses[$breakpoint]}
 `;
 
-/**
- * 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$1, { children: [length, "/", maxLength] }));
-};
-const Root$1 = 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 })) })));
-});
-
 /**
  * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
  * - with an indicator (dot)
@@ -2925,68 +1864,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-/**
- * 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$2, 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 })) })));
-});
-
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
  *
@@ -3261,4 +2138,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneField, PhoneInput, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useClickOutside, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useResize, useTimeout };