From f9874fbdc9526aca0df68035d42b2573adaccac1 Mon Sep 17 00:00:00 2001
From: Pieter Beulque <pieterbeulque@gmail.com>
Date: Mon, 9 Feb 2026 15:07:40 +0100
Subject: [PATCH] Switch `CountryPicker` to `Intl.DisplayNames`

---
 clients/packages/ui/package.json              |  1 -
 .../ui/src/components/atoms/CountryPicker.tsx | 33 ++++++++++---------
 clients/pnpm-lock.yaml                        |  8 -----
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/clients/packages/ui/package.json b/clients/packages/ui/package.json
index 97ac847df6..f324b31b39 100644
--- a/clients/packages/ui/package.json
+++ b/clients/packages/ui/package.json
@@ -53,7 +53,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "countries-list": "^3.2.2",
     "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.563.0",
diff --git a/clients/packages/ui/src/components/atoms/CountryPicker.tsx b/clients/packages/ui/src/components/atoms/CountryPicker.tsx
index 378555e3b4..b5e931b9a0 100644
--- a/clients/packages/ui/src/components/atoms/CountryPicker.tsx
+++ b/clients/packages/ui/src/components/atoms/CountryPicker.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { getCountryData, getEmojiFlag, TCountryCode } from 'countries-list'
+import { useMemo } from 'react'
 
 import {
   Select,
@@ -10,18 +10,9 @@ import {
   SelectValue,
 } from './Select'
 
-const getCountryList = (codes: TCountryCode[]) => {
-  return codes
-    .map((countryCode) => ({
-      code: countryCode,
-      country: getCountryData(countryCode),
-      emoji: getEmojiFlag(countryCode),
-    }))
-    .sort((a, b) => a.country.name.localeCompare(b.country.name))
-}
-
 const CountryPicker = ({
   allowedCountries,
+  locale,
   value,
   onChange,
   autoComplete,
@@ -32,6 +23,7 @@ const CountryPicker = ({
   placeholder = 'Country',
 }: {
   allowedCountries: readonly string[]
+  locale?: string
   value?: string
   onChange: (value: string) => void
   autoComplete?: string
@@ -41,7 +33,18 @@ const CountryPicker = ({
   contentClassName?: string
   placeholder?: string
 }) => {
-  const countryMap = getCountryList(allowedCountries as TCountryCode[])
+  const countryList = useMemo(() => {
+    const displayNames = new Intl.DisplayNames(locale ? [locale] : [], {
+      type: 'region',
+    })
+    return allowedCountries
+      .map((code) => ({
+        code,
+        name: displayNames.of(code) ?? code,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name, locale))
+  }, [allowedCountries, locale])
+
   return (
     <Select
       onValueChange={onChange}
@@ -58,16 +61,16 @@ const CountryPicker = ({
         />
       </SelectTrigger>
       <SelectContent className={contentClassName}>
-        {countryMap.map(({ code, country }) => (
+        {countryList.map(({ code, name }) => (
           <SelectItem
             key={code}
             value={code}
-            textValue={country.name}
+            textValue={name}
             className={itemClassName}
           >
             {/* Wrap in div to workaround an issue with browser automatic translation
               https://github.com/shadcn-ui/ui/issues/852 */}
-            <div>{country.name}</div>
+            <div>{name}</div>
           </SelectItem>
         ))}
       </SelectContent>
diff --git a/clients/pnpm-lock.yaml b/clients/pnpm-lock.yaml
index f05dff292a..3f4fde4b3a 100644
--- a/clients/pnpm-lock.yaml
+++ b/clients/pnpm-lock.yaml
@@ -877,9 +877,6 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      countries-list:
-        specifier: ^3.2.2
-        version: 3.2.2
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -5933,9 +5930,6 @@ packages:
       typescript:
         optional: true
 
-  countries-list@3.2.2:
-    resolution: {integrity: sha512-ABJ/RWQBrPWy+hRuZoW+0ooK8p65Eo3WmUZwHm6v4wmfSPznNAKzjy3+UUYrJK2v3182BVsgWxdB6ROidj39kw==}
-
   crawler-user-agents@1.26.0:
     resolution: {integrity: sha512-42Y8R6LcQtlXomY5cHtUYdUTZOLjHJp/0JlDlnPQH6vVTnGUMOcCaHc84VQUH4v2eQNdnoZw/UYIRRLZPnWQNw==}
 
@@ -17807,8 +17801,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  countries-list@3.2.2: {}
-
   crawler-user-agents@1.26.0: {}
 
   create-jest@29.7.0(@types/node@24.10.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@24.10.9)(typescript@5.9.3)):