@12-apps/ui 6.78.4 → 6.80.0

package/src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx

@@ -1,3 +1,5 @@
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Alert from '@mui/material/Alert/index.js';
 import Autocomplete from '@mui/material/Autocomplete/index.js';
 import Box from '@mui/material/Box/index.js';
@@ -38,7 +40,9 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
   handleInputChange,
   handleSelect,
   handleGetCurrentLocation,
-}) => (
+}) => {
+  const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy);
+  return (
   <Box data-testid="address-autocomplete-container">
     <Autocomplete
       freeSolo
@@ -47,13 +51,14 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       onInputChange={handleInputChange}
       onChange={handleSelect}
       loading={loading}
+      loadingText={text.loadingSuggestions}
       disabled={disabled}
       fullWidth={fullWidth}
       getOptionLabel={addressOptionLabel}
       isOptionEqualToValue={isSameAddressOption}
       PaperComponent={AddressSuggestionsPaper}
       noOptionsText={
-        inputValue.length <= MIN_QUERY_LENGTH ? 'Type at least 3 characters' : 'No addresses found'
+        inputValue.length <= MIN_QUERY_LENGTH ? text.typeToSearch : text.noAddressesFound
       }
       renderOption={({ key, ...optionProps }, option, state) => (
         <AddressOption
@@ -87,4 +92,5 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       </Alert>
     )}
   </Box>
-);
+  );
+};

package/src/components/form/AddressAutocomplete/useAddressPredictions.ts

@@ -16,6 +16,7 @@ interface PredictionSink {
   setOptions: (options: AddressOptionValue[]) => void;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
+  fetchFailed: string;
 }
 
 const predictionRequest = (
@@ -55,7 +56,7 @@ const fetchLivePredictions = (
     sink.setApiError(
       status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS
         ? null
-        : 'Failed to fetch address suggestions',
+        : sink.fetchFailed,
     );
   });
 };
@@ -68,7 +69,9 @@ export const useAddressPredictions = ({
   setInputValue,
   setLoading,
   setApiError,
+  fetchFailed,
 }: {
+  fetchFailed: string;
   isLoaded: boolean;
   services: GoogleMapsService;
   restrictions: Restrictions;
@@ -81,8 +84,8 @@ export const useAddressPredictions = ({
   const debounceTimeoutRef = useRef<number | undefined>(undefined);
 
   const sink = useMemo<PredictionSink>(
-    () => ({ setOptions, setLoading, setApiError }),
-    [setLoading, setApiError],
+    () => ({ setOptions, setLoading, setApiError, fetchFailed }),
+    [setLoading, setApiError, fetchFailed],
   );
 
   const debouncedAutocomplete = useCallback(

package/src/components/form/AddressAutocomplete/useAddressSelection.ts

@@ -1,3 +1,4 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
 import type React from 'react';
 import { useCallback } from 'react';
 
@@ -15,6 +16,7 @@ const MOCK_DETAILS_DELAY_MS = 50;
 const PLACE_DETAIL_FIELDS = ['formatted_address', 'address_components', 'geometry'];
 
 interface SelectionSink {
+  messages: Required<AddressAutocompleteCopy>;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
   applyAddress: (address: AddressDetails) => void;
@@ -26,7 +28,7 @@ const resolveMockPlace = (value: AddressPrediction, sink: SelectionSink) => {
 
     const place = MOCK_PLACE_DETAILS[value.place_id];
     if (!place) {
-      sink.setApiError('Address details not found');
+      sink.setApiError(sink.messages.addressDetailsNotFound);
       return;
     }
 
@@ -54,7 +56,7 @@ const resolveLivePlace = (
     sink.setLoading(false);
 
     if (status !== google.maps.places.PlacesServiceStatus.OK || !place) {
-      sink.setApiError('Failed to get address details');
+      sink.setApiError(sink.messages.addressDetailsFailed);
       return;
     }
 
@@ -75,7 +77,9 @@ export const useAddressSelection = ({
   setApiError,
   onSelect,
   applyAddress,
+  messages,
 }: {
+  messages: Required<AddressAutocompleteCopy>;
   services: GoogleMapsService;
   useMockData: boolean;
   setLoading: (loading: boolean) => void;
@@ -95,7 +99,7 @@ export const useAddressSelection = ({
       if (!value) return;
 
       setLoading(true);
-      const sink: SelectionSink = { setLoading, setApiError, applyAddress };
+      const sink: SelectionSink = { setLoading, setApiError, applyAddress, messages };
 
       if (useMockData && 'place_id' in value) {
         resolveMockPlace(value, sink);
@@ -109,5 +113,5 @@ export const useAddressSelection = ({
 
       resolveLivePlace(services.placesService, value, sink);
     },
-    [services, useMockData, setLoading, setApiError, onSelect, applyAddress],
+    [services, useMockData, setLoading, setApiError, onSelect, applyAddress, messages],
   );

package/src/components/form/AddressAutocomplete/useCurrentLocation.ts

@@ -1,3 +1,4 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
 import { useCallback } from 'react';
 
 import { coordinatesOf, toAddressDetails } from './AddressAutocomplete.mapper';
@@ -14,6 +15,7 @@ const GEOLOCATION_OPTIONS: PositionOptions = {
 };
 
 interface LocationSink {
+  messages: Required<AddressAutocompleteCopy>;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
   applyAddress: (address: AddressDetails) => void;
@@ -27,13 +29,13 @@ const resolveMockLocation = (sink: LocationSink) => {
 
     const mockLocation = MOCK_ADDRESSES[0];
     if (!mockLocation) {
-      sink.setApiError('No mock location available');
+      sink.setApiError(sink.messages.noMockLocation);
       return;
     }
 
     const mockDetails = MOCK_PLACE_DETAILS[mockLocation.place_id];
     if (!mockDetails) {
-      sink.setApiError('Mock location details not found');
+      sink.setApiError(sink.messages.mockLocationNotFound);
       return;
     }
 
@@ -57,7 +59,7 @@ const geocodePosition =
 
       const place = status === 'OK' ? results?.[0] : undefined;
       if (!place) {
-        sink.setApiError('Unable to retrieve address for current location');
+        sink.setApiError(sink.messages.locationAddressFailed);
         return;
       }
 
@@ -78,7 +80,9 @@ export const useCurrentLocation = ({
   setLoading,
   setApiError,
   applyAddress,
+  messages,
 }: {
+  messages: Required<AddressAutocompleteCopy>;
   services: GoogleMapsService;
   useMockData: boolean;
   setLoading: (loading: boolean) => void;
@@ -87,11 +91,11 @@ export const useCurrentLocation = ({
 }) =>
   useCallback(() => {
     if (!navigator.geolocation) {
-      setApiError('Geolocation is not supported by this browser');
+      setApiError(messages.geolocationUnsupported);
       return;
     }
 
-    const sink: LocationSink = { setLoading, setApiError, applyAddress };
+    const sink: LocationSink = { setLoading, setApiError, applyAddress, messages };
 
     if (useMockData) {
       setLoading(true);
@@ -100,7 +104,7 @@ export const useCurrentLocation = ({
     }
 
     if (!services.geocoder) {
-      setApiError('Geocoding service not available');
+      setApiError(messages.geocoderUnavailable);
       return;
     }
 
@@ -109,8 +113,8 @@ export const useCurrentLocation = ({
       geocodePosition(services.geocoder, sink),
       () => {
         setLoading(false);
-        setApiError('Unable to retrieve your location');
+        setApiError(messages.locationFailed);
       },
       GEOLOCATION_OPTIONS,
     );
-  }, [services, useMockData, setLoading, setApiError, applyAddress]);
+  }, [services, useMockData, setLoading, setApiError, applyAddress, messages]);

package/src/components/form/AddressAutocomplete/useGoogleMapsAPI.ts

@@ -6,7 +6,11 @@ export interface GoogleMapsService {
   geocoder: google.maps.Geocoder | null;
 }
 
-export const useGoogleMapsAPI = (apiKey: string) => {
+export const useGoogleMapsAPI = (
+  apiKey: string,
+  messages: { loadFailed: string; initFailed: string },
+) => {
+  const { loadFailed, initFailed } = messages;
   const [isLoaded, setIsLoaded] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [useMockData, setUseMockData] = useState(false);
@@ -42,7 +46,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
     };
     
     script.onerror = () => {
-      setError('Failed to load Google Maps API');
+      setError(loadFailed);
     };
 
     document.head.appendChild(script);
@@ -53,7 +57,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
         document.head.removeChild(script);
       }
     };
-  }, [apiKey]);
+  }, [apiKey, loadFailed, initFailed]);
 
   const initializeServices = () => {
     try {
@@ -67,7 +71,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
         setError(null);
       }
     } catch {
-      setError('Failed to initialize Google Maps services');
+      setError(initFailed);
     }
   };
 

package/src/components/form/Button/Button.native.loading.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 import type { TextStyle } from 'react-native';
 
 import { BUTTON_SPINNER_SIZE } from './Button.metrics';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { renderTextChildren } from '../../../platform/text-children';
 
 /**
@@ -17,14 +18,22 @@ import { renderTextChildren } from '../../../platform/text-children';
  * comes from react-native's ActivityIndicator. It used to REPLACE the label, so
  * a loading button had no accessible name (FUT-3646).
  */
-export function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+export function Spinner({
+  color,
+  testID,
+  label = EN_US_UI_LABELS.common.loading,
+}: {
+  color: string;
+  testID: string;
+  label?: string;
+}): React.JSX.Element {
   return (
     <View style={styles.spinner}>
       <ActivityIndicator
         size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}
         color={color}
         testID={testID}
-        accessibilityLabel="loading"
+        accessibilityLabel={label}
       />
     </View>
   );

package/src/components/form/Button/Button.native.tsx

@@ -294,7 +294,7 @@ function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
 export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
   const resolved = resolveButtonProps(rawProps);
   // `ripple` is web-only: kept out of `others` so it never reaches the Pressable (see overflowOf).
-  const { loading, icon, iconPosition, pulse, ripple: _ripple, children, onClick, onPress, ...others } = resolved;
+  const { loading, loadingLabel, icon, iconPosition, pulse, ripple: _ripple, children, onClick, onPress, ...others } = resolved;
   const theme = useUiTheme();
   const look = buttonLook(theme, resolved);
 
@@ -336,7 +336,7 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
         {children}
       </Label>
       {iconPosition === 'right' ? iconNode : null}
-      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : null}
+      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} label={loadingLabel} /> : null}
     </Pressable>
   );
 });

package/src/components/form/Button/Button.types.native.ts

@@ -23,5 +23,7 @@ export type ButtonProps = ButtonBaseProps &
     onPress?: (event: GestureResponderEvent) => void;
     onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
     onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Checkbox/Checkbox.native.tsx

@@ -25,6 +25,7 @@ import {
   resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { Icon } from '../../../icons/Icon.native';
 import type { IconName } from '../../../icons/Icon.types';
 import { webKeyDown } from '../../../platform/aria';
@@ -83,6 +84,7 @@ interface BoxProps {
   indeterminate: boolean;
   inactive: boolean;
   loading: boolean;
+  loadingLabel: string;
   glow: boolean;
   ripple: boolean;
   variant: keyof typeof CHECKBOX_VARIANT;
@@ -127,7 +129,7 @@ function CheckboxBox(props: BoxProps): React.JSX.Element {
           style={styles.spinner}
           size={CHECKBOX_SPINNER.size}
           color={theme.palette.primary.main}
-          accessibilityLabel="loading"
+          accessibilityLabel={props.loadingLabel}
         />
       ) : null}
     </Pressable>
@@ -167,7 +169,7 @@ function helperStyle(theme: UiTheme, error: boolean): TextStyle {
  */
 export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {
   const {
-    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,
+    variant, label, error, helperText, loading, loadingLabel = EN_US_UI_LABELS.common.loading, ripple, glow, pulse: _pulse,
     indeterminate, disabled, size, checked, defaultChecked,
     onChange, onClick, onPress, style, ...others
   } = resolveCheckboxProps(rawProps);
@@ -197,6 +199,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) =>
       indeterminate={Boolean(indeterminate)}
       inactive={inactive}
       loading={Boolean(loading)}
+      loadingLabel={loadingLabel}
       glow={glow}
       ripple={ripple}
       variant={variant}

package/src/components/form/Checkbox/Checkbox.types.native.ts

@@ -21,5 +21,7 @@ export type CheckboxProps = CheckboxBaseProps &
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Command/Command.hooks.ts

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { CommandItem, CommandProps } from './Command.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 type CommandDefaultedKeys =
   | 'open'
@@ -27,7 +28,7 @@ type ResolvedCommandProps = CommandProps &
 const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   open: false,
   items: [],
-  placeholder: 'Type a command or search...',
+  placeholder: EN_US_UI_LABELS.command.placeholder,
   value: '',
   variant: 'default',
   size: 'md',
@@ -36,7 +37,7 @@ const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   pulse: false,
   loading: false,
   disabled: false,
-  emptyMessage: 'No results found',
+  emptyMessage: EN_US_UI_LABELS.command.empty,
   showCategories: true,
   showShortcuts: true,
   showDescriptions: true,

package/src/components/form/Command/Command.parts.tsx

@@ -11,9 +11,10 @@ import type {
   CommandSeparatorProps,
 } from './Command.types';
 import { rem } from '../../../tokens/relative';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 export const CommandEmpty: React.FC<CommandEmptyProps> = ({
-  message = 'No results found',
+  message = EN_US_UI_LABELS.command.empty,
   className,
   style,
   dataTestId,
@@ -33,7 +34,7 @@ export const CommandEmpty: React.FC<CommandEmptyProps> = ({
   );
 
 export const CommandLoading: React.FC<CommandLoadingProps> = ({
-  message = 'Loading...',
+  message = EN_US_UI_LABELS.command.loading,
   className,
   style,
   dataTestId,

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -8,6 +8,7 @@
  * {@link DateRangeStatus} and keeps its own confirm button shut.
  */
 import { isoToMasked } from '../../data-display/DataViews/data-views-day-input';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 import { dayCount, isAfterDay } from './DateRangePicker.dates';
 import type {
@@ -66,7 +67,7 @@ export function defaultMessages(): DateRangePickerMessages {
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
     summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,
-    calendarLabel: 'Calendar',
+    calendarLabel: EN_US_UI_LABELS.dateRangePicker.calendar,
     dayMask,
   };
 }

package/src/components/form/Input/Input.native.tsx

@@ -20,6 +20,7 @@ import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.loo
 import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING } from './Input.metrics';
 import type { InputProps } from './Input.types.native';
 import { webAria, webClick, webDisabled } from '../../../platform/aria';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { fieldHeightPx } from '../../../tokens/field-height.core';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
@@ -101,13 +102,21 @@ function Line({
 }
 
 /** MUI's 20px `CircularProgress` in the end slot; the platform's own arc on a device. */
-function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+function Spinner({
+  color,
+  testID,
+  label,
+}: {
+  color: string;
+  testID: string;
+  label: string;
+}): React.JSX.Element {
   return (
     <ActivityIndicator
       testID={testID}
       size={Platform.OS === 'ios' ? 'small' : INPUT_LOADING.spinnerSize}
       color={color}
-      accessibilityLabel="loading"
+      accessibilityLabel={label}
     />
   );
 }
@@ -153,7 +162,7 @@ function useFocusState(
 export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) => {
   const {
     variant, size, type, label, error, helperText, startAdornment, endAdornment,
-    fullWidth, floating: _floating, glow, pulse, loading, disabled, required,
+    fullWidth, floating: _floating, glow, pulse, loading, loadingLabel = EN_US_UI_LABELS.common.loading, disabled, required,
     style, inputStyle, onClick, onPress, onFocus, onBlur, ...others
   } = resolveInputProps(rawProps);
 
@@ -211,7 +220,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
           {...withoutTestIdProps(others)}
         />
         <Slot side="end">
-          {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} /> : endAdornment}
+          {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} label={loadingLabel} /> : endAdornment}
         </Slot>
       </View>
       <Line text={helperText} style={helperStyle(theme, variant, size, state)} />

package/src/components/form/Input/Input.types.native.ts

@@ -25,5 +25,7 @@ export type InputProps = InputBaseProps &
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
     style?: StyleProp<ViewStyle>;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     inputStyle?: StyleProp<TextStyle>;
   };

package/src/components/form/PhoneInput/PhoneInput.md

@@ -13,7 +13,7 @@ An international phone number input component with country selection, automatic
 | placeholder  | string                            | 'Enter phone number' | Placeholder text                                |
 | icon         | React.ReactNode                   | PhoneIcon            | Custom end adornment icon                       |
 | defaultValue | string                            | ''                   | Initial phone number value                      |
-| countryCode  | CountryCode                       | 'US'                 | Default selected country                        |
+| countryCode  | CountryCode                       | 'BR'                 | Default selected country                        |
 | floating     | boolean                           | false                | Floating label style                            |
 | onChange     | function                          | undefined            | Callback with value, validity, and country code |
 | helper       | string                            | undefined            | Helper text below input                         |
@@ -349,7 +349,7 @@ play: async ({ canvasElement }) => {
 
 #### `countryCode`
 - **Type:** `CountryCode` (e.g., `'US'`, `'GB'`)
-- **Default:** `'US'`
+- **Default:** `'BR'`
 - **Impact:** Initial country selection
 
 #### `defaultValue`

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -10,12 +10,13 @@ import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
-import React, {  } from 'react';
+import React, { useMemo } from 'react';
 
-import { countries } from './countries';
+import { countriesByDisplayName, countryDisplayName } from './countries';
 import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
+import { EN_US_PHONE_INPUT_COPY } from '../../../en-US.form';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
@@ -144,11 +145,10 @@ const PhoneField: React.FC<{
 
 const PHONE_INPUT_DEFAULTS = {
   variant: 'outlined',
-  label: 'Phone Number',
-  placeholder: 'Enter phone number',
   icon: <PhoneIcon />,
   defaultValue: '',
-  countryCode: 'US',
+  // The owner's market: a host that names no country starts at Brazil.
+  countryCode: 'BR',
   floating: false,
   error: false,
   disabled: false,
@@ -163,6 +163,12 @@ const definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>
     Object.entries(props).filter(([, value]) => value !== undefined),
   ) as Partial<PhoneInputProps>;
 
+// The label and placeholder a host passes as props win; then the copy pack's;
+// then the English the field has always shown.
+const copyDefaults = (copy: PhoneInputCopy): Pick<PhoneInputProps, 'label' | 'placeholder'> => ({
+  label: copy.label ?? EN_US_PHONE_INPUT_COPY.label,
+  placeholder: copy.placeholder ?? EN_US_PHONE_INPUT_COPY.placeholder });
+
 const CountryAdornment: React.FC<{
   country?: CountryData;
   menuOpen: boolean;
@@ -227,8 +233,10 @@ const CountryPicker: React.FC<{
   selectedCode?: CountryData['code'];
   onClose: () => void;
   onSelect: (country: CountryData) => void;
-}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {
+  countryName?: PhoneInputCopy['countryName'];
+}> = ({ anchorEl, selectedCode, onClose, onSelect, countryName }) => {
   const theme = useTheme();
+  const listed = useMemo(() => countriesByDisplayName(countryName), [countryName]);
 
   return (
         <CountryMenu
@@ -243,7 +251,7 @@ const CountryPicker: React.FC<{
             horizontal: 'left' }}
           data-testid="country-menu"
         >
-          {countries.map((country) => (
+          {listed.map((country) => (
             <MenuItem
               key={country.code}
               onClick={() => onSelect(country)}
@@ -259,7 +267,7 @@ const CountryPicker: React.FC<{
                 </Typography>
               </ListItemIcon>
               <ListItemText
-                primary={country.name}
+                primary={country.displayName}
                 secondary={country.dial}
                 primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}
                 secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}
@@ -315,7 +323,10 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     errorMessage,
     disabled,
     required,
-    fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
+    fullWidth } = {
+    ...PHONE_INPUT_DEFAULTS,
+    ...copyDefaults(copy),
+    ...definedProps(props) };
   const {
     value,
     selectedCountry,
@@ -337,7 +348,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     value,
     isFocused,
     helper,
-    countryName: selectedCountry?.name,
+    countryName: selectedCountry && countryDisplayName(selectedCountry, copy.countryName),
     copy });
 
   const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
@@ -371,6 +382,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
         selectedCode={selectedCountry?.code}
         onClose={handleCountryClose}
         onSelect={handleCountrySelect}
+        countryName={copy.countryName}
       />
     </Box>
   );

package/src/components/form/PhoneInput/PhoneInput.types.ts

@@ -13,6 +13,7 @@ export interface PhoneInputProps {
   placeholder?: string;
   icon?: React.ReactNode;
   defaultValue?: string;
+  /** The country the picker starts on. @default 'BR' */
   countryCode?: CountryCode;
   floating?: boolean;
   onChange?: (value: string, isValid: boolean, countryCode?: CountryCode) => void;

package/src/components/form/PhoneInput/countries.ts

@@ -2,7 +2,8 @@ import type { CountryCode } from 'libphonenumber-js';
 
 import type { CountryData } from './PhoneInput.types';
 
-// Dial codes and flags for the countries the input offers, sorted by name.
+// Dial codes and flags for the countries the input offers, sorted by name. The
+// `name` is the English one; the picker shows `copy.countryName` when a pack has it.
 export const countries: CountryData[] = [
   { code: 'US' as CountryCode, name: 'United States', dial: '+1', flag: '🇺🇸' },
   { code: 'GB' as CountryCode, name: 'United Kingdom', dial: '+44', flag: '🇬🇧' },
@@ -52,3 +53,19 @@ export const countries: CountryData[] = [
   { code: 'AE' as CountryCode, name: 'United Arab Emirates', dial: '+971', flag: '🇦🇪' },
   { code: 'SA' as CountryCode, name: 'Saudi Arabia', dial: '+966', flag: '🇸🇦' },
 ].sort((a, b) => a.name.localeCompare(b.name));
+
+/** A country's name as the host's pack spells it, else the English one above. */
+export const countryDisplayName = (
+  country: CountryData,
+  countryName?: (code: string, englishName: string) => string,
+): string => (countryName ? countryName(country.code, country.name) : country.name);
+
+/** The picker's list, sorted by the names it actually shows. */
+export const countriesByDisplayName = (
+  countryName?: (code: string, englishName: string) => string,
+): Array<CountryData & { displayName: string }> =>
+  countryName
+    ? countries
+        .map((country) => ({ ...country, displayName: countryDisplayName(country, countryName) }))
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+    : countries.map((country) => ({ ...country, displayName: country.name }));