@trackunit/react-components 0.1.64 → 0.1.65

package/index.js

@@ -11,12 +11,13 @@ 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 { useClickOutside } from 'react-browser-hooks';
 import usePortal from 'react-useportal';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
 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 { HelmetProvider, Helmet } from 'react-helmet-async';
 import { color } from '@trackunit/ui-design-tokens';
 
 const docs = {
@@ -97,7 +98,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$9, 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$a, 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) {
@@ -127,7 +128,7 @@ const StyledSpinner$1 = tw.span `
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$9 = tw.div `
+const Container$a = tw.div `
   tu-spinner--container
   ${getCenteringStyles()}
   
@@ -439,7 +440,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$8, 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$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] })))] }))] })));
 };
 const CloseButtonContainer = tw.div `
   ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
@@ -453,7 +454,7 @@ const getBackgroundColor = () => ({ $color }) => {
     };
     return colors[$color];
 };
-const Container$8 = tw.div `
+const Container$9 = tw.div `
   tu-alert
   ${p => (p.$inline ? tws `tu-alert--inline` : null)}
   ${getBackgroundColor()}
@@ -654,9 +655,9 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @returns {JSX.Element} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
-    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
+    return (jsx(Container$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density, direction: "row" }, { children: children })));
 };
-const Container$7 = twx(DensityContainer) `
+const Container$8 = twx(DensityContainer) `
   tu-card__footer-density-container
   ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
 `;
@@ -703,13 +704,13 @@ 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$6, { 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$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" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
   ${p => p.$hideSeparator && tws `tu-card__header-density-container--borderless`}
 `;
-const Container$6 = tw.div `
+const Container$7 = tw.div `
   tu-card__header
 `;
 const HeadingContainer$1 = tw.div `
@@ -980,9 +981,9 @@ const PopoverLink = twx(Link) `
  * @returns {JSX.Element} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxs(Container$5, 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$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] })));
 };
-const Container$5 = tw.div `
+const Container$6 = tw.div `
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -1320,9 +1321,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$4, 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$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 })))] })));
 };
-const Container$4 = tw.div `
+const Container$5 = tw.div `
  tu-indicator
  ${({ $color }) => {
     switch ($color) {
@@ -1405,12 +1406,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$3, Object.assign({}, containerProps, { onClick: e => {
+    return (jsxs(Container$4, 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 !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
-const Container$3 = tw.div `
+const Container$4 = tw.div `
   group tu-menu-item
   ${({ $selected }) => ($selected ? tws `tu-menu-item--selected ` : "tu-menu-item--unselected")}
   ${({ $focused }) => ($focused ? tws `tu-menu-item--focused ` : "")}
@@ -1439,9 +1440,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$2, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
+    return (jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
 };
-const Container$2 = tw.div `
+const Container$3 = tw.div `
   tu-menu-list
   ${props => props.$withStickyHeader && tws `tu-menu-list--sticky-header`}
 `;
@@ -1751,192 +1752,6 @@ const TextStyled = 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.forwardRef((_a, ref) => {
-    var { dataTestId, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "fieldSize", "disableAction"]);
-    const [phoneNumber, setPhoneNumber] = React.useState("");
-    const callNumber = () => {
-        return window.open(`tel:${phoneNumber}`);
-    };
-    return (jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, fieldSize: fieldSize, type: "tel", onChange: e => setPhoneNumber(e.target.value), actions: !disableAction && (jsx(ActionButton, { value: phoneNumber, type: "PHONE_NUMBER", onClick: callNumber, dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest)));
-});
-
-function useConfirmExit(confirmExit, when = true) {
-    const { navigator } = useContext(UNSAFE_NavigationContext);
-    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) => {
-    useEffect(() => {
-        if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
-        }
-        return () => {
-            window.onbeforeunload = null;
-        };
-    }, [message, when]);
-    const confirmExit = 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.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} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [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 }), jsxs(LabelContainer$1, { children: [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 && (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 = 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.
- *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
- */
-const Spacer = ({ minHeight, border = false, dataTestId }) => {
-    return jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
-};
-const GetSpacerHeight = () => ({ $minHeight }) => {
-    switch ($minHeight) {
-        case "normal":
-            return tws `tu-spacer--normal`;
-        case "large":
-            return tws `tu-spacer--large`;
-        default:
-            return "";
-    }
-};
-const Space = 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 (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsx(Spacer, { minHeight: "normal" })] }));
-};
-const SectionHeaderContainer = tw.div `tu-section-header`;
-const StyledFlex = tw.div `tu-section-header__flex`;
-
 /**
  * The SelectContainer component.
  *
@@ -1944,9 +1759,9 @@ const StyledFlex = 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 (jsxs(Container$1, 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 })))] })));
+    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$1 = tw.label `
+const Container$2 = tw.label `
   tu-select__container 
   tu-select
   ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
@@ -2105,11 +1920,11 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
         return null;
     })
         .filter(element => element !== null);
-    return (jsxs(Container, Object.assign({ style: {
+    return (jsxs(Container$1, Object.assign({ style: {
             width: `${width}`,
         }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
 };
-const Container = tw.div `
+const Container$1 = tw.div `
 tu-select__dynamic-tag--container
 ${({ $ready }) => {
     return $ready ? tws `visible` : tws `invisible`;
@@ -2380,6 +2195,283 @@ const SelectContainer = 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(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, 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 (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: jsx(PhoneInput, Object.assign({ value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+});
+
+function useConfirmExit(confirmExit, when = true) {
+    const { navigator } = useContext(UNSAFE_NavigationContext);
+    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) => {
+    useEffect(() => {
+        if (when) {
+            window.onbeforeunload = function () {
+                return message;
+            };
+        }
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [message, when]);
+    const confirmExit = 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.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} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [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 }), jsxs(LabelContainer$1, { children: [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 && (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 = 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.
+ *
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
+ */
+const Spacer = ({ minHeight, border = false, dataTestId }) => {
+    return jsx(Space, { "data-testid": dataTestId, "$minHeight": minHeight, "$border": border });
+};
+const GetSpacerHeight = () => ({ $minHeight }) => {
+    switch ($minHeight) {
+        case "normal":
+            return tws `tu-spacer--normal`;
+        case "large":
+            return tws `tu-spacer--large`;
+        default:
+            return "";
+    }
+};
+const Space = 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 (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsx(Spacer, { minHeight: "normal" })] }));
+};
+const SectionHeaderContainer = tw.div `tu-section-header`;
+const StyledFlex = tw.div `tu-section-header__flex`;
+
 /**
  * A hook used to detect what children are overflowing a container.
  *
@@ -3090,4 +3182,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, PhoneInput, Popover, PopoverList, PopoverListItem, PopoverTitle, 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, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };
+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, PopoverList, PopoverListItem, PopoverTitle, 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, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "@trackunit/css-core": "0.0.74",
     "@trackunit/tailwind-styled-components": "0.0.54",
-    "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.60",
+    "react": "18.2.0",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
@@ -15,6 +15,7 @@
     "@trackunit/ui-icons": "0.0.60",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
+    "libphonenumber-js": "1.10.24",
     "react-router-dom": "6.4.5",
     "react-helmet-async": "1.3.0",
     "react-select": "5.7.0",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { CommonProps } from "../../common";
 import { ButtonCommonProps } from "../buttons";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
@@ -12,10 +12,6 @@ interface ActionButtonProps extends ButtonCommonProps, CommonProps {
      * The value to be passed into the button.
      */
     value?: string | null;
-    /**
-     * The onClick event.
-     */
-    onClick?: (e: React.MouseEvent) => void;
     /**
      *  The size of the icon.
      */

package/src/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { PhoneInputProps } from "../PhoneInput/PhoneInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * 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.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from "react";
+import { CountryCode } from "./CountryCodes";
+interface CountryCodeSelectProps {
+    excludedCountries?: CountryCode;
+    countryCode?: string;
+    setCountryCode: Dispatch<SetStateAction<string | undefined>>;
+    isInvalid?: boolean;
+}
+/**
+ * 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
+ */
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, setCountryCode, }: CountryCodeSelectProps) => JSX.Element;
+export {};

package/src/components/PhoneInput/CountryCodes.d.ts

@@ -0,0 +1,5 @@
+export declare const countryCodes: {
+    label: string;
+    value: string;
+}[];
+export type CountryCode = typeof countryCodes;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,20 +1,25 @@
-import * as React from "react";
-import { CommonProps } from "../../common";
+/// <reference types="react" />
 import { BaseInputProps } from "../BaseInput";
-export interface PhoneInputProps extends BaseInputProps, CommonProps {
+type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
+export interface PhoneInputProps extends BaseInputExposedProps {
     /**
-     * A flag to disable the phone button.
+     * To disable the action button.
+     *
+     * @default false
+     * @memberof PhoneInputProps
+     * @example
+     * <PhoneInput disableAction />
      */
     disableAction?: boolean;
 }
 /**
- * A Phone Input component is used for input of the type tel.
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
- * 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.
+ * @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.
  */
-export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/index.d.ts

@@ -26,6 +26,7 @@ export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
+export * from "./PhoneField/PhoneField";
 export * from "./PhoneInput";
 export * from "./Popover";
 export * from "./Popover/Popover";