Merged in chore/SW-3145-move-country (pull request #2545)

chore: SW-3145 Moved country into design system

* chore: SW-3145 Moved country into design system


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -18,7 +18,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import { Input as BookingWidgetInput } from "../Input"
 import { isMultiRoomError } from "../utils"

apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx

@@ -13,7 +13,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
-import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import { RemoveExtraRooms } from "../BookingCode"
 import { isMultiRoomError } from "../utils"

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -3,17 +3,21 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import { Select } from "@scandic-hotels/design-system/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getLocalizedLanguageOptions } from "@/constants/languages"
 
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import useLang from "@/hooks/useLang"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
+
+import { editProfileErrors } from "../schema"
 
 import styles from "./formContent.module.css"
 
@@ -59,9 +63,15 @@ export default function FormContent() {
             registerOptions={{ required: true }}
           />
           <CountrySelect
+            countries={getFormattedCountryList(intl)}
+            errorMessage={getErrorMessage(
+              intl,
+              editProfileErrors.COUNTRY_REQUIRED
+            )}
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
+            lang={lang}
             name="address.countryCode"
             registerOptions={{ required: true }}
           />

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
 import { logger } from "@scandic-hotels/common/logger"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import {
@@ -23,7 +24,6 @@ import {
   privacyPolicy,
 } from "@/constants/webHrefs"
 
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
@@ -32,6 +32,8 @@ import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import useLang from "@/hooks/useLang"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 import { formatPhoneNumber } from "@/utils/phone"
 
 // import { type SignUpSchema, signUpSchema } from "./schema"
@@ -169,9 +171,15 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 registerOptions={{ required: true }}
               />
               <CountrySelect
+                countries={getFormattedCountryList(intl)}
+                errorMessage={getErrorMessage(
+                  intl,
+                  signupErrors.COUNTRY_REQUIRED
+                )}
                 label={intl.formatMessage({
                   defaultMessage: "Country",
                 })}
+                lang={lang}
                 name="address.countryCode"
                 registerOptions={{ required: true }}
               />

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -5,26 +5,30 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
+import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { getMultiroomDetailsSchema } from "./schema"
+import { getMultiroomDetailsSchema, multiroomErrors } from "./schema"
 
 import styles from "./details.module.css"
 
 const formID = "enter-details"
 export default function Details() {
   const intl = useIntl()
+  const lang = useLang()
 
   const { addPreSubmitCallback, rooms } = useEnterDetailsStore((state) => ({
     addPreSubmitCallback: state.actions.addPreSubmitCallback,
@@ -187,9 +191,15 @@ export default function Details() {
           />
           <CountrySelect
             className={styles.fullWidth}
+            countries={getFormattedCountryList(intl)}
+            errorMessage={getErrorMessage(
+              intl,
+              multiroomErrors.COUNTRY_REQUIRED
+            )}
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
+            lang={lang}
             name="countryCode"
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -5,20 +5,27 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
+import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
+import {
+  guestDetailsSchema,
+  roomOneErrors,
+  signedInDetailsSchema,
+} from "./schema"
 import Signup from "./Signup"
 
 import styles from "./details.module.css"
@@ -31,6 +38,7 @@ import type {
 const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
+  const lang = useLang()
 
   const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
     lastRoom: state.lastRoom,
@@ -168,6 +176,9 @@ export default function Details({ user }: DetailsProps) {
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
+            lang={lang}
+            countries={getFormattedCountryList(intl)}
+            errorMessage={getErrorMessage(intl, roomOneErrors.COUNTRY_REQUIRED)}
             name="countryCode"
             readOnly={!!user}
             registerOptions={{ required: true, onBlur: updateDetailsStore }}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx

@@ -2,6 +2,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
@@ -9,8 +10,8 @@ import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
 import Alert from "@/components/TempDesignSystem/Alert"
-import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import Select from "@/components/TempDesignSystem/Form/Select"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./selectQuantityStep.module.css"
 
@@ -116,7 +117,14 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
           items={cardQuantityOptions}
           isNestedInModal
         />
-        <ErrorMessage errors={errors} name="quantityWithCard" />
+        <ErrorMessage
+          errors={errors}
+          name="quantityWithCard"
+          messageLabel={getErrorMessage(
+            intl,
+            errors["quantityWithCard"]?.message?.toString()
+          )}
+        />
       </div>
     </div>
   )

apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx

@@ -4,10 +4,14 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas"
 
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
+import useLang from "@/hooks/useLang"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./modifyContact.module.css"
 
@@ -23,6 +27,7 @@ export default function ModifyContact({
   isFirstStep,
 }: ModifyContactProps) {
   const intl = useIntl()
+  const lang = useLang()
   const { getValues, setValue } = useFormContext()
 
   useEffect(() => {
@@ -57,9 +62,15 @@ export default function ModifyContact({
           </div>
           <div className={styles.row}>
             <CountrySelect
+              countries={getFormattedCountryList(intl)}
+              errorMessage={getErrorMessage(
+                intl,
+                signupErrors.COUNTRY_REQUIRED
+              )}
               label={intl.formatMessage({
                 defaultMessage: "Country",
               })}
+              lang={lang}
               name="countryCode"
             />
           </div>

apps/scandic-web/components/TempDesignSystem/Form/Country/index.tsx

@@ -1,20 +0,0 @@
-"use client"
-
-import { useMediaQuery } from "usehooks-ts"
-
-import CountryCombobox from "./CountryCombobox"
-import CountrySelect from "./CountrySelect"
-
-import type { CountryProps } from "./country"
-
-export default function Country(props: CountryProps) {
-  const isDesktop = useMediaQuery("(min-width: 768px)", {
-    initializeWithValue: false,
-  })
-
-  return isDesktop ? (
-    <CountryCombobox {...props} />
-  ) : (
-    <CountrySelect {...props} />
-  )
-}

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -7,13 +7,14 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { logger } from "@scandic-hotels/common/logger"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { Select } from "@scandic-hotels/design-system/Select"
 
 import useLang from "@/hooks/useLang"
 import { getLocalizedMonthName } from "@/utils/dateFormatting"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 import { rangeArray } from "@/utils/rangeArray"
 
-import ErrorMessage from "../ErrorMessage"
 import { DateName, type DateProps } from "./date"
 
 import styles from "./date.module.css"
@@ -172,7 +173,14 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           />
         </div>
       </div>
-      <ErrorMessage errors={formState.errors} name={field.name} />
+      <ErrorMessage
+        errors={formState.errors}
+        name={field.name}
+        messageLabel={getErrorMessage(
+          intl,
+          formState.errors[field.name]?.message?.toString()
+        )}
+      />
     </>
   )
 }

apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx

@@ -1,13 +0,0 @@
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import styles from "./error.module.css"
-
-export default function Error({ children }: React.PropsWithChildren) {
-  return (
-    <Caption className={styles.message} fontOnly>
-      <MaterialIcon icon="info" color="Icon/Feedback/Error" />
-      {children}
-    </Caption>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/index.tsx

@@ -1,21 +0,0 @@
-import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
-import { useIntl } from "react-intl"
-
-import { getErrorMessage } from "../Input/errors"
-import Error from "./Error"
-
-import type { ErrorMessageProps } from "./errorMessage"
-
-export default function ErrorMessage<T>({
-  errors,
-  name,
-}: ErrorMessageProps<T>) {
-  const intl = useIntl()
-  return (
-    <RHFErrorMessage
-      errors={errors}
-      name={name}
-      render={({ message }) => <Error>{getErrorMessage(intl, message)}</Error>}
-    />
-  )
-}

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -9,7 +9,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
 
-import { getErrorMessage } from "./errors"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./input.module.css"
 

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -11,7 +11,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input } from "@scandic-hotels/design-system/Input"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import { getErrorMessage } from "../Input/errors"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./passwordInput.module.css"
 

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -16,14 +16,15 @@ import {
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input } from "@scandic-hotels/design-system/Input"
 import { Label } from "@scandic-hotels/design-system/Label"
 
 import { getDefaultCountryFromLang } from "@/constants/languages"
 
-import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import useLang from "@/hooks/useLang"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./phone.module.css"
 
@@ -149,7 +150,14 @@ export default function Phone({
           readOnly={readOnly}
           type="tel"
         />
-        <ErrorMessage errors={formState.errors} name={name} />
+        <ErrorMessage
+          errors={formState.errors}
+          name={name}
+          messageLabel={getErrorMessage(
+            intl,
+            formState.errors[name]?.message?.toString()
+          )}
+        />
       </TextField>
     </div>
   )

apps/scandic-web/utils/countries.ts

@@ -1,7 +1,19 @@
-import { countriesMap } from "@scandic-hotels/trpc/constants/countries"
+import {
+  countries,
+  countriesMap,
+} from "@scandic-hotels/trpc/constants/countries"
+
+import type { IntlShape } from "react-intl"
 
 export function isValidCountry(
   country: string
 ): country is keyof typeof countriesMap {
   return country in countriesMap
 }
+
+export function getFormattedCountryList(intl: IntlShape) {
+  return countries.map((country) => ({
+    ...country,
+    displayName: intl.formatDisplayName(country.code, { type: "region" }),
+  }))
+}

packages/design-system/lib/components/Form/Country/CountryCombobox.tsx

@@ -1,6 +1,6 @@
-"use client"
+'use client'
 
-import { type SyntheticEvent, useMemo, useState } from "react"
+import { type SyntheticEvent, useMemo, useState } from 'react'
 import {
   Button,
   ComboBox,
@@ -10,38 +10,33 @@ import {
   ListBoxItem,
   Popover,
   useFilter,
-} from "react-aria-components"
-import { useController } from "react-hook-form"
-import { useIntl } from "react-intl"
+} from 'react-aria-components'
+import { useController } from 'react-hook-form'
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-import { countries } from "@scandic-hotels/trpc/constants/countries"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
+import { ErrorMessage } from '../ErrorMessage'
 
-import useLang from "@/hooks/useLang"
+import styles from './country.module.css'
 
-import ErrorMessage from "../ErrorMessage"
+import type { CountryProps } from './country'
 
-import styles from "./country.module.css"
-
-import type { CountryProps } from "./country"
-
-const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
 
 export default function CountryCombobox({
   // hack used since chrome does not respect autocomplete="off"
-  autoComplete = "nope",
-  className = "",
+  autoComplete = 'nope',
+  className = '',
+  errorMessage,
   label,
-  name = "country",
+  lang = 'en',
+  countries,
+  name = 'country',
   readOnly = false,
   registerOptions = {},
 }: CountryProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
-  const { startsWith } = useFilter({ sensitivity: "base" })
-  const [filterValue, setFilterValue] = useState("")
+  const { startsWith } = useFilter({ sensitivity: 'base' })
+  const [filterValue, setFilterValue] = useState('')
   const { field, formState, fieldState } = useController({
     name,
     rules: registerOptions,
@@ -51,9 +46,7 @@ export default function CountryCombobox({
     function mapCountry(country: (typeof countries)[number]) {
       return {
         value: country.code,
-        label:
-          intl.formatDisplayName(country.code, { type: "region" }) ||
-          country.name,
+        label: country.displayName || country.name,
       }
     }
 
@@ -71,11 +64,11 @@ export default function CountryCombobox({
       .sort((a, b) => collator.compare(a.label, b.label))
 
     return [...prioCountries, ...restCountries]
-  }, [filterValue, intl, lang, startsWith])
+  }, [filterValue, lang, startsWith, countries])
 
   function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
     setFilterValue(evt.currentTarget.value)
-    const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
+    const isAutoCompleteEvent = !('inputType' in evt.nativeEvent)
     if (isAutoCompleteEvent) {
       const { value } = evt.currentTarget
       const cc = countries.find((c) => c.name === value || c.code === value)
@@ -96,7 +89,7 @@ export default function CountryCombobox({
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? "")}
+        onSelectionChange={(c) => field.onChange(c ?? '')}
         selectedKey={field.value}
         menuTrigger="focus"
       >
@@ -149,8 +142,8 @@ export default function CountryCombobox({
                   <Typography
                     variant={
                       isSelected
-                        ? "Body/Paragraph/mdBold"
-                        : "Body/Paragraph/mdRegular"
+                        ? 'Body/Paragraph/mdBold'
+                        : 'Body/Paragraph/mdRegular'
                     }
                   >
                     <span>{item.label}</span>
@@ -161,7 +154,11 @@ export default function CountryCombobox({
           </ListBox>
         </Popover>
       </ComboBox>
-      <ErrorMessage errors={formState.errors} name={name} />
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        messageLabel={errorMessage}
+      />
     </div>
   )
 }

packages/design-system/lib/components/Form/Country/CountrySelect.tsx

@@ -1,30 +1,26 @@
-"use client"
+'use client'
 
-import { useMemo } from "react"
-import { useController } from "react-hook-form"
-import { useIntl } from "react-intl"
+import { useMemo } from 'react'
+import { useController } from 'react-hook-form'
 
-import { Select } from "@scandic-hotels/design-system/Select"
-import { countries } from "@scandic-hotels/trpc/constants/countries"
+import { Select } from '../../Select'
 
-import useLang from "@/hooks/useLang"
+import { ErrorMessage } from '../ErrorMessage'
 
-import ErrorMessage from "../ErrorMessage"
+import type { CountryProps } from './country'
 
-import type { CountryProps } from "./country"
-
-const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
 
 export default function CountrySelect({
-  className = "",
+  className = '',
+  errorMessage,
   label,
-  name = "country",
+  countries,
+  lang = 'en',
+  name = 'country',
   readOnly = false,
   registerOptions = {},
 }: CountryProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
   const { field, formState, fieldState } = useController({
     name,
     rules: registerOptions,
@@ -34,9 +30,7 @@ export default function CountrySelect({
     function mapCountry(country: (typeof countries)[number]) {
       return {
         value: country.code,
-        label:
-          intl.formatDisplayName(country.code, { type: "region" }) ||
-          country.name,
+        label: country.displayName || country.name,
       }
     }
 
@@ -52,7 +46,7 @@ export default function CountrySelect({
       .sort((a, b) => collator.compare(a.label, b.label))
 
     return [...prioCountries, ...restCountries]
-  }, [intl, lang])
+  }, [lang, countries])
 
   return (
     <div className={className}>
@@ -64,11 +58,15 @@ export default function CountrySelect({
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? "")}
+        onSelectionChange={(c) => field.onChange(c ?? '')}
         selectedKey={field.value}
         data-testid={name}
       />
-      <ErrorMessage errors={formState.errors} name={name} />
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        messageLabel={errorMessage}
+      />
     </div>
   )
 }

packages/design-system/lib/components/Form/Country/country.module.css

@@ -6,7 +6,7 @@
   height: 56px;
 
   &[data-required] .label::after {
-    content: " *";
+    content: ' *';
   }
 
   &[data-open] {
@@ -86,12 +86,12 @@
   }
 }
 
-.inner:has(input:placeholder-shown, input[data-focused="true"], input:valid)
+.inner:has(input:placeholder-shown, input[data-focused='true'], input:valid)
   .labelValue {
   display: initial;
 }
 
-.inner:has(input[value=""]:not([data-focused="true"])) .labelEmpty {
+.inner:has(input[value='']:not([data-focused='true'])) .labelEmpty {
   display: initial;
 }
 
@@ -104,7 +104,7 @@
   transition: min-height 150ms ease;
   width: 100%;
 
-  &[value]:not([value=""]) {
+  &[value]:not([value='']) {
     min-height: 18px;
   }
 }

packages/design-system/lib/components/Form/Country/country.ts

@@ -1,9 +1,16 @@
-import type { RegisterOptions } from "react-hook-form"
+import type { RegisterOptions } from 'react-hook-form'
 
 export type CountryProps = {
   autoComplete?: string
   className?: string
+  errorMessage?: string
   label: string
+  countries: {
+    code: string
+    name: string
+    displayName?: string
+  }[]
+  lang?: string
   name?: string
   placeholder?: string
   readOnly?: boolean

packages/design-system/lib/components/Form/Country/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useMediaQuery } from 'usehooks-ts'
+
+import CountryCombobox from './CountryCombobox'
+import CountrySelect from './CountrySelect'
+
+import type { CountryProps } from './country'
+
+export default function Country(props: CountryProps) {
+  const isDesktop = useMediaQuery('(min-width: 768px)', {
+    initializeWithValue: false,
+  })
+
+  return isDesktop ? (
+    <CountryCombobox {...props} />
+  ) : (
+    <CountrySelect {...props} />
+  )
+}

packages/design-system/lib/components/Form/ErrorMessage/Error.tsx

@@ -0,0 +1,18 @@
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+
+import styles from './error.module.css'
+import { Typography } from '../../Typography'
+
+export function Error({ children }: React.PropsWithChildren) {
+  return (
+    <Typography
+      className={styles.message}
+      variant="Body/Supporting text (caption)/smRegular"
+    >
+      <span>
+        <MaterialIcon icon="info" color="Icon/Feedback/Error" />
+        {children}
+      </span>
+    </Typography>
+  )
+}

packages/design-system/lib/components/Form/ErrorMessage/error.module.css

@@ -2,6 +2,6 @@
   align-items: center;
   color: var(--Text-Interactive-Error);
   display: flex;
-  gap: var(--Spacing-x-half);
-  margin: var(--Spacing-x1) 0 0;
+  gap: var(--Space-x05);
+  margin: var(--Space-x1) 0 0;
 }

packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts

@@ -1,16 +1,16 @@
-import type { FieldValuesFromFieldErrors } from "@hookform/error-message"
+import type { FieldValuesFromFieldErrors } from '@hookform/error-message'
 import type {
   FieldErrors,
   FieldName,
   FieldValues,
   Message,
   MultipleFieldErrors,
-} from "react-hook-form"
+} from 'react-hook-form'
 
 export type ErrorMessageProps<TFieldErrors> = {
   errors?: FieldErrors<FieldValues>
   name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
-  message?: Message
+  messageLabel?: Message
   render?: (data: {
     message: Message
     messages?: MultipleFieldErrors

packages/design-system/lib/components/Form/ErrorMessage/index.tsx

@@ -0,0 +1,19 @@
+import { ErrorMessage as RHFErrorMessage } from '@hookform/error-message'
+
+import { Error } from './Error'
+
+import type { ErrorMessageProps } from './errorMessage'
+
+export function ErrorMessage<T>({
+  errors,
+  name,
+  messageLabel,
+}: ErrorMessageProps<T>) {
+  return (
+    <RHFErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => <Error>{messageLabel ?? message}</Error>}
+    />
+  )
+}

packages/design-system/package.json

@@ -15,6 +15,8 @@
     "./Divider": "./dist/components/Divider/index.js",
     "./Footnote": "./dist/components/Footnote/index.js",
     "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
+    "./Form/Country": "./dist/components/Form/Country/index.js",
+    "./Form/ErrorMessage": "./dist/components/Form/ErrorMessage/index.js",
     "./Form/RadioCard": "./dist/components/Form/RadioCard/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",