@oxy.so/bloom 4.33.0 → 4.34.0

package/src/media-card/RecapCard.tsx

@@ -12,6 +12,7 @@ import { Text } from '../typography';
 import { Artwork, CoverGradient, useMediaCardCss } from './parts';
 import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, type CoverTint } from './shared';
 import type { RecapCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The share pill over a generated cover. Not `Button`: its fill is the cover's
@@ -76,6 +77,7 @@ function RecapCardComponent({
   style,
   testID,
 }: RecapCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
@@ -83,7 +85,7 @@ function RecapCardComponent({
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
         <SkeletonBox width="100%" height={360} borderRadius={RECAP_RADIUS} />
       </View>
     );

package/src/media-card/parts.tsx

@@ -37,6 +37,7 @@ import {
 } from './shared';
 import type { MediaCardMenuItem } from './types';
 import type { BloomIconComponent } from '../icons/icon-component';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function useMediaCardCss(): void {
   React.useEffect(() => {
@@ -324,7 +325,7 @@ export function hasMenu(menu: React.ReactNode, items?: ReadonlyArray<MediaCardMe
 export function CardMenu({
   items,
   menu,
-  label = 'More options',
+  label: labelProp,
   subject,
   open,
   onOpenChange,
@@ -340,7 +341,9 @@ export function CardMenu({
   reveal: boolean;
   testID?: string;
 }) {
-  const name = `${label} for ${subject}`;
+  const common = useCommonMessages();
+  const label = labelProp ?? common.moreOptions;
+  const name = common.labelFor(label, subject);
   return (
     <View
       {...webDataSet({ bloomMediaCardMenu: '', ...(reveal ? { bloomMediaCardReveal: 'hover' } : null) })}

package/src/media-header/MediaActionBar.tsx

@@ -33,6 +33,7 @@ import type {
   MediaMoreButtonProps,
   ShuffleButtonProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The row of controls under a media header.
@@ -144,10 +145,12 @@ ShuffleButton.displayName = 'ShuffleButton';
 
 function MediaMoreButtonComponent({
   onPress,
-  accessibilityLabel = 'More options',
+  accessibilityLabel: accessibilityLabelProp,
   size = 28,
   ...rest
 }: MediaMoreButtonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.moreOptions;
   return (
     <MediaIconButton
       icon={RiMoreFill}

package/src/media-header/PopularTracks.tsx

@@ -11,6 +11,7 @@ import { Text } from '../typography';
 import { useImageUri, useMediaHeaderPaint } from './parts';
 import { type MediaHeaderPaint } from './shared';
 import type { PopularTrack, PopularTracksProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An artist's most played tracks: five rows, "See more" shows ten.
@@ -129,13 +130,15 @@ function PopularTracksComponent({
   expanded: expandedProp,
   onExpandedChange,
   showMoreLabel = 'See more',
-  showLessLabel = 'Show less',
+  showLessLabel: showLessLabelProp,
   activeTrackId,
   playing = false,
   onTrackPress,
   style,
   testID,
 }: PopularTracksProps) {
+  const common = useCommonMessages();
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const paint = useMediaHeaderPaint();
   const [expandedState, setExpandedState] = useState(false);
   const expanded = expandedProp ?? expandedState;

package/src/media-header/parts.tsx

@@ -19,6 +19,7 @@ import { clamp01 } from '../styles/clamp';
 import { isImageUrl as isUrl } from '../image-resolver';
 import { webDataSet as webData } from '../styles/web-data';
 import type { MediaHeaderPerson, MediaImageSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The family's paint for an artwork colour, plus its web sheet. */
 export function useMediaHeaderPaint(artworkColor?: string | null): MediaHeaderPaint {
@@ -395,8 +396,8 @@ export function ClampedText({
   color,
   linkColor,
   ring,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   testID,
 }: {
   children: string;
@@ -408,6 +409,9 @@ export function ClampedText({
   showLessLabel?: string;
   testID?: string;
 }) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = React.useState(false);
   const { state: hovered, onIn, onOut } = useInteractionState();
   // Only offer the toggle when the text can plausibly overflow: ~ 60 characters a line.

package/src/media-shelf/Shelf.tsx

@@ -31,6 +31,7 @@ import {
   type ShelfScroll,
 } from './shared';
 import type { ShelfProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A section of a home or search page: a header over a run of items.
@@ -69,12 +70,15 @@ function ShelfComponent({
   gap = SHELF_GAP,
   contentInset = 0,
   headingLevel = 2,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   children,
   style,
   testID,
 }: ShelfProps) {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const reducedMotion = useReducedMotion();
   useEffect(() => {

package/src/media-shelf/ShelfSkeleton.tsx

@@ -4,6 +4,7 @@ import { ScrollView, View, type LayoutChangeEvent } from 'react-native';
 import * as Skeleton from '../skeleton';
 import { SHELF_GAP, shelfGridColumns } from './shared';
 import type { ShelfSkeletonProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The placeholder for a `Shelf` that is still loading: a title bar and
@@ -21,10 +22,12 @@ function ShelfSkeletonComponent({
   round = false,
   eyebrow = false,
   gap = SHELF_GAP,
-  accessibilityLabel = 'Loading',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: ShelfSkeletonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.loading;
   const [gridWidth, setGridWidth] = useState(0);
   const onGridLayout = useCallback((event: LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;

package/src/menubar/Menubar.web.tsx

@@ -27,12 +27,13 @@ import { cx } from '../floating/shared';
 import { useAnchorRect } from '../floating/use-anchor-rect';
 import { useMenubarMenu } from './context';
 import type { MenubarContentProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   side,
   align = 'start',
   // `alignOffset={-4} sideOffset={8}` — upstream's own defaults, which pull the
@@ -47,6 +48,8 @@ export function MenubarContent({
   style,
   testID,
 }: MenubarContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useMenubarMenu();
   const anchor = useAnchorRect(menu.anchorRef, menu.open);
   const close = useCallback(() => menu.setOpen(false), [menu]);

package/src/message-media/FileMessage.tsx

@@ -30,6 +30,7 @@ import {
   resolveMessageMediaPaint,
 } from './shared';
 import type { FileKind, FileMessageProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** One glyph per kind. The colour is `resolveFileKindPaint`'s job, not this map's. */
 const KIND_ICONS: Record<FileKind, typeof RiFileTextLine> = {
@@ -84,13 +85,15 @@ function FileMessageComponent({
   width,
   accessibilityLabel,
   downloadLabel = 'Download',
-  cancelLabel = 'Cancel',
+  cancelLabel: cancelLabelProp,
   tone = 'incoming',
   onColor,
   bubbleColor,
   style,
   testID,
 }: FileMessageProps) {
+  const common = useCommonMessages();
+  const cancelLabel = cancelLabelProp ?? common.cancel;
   const theme = useTheme();
   useMessageMediaCss();
   const paint = useMemo(

package/src/message-media/parts.tsx

@@ -29,6 +29,7 @@ import {
 } from './shared';
 import { useMediaSource } from './use-media-source';
 import type { MessageMediaSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pieces every block in `message-media` is built from.
@@ -557,10 +558,12 @@ function retryStyle(hovered: boolean, paint: MessageMediaPaint): WebCssStyle {
 export const MediaFailure = memo(function MediaFailure({
   paint,
   label = 'Not sent',
-  retryLabel = 'Retry',
+  retryLabel: retryLabelProp,
   onRetry,
   testID,
 }: MediaFailureProps) {
+  const common = useCommonMessages();
+  const retryLabel = retryLabelProp ?? common.retry;
   useMessageMediaCss();
   const [hovered, setHovered] = useState(false);
   return (

package/src/music-library/SearchField.tsx

@@ -14,6 +14,7 @@ import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
 import { IS_WEB, MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID, resolveMusicLibraryPaint } from './shared';
 import type { SearchFieldProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The top-bar search pill.
@@ -59,13 +60,15 @@ function SearchFieldComponent({
   onBrowsePress,
   browseActive = false,
   placeholder = 'What do you want to play?',
-  accessibilityLabel = 'Search',
+  accessibilityLabel: accessibilityLabelProp,
   clearLabel = 'Clear search',
   browseLabel = 'Browse',
   autoFocus,
   style,
   testID,
 }: SearchFieldProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.search;
   const theme = useTheme();
   useEffect(() => {
     adoptStyleSheet(MUSIC_LIBRARY_STYLE_ID, MUSIC_LIBRARY_CSS);

package/src/overlay/Overlay.tsx

@@ -61,6 +61,7 @@ import { useHardwareBack } from './use-hardware-back';
 import { useModalOverlayRegistration } from './use-modal-overlay-active';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 
@@ -390,9 +391,11 @@ export const Backdrop = memo(function Backdrop({
   style,
   layerStyle,
   children,
-  accessibilityLabel = 'Dismiss',
+  accessibilityLabel: accessibilityLabelProp,
   testID,
 }: BackdropProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.dismiss;
   const inert = disabled || !onPress;
   // `undefined` unless this backdrop is inside a declared separate native
   // window. On Android that is the difference between a real blur and a crash.

package/src/page-header/PageHeader.tsx

@@ -33,6 +33,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { EdgeScrim, SCRIM_TAIL_RATIO } from './EdgeScrim';
 import type { PageHeaderProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `PageHeader`: a screen's top chrome.
@@ -120,7 +121,7 @@ function PageHeaderComponent({
   presentation = 'floating',
   placement = 'inline',
   onBack,
-  backLabel = 'Back',
+  backLabel: backLabelProp,
   leading,
   actions,
   border = 'auto',
@@ -134,6 +135,8 @@ function PageHeaderComponent({
   style,
   testID,
 }: PageHeaderProps) {
+  const common = useCommonMessages();
+  const backLabel = backLabelProp ?? common.back;
   const isWeb = Platform.OS === 'web';
   const floating = presentation === 'floating';
   const overlay = placement === 'overlay';

package/src/pagination/Pagination.tsx

@@ -13,6 +13,7 @@ import { RiArrowLeftLine as ArrowLeft } from '../icons/remix/RiArrowLeftLine';
 import { RiArrowRightLine as ArrowRight } from '../icons/remix/RiArrowRightLine';
 import type { Theme } from '../theme/types';
 import type { PaginationProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pagination, coloured from Bloom's theme through the ramps
@@ -177,13 +178,16 @@ const PaginationComponent: React.FC<PaginationProps> = ({
   totalPages,
   onChange,
   siblingCount = 1,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   getPageLabel,
   accessibilityLabel = 'Pagination',
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, PAGINATION_CSS);
   const palette = useMemo(() => resolvePaginationPalette(theme), [theme]);

package/src/place-card/PlaceCard.tsx

@@ -34,6 +34,7 @@ import { PLACE_CARD_GEOMETRY, PLACE_OPEN_TONE } from './constants';
 import { PlaceActions } from './PlaceActions';
 import { composePlaceName, openLabelFor, resolvePlaceCardPaint, type PlaceCardPaint } from './shared';
 import type { PlaceCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A place on the map — the result you scroll past, and the header of the sheet
@@ -219,11 +220,12 @@ function PlaceCardSkeleton({
   style,
   testID,
 }: Pick<PlaceCardProps, 'style' | 'testID'> & { density: 'row' | 'detail' }) {
+  const common = useCommonMessages();
   if (density === 'row') {
     return (
       <View
         aria-busy
-        accessibilityLabel="Loading"
+        accessibilityLabel={common.loading}
         style={[{ flexDirection: 'row', alignItems: 'flex-start' }, style]}
         testID={testID}
       >
@@ -243,7 +245,7 @@ function PlaceCardSkeleton({
     );
   }
   return (
-    <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+    <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
       <SkeletonBox width="100%" height={G.cover} borderRadius={G.radius} />
       <View style={{ gap: 8, paddingTop: G.padding }}>
         <SkeletonBox width="55%" height={20} borderRadius={4} />

package/src/place-reviews/PlaceReviewCard.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { PLACE_REVIEW_CATEGORIES_WIDE_MIN_WIDTH } from './constants';
 import type { PlaceReviewCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One past tenant's review of a building.
@@ -60,8 +61,8 @@ function PlaceReviewCardComponent({
   notRecommendLabel = "Wouldn't recommend",
   text,
   numberOfLines = 4,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   expanded: expandedProp,
   onExpandedChange,
   helpfulCount,
@@ -74,6 +75,9 @@ function PlaceReviewCardComponent({
   style,
   testID,
 }: PlaceReviewCardProps) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   useHousingWebCss();
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);

package/src/place-reviews/WriteReviewPrompt.tsx

@@ -8,6 +8,7 @@ import { RiQuillPenLine } from '../icons/remix/RiQuillPenLine';
 import { HousingCard, IconTile, useHousingPalette } from '../tenancy/parts';
 import { Text } from '../typography';
 import type { WriteReviewPromptProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An invitation for a past tenant to review the building.
@@ -28,11 +29,13 @@ function WriteReviewPromptComponent({
   actionLabel = 'Write a review',
   onStart,
   onDismiss,
-  dismissLabel = 'Dismiss',
+  dismissLabel: dismissLabelProp,
   media,
   style,
   testID,
 }: WriteReviewPromptProps) {
+  const common = useCommonMessages();
+  const dismissLabel = dismissLabelProp ?? common.dismiss;
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const body = description ?? `Help future tenants of ${buildingTitle}. Reviews are anonymous.`;

package/src/recent-hires-card/RecentHiresCard.tsx

@@ -14,6 +14,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { RecentHire, RecentHiresCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The "Recent hires" card:
@@ -144,8 +145,8 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   teamLabel,
   onTeamPress,
   teamAccessibilityLabel,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   onPreviousPress,
   onNextPress,
   previousDisabled,
@@ -154,6 +155,9 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const palette = useMemo(() => resolveRecentHiresPalette(theme), [theme]);
 

package/src/settings-modal/SettingsModal.tsx

@@ -39,6 +39,7 @@ import type { SettingsPalette } from './palette';
 import type { SettingsModalProps, SettingsNavGroup, SettingsNavItem } from './types';
 import { useKeyboardReveal } from './use-keyboard-reveal';
 import { IS_WEB, useSettingsWebCss } from './web-css';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A settings modal.
@@ -134,6 +135,7 @@ export function SettingsModal({
   labels,
   testID,
 }: SettingsModalProps) {
+  const common = useCommonMessages();
   useSettingsWebCss();
   const palette = useSettingsPalette();
   const reducedMotion = useReducedMotion();
@@ -406,7 +408,7 @@ export function SettingsModal({
                           header={{
                             title: pageConfig.title,
                             onBack: requestNavigation,
-                            backLabel: labels?.back ?? 'Back',
+                            backLabel: labels?.back ?? common.back,
                             closeLabel,
                             onClose: requestClose,
                           }}

package/src/sidebar/Sidebar.tsx

@@ -44,6 +44,7 @@ import { SidebarTeamMenu } from './SidebarTeamMenu';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarUserMenu } from './SidebarUserMenu';
 import type { SidebarNavItem, SidebarProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `Sidebar` — the floating app rail, expanded or collapsed.
@@ -174,7 +175,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   searchQuery,
   onSearchQueryChange,
   searchLabel = 'Quick Search',
-  searchButtonLabel = 'Search',
+  searchButtonLabel: searchButtonLabelProp,
   searchPlaceholder,
   filterLabel = 'Filter navigation',
   clearSearchLabel = 'Clear navigation search',
@@ -189,6 +190,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const searchButtonLabel = searchButtonLabelProp ?? common.search;
   const palette = useSidebarPalette();
   const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
   const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});

package/src/stay-filters/AmenityFilter.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { Button } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A `ToggleChipGroup` that shows its first `collapsedCount` options and a
@@ -18,13 +19,16 @@ export function AmenityFilter<T extends string = string>({
   options,
   value,
   collapsedCount = 6,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   defaultExpanded = false,
   style,
   testID,
   ...group
 }: AmenityFilterProps<T>) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = useState(defaultExpanded);
   const foldable = options.length > collapsedCount;
   const selected = new Set<T>(value);

package/src/stay-search/GuestPicker.tsx

@@ -10,6 +10,7 @@ import { DEFAULT_GUEST_DESCRIPTIONS, DEFAULT_GUEST_LABELS, GUEST_KINDS } from '.
 import { useGuestPickerClose } from './context';
 import { applyGuestCount, minimumAdults } from './guests';
 import type { GuestKind, GuestPickerProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The kinds `maxGuests` counts; infants and pets ride free. */
 const COUNTED: readonly GuestKind[] = ['adults', 'children'];
@@ -44,11 +45,13 @@ function GuestPickerComponent({
   incrementLabel,
   note,
   onClose,
-  closeLabel = 'Close',
+  closeLabel: closeLabelProp,
   size = 'medium',
   style,
   testID,
 }: GuestPickerProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.close;
   const theme = useTheme();
   const contextClose = useGuestPickerClose();
   const close = onClose ?? contextClose;

package/src/stepper/Stepper.tsx

@@ -15,6 +15,7 @@ import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
 import type { StepperProps, StepperSize } from './types';
 import { useFieldMembership } from '../field/membership';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Bloom's numeric counter: a round `−` button, the value, a round `+` button.
@@ -93,10 +94,12 @@ function StepperComponent({
   decrementLabel = 'Decrease',
   incrementLabel = 'Increase',
   onRemove,
-  removeLabel = 'Remove',
+  removeLabel: removeLabelProp,
   style,
   testID,
 }: StepperProps) {
+  const common = useCommonMessages();
+  const removeLabel = removeLabelProp ?? common.remove;
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
   // The digits are not a name, so the stepper is named by a prop or by the

package/src/toast/ToastContent.tsx

@@ -49,6 +49,7 @@ import {
   type ToasterProps,
   type ToastProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export type ToastContentProps = Pick<
   ToastProps,
@@ -323,6 +324,7 @@ function ToastCloseButton({
   onDismiss: (id: string | number) => void;
   buttonStyle?: StyleProp<ViewStyle>;
 }) {
+  const common = useCommonMessages();
   const handlePress = React.useCallback(() => {
     onDismiss(id);
   }, [onDismiss, id]);
@@ -346,7 +348,7 @@ function ToastCloseButton({
       // unlabelled button beside the message it dismisses. The string is fixed
       // rather than a prop because the control means one thing — the same call
       // `DialogHeader` and `SheetShell` make for their own close affordances.
-      accessibilityLabel="Close"
+      accessibilityLabel={common.close}
       style={[styles.close, buttonStyle]}
     />
   );

package/src/vendor-card/VendorCard.tsx

@@ -42,6 +42,7 @@ import {
   vendorFacts,
 } from './shared';
 import type { VendorCardDensity, VendorCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A restaurant or a shop in a list.
@@ -245,11 +246,12 @@ function VendorCardSkeleton({
   style,
   testID,
 }: Pick<VendorCardProps, 'style' | 'testID'> & { density: VendorCardDensity }) {
+  const common = useCommonMessages();
   const compact = density === 'compact';
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[{ flexDirection: compact ? 'row' : 'column', alignItems: 'flex-start' }, style]}
       testID={testID}
     >