@oxy.so/bloom 5.0.0 → 5.1.1

package/src/questionnaire/Questionnaire.tsx

@@ -40,6 +40,8 @@ import {
   resolveCheckboxPaint,
   type CheckboxPaint,
 } from '../checkbox/shared';
+import { useCommonMessages } from '../locale/common-messages';
+import { useMessages } from '../locale/messages';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -48,6 +50,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
+import { QUESTIONNAIRE_MESSAGES } from './messages';
 import type {
   QuestionnaireAnswer,
   QuestionnaireAnswers,
@@ -174,16 +177,6 @@ const BODY_2_MEDIUM: TextStyle = TYPE_SCALE['body-2-medium'];
 
 const EMPTY_ANSWER: QuestionnaireAnswer = { values: [] };
 
-const DEFAULT_LABELS: Required<QuestionnaireLabels> = {
-  previous: 'Previous',
-  next: 'Next',
-  complete: 'Done',
-  other: 'Other',
-  otherPlaceholder: 'Enter your custom answer here',
-  dismiss: 'Dismiss',
-  steps: 'Steps',
-};
-
 // ---------------------------------------------------------------------------
 //  Web CSS: focus rings, colour transitions, the check draw-in. Every hook is a
 //  `dataSet` attribute — react-native-web drops unknown props, and a class never
@@ -637,6 +630,7 @@ function StepPills({
   testID?: string;
 }) {
   const reducedMotion = useReducedMotion();
+  const { messages } = useMessages(QUESTIONNAIRE_MESSAGES);
   const [boxes, setBoxes] = useState<Record<number, PillBox>>({});
   const x = useSharedValue(0);
   const y = useSharedValue(0);
@@ -696,7 +690,7 @@ function StepPills({
       {questions.map((entry, index) => (
         <StepPill
           key={entry.id}
-          label={entry.stepLabel ?? `Step ${index + 1}`}
+          label={entry.stepLabel ?? messages.step(index + 1)}
           selected={index === step}
           onPress={() => onSelect(index)}
           onLayout={(event) => {
@@ -811,6 +805,8 @@ function QuestionnaireComponent({
   style,
   testID,
 }: QuestionnaireProps) {
+  const common = useCommonMessages();
+  const { messages } = useMessages(QUESTIONNAIRE_MESSAGES);
   const theme = useTheme();
   const surfaceLayer = useSurfaceLayer();
   const customSurface = StyleSheet.flatten(style);
@@ -818,7 +814,16 @@ function QuestionnaireComponent({
   const palette = useMemo(() => resolveQuestionnairePalette(theme, surfaceFill), [theme, surfaceFill]);
   const reducedMotion = useReducedMotion();
   const headingId = `bloom-questionnaire-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
-  const text = { ...DEFAULT_LABELS, ...labels };
+  const text: Required<QuestionnaireLabels> = {
+    previous: common.previous,
+    next: common.next,
+    complete: common.done,
+    other: messages.other,
+    otherPlaceholder: messages.otherPlaceholder,
+    dismiss: common.dismiss,
+    steps: messages.steps,
+    ...labels,
+  };
   const total = questions.length;
   const lastIndex = Math.max(total - 1, 0);
 

package/src/questionnaire/messages.ts

@@ -0,0 +1,34 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * The questionnaire's own strings in each Bloom language. Previous, Next, Done
+ * and Dismiss are the common words (`COMMON_MESSAGES`). A caller's `labels` and
+ * a question's `stepLabel` still win.
+ */
+export interface QuestionnaireMessages {
+  /** The free-text row's title, and its placeholder. */
+  other: string;
+  otherPlaceholder: string;
+  /** Names the step pill group. */
+  steps: string;
+  /** A step pill with no `stepLabel`. */
+  step: (n: number) => string;
+}
+
+export const QUESTIONNAIRE_MESSAGES: MessageCatalog<QuestionnaireMessages> = {
+  en: { other: 'Other', otherPlaceholder: 'Enter your custom answer here', steps: 'Steps', step: (n) => `Step ${n}` },
+  es: { other: 'Otra', otherPlaceholder: 'Escribe aquí tu respuesta', steps: 'Pasos', step: (n) => `Paso ${n}` },
+  ca: { other: 'Una altra', otherPlaceholder: 'Escriu aquí la teva resposta', steps: 'Passos', step: (n) => `Pas ${n}` },
+  de: { other: 'Sonstiges', otherPlaceholder: 'Gib hier deine eigene Antwort ein', steps: 'Schritte', step: (n) => `Schritt ${n}` },
+  fr: { other: 'Autre', otherPlaceholder: 'Saisissez votre réponse ici', steps: 'Étapes', step: (n) => `Étape ${n}` },
+  it: { other: 'Altro', otherPlaceholder: 'Scrivi qui la tua risposta', steps: 'Passaggi', step: (n) => `Passaggio ${n}` },
+  pt: { other: 'Outra', otherPlaceholder: 'Digite sua resposta aqui', steps: 'Etapas', step: (n) => `Etapa ${n}` },
+  ru: { other: 'Другое', otherPlaceholder: 'Введите свой ответ', steps: 'Шаги', step: (n) => `Шаг ${n}` },
+  tr: { other: 'Diğer', otherPlaceholder: 'Kendi yanıtınızı buraya yazın', steps: 'Adımlar', step: (n) => `Adım ${n}` },
+  ja: { other: 'その他', otherPlaceholder: '回答を入力してください', steps: 'ステップ', step: (n) => `ステップ ${n}` },
+  zh: { other: '其他', otherPlaceholder: '在此输入你的答案', steps: '步骤', step: (n) => `第 ${n} 步` },
+  ar: { other: 'أخرى', otherPlaceholder: 'اكتب إجابتك هنا', steps: 'الخطوات', step: (n) => `الخطوة ${n}` },
+  hi: { other: 'अन्य', otherPlaceholder: 'अपना जवाब यहाँ लिखें', steps: 'चरण', step: (n) => `चरण ${n}` },
+  bn: { other: 'অন্যান্য', otherPlaceholder: 'আপনার উত্তর এখানে লিখুন', steps: 'ধাপ', step: (n) => `ধাপ ${n}` },
+  id: { other: 'Lainnya', otherPlaceholder: 'Tulis jawabanmu di sini', steps: 'Langkah', step: (n) => `Langkah ${n}` },
+};

package/src/questionnaire/types.ts

@@ -21,7 +21,7 @@ export interface QuestionnaireQuestion {
   options: ReadonlyArray<QuestionnaireOption>;
   /** Adds a free-text "Other" row after the options; pass an object to reword it. */
   other?: boolean | { label?: string; placeholder?: string };
-  /** Label for this question's step pill; "Step N" by default. */
+  /** Label for this question's step pill; "Step N" (in the locale) by default. */
   stepLabel?: string;
 }
 
@@ -37,19 +37,19 @@ export type QuestionnaireAnswers = Record<string, QuestionnaireAnswer>;
 
 /** The card's fixed strings, overridable for localisation. */
 export interface QuestionnaireLabels {
-  /** Default `'Previous'`. */
+  /** `'Previous'` in English. */
   previous?: string;
-  /** Default `'Next'`. */
+  /** `'Next'` in English. */
   next?: string;
-  /** Replaces Next on the last question. Default `'Done'`. */
+  /** Replaces Next on the last question. `'Done'` in English. */
   complete?: string;
-  /** The free-text row's title. Default `'Other'`. */
+  /** The free-text row's title (`'Other'` in English). */
   other?: string;
-  /** Default `'Enter your custom answer here'`. */
+  /** `'Enter your custom answer here'` in English. */
   otherPlaceholder?: string;
-  /** Names the corner dismiss button. Default `'Dismiss'`. */
+  /** Names the corner dismiss button (`'Dismiss'` in English). */
   dismiss?: string;
-  /** Names the step pill group. Default `'Steps'`. */
+  /** Names the step pill group (`'Steps'` in English). */
   steps?: string;
 }
 

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

@@ -8,6 +8,8 @@ import { Button } from '../button';
 import { Chip } from '../chip';
 import { RiArrowLeftLine } from '../icons/remix/RiArrowLeftLine';
 import { RiArrowRightLine } from '../icons/remix/RiArrowRightLine';
+import { useCommonMessages } from '../locale/common-messages';
+import { useMessages } from '../locale/messages';
 import { ChevronDownSmall } from '../sidebar/parts';
 import { resolveDashboardSurfaces } from '../stat-cards/tones';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
@@ -15,8 +17,8 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { RECENT_HIRES_CARD_MESSAGES } from './messages';
 import type { RecentHire, RecentHiresCardProps } from './types';
-import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The "Recent hires" card:
@@ -142,7 +144,7 @@ function HireCard({
 
 const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   hires,
-  title = 'Recent hires',
+  title: titleProp,
   count,
   teamLabel,
   onTeamPress,
@@ -158,6 +160,8 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   testID,
 }) => {
   const common = useCommonMessages();
+  const { messages } = useMessages(RECENT_HIRES_CARD_MESSAGES);
+  const title = titleProp ?? messages.title;
   const previousLabel = previousLabelProp ?? common.previous;
   const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();

package/src/recent-hires-card/messages.ts

@@ -0,0 +1,24 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/** The recent-hires card's fixed words in each Bloom language. `title` still wins. */
+export interface RecentHiresCardMessages {
+  title: string;
+}
+
+export const RECENT_HIRES_CARD_MESSAGES: MessageCatalog<RecentHiresCardMessages> = {
+  en: { title: 'Recent hires' },
+  es: { title: 'Incorporaciones recientes' },
+  ca: { title: 'Incorporacions recents' },
+  de: { title: 'Neueinstellungen' },
+  fr: { title: 'Recrutements récents' },
+  it: { title: 'Assunzioni recenti' },
+  pt: { title: 'Contratações recentes' },
+  ru: { title: 'Новые сотрудники' },
+  tr: { title: 'Son işe alımlar' },
+  ja: { title: '最近の採用' },
+  zh: { title: '近期入职' },
+  ar: { title: 'التعيينات الأخيرة' },
+  hi: { title: 'हाल की भर्तियाँ' },
+  bn: { title: 'সাম্প্রতিক নিয়োগ' },
+  id: { title: 'Karyawan baru' },
+};

package/src/recent-hires-card/types.ts

@@ -22,7 +22,7 @@ export interface RecentHire {
 export interface RecentHiresCardProps {
   /** The people cards, in order. The card has room for four (2 × 2). */
   hires: readonly RecentHire[];
-  /** Muted label over the count. Default `"Recent hires"`. */
+  /** Muted label over the count (`"Recent hires"` in English). */
   title?: string;
   /** The headline number, pre-formatted or raw (`56`). */
   count: string | number;

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
@@ -149,6 +150,7 @@ export function SelectTrigger({
     accessibilityLabel: label,
     disabled: disabled === true || rootDisabled === true,
   });
+  const requiredDescription = useRequiredDescription(membership.required, membership.describedBy);
   const isDisabled = membership.disabled;
   const t = palette.trigger;
 
@@ -191,11 +193,13 @@ export function SelectTrigger({
           accessibilityRole: 'button',
           'aria-haspopup': SELECT_TRIGGER_POPUP,
           nativeID: membership.nativeID,
-          'aria-describedby': membership.describedBy,
+          'aria-describedby': requiredDescription.describedBy,
+          accessibilityHint: requiredDescription.hint,
           'aria-invalid': membership.invalid || undefined,
         }}>
         {asChild ? children : field}
       </TriggerSlot>
+      {requiredDescription.description}
     </SelectTriggerStateContext.Provider>
   );
 }

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
@@ -247,6 +248,7 @@ export function SelectTrigger({
     accessibilityLabel: label,
     disabled: disabled === true || ctx.disabled === true,
   });
+  const requiredDescription = useRequiredDescription(membership.required, membership.describedBy);
   const isDisabled = membership.disabled;
   useEffect(() => {
     adoptStyleSheet(TRIGGER_STYLE_ID, TRIGGER_CSS);
@@ -333,12 +335,14 @@ export function SelectTrigger({
           'aria-haspopup': SELECT_TRIGGER_POPUP,
           'aria-expanded': ctx.isOpen,
           nativeID: membership.nativeID,
-          'aria-describedby': membership.describedBy,
+          'aria-describedby': requiredDescription.describedBy,
+          accessibilityHint: requiredDescription.hint,
           'aria-invalid': membership.invalid || undefined,
         }}
       >
         {asChild ? children : field}
       </TriggerSlot>
+      {requiredDescription.description}
     </SelectTriggerStateContext.Provider>
   );
 }

package/src/select/use-required-description.tsx

@@ -0,0 +1,20 @@
+import React, { useId } from 'react';
+import { Platform, Text } from 'react-native';
+import { LABEL_MESSAGES } from '../label/messages';
+import { useMessages } from '../locale/messages';
+
+/** A menu button cannot carry aria-required; announce the field constraint as a description. */
+export function useRequiredDescription(required: boolean, describedBy?: string) {
+  const id = `select-required-${useId()}`;
+  const { messages } = useMessages(LABEL_MESSAGES);
+  return {
+    describedBy: [describedBy, required ? id : undefined].filter(Boolean).join(' ') || undefined,
+    hint: required ? messages.required : undefined,
+    description: required && Platform.OS === 'web' ? (
+      <Text nativeID={id} aria-hidden pointerEvents="none"
+        style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}>
+        {messages.required}
+      </Text>
+    ) : null,
+  };
+}

package/src/settings-modal/SettingsStorage.tsx

@@ -583,7 +583,7 @@ export function SettingsStoragePage({
                       </View>
                       <View style={[styles.cell, styles.sizeCol]}>
                         <Chip size="lg" style={{ backgroundColor: palette.secondary }} textStyle={{ color: palette.text }}>
-                          {file.sizeLabel ?? formatFileSize(file.size)}
+                          {file.sizeLabel ?? formatFileSize(file.size, locale)}
                         </Chip>
                       </View>
                     </>

package/src/shipment-request/ShipmentLoadPicker.tsx

@@ -3,13 +3,15 @@ import { View } from 'react-native';
 
 import { useContainerWidth } from '../hooks/use-container-width';
 import { resolveSelectionPaint, SelectionCard } from '../listing-editor/SelectionCard';
+import { useMessages } from '../locale/messages';
 import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
 import { StepperRow } from '../stepper';
 import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel, TextFieldSuffix } from '../text-field';
 import { Textarea } from '../textarea';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { SHIPMENT_LOAD_KINDS, SHIPMENT_LOAD_LABELS, SHIPMENT_LOAD_SIZES, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { builtInLoadKinds, builtInLoadSizes, SHIPMENT_LOAD_LABELS, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { SHIPMENT_REQUEST_MESSAGES } from './messages';
 import { joinShipmentName, sanitizeWeight } from './shared';
 import type { ShipmentLoadPickerProps, ShipmentLoadSize } from './types';
 
@@ -43,8 +45,8 @@ import type { ShipmentLoadPickerProps, ShipmentLoadSize } from './types';
 function ShipmentLoadPickerComponent({
   value,
   onValueChange,
-  kinds = SHIPMENT_LOAD_KINDS,
-  sizes = SHIPMENT_LOAD_SIZES,
+  kinds: kindsProp,
+  sizes: sizesProp,
   notes = false,
   maxQuantity = 20,
   errors = {},
@@ -53,9 +55,15 @@ function ShipmentLoadPickerComponent({
   style,
   testID,
 }: ShipmentLoadPickerProps) {
+  const { messages } = useMessages(SHIPMENT_REQUEST_MESSAGES);
+  const kinds = useMemo(() => kindsProp ?? builtInLoadKinds(messages), [kindsProp, messages]);
+  const sizes = useMemo(() => sizesProp ?? builtInLoadSizes(messages), [sizesProp, messages]);
   const theme = useTheme();
   const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
-  const labels = useMemo(() => ({ ...SHIPMENT_LOAD_LABELS, ...labelOverrides }), [labelOverrides]);
+  const labels = useMemo(
+    () => ({ ...SHIPMENT_LOAD_LABELS, ...messages.load, ...labelOverrides }),
+    [messages, labelOverrides],
+  );
   const { width, onLayout } = useContainerWidth();
   const wide = width === null || width >= SHIPMENT_REQUEST_GEOMETRY.narrowWidth;
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);

package/src/shipment-request/ShipmentOptionsList.tsx

@@ -2,12 +2,14 @@ import React, { memo, useMemo } from 'react';
 import { View, type TextStyle } from 'react-native';
 
 import { Chip } from '../chip';
+import { useMessages } from '../locale/messages';
 import { SettingsListGroup, SettingsListItem } from '../settings-list';
 import { Switch } from '../switch';
 import { TextFieldLabel } from '../text-field';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { SHIPMENT_OPTIONS_LABELS, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { SHIPMENT_REQUEST_MESSAGES } from './messages';
 import { joinShipmentName, toggleShipmentExtra } from './shared';
 import type { ShipmentOptionsListProps } from './types';
 
@@ -51,7 +53,8 @@ function ShipmentOptionsListComponent({
   testID,
 }: ShipmentOptionsListProps) {
   const theme = useTheme();
-  const labels = useMemo(() => ({ ...SHIPMENT_OPTIONS_LABELS, ...labelOverrides }), [labelOverrides]);
+  const { messages } = useMessages(SHIPMENT_REQUEST_MESSAGES);
+  const labels = useMemo(() => ({ ...messages.options, ...labelOverrides }), [messages, labelOverrides]);
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const chosen = new Set(selectedExtras);
 

package/src/shipment-request/ShipmentRequestForm.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { useMessages } from '../locale/messages';
 import { PriceSummary } from '../price-breakdown';
 import { RouteStops } from '../route-stops';
 import { SortablePhotoGrid } from '../sortable-media';
@@ -8,6 +9,7 @@ import { FilterSection } from '../stay-filters/FilterSection';
 import { ShipmentLoadPicker } from './ShipmentLoadPicker';
 import { ShipmentOptionsList } from './ShipmentOptionsList';
 import { SHIPMENT_REQUEST_LABELS } from './constants';
+import { SHIPMENT_REQUEST_MESSAGES } from './messages';
 import type { ShipmentRequestFormProps } from './types';
 
 /**
@@ -49,13 +51,15 @@ function ShipmentRequestFormComponent({
   footer,
   labels: labelOverrides,
   disabled = false,
-  accessibilityLabel = 'Shipment request',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: ShipmentRequestFormProps) {
+  const { messages } = useMessages(SHIPMENT_REQUEST_MESSAGES);
+  const accessibilityLabel = accessibilityLabelProp ?? messages.shipmentRequest;
   const labels = useMemo(
-    () => ({ ...SHIPMENT_REQUEST_LABELS, ...labelOverrides }),
-    [labelOverrides],
+    () => ({ ...SHIPMENT_REQUEST_LABELS, ...messages.form, ...labelOverrides }),
+    [messages, labelOverrides],
   );
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
 

package/src/shipment-request/constants.ts

@@ -6,52 +6,60 @@ import { RiSofaLine } from '../icons/remix/RiSofaLine';
 import { RiStackLine } from '../icons/remix/RiStackLine';
 import { RiStairsLine } from '../icons/remix/RiStairsLine';
 import { RiWalkLine } from '../icons/remix/RiWalkLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import { SHIPMENT_REQUEST_MESSAGES, type ShipmentRequestMessages } from './messages';
 import type {
+  ShipmentAccess,
   ShipmentAccessOption,
+  ShipmentLoadKind,
   ShipmentLoadKindOption,
   ShipmentLoadPickerLabels,
+  ShipmentLoadSize,
   ShipmentLoadSizeOption,
   ShipmentOptionsLabels,
   ShipmentRequestFormLabels,
 } from './types';
 
+const KIND_ORDER: readonly ShipmentLoadKind[] = ['envelope', 'parcel', 'furniture', 'pallet', 'food'];
+const KIND_ICON: Record<ShipmentLoadKind, BloomIconComponent> = {
+  envelope: RiMailLine,
+  parcel: RiBox3Line,
+  furniture: RiSofaLine,
+  pallet: RiStackLine,
+  food: RiRestaurantLine,
+};
+
+/** The rungs' one-or-two-letter codes: clothing sizes, read the same in every language. */
+const SIZE_CODE: ReadonlyArray<readonly [ShipmentLoadSize, string]> = [
+  ['small', 'S'],
+  ['medium', 'M'],
+  ['large', 'L'],
+  ['extraLarge', 'XL'],
+];
+
+const ACCESS_ORDER: readonly ShipmentAccess[] = ['ground', 'stairs', 'lift'];
+const ACCESS_ICON: Record<ShipmentAccess, BloomIconComponent> = {
+  ground: RiWalkLine,
+  stairs: RiStairsLine,
+  lift: RiArrowUpDownLine,
+};
+
+/** The five built-in kinds in one language's words. */
+export function builtInLoadKinds(messages: ShipmentRequestMessages): readonly ShipmentLoadKindOption[] {
+  return KIND_ORDER.map((value) => ({ value, ...messages.kinds[value], icon: KIND_ICON[value] }));
+}
+
+/** The four built-in size rungs in one language's words. */
+export function builtInLoadSizes(messages: ShipmentRequestMessages): readonly ShipmentLoadSizeOption[] {
+  return SIZE_CODE.map(([value, label]) => ({ value, label, detail: messages.sizes[value] }));
+}
+
 /**
  * The five kinds, in the order a marketplace draws them: the two a bike can
  * take first, then the two that need a van, then food — which is not a size at
  * all but a condition.
  */
-export const SHIPMENT_LOAD_KINDS: readonly ShipmentLoadKindOption[] = [
-  {
-    value: 'envelope',
-    label: 'Envelope',
-    description: 'Documents, keys, anything flat.',
-    icon: RiMailLine,
-  },
-  {
-    value: 'parcel',
-    label: 'Parcel',
-    description: 'A box or a bag one person can carry.',
-    icon: RiBox3Line,
-  },
-  {
-    value: 'furniture',
-    label: 'Furniture',
-    description: 'A sofa, a table, a mattress — two people at both ends.',
-    icon: RiSofaLine,
-  },
-  {
-    value: 'pallet',
-    label: 'Pallet',
-    description: 'Wrapped and stacked, moved with a tail lift.',
-    icon: RiStackLine,
-  },
-  {
-    value: 'food',
-    label: 'Food',
-    description: 'A restaurant run, kept at temperature.',
-    icon: RiRestaurantLine,
-  },
-];
+export const SHIPMENT_LOAD_KINDS: readonly ShipmentLoadKindOption[] = builtInLoadKinds(SHIPMENT_REQUEST_MESSAGES.en);
 
 /**
  * The four size rungs.
@@ -60,51 +68,37 @@ export const SHIPMENT_LOAD_KINDS: readonly ShipmentLoadKindOption[] = [
  * width and four words never fit; the sentence each one means is drawn UNDER
  * the control, for the chosen rung only. A control whose options all carry
  * their own sentence is a list, not a segmented control.
+ *
+ * In English, like the kinds and access words; a picker given no `kinds` or
+ * `sizes` draws them in the resolved locale's words.
  */
-export const SHIPMENT_LOAD_SIZES: readonly ShipmentLoadSizeOption[] = [
-  { value: 'small', label: 'S', detail: 'Up to a shoebox — 35 × 25 × 20 cm.' },
-  { value: 'medium', label: 'M', detail: 'Up to a cabin bag — 55 × 40 × 25 cm.' },
-  { value: 'large', label: 'L', detail: 'Up to a washing machine — 85 × 60 × 60 cm.' },
-  { value: 'extraLarge', label: 'XL', detail: 'Bigger than that — tell us in the notes.' },
-];
+export const SHIPMENT_LOAD_SIZES: readonly ShipmentLoadSizeOption[] = builtInLoadSizes(SHIPMENT_REQUEST_MESSAGES.en);
 
 /** Ground floor, stairs, lift. One of them is true, so they are a single choice. */
-export const SHIPMENT_ACCESS_OPTIONS: readonly ShipmentAccessOption[] = [
-  { value: 'ground', label: 'Ground floor', icon: RiWalkLine },
-  { value: 'stairs', label: 'Stairs', icon: RiStairsLine },
-  { value: 'lift', label: 'Lift', icon: RiArrowUpDownLine },
-];
+export const SHIPMENT_ACCESS_OPTIONS: readonly ShipmentAccessOption[] = ACCESS_ORDER.map((value) => ({
+  value,
+  label: SHIPMENT_REQUEST_MESSAGES.en.access[value],
+  icon: ACCESS_ICON[value],
+}));
+
+// The default copy below is English and stays exported; the components speak
+// `SHIPMENT_REQUEST_MESSAGES` in the resolved locale.
+const EN = SHIPMENT_REQUEST_MESSAGES.en;
 
 /** The load picker's default copy. */
 export const SHIPMENT_LOAD_LABELS: Required<ShipmentLoadPickerLabels> = {
-  kind: 'What are we moving?',
-  size: 'Size',
-  weight: 'Weight',
+  ...EN.load,
+  // i18n-exempt: a unit symbol, the same in every language Bloom ships
   weightUnit: 'kg',
-  quantity: 'How many',
-  quantityValue: (quantity: number) => (quantity === 1 ? '1 item' : `${quantity} items`),
-  notes: 'Anything else the carrier should know?',
-  notesPlaceholder: 'Fragile, a lift code, where to leave it…',
 };
 
 /** The options list's default copy. */
-export const SHIPMENT_OPTIONS_LABELS: Required<ShipmentOptionsLabels> = {
-  extras: 'Extras',
-  access: 'Access at both ends',
-  window: 'When should it be collected?',
-};
+export const SHIPMENT_OPTIONS_LABELS: Required<ShipmentOptionsLabels> = EN.options;
 
 /** The form's default section headings. */
 export const SHIPMENT_REQUEST_LABELS: Required<ShipmentRequestFormLabels> = {
-  route: 'Where it goes',
-  routeDescription: 'Pick-up first, drop-off last.',
-  load: 'The load',
+  ...EN.form,
   loadDescription: '',
-  photos: 'Photos',
-  photosDescription: 'A photo of the load is the single biggest thing you can do for the quotes you get back.',
-  options: 'Options',
-  optionsDescription: 'Each of these changes the price.',
-  price: 'Price',
   priceDescription: '',
 };