@trackunit/react-components 0.1.65-alpha-0b53b6cf53.0 → 0.1.66

package/index.cjs

@@ -14,11 +14,12 @@ var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
 var reactBrowserHooks = require('react-browser-hooks');
 var usePortal = require('react-useportal');
-var reactHelmetAsync = require('react-helmet-async');
 var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
+var libphonenumberJs = require('libphonenumber-js');
+var reactHelmetAsync = require('react-helmet-async');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -127,7 +128,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
-    return (jsxRuntime.jsx(Container$9, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsxRuntime.jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsxRuntime.jsx(Container$a, Object.assign({ "$mode": mode, "$centering": centering, className: containerClassName }, { children: jsxRuntime.jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -157,7 +158,7 @@ const StyledSpinner$1 = tailwindStyledComponents.tw.span `
   ${p => (p.$mode === "dark" ? tailwindStyledComponents.tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$9 = tailwindStyledComponents.tw.div `
+const Container$a = tailwindStyledComponents.tw.div `
   tu-spinner--container
   ${getCenteringStyles()}
   
@@ -469,7 +470,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs(Container$8, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsxRuntime.jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxRuntime.jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxRuntime.jsxs(ContentDetails, { children: [jsxRuntime.jsx(ContentBody, { children: body }), onClose && !inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsxRuntime.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 && (jsxRuntime.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 ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+    return (jsxRuntime.jsxs(Container$9, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsxRuntime.jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxRuntime.jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxRuntime.jsxs(ContentDetails, { children: [jsxRuntime.jsx(ContentBody, { children: body }), onClose && !inline ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsxRuntime.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 && (jsxRuntime.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 ? (jsxRuntime.jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
 };
 const CloseButtonContainer = tailwindStyledComponents.tw.div `
   ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert__close-button-container--inline` : tailwindStyledComponents.tws `tu-alert__close-button-container`)}
@@ -483,7 +484,7 @@ const getBackgroundColor = () => ({ $color }) => {
     };
     return colors[$color];
 };
-const Container$8 = tailwindStyledComponents.tw.div `
+const Container$9 = tailwindStyledComponents.tw.div `
   tu-alert
   ${p => (p.$inline ? tailwindStyledComponents.tws `tu-alert--inline` : null)}
   ${getBackgroundColor()}
@@ -684,9 +685,9 @@ const StyledDensityContainer = tailwindStyledComponents.twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsxRuntime.jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
+    return (jsxRuntime.jsx(Container$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
 };
-const Container$7 = tailwindStyledComponents.twx(DensityContainer) `
+const Container$8 = tailwindStyledComponents.twx(DensityContainer) `
   tu-card__footer-density-container
   ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__footer-density-container--borderless`}
 `;
@@ -733,13 +734,13 @@ const StyledHeading = tailwindStyledComponents.tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsxRuntime.jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs(HeadingContainer$1, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
+    return (jsxRuntime.jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs(HeadingContainer$1, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
 };
 const Root$8 = tailwindStyledComponents.twx(DensityContainer) `
   tu-card__header-density-container 
   ${p => p.$hideSeparator && tailwindStyledComponents.tws `tu-card__header-density-container--borderless`}
 `;
-const Container$6 = tailwindStyledComponents.tw.div `
+const Container$7 = tailwindStyledComponents.tw.div `
   tu-card__header
 `;
 const HeadingContainer$1 = tailwindStyledComponents.tw.div `
@@ -1010,9 +1011,9 @@ const PopoverLink = tailwindStyledComponents.twx(reactRouterDom.Link) `
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxRuntime.jsxs(Container$5, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
+    return (jsxRuntime.jsxs(Container$6, Object.assign({ "$divider": divider, className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(StyledText$1, Object.assign({ type: "div", subtle: true, size: "small", weight: "bold", uppercase: true }, { children: children })), action] })));
 };
-const Container$5 = tailwindStyledComponents.tw.div `
+const Container$6 = tailwindStyledComponents.tw.div `
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -1350,9 +1351,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 (jsxRuntime.jsxs(Container$4, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxRuntime.jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsxRuntime.jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsxRuntime.jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
+    return (jsxRuntime.jsxs(Container$5, Object.assign({ "$color": color, "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined }, { children: [jsxRuntime.jsxs(IconBackground, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", "$withBackground": withBackground }, { children: [ping && jsxRuntime.jsx(Ping, { "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" }), icon] })), label !== undefined && withLabel && (jsxRuntime.jsx(Label$1, Object.assign({ "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label" }, { children: label })))] })));
 };
-const Container$4 = tailwindStyledComponents.tw.div `
+const Container$5 = tailwindStyledComponents.tw.div `
  tu-indicator
  ${({ $color }) => {
     switch ($color) {
@@ -1435,12 +1436,12 @@ const Ping = tailwindStyledComponents.tw.span `
  */
 const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }) => {
     const containerProps = useContainerProps({ className, dataTestId });
-    return (jsxRuntime.jsxs(Container$3, Object.assign({}, containerProps, { onClick: e => {
+    return (jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
-const Container$3 = tailwindStyledComponents.tw.div `
+const Container$4 = tailwindStyledComponents.tw.div `
   group tu-menu-item
   ${({ $selected }) => ($selected ? tailwindStyledComponents.tws `tu-menu-item--selected ` : "tu-menu-item--unselected")}
   ${({ $focused }) => ($focused ? tailwindStyledComponents.tws `tu-menu-item--focused ` : "")}
@@ -1469,9 +1470,9 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx(Container$2, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
+    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
 };
-const Container$2 = tailwindStyledComponents.tw.div `
+const Container$3 = tailwindStyledComponents.tw.div `
   tu-menu-list
   ${props => props.$withStickyHeader && tailwindStyledComponents.tws `tu-menu-list--sticky-header`}
 `;
@@ -1781,192 +1782,6 @@ const TextStyled = tailwindStyledComponents.twx(Text$1) `
   tu-pagination__text
 `;
 
-/**
- * A Phone Input component is used for input of the type tel.
- *
- * It has an ActionButton which sends an phone call to the specified number using "tel:" 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 PhoneInput = React__namespace.forwardRef((_a, ref) => {
-    var { dataTestId, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "fieldSize", "disableAction"]);
-    const [phoneNumber, setPhoneNumber] = React__namespace.useState("");
-    const callNumber = () => {
-        return window.open(`tel:${phoneNumber}`);
-    };
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, fieldSize: fieldSize, type: "tel", onChange: e => setPhoneNumber(e.target.value), actions: !disableAction && (jsxRuntime.jsx(ActionButton, { value: phoneNumber, type: "PHONE_NUMBER", onClick: callNumber, dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest)));
-});
-
-function useConfirmExit(confirmExit, when = true) {
-    const { navigator } = React.useContext(reactRouterDom.UNSAFE_NavigationContext);
-    React.useEffect(() => {
-        if (!when) {
-            return;
-        }
-        const push = navigator.push;
-        navigator.push = (...args) => {
-            const result = confirmExit();
-            if (result !== false) {
-                push(...args);
-            }
-        };
-        return () => {
-            navigator.push = push;
-        };
-    }, [navigator, confirmExit, when]);
-}
-/**
- * The usePrompt hook.
- *
- * @param {string} message -
- * @param {boolean} when -
- * @returns {void} void
- */
-const usePrompt = (message, when = true) => {
-    React.useEffect(() => {
-        if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
-        }
-        return () => {
-            window.onbeforeunload = null;
-        };
-    }, [message, when]);
-    const confirmExit = React.useCallback(() => {
-        const confirm = window.confirm(message);
-        return confirm;
-    }, [message]);
-    useConfirmExit(confirmExit, when);
-};
-/**
- * The Prompt function.
- *
- * @param {PromptProps} Props -
- * @returns {void} void
- */
-const Prompt = ({ when, message }) => {
-    usePrompt(message, when);
-    return null;
-};
-
-const RadioGroupContext = React__namespace.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 (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(RadioGroupContext.Provider, Object.assign({ value: {
-                    id,
-                    value,
-                    name: name || id,
-                    onChange,
-                    disabled,
-                    isInvalid,
-                } }, { children: children })) })) })));
-};
-RadioGroup.displayName = "RadioGroup";
-const Flex = tailwindStyledComponents.tw.div `
-${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inline` : tailwindStyledComponents.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__namespace.useContext(RadioGroupContext);
-    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, type: "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 }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, 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 && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
-};
-const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
-const Input = tailwindStyledComponents.tw.input `
-tu-radioitem
-${({ $checked }) => $checked && tailwindStyledComponents.tws `tu-radioitem--checked`}
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem--disabled`}
-${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-radioitem--invalid`}
-`;
-const LabelContainer$1 = tailwindStyledComponents.tw.div `tu-radioitem__label-container`;
-const Description$1 = tailwindStyledComponents.tw.label `
-tu-radioitem__description
-${({ $disabled }) => $disabled && tailwindStyledComponents.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 = React.forwardRef((props, ref) => (jsxRuntime.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 (jsxRuntime.jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsxRuntime.jsx(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
-                onClear();
-            } }, { children: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
-};
-const StyledTextInput = tailwindStyledComponents.twx(TextInput) `
-  tu-search
-  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tailwindStyledComponents.tws `tu-search--border`}
-  ${({ $widenOnFocus }) => $widenOnFocus && tailwindStyledComponents.tws `tu-search--widen-on-focus`}
-`;
-
-/**
- * The Spacer component is used for adding a bit of space in the ui.
- *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
- */
-const Spacer = ({ minHeight, border = false, dataTestId }) => {
-    return jsxRuntime.jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
-};
-const GetSpacerHeight = () => ({ $minHeight }) => {
-    switch ($minHeight) {
-        case "normal":
-            return tailwindStyledComponents.tws `tu-spacer--normal`;
-        case "large":
-            return tailwindStyledComponents.tws `tu-spacer--large`;
-        default:
-            return "";
-    }
-};
-const Space = tailwindStyledComponents.tw.div `
-  ${p => `${p.$border ? `tu-spacer--border` : null}`}
-  ${GetSpacerHeight()}
-`;
-
-/**
- * The SectionHeader component is used on sections to set the section title.
- *
- * @param {SectionHeaderProps} props - The props for the section header component
- * @returns {JSX.Element} SectionHeader component
- */
-const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
-    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
-};
-const SectionHeaderContainer = tailwindStyledComponents.tw.div `tu-section-header`;
-const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
-
 /**
  * The SelectContainer component.
  *
@@ -1974,9 +1789,9 @@ const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
  * @returns {JSX.Element} SelectContainer component
  */
 const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxRuntime.jsxs(Container$1, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsxRuntime.jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
+    return (jsxRuntime.jsxs(Container$2, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsxRuntime.jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
 };
-const Container$1 = tailwindStyledComponents.tw.label `
+const Container$2 = tailwindStyledComponents.tw.label `
   tu-select__container 
   tu-select
   ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
@@ -2135,11 +1950,11 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
         return null;
     })
         .filter(element => element !== null);
-    return (jsxRuntime.jsxs(Container, Object.assign({ style: {
+    return (jsxRuntime.jsxs(Container$1, Object.assign({ style: {
             width: `${width}`,
         }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
 };
-const Container = tailwindStyledComponents.tw.div `
+const Container$1 = tailwindStyledComponents.tw.div `
 tu-select__dynamic-tag--container
 ${({ $ready }) => {
     return $ready ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`;
@@ -2410,6 +2225,283 @@ const SelectContainer = tailwindStyledComponents.tw.div `
 `;
 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(libphonenumberJs.getCountries().map(code => libphonenumberJs.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] = React.useState(false);
+    React.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 (jsxRuntime.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 = React.forwardRef((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction"]);
+    const [phoneNumber, setPhoneNumber] = React.useState();
+    const [renderAsInvalid, setRenderAsInvalid] = React.useState(false);
+    const [countryCode, setCountryCode] = React.useState(undefined);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = React.useState(false);
+    const handlePhoneNumberChange = (e) => {
+        const input = e.target.value;
+        setIsPhoneNumberInvalid(!Boolean(input));
+        setPhoneNumber(input);
+    };
+    React.useEffect(() => {
+        setRenderAsInvalid(isInvalid || isPhoneNumberInvalid);
+    }, [isInvalid, isPhoneNumberInvalid]);
+    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(CountryCodeSelect, { isInvalid: renderAsInvalid, countryCode: countryCode, setCountryCode: setCountryCode }), jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, isInvalid: renderAsInvalid, fieldSize: fieldSize, type: "tel", value: phoneNumber, onChange: handlePhoneNumberChange, disabled: disabled, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: !countryCode || !phoneNumber || disabled || renderAsInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+});
+const Container = tailwindStyledComponents.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 = React.forwardRef((_a, ref) => {
+    var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+});
+
+function useConfirmExit(confirmExit, when = true) {
+    const { navigator } = React.useContext(reactRouterDom.UNSAFE_NavigationContext);
+    React.useEffect(() => {
+        if (!when) {
+            return;
+        }
+        const push = navigator.push;
+        navigator.push = (...args) => {
+            const result = confirmExit();
+            if (result !== false) {
+                push(...args);
+            }
+        };
+        return () => {
+            navigator.push = push;
+        };
+    }, [navigator, confirmExit, when]);
+}
+/**
+ * The usePrompt hook.
+ *
+ * @param {string} message -
+ * @param {boolean} when -
+ * @returns {void} void
+ */
+const usePrompt = (message, when = true) => {
+    React.useEffect(() => {
+        if (when) {
+            window.onbeforeunload = function () {
+                return message;
+            };
+        }
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [message, when]);
+    const confirmExit = React.useCallback(() => {
+        const confirm = window.confirm(message);
+        return confirm;
+    }, [message]);
+    useConfirmExit(confirmExit, when);
+};
+/**
+ * The Prompt function.
+ *
+ * @param {PromptProps} Props -
+ * @returns {void} void
+ */
+const Prompt = ({ when, message }) => {
+    usePrompt(message, when);
+    return null;
+};
+
+const RadioGroupContext = React__namespace.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 (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(Flex, Object.assign({ "$inline": inline, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(RadioGroupContext.Provider, Object.assign({ value: {
+                    id,
+                    value,
+                    name: name || id,
+                    onChange,
+                    disabled,
+                    isInvalid,
+                } }, { children: children })) })) })));
+};
+RadioGroup.displayName = "RadioGroup";
+const Flex = tailwindStyledComponents.tw.div `
+${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inline` : tailwindStyledComponents.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__namespace.useContext(RadioGroupContext);
+    const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, type: "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 }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, 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 && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+};
+const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
+const Input = tailwindStyledComponents.tw.input `
+tu-radioitem
+${({ $checked }) => $checked && tailwindStyledComponents.tws `tu-radioitem--checked`}
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-radioitem--disabled`}
+${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-radioitem--invalid`}
+`;
+const LabelContainer$1 = tailwindStyledComponents.tw.div `tu-radioitem__label-container`;
+const Description$1 = tailwindStyledComponents.tw.label `
+tu-radioitem__description
+${({ $disabled }) => $disabled && tailwindStyledComponents.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 = React.forwardRef((props, ref) => (jsxRuntime.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 (jsxRuntime.jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsxRuntime.jsx(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+                onClear();
+            } }, { children: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+};
+const StyledTextInput = tailwindStyledComponents.twx(TextInput) `
+  tu-search
+  ${({ $showBorderWhenNotInFocus }) => $showBorderWhenNotInFocus && tailwindStyledComponents.tws `tu-search--border`}
+  ${({ $widenOnFocus }) => $widenOnFocus && tailwindStyledComponents.tws `tu-search--widen-on-focus`}
+`;
+
+/**
+ * The Spacer component is used for adding a bit of space in the ui.
+ *
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
+ */
+const Spacer = ({ minHeight, border = false, dataTestId }) => {
+    return jsxRuntime.jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
+};
+const GetSpacerHeight = () => ({ $minHeight }) => {
+    switch ($minHeight) {
+        case "normal":
+            return tailwindStyledComponents.tws `tu-spacer--normal`;
+        case "large":
+            return tailwindStyledComponents.tws `tu-spacer--large`;
+        default:
+            return "";
+    }
+};
+const Space = tailwindStyledComponents.tw.div `
+  ${p => `${p.$border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
+`;
+
+/**
+ * The SectionHeader component is used on sections to set the section title.
+ *
+ * @param {SectionHeaderProps} props - The props for the section header component
+ * @returns {JSX.Element} SectionHeader component
+ */
+const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
+    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
+};
+const SectionHeaderContainer = tailwindStyledComponents.tw.div `tu-section-header`;
+const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
+
 /**
  * A hook used to detect what children are overflowing a container.
  *
@@ -3171,6 +3263,7 @@ exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
+exports.PhoneField = PhoneField;
 exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
 exports.PopoverList = PopoverList;