merged with staging

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.39",
+  "version": "0.5.40",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

src/components/PhoneNumberInput/country-dropdown.js

@@ -75,8 +75,9 @@ const CountryDropdown = ({
                 circle
                 size={20}
               />
-              <Text ellipsis type="caption">
-                {country[0]} (+{country[2]})
+              <Text className="sg-country-list-item-label" type="caption">
+                <span className="sg-country-list-item-label__country-name">{country[0]}</span>
+                <span className="sg-country-list-item-label__country-code">+{country[2]}</span>
               </Text>
             </Block>
           ))

src/components/PhoneNumberInput/styles.scss

@@ -36,6 +36,19 @@
         &:hover, &.selected {
             background-color: var(--background-highlight-color);
         }
+
+        .sg-country-list-item-label {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+
+            &__country-name {
+                text-overflow: ellipsis;
+                max-width: 78%;
+                overflow: auto;
+            }
+        }
     }
     .sg-country-search {
         padding: 16px 16px 8px;

src/index.js

@@ -24,3 +24,4 @@ export * from './components/DatePicker/index'
 export * from './components/KeyValueEditor/index'
 export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'
+export * from './components/PhoneNumberInput/index'