@12-apps/ui 6.78.3 → 6.79.0

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

@@ -1,3 +1,5 @@
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import type { AddressAutocompleteProps, AddressOptionValue } from './AddressAutocomplete.types';
 
 // Below this the field clears its options rather than querying Places.
@@ -5,8 +7,6 @@ export const MIN_QUERY_LENGTH = 2;
 
 type DefaultedKeys =
   | 'variant'
-  | 'label'
-  | 'placeholder'
   | 'floating'
   | 'error'
   | 'disabled'
@@ -20,8 +20,6 @@ export type ResolvedAddressProps = AddressAutocompleteProps &
 
 const ADDRESS_AUTOCOMPLETE_DEFAULTS: Pick<AddressAutocompleteProps, DefaultedKeys> = {
   variant: 'outlined',
-  label: 'Address',
-  placeholder: 'Enter an address',
   floating: false,
   error: false,
   disabled: false,
@@ -40,8 +38,16 @@ const definedProps = (props: AddressAutocompleteProps): Partial<AddressAutocompl
 
 // Applied as a merge rather than destructuring defaults, which would otherwise
 // put ten branches into the component's own complexity budget.
-export const resolveAddressProps = (props: AddressAutocompleteProps): ResolvedAddressProps =>
-  ({ ...ADDRESS_AUTOCOMPLETE_DEFAULTS, ...definedProps(props) }) as ResolvedAddressProps;
+export const resolveAddressProps = (props: AddressAutocompleteProps): ResolvedAddressProps => {
+  // The label and placeholder come from the host's pack, then the English one.
+  const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, props.copy);
+  return {
+    ...ADDRESS_AUTOCOMPLETE_DEFAULTS,
+    label: text.label,
+    placeholder: text.placeholder,
+    ...definedProps(props),
+  } as ResolvedAddressProps;
+};
 
 export const addressOptionLabel = (option: AddressOptionValue): string => {
   if (typeof option === 'string') return option;

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

@@ -1,5 +1,8 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import type React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import type {
   AddressAutocompleteProps,
@@ -31,7 +34,9 @@ export const useAddressAutocomplete = ({
   googleMapsApiKey,
   restrictions,
   onSelect,
+  copy,
 }: {
+  copy: AddressAutocompleteCopy;
   defaultValue: string;
   googleMapsApiKey: string;
   restrictions: AddressAutocompleteProps['restrictions'];
@@ -40,8 +45,13 @@ export const useAddressAutocomplete = ({
   const [inputValue, setInputValue] = useState(defaultValue);
   const [loading, setLoading] = useState(false);
   const [apiError, setApiError] = useState<string | null>(null);
+  // Memoised so the selection and location callbacks keep their identity.
+  const messages = useMemo(() => resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy), [copy]);
 
-  const { isLoaded, error: mapsError, services, useMockData } = useGoogleMapsAPI(googleMapsApiKey);
+  const { isLoaded, error: mapsError, services, useMockData } = useGoogleMapsAPI(googleMapsApiKey, {
+    loadFailed: messages.mapsApiLoadFailed,
+    initFailed: messages.mapsServicesInitFailed,
+  });
 
   // A resolved address both notifies the caller and becomes the field's text.
   const applyAddress = useCallback(
@@ -60,6 +70,7 @@ export const useAddressAutocomplete = ({
     setInputValue,
     setLoading,
     setApiError,
+    fetchFailed: messages.fetchSuggestionsFailed,
   });
 
   const handleSelect = useAddressSelection({
@@ -69,6 +80,7 @@ export const useAddressAutocomplete = ({
     setApiError,
     onSelect,
     applyAddress,
+    messages,
   });
 
   const handleGetCurrentLocation = useCurrentLocation({
@@ -77,6 +89,7 @@ export const useAddressAutocomplete = ({
     setLoading,
     setApiError,
     applyAddress,
+    messages,
   });
 
   return {

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

@@ -19,6 +19,7 @@ export const AddressAutocomplete: FC<AddressAutocompleteProps> = (componentProps
     googleMapsApiKey,
     restrictions,
     onSelect,
+    copy: resolved.copy,
   });
 
   // Until the API answers there is nothing to autocomplete against, so the field

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/Calendar/Calendar.md

@@ -116,6 +116,13 @@ export interface CalendarProps {
 - Enforce `minRangeLength`/`maxRangeLength`. If invalid, ignore or snap (configurable via your handler).
 - Fire `onIntermediateRangeChange` as user hovers. Fire `onRangeChange` once both ends are chosen.
 
+### Width
+
+- The day grid is fluid: seven `minmax(0, 1fr)` columns, each day a square that fills its column up to 40 design px.
+- A month takes the room it is given, up to 304 design px (7 × 40 + 6 × 4). Side by side, months wrap rather than squeeze, at the same width as before.
+- A custom `renderDay` element is the grid item, so it is held to its column: keep it within 40 design px or it overlaps the next day.
+- So a one-month calendar fits a 320 bottom sheet and a 390 `Dialog` with no consumer CSS (FUT-3861). Pinned by the `FitsA320Sheet` and `FitsA390Dialog` stories in `DateRangePicker.test.stories.tsx`.
+
 ### Navigation
 
 - Header buttons move month (or year with modifier keys if desired).

package/src/components/form/Calendar/CalendarDay.tsx

@@ -7,7 +7,11 @@ import { rem, sxRem } from '../../../tokens/relative';
 
 import type { DayRenderArgs } from './Calendar.types';
 
-/** A day cell's edge, 40 design px through the theme's type scale. */
+/**
+ * A day cell's LARGEST edge, 40 design px through the theme's type scale. The
+ * cell is a square that fills its grid column up to this size, so the month
+ * shrinks with its container instead of holding a fixed 304px floor (FUT-3861).
+ */
 const CELL_SIZE = sxRem(40);
 
 interface DayState extends DayRenderArgs {
@@ -62,8 +66,15 @@ const dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  // 40 is the size it ASKS for, so the month's intrinsic width stays 304 and a
+  // shrink-wrapping parent (the picker is inline-flex) still sizes to it; the
+  // column's `minmax(0, 1fr)` and this `maxWidth` let it give way below that.
   width: CELL_SIZE,
-  height: CELL_SIZE,
+  maxWidth: '100%',
+  aspectRatio: '1 / 1',
+  justifySelf: 'center',
+  boxSizing: 'border-box',
+  padding: 0,
   border: 'none',
   borderRadius: 1,
   cursor: day.disabled ? 'not-allowed' : 'pointer',

package/src/components/form/Calendar/CalendarMonth.tsx

@@ -16,7 +16,16 @@ import { CalendarDayCell } from './CalendarDayCell';
 /** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */
 const SPACER_WIDTH = sxRem(32);
 
-const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.5 } as const;
+// `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its
+// content's width, which is what held the grid at 304px (FUT-3861).
+const GRID_SX = { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 0.5 } as const;
+
+/**
+ * A month takes the room it is given, from nothing up to seven full cells and
+ * their gaps (7 × 40 + 6 × 4 design px). Months side by side keep a 280 basis,
+ * so a multi-month calendar still wraps rather than squeezing every month.
+ */
+const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;
 
 // Only the outermost months carry arrows; the ones between get a spacer so their
 // titles stay centred.
@@ -112,7 +121,7 @@ export const CalendarMonth: FC<CalendarMonthProps> = ({
        January's 5th and February's. Without a per-month hook a test can only
        reach a day positionally, which is exactly what the flakiness gate
        refuses. Additive: `calendar-grid` below is unchanged. */
-    <Box sx={{ minWidth: sxRem(280) }} data-testid={`calendar-month-${monthIndex}`}>
+    <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>
       <MonthNavHeader
         title={title}
         showPrevious={monthIndex === 0}

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/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`