@trackunit/react-form-components 0.0.1 → 0.0.4

package/index.cjs

@@ -10,10 +10,10 @@ var React = require('react');
 var uuid = require('uuid');
 var dateFns = require('date-fns');
 var ReactSelect = require('react-select');
-var ReactAsyncSelect = require('react-select/async');
-var libphonenumberJs = require('libphonenumber-js');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
+var ReactAsyncSelect = require('react-select/async');
+var parsePhoneNumberFromString = require('libphonenumber-js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,9 +38,10 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
-var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
 var ReactAsyncCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncCreatableSelect);
 var ReactCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactCreatableSelect);
+var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSelect);
+var parsePhoneNumberFromString__default = /*#__PURE__*/_interopDefaultLegacy(parsePhoneNumberFromString);
 
 var defaultTranslations = {
 	
@@ -201,7 +202,7 @@ const InputContainer$1 = tailwindStyledComponents.tw.label `
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
     return (jsxRuntime.jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
 };
 const Root$2 = tailwindStyledComponents.tw.label `
@@ -254,7 +255,7 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxRuntime.jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsxRuntime.jsx(Label, Object.assign({ className: tailwindStyledComponents.tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+    return (jsxRuntime.jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsxRuntime.jsx(Label$1, Object.assign({ className: tailwindStyledComponents.tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
 });
 const StyledCheckIcon = tailwindStyledComponents.twx(CheckIcon) `tu-checkbox--icon`;
 const StyledIndeterminateIcon = tailwindStyledComponents.twx(IndeterminateIcon) `tu-checkbox--icon`;
@@ -311,7 +312,7 @@ const FormGroupRoot = tailwindStyledComponents.tw.div `
 const ContainerBefore = tailwindStyledComponents.tw.div `
   tu-form-group__container-before
 `;
-const FormGroupLabel = tailwindStyledComponents.twx(Label) `
+const FormGroupLabel = tailwindStyledComponents.twx(Label$1) `
   component-formGroup-font
 `;
 const ContainerAfter = tailwindStyledComponents.tw.div `
@@ -454,6 +455,58 @@ const NumberField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+const OptionCard = React.forwardRef((_a, ref) => {
+    var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
+    return (jsxRuntime.jsxs(Container$3, Object.assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: id, type: "radio", value: value, className: "hidden peer" }, rest)), jsxRuntime.jsxs(Label, Object.assign({ htmlFor: id, className: className, "$disabled": disabled }, { children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, Object.assign({ variant: "secondary", subtle: disabled }, { children: heading }))), (subheading || description) && (jsxRuntime.jsxs(Content, { children: [subheading && (jsxRuntime.jsx(reactComponents.Text, Object.assign({ weight: "thick", align: "center", subtle: disabled }, { children: subheading }))), description && (jsxRuntime.jsx(reactComponents.Text, Object.assign({ subtle: true, align: "center" }, { children: description })))] }))] }))] })));
+});
+const Container$3 = tailwindStyledComponents.tw.div `
+  contents
+`;
+const Label = tailwindStyledComponents.tw.label `
+  tu-input-base
+  ${p => (p.$disabled ? "tu-input--disabled" : "")}
+  ${p => (p.$disabled ? "cursor-not-allowed" : "cursor-pointer")}
+  aspect-square
+  flex
+  flex-col
+  gap-2
+  justify-center
+  items-center
+  p-6
+  w-full
+  peer-checked:bg-primary-50
+  peer-checked:border-primary-600
+  peer-checked:border-2
+`;
+const Content = tailwindStyledComponents.tw.div `
+  flex
+  flex-col
+  items-center
+`;
+
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
+    return (jsxRuntime.jsxs(Container$2, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsxRuntime.jsx(Label$1, 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$2 = tailwindStyledComponents.tw.label `
+  tu-select__container 
+  tu-select
+  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
+`;
+const InformativeText = tailwindStyledComponents.twx(reactComponents.Text) `
+  tu-informative-text
+  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
+`;
+
 /**
  * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
  * @returns {arg is MultiValue<Option> } is Multivalue
@@ -602,11 +655,11 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
         return null;
     })
         .filter(element => element !== null);
-    return (jsxRuntime.jsxs(Container$2, Object.assign({ style: {
+    return (jsxRuntime.jsxs(Container$1, Object.assign({ style: {
             width: `${width}`,
         }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
 };
-const Container$2 = tailwindStyledComponents.tw.div `
+const Container$1 = tailwindStyledComponents.tw.div `
 tu-select__dynamic-tag--container
 ${({ $ready }) => {
     return $ready ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`;
@@ -786,6 +839,51 @@ const useSelect = (_a) => {
     };
 };
 
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+const CreatableSelect = (props) => {
+    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
+    const hasError = !!error;
+    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: document.body,
+        isSearchable: disabled ? false : true,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: disabled ? false : true,
+        menuIsOpen: disabled ? false : menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti: isMulti,
+        classNamePrefix,
+        isLoading,
+        id,
+    };
+    return (jsxRuntime.jsx(SelectContainer$1, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } })))] }) })));
+};
+
 /**
  * Selects are input components used to choose a value from a set.
  *
@@ -823,9 +921,9 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxRuntime.jsxs(SelectContainer$1, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
+    return (jsxRuntime.jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
 };
-const SelectContainer$1 = tailwindStyledComponents.tw.div `
+const SelectContainer = tailwindStyledComponents.tw.div `
   tu-select
   ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
   ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
@@ -863,12 +961,12 @@ const ADDITIONAL_COUNTRY_CODES_SUPPORTED_BY_BACKEND = [
     "883",
 ];
 const countryCodesSet = [
-    ...new Set(libphonenumberJs.getCountries().map(code => libphonenumberJs.getCountryCallingCode(code))),
+    ...new Set(parsePhoneNumberFromString.getCountries().map(code => parsePhoneNumberFromString.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 }));
+const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+${code}` })); // We add the + sign to the value so that the google libphonenumber-js can parse it correctly.
 
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -876,7 +974,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: co
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
  * @returns {JSX.Element} CountryCodeSelect component
  */
-const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCountryCode, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = React.useState(false);
     React.useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -884,37 +982,88 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCount
     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 }));
+    return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled }));
+};
+
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ */
+const usePhoneInput = (initialValue) => {
+    const [countryCode, setCountryCode] = React.useState("");
+    const [phoneNumber, setPhoneNumber] = React.useState("");
+    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = React.useState(false);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = React.useState(false);
+    React.useEffect(() => {
+        var _a, _b;
+        if (initialValue) {
+            const safePhoneNumber = getPhoneNumberWithPlus(initialValue);
+            const number = parsePhoneNumberFromString__default["default"](safePhoneNumber);
+            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
+            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+        }
+    }, [initialValue]);
+    const handleCountryCodeChange = (option) => {
+        var _a;
+        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
+        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
+    };
+    const handlePhoneNumberChange = (event) => {
+        setPhoneNumber(event.target.value);
+        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
+    };
+    return {
+        countryCode,
+        phoneNumber,
+        isCountryCodeInvalid,
+        isPhoneNumberInvalid,
+        handleCountryCodeChange,
+        handlePhoneNumberChange,
+    };
 };
 
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
  * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @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$1, { 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))] }));
+    var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange"]);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value);
+    return (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
 });
-const Container$1 = tailwindStyledComponents.tw.div `
+const Container = tailwindStyledComponents.tw.div `
   grid
   grid-cols-min-fr
   gap-2
@@ -940,7 +1089,7 @@ const PhoneField = React.forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + uuid.v4();
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value !== null && value !== void 0 ? value : defaultValue, isInvalid: renderAsInvalid }, rest)) })));
 });
 
 const RadioGroupContext = React__namespace.createContext(null);
@@ -981,7 +1130,7 @@ ${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inlin
 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}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
 const Input = tailwindStyledComponents.tw.input `
@@ -1021,71 +1170,6 @@ const StyledTextInput = tailwindStyledComponents.twx(TextInput) `
   ${({ $widenOnFocus }) => $widenOnFocus && tailwindStyledComponents.tws `tu-search--widen-on-focus`}
 `;
 
-/**
- * The SelectContainer component.
- *
- * @param {SelectContainerProps} props - The props for the SelectContainer component
- * @returns {JSX.Element} SelectContainer component
- */
-const SelectContainer = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsxRuntime.jsx(Label, 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 = tailwindStyledComponents.tw.label `
-  tu-select__container 
-  tu-select
-  ${({ $hasError }) => ($hasError ? tailwindStyledComponents.tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tailwindStyledComponents.tws `tu-select--disabled` : null)}
-`;
-const InformativeText = tailwindStyledComponents.twx(reactComponents.Text) `
-  tu-informative-text
-  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
-`;
-
-/**
- * The CreatableSelect component.
- *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
- */
-const CreatableSelect = (props) => {
-    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
-    const hasError = !!error;
-    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: document.body,
-        isSearchable: disabled ? false : true,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus: disabled ? false : true,
-        menuIsOpen: disabled ? false : menuIsOpen,
-        openMenuOnClick: true,
-        closeMenuOnSelect: false,
-        isMulti: isMulti,
-        classNamePrefix,
-        isLoading,
-        id,
-    };
-    return (jsxRuntime.jsx(SelectContainer, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncCreatableSelect__default["default"], Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } }))) : (jsxRuntime.jsx(ReactCreatableSelect__default["default"], Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } })))] }) })));
-};
-
 /**
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
@@ -1179,7 +1263,7 @@ const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, disable
     return (jsxRuntime.jsxs(ToggleWrapper, { children: [jsxRuntime.jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsxRuntime.jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
                             e.stopPropagation();
                             onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsxRuntime.jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsxRuntime.jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsxRuntime.jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsxRuntime.jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tailwindStyledComponents.tw.div `tu-toggle__wrapper`;
@@ -1250,10 +1334,11 @@ exports.DropZone = DropZone;
 exports.EmailField = EmailField;
 exports.EmailInput = EmailInput;
 exports.FormGroup = FormGroup;
-exports.Label = Label;
+exports.Label = Label$1;
 exports.MultiSelectMenuItem = MultiSelectMenuItem;
 exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;
+exports.OptionCard = OptionCard;
 exports.PhoneField = PhoneField;
 exports.PhoneInput = PhoneInput;
 exports.RadioGroup = RadioGroup;

package/index.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tip, MenuItem, Tag, Spinner, Text } from '@trackunit/react-components';
+import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { tw, twx, tws } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, cloneElement, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
-import ReactAsyncSelect from 'react-select/async';
-import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
+import ReactAsyncSelect from 'react-select/async';
+import parsePhoneNumberFromString, { getCountries, getCountryCallingCode } from 'libphonenumber-js';
 
 var defaultTranslations = {
 	
@@ -172,7 +172,7 @@ const InputContainer$1 = tw.label `
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-const Label = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
     return (jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
 };
 const Root$2 = tw.label `
@@ -225,7 +225,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
         }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label$1, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
 });
 const StyledCheckIcon = twx(CheckIcon) `tu-checkbox--icon`;
 const StyledIndeterminateIcon = twx(IndeterminateIcon) `tu-checkbox--icon`;
@@ -282,7 +282,7 @@ const FormGroupRoot = tw.div `
 const ContainerBefore = tw.div `
   tu-form-group__container-before
 `;
-const FormGroupLabel = twx(Label) `
+const FormGroupLabel = twx(Label$1) `
   component-formGroup-font
 `;
 const ContainerAfter = tw.div `
@@ -425,6 +425,58 @@ const NumberField = forwardRef((_a, ref) => {
     return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+const OptionCard = forwardRef((_a, ref) => {
+    var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
+    return (jsxs(Container$3, Object.assign({ "data-testid": dataTestId }, { children: [jsx("input", Object.assign({ ref: ref, id: id, type: "radio", value: value, className: "hidden peer" }, rest)), jsxs(Label, Object.assign({ htmlFor: id, className: className, "$disabled": disabled }, { children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx(Heading, Object.assign({ variant: "secondary", subtle: disabled }, { children: heading }))), (subheading || description) && (jsxs(Content, { children: [subheading && (jsx(Text, Object.assign({ weight: "thick", align: "center", subtle: disabled }, { children: subheading }))), description && (jsx(Text, Object.assign({ subtle: true, align: "center" }, { children: description })))] }))] }))] })));
+});
+const Container$3 = tw.div `
+  contents
+`;
+const Label = tw.label `
+  tu-input-base
+  ${p => (p.$disabled ? "tu-input--disabled" : "")}
+  ${p => (p.$disabled ? "cursor-not-allowed" : "cursor-pointer")}
+  aspect-square
+  flex
+  flex-col
+  gap-2
+  justify-center
+  items-center
+  p-6
+  w-full
+  peer-checked:bg-primary-50
+  peer-checked:border-primary-600
+  peer-checked:border-2
+`;
+const Content = tw.div `
+  flex
+  flex-col
+  items-center
+`;
+
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+const SelectContainer$1 = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
+    return (jsxs(Container$2, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsx(Label$1, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
+};
+const Container$2 = tw.label `
+  tu-select__container 
+  tu-select
+  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
+  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
+`;
+const InformativeText = twx(Text) `
+  tu-informative-text
+  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
+`;
+
 /**
  * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
  * @returns {arg is MultiValue<Option> } is Multivalue
@@ -573,11 +625,11 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix }) => {
         return null;
     })
         .filter(element => element !== null);
-    return (jsxs(Container$2, Object.assign({ style: {
+    return (jsxs(Container$1, Object.assign({ style: {
             width: `${width}`,
         }, "$ready": isReady, ref: containerRef }, { children: [renderedElements, postFix] })));
 };
-const Container$2 = tw.div `
+const Container$1 = tw.div `
 tu-select__dynamic-tag--container
 ${({ $ready }) => {
     return $ready ? tws `visible` : tws `invisible`;
@@ -757,6 +809,51 @@ const useSelect = (_a) => {
     };
 };
 
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+const CreatableSelect = (props) => {
+    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
+    const hasError = !!error;
+    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
+    const selectProps = {
+        value,
+        menuPlacement,
+        maxMenuHeight,
+        onChange,
+        "aria-label": label,
+        "data-testid": dataTestId,
+        components: customComponents,
+        styles: customStyles,
+        tabSelectsValue: false,
+        blurInputOnSelect: !isMulti,
+        menuPortalTarget: document.body,
+        isSearchable: disabled ? false : true,
+        menuShouldBlockScroll: true,
+        menuShouldScrollIntoView: true,
+        openMenuOnFocus: disabled ? false : true,
+        menuIsOpen: disabled ? false : menuIsOpen,
+        openMenuOnClick: true,
+        closeMenuOnSelect: false,
+        isMulti: isMulti,
+        classNamePrefix,
+        isLoading,
+        id,
+    };
+    return (jsx(SelectContainer$1, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxs(Fragment, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } }))) : (jsx(ReactCreatableSelect, Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
+                        !disabled && openMenuHandler();
+                    }, onMenuClose: () => {
+                        closeMenuHandler();
+                    } })))] }) })));
+};
+
 /**
  * Selects are input components used to choose a value from a set.
  *
@@ -794,9 +891,9 @@ const Select = (props) => {
         onMenuScrollToBottom,
         onInputChange,
     };
-    return (jsxs(SelectContainer$1, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
+    return (jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, hideSelectedOptions: false, isMulti: isMulti, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
 };
-const SelectContainer$1 = tw.div `
+const SelectContainer = tw.div `
   tu-select
   ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
   ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
@@ -839,7 +936,7 @@ const countryCodesSet = [
 ]
     .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 }));
+const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+${code}` })); // We add the + sign to the value so that the google libphonenumber-js can parse it correctly.
 
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -847,7 +944,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: co
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
  * @returns {JSX.Element} CountryCodeSelect component
  */
-const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCountryCode, }) => {
+const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }) => {
     const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
     useEffect(() => {
         countryCode && setIsCountryCodeMissing(false);
@@ -855,37 +952,88 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, setCount
     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 }));
+    return (jsx(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled }));
+};
+
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+const checkIfPhoneNumberHasPlus = (phoneNumber) => {
+    return phoneNumber.startsWith("+");
+};
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+const getPhoneNumberWithPlus = (phoneNumber) => {
+    const stringPhoneNumber = phoneNumber.toString();
+    return checkIfPhoneNumberHasPlus(stringPhoneNumber) ? stringPhoneNumber : `+${stringPhoneNumber}`;
+};
+
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ */
+const usePhoneInput = (initialValue) => {
+    const [countryCode, setCountryCode] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [isCountryCodeInvalid, setIsCountryCodeInvalid] = useState(false);
+    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = useState(false);
+    useEffect(() => {
+        var _a, _b;
+        if (initialValue) {
+            const safePhoneNumber = getPhoneNumberWithPlus(initialValue);
+            const number = parsePhoneNumberFromString(safePhoneNumber);
+            setCountryCode((_a = number === null || number === void 0 ? void 0 : number.countryCallingCode.toString()) !== null && _a !== void 0 ? _a : "");
+            setPhoneNumber((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
+        }
+    }, [initialValue]);
+    const handleCountryCodeChange = (option) => {
+        var _a;
+        setCountryCode((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : "");
+        setIsCountryCodeInvalid(!Boolean(option === null || option === void 0 ? void 0 : option.value));
+    };
+    const handlePhoneNumberChange = (event) => {
+        setPhoneNumber(event.target.value);
+        setIsPhoneNumberInvalid(!event.target.value || !Boolean(event.target.value.trim()));
+    };
+    return {
+        countryCode,
+        phoneNumber,
+        isCountryCodeInvalid,
+        isPhoneNumberInvalid,
+        handleCountryCodeChange,
+        handlePhoneNumberChange,
+    };
 };
 
 /**
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
  * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  * @returns {JSX.Element} - The PhoneInput component.
  */
 const PhoneInput = forwardRef((_a, ref) => {
-    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction"]);
-    const [phoneNumber, setPhoneNumber] = useState();
-    const [renderAsInvalid, setRenderAsInvalid] = useState(false);
-    const [countryCode, setCountryCode] = useState(undefined);
-    const [isPhoneNumberInvalid, setIsPhoneNumberInvalid] = useState(false);
-    const handlePhoneNumberChange = (e) => {
-        const input = e.target.value;
-        setIsPhoneNumberInvalid(!Boolean(input));
-        setPhoneNumber(input);
-    };
-    useEffect(() => {
-        setRenderAsInvalid(isInvalid || isPhoneNumberInvalid);
-    }, [isInvalid, isPhoneNumberInvalid]);
-    return (jsxs(Container$1, { children: [jsx(CountryCodeSelect, { isInvalid: renderAsInvalid, countryCode: countryCode, setCountryCode: setCountryCode }), jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, isInvalid: renderAsInvalid, fieldSize: fieldSize, type: "tel", value: phoneNumber, onChange: handlePhoneNumberChange, disabled: disabled, actions: !disableAction && (jsx(ActionButton, { disabled: !countryCode || !phoneNumber || disabled || renderAsInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange"]);
+    const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value);
+    return (jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
 });
-const Container$1 = tw.div `
+const Container = tw.div `
   grid
   grid-cols-min-fr
   gap-2
@@ -911,7 +1059,7 @@ const PhoneField = forwardRef((_a, ref) => {
     var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
     const htmlForId = id ? id : "phoneField-" + v4();
-    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value !== null && value !== void 0 ? value : defaultValue, isInvalid: renderAsInvalid }, rest)) })));
 });
 
 const RadioGroupContext = React.createContext(null);
@@ -952,7 +1100,7 @@ ${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)
 const RadioItem = ({ label, value, dataTestId, className, description }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tw.label `tu-radioitem__wrapper`;
 const Input = tw.input `
@@ -992,71 +1140,6 @@ const StyledTextInput = twx(TextInput) `
   ${({ $widenOnFocus }) => $widenOnFocus && tws `tu-search--widen-on-focus`}
 `;
 
-/**
- * The SelectContainer component.
- *
- * @param {SelectContainerProps} props - The props for the SelectContainer component
- * @returns {JSX.Element} SelectContainer component
- */
-const SelectContainer = ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }) => {
-    return (jsxs(Container, Object.assign({ "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": isDisabled }, { children: [label && !hideLabel && jsx(Label, Object.assign({ htmlFor: id }, { children: label })), children, (hasError || info) && (jsx(InformativeText, Object.assign({ size: "small", "$hasError": hasError !== null && hasError !== void 0 ? hasError : false }, { children: hasError ? error : info })))] })));
-};
-const Container = tw.label `
-  tu-select__container 
-  tu-select
-  ${({ $hasError }) => ($hasError ? tws `tu-select--invalid` : null)}
-  ${({ $isDisabled }) => ($isDisabled ? tws `tu-select--disabled` : null)}
-`;
-const InformativeText = twx(Text) `
-  tu-informative-text
-  ${p => (p.$hasError ? `tu-informative-text--error` : null)}
-`;
-
-/**
- * The CreatableSelect component.
- *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
- * @returns {JSX.Element} CreatableSelect component
- */
-const CreatableSelect = (props) => {
-    const { id, dataTestId = "select", async, maxMenuHeight = 200, label, error, disabled, isMulti, value, hideLabel, description, info, options, onChange, isLoading, classNamePrefix = "", filterOption, prefix, } = props;
-    const hasError = !!error;
-    const { refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
-    const selectProps = {
-        value,
-        menuPlacement,
-        maxMenuHeight,
-        onChange,
-        "aria-label": label,
-        "data-testid": dataTestId,
-        components: customComponents,
-        styles: customStyles,
-        tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
-        menuPortalTarget: document.body,
-        isSearchable: disabled ? false : true,
-        menuShouldBlockScroll: true,
-        menuShouldScrollIntoView: true,
-        openMenuOnFocus: disabled ? false : true,
-        menuIsOpen: disabled ? false : menuIsOpen,
-        openMenuOnClick: true,
-        closeMenuOnSelect: false,
-        isMulti: isMulti,
-        classNamePrefix,
-        isLoading,
-        id,
-    };
-    return (jsx(SelectContainer, Object.assign({ label: label, hideLabel: hideLabel, id: id, hasError: hasError, error: error, description: description, info: info, dataTestId: dataTestId, isDisabled: disabled }, { children: jsxs(Fragment, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncCreatableSelect, Object.assign({ "aria-label": label, maxMenuHeight: maxMenuHeight, "data-testid": dataTestId, components: customComponents }, props, { onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } }))) : (jsx(ReactCreatableSelect, Object.assign({}, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, onMenuOpen: () => {
-                        !disabled && openMenuHandler();
-                    }, onMenuClose: () => {
-                        closeMenuHandler();
-                    } })))] }) })));
-};
-
 /**
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
@@ -1150,7 +1233,7 @@ const Toggle = React.forwardRef(({ toggled = false, onChange, disabled, size = "
     return (jsxs(ToggleWrapper, { children: [jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
                             e.stopPropagation();
                             onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tw.div `tu-toggle__wrapper`;
@@ -1207,4 +1290,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Search, Select, SelectPrefix, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, Toggle, UploadField, UploadInput, getOrderedOptions, isMultiValue, useCustomComponents };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label$1 as Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Search, Select, SelectPrefix, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, Toggle, UploadField, UploadInput, getOrderedOptions, isMultiValue, useCustomComponents };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.77",
+    "@trackunit/react-components": "0.1.78",
     "@trackunit/tailwind-styled-components": "0.0.55",
     "react": "18.2.0",
     "uuid": "8.3.2",

package/src/components/OptionCard/OptionCard.d.ts

@@ -0,0 +1,24 @@
+import { CommonProps, IconProps } from "@trackunit/react-components";
+import { InputHTMLAttributes, ReactElement } from "react";
+export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
+    /**
+     * Icon displayed at the top inside the OptionCard.
+     */
+    icon?: ReactElement<IconProps>;
+    /**
+     * Heading displayed below the icon.
+     */
+    heading?: string;
+    /**
+     * Subheading displayed above the description.
+     */
+    subheading?: string;
+    /**
+     * Descriptive text displayed inside the OptionCard.
+     */
+    description?: string;
+}
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+export declare const OptionCard: import("react").ForwardRefExoticComponent<IOptionCardProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,10 +1,17 @@
-import { Dispatch, SetStateAction } from "react";
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { SingleValue } from "react-select";
 import { CountryCode } from "./CountryCodes";
-interface CountryCodeSelectProps {
+interface CountryCodeSelectProps extends CommonProps {
     excludedCountries?: CountryCode;
     countryCode?: string;
-    setCountryCode: Dispatch<SetStateAction<string | undefined>>;
     isInvalid?: boolean;
+    onChange?: (option: SingleValue<{
+        label: string;
+        value: string;
+    }>) => void;
+    disabled?: boolean;
+    placeholder?: string;
 }
 /**
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -12,5 +19,5 @@ interface CountryCodeSelectProps {
  * @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 declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
 export {};

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

@@ -16,6 +16,7 @@ export interface PhoneInputProps extends BaseInputExposedProps {
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
  * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
  * @param {boolean} [disabled=false] - Whether the component is disabled or not.
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.

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

@@ -0,0 +1,13 @@
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+export declare const checkIfPhoneNumberHasPlus: (phoneNumber: string) => boolean;
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+export declare const getPhoneNumberWithPlus: (phoneNumber: string | number | readonly string[]) => string;

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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export interface usePhoneInputProps {
+    /**
+     * The current country code value.
+     */
+    countryCode: string;
+    /**
+     * The current phone number value.
+     */
+    phoneNumber: string;
+    /**
+     * Whether the country code value is invalid.
+     */
+    isCountryCodeInvalid: boolean;
+    /**
+     * Whether the phone number value is invalid.
+     */
+    isPhoneNumberInvalid: boolean;
+    /**
+     * A function for handling changes to the country code input.
+     */
+    handleCountryCodeChange: (option: {
+        label: string;
+        value: string;
+    } | null) => void;
+    /**
+     * A function for handling changes to the phone number input.
+     */
+    handlePhoneNumberChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ */
+export declare const usePhoneInput: (initialValue: string | number | readonly string[] | undefined) => usePhoneInputProps;

package/src/index.d.ts

@@ -10,6 +10,7 @@ export * from "./components/FormGroup/FormGroup";
 export * from "./components/Label/Label";
 export * from "./components/NumberField/NumberField";
 export * from "./components/NumberInput/NumberInput";
+export * from "./components/OptionCard/OptionCard";
 export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneInput/PhoneInput";
 export * from "./components/RadioGroup";