"use client" import "react-international-phone/style.css" import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js" import { Input as AriaInput, Label as AriaLabel, TextField, } from "react-aria-components" import { useController, useFormContext, useWatch } from "react-hook-form" import { CountrySelector, DialCodePreview, ParsedCountry, usePhoneInput, } from "react-international-phone" import { useIntl } from "react-intl" import { ChevronDownIcon } from "@/components/Icons" import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage" import Label from "@/components/TempDesignSystem/Form/Label" import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./phone.module.css" import type { ChangeEvent } from "react" import type { PhoneProps } from "./phone" export default function Phone({ ariaLabel = "Phone number input", disabled = false, label, name = "phoneNumber", placeholder = "", registerOptions = { required: true, }, }: PhoneProps) { const { formatMessage } = useIntl() const { control, setValue } = useFormContext() const phone = useWatch({ name }) const { field, fieldState, formState } = useController({ control, disabled, name, rules: registerOptions, }) const { country, handlePhoneValueChange, inputValue, setCountry } = usePhoneInput({ defaultCountry: isValidPhoneNumber(formState.defaultValues?.phoneNumber) ? parsePhoneNumber( formState.defaultValues?.phoneNumber ).country?.toLowerCase() : "se", forceDialCode: true, value: phone, }) function handleSelectCountry(value: ParsedCountry) { setCountry(value.iso2) } function handleChange(evt: ChangeEvent) { handlePhoneValueChange(evt) setValue(name, evt.target.value) } return (

( )} /> {label}

) }