Telephone country code select (#9473)

* add telephone code select

* add flags

* run svgo on flags

* get it somewhat working on web

* get web closed state working

* verify country code we get from geo

* trim down names to shorter common versions

* add labels to other selects

* make international tel codes a static object

* add component to storybook

* Update src/lib/international-telephone-codes.ts

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* update to new geo hook

* use Intl.DisplayNames, add polyfill

* use in rather than keys().includes()

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/view/screens/Storybook/Forms.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {type TextInput, View} from 'react-native'
 
+import {getDefaultCountry} from '#/lib/international-telephone-codes'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DateField, LabelText} from '#/components/forms/DateField'
@@ -9,7 +10,9 @@ import * as TextField from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {InternationalPhoneCodeSelect} from '#/components/InternationalPhoneCodeSelect'
 import {H1, H3} from '#/components/Typography'
+import {useGeolocation} from '#/geolocation'
 
 export function Forms() {
   const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
@@ -23,6 +26,11 @@ export function Forms() {
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
 
+  const location = useGeolocation()
+  const [telCode, setTelCode] = React.useState(() =>
+    getDefaultCountry(location),
+  )
+
   const inputRef = React.useRef<TextInput>(null)
 
   return (
@@ -119,6 +127,20 @@ export function Forms() {
             label="Input"
           />
         </View>
+
+        <H3>InternationalPhoneCodeSelect</H3>
+
+        <View style={[a.flex_row, a.gap_sm, a.align_center]}>
+          <View>
+            <InternationalPhoneCodeSelect
+              value={telCode}
+              onChange={setTelCode}
+            />
+          </View>
+          <View style={[a.flex_1]}>
+            <TextField.Input label="Phone number" />
+          </View>
+        </View>
       </View>
 
       <View style={[a.gap_md, a.align_start, a.w_full]}>