@12-apps/ui 6.6.0 → 6.8.0

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

@@ -23,7 +23,7 @@ const containerSx = (monthsToShow: number): SxProps<Theme> => ({
 
 export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {
   const props = resolveCalendarProps(componentProps);
-  const { monthsToShow, locale, renderHeader, renderFooter, className } = props;
+  const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;
 
   const calendar = useCalendar(props);
 
@@ -48,7 +48,7 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
       ref={ref}
       className={className}
       role="application"
-      aria-label="Calendar"
+      aria-label={ariaLabel}
       tabIndex={0}
       onKeyDown={calendar.handleKeyDown}
       data-testid="calendar-container"

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

@@ -23,6 +23,13 @@ export interface HeaderRenderContext {
 }
 
 export interface CalendarProps {
+  /**
+   * The grid's accessible name. REQUIRED: the container is a
+   * `role="application"`, so a screen reader announces this and nothing else —
+   * and the package cannot know whether it picks a delivery day or a birthday.
+   */
+  ariaLabel: string;
+
   // Mode
   selectionMode?: SelectionMode; // default: 'single'
 

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -50,7 +50,7 @@ const PlaceholderOverlay = styled(Box)(({ theme }) => ({
   userSelect: 'none' }));
 
 // Monaco editor themes
-const EditorLoading: FC = () => (
+const EditorLoading: FC<{ label: string }> = ({ label }) => (
   <Box
     sx={{
       display: 'flex',
@@ -59,7 +59,7 @@ const EditorLoading: FC = () => (
       height: '100%',
       color: 'text.secondary' }}
   >
-    <Typography variant="body2">Loading editor...</Typography>
+    <Typography variant="body2">{label}</Typography>
   </Box>
 );
 
@@ -116,7 +116,8 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     autoFormat,
     placeholder,
     onSave,
-    dataTestId } = resolveCodeEditorProps(componentProps);
+    dataTestId,
+    copy } = resolveCodeEditorProps(componentProps);
 
   const testId = makeTestId(dataTestId);
   const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });
@@ -132,6 +133,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     <EditorContainer elevation={2} data-testid={dataTestId || 'code-editor'}>
       {showToolbar && (
         <EditorToolbar
+          copy={copy}
           language={language}
           readOnly={readOnly}
           isWrapped={editor.isWrapped}
@@ -158,7 +160,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
           theme={editor.editorTheme}
           options={editorOptions}
           onMount={editor.handleEditorDidMount}
-          loading={<EditorLoading />}
+          loading={<EditorLoading label={copy.loading} />}
         />
       </EditorWrapper>
     </EditorContainer>

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

@@ -1,10 +1,17 @@
 // Types for CodeEditor component
+import type { CodeEditorCopy } from '../../../copy';
 
 export type EditorLanguage = 'json' | 'javascript' | 'typescript' | 'css' | 'html' | 'yaml' | 'markdown' | 'sql' | 'python';
 
 export type EditorTheme = 'light' | 'dark' | 'auto';
 
 export interface CodeEditorProps {
+  /**
+   * The editor's chrome — the loading line, the read-only badge and the four
+   * toolbar tooltips, which are also those buttons' accessible names.
+   * REQUIRED: this package ships no default copy.
+   */
+  copy: CodeEditorCopy;
   /** Programming language for syntax highlighting */
   language: EditorLanguage;
   /** Editor height (default: '400px') */

package/src/components/form/CodeEditor/CodeEditorToolbar.tsx

@@ -7,6 +7,8 @@ import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material';
 import React from 'react';
 
+import type { CodeEditorCopy } from '../../../copy';
+
 // Each button repeated the same conditional test id; this is that ternary once.
 const makeTestId =
   (dataTestId?: string) =>
@@ -37,6 +39,7 @@ const LanguageBadge = styled(Box)(({ theme }) => ({
 }));
 
 const EditorActions: React.FC<{
+  copy: CodeEditorCopy;
   readOnly: boolean;
   isWrapped: boolean;
   isCopied: boolean;
@@ -47,6 +50,7 @@ const EditorActions: React.FC<{
   onWrapToggle: () => void;
   onFullscreenToggle: () => void;
 }> = ({
+  copy,
   readOnly,
   isWrapped,
   isCopied,
@@ -62,7 +66,7 @@ const EditorActions: React.FC<{
   return (
     <Stack direction="row" spacing={1}>
     {!readOnly && (
-      <Tooltip title="Format Code (Ctrl+Shift+F)">
+      <Tooltip title={copy.formatCode}>
         <IconButton
           size="small"
           onClick={onFormat}
@@ -73,7 +77,7 @@ const EditorActions: React.FC<{
       </Tooltip>
     )}
 
-    <Tooltip title={isWrapped ? 'Disable Word Wrap' : 'Enable Word Wrap'}>
+    <Tooltip title={isWrapped ? copy.disableWrap : copy.enableWrap}>
       <IconButton
         size="small"
         onClick={onWrapToggle}
@@ -84,7 +88,7 @@ const EditorActions: React.FC<{
       </IconButton>
     </Tooltip>
 
-    <Tooltip title={isCopied ? 'Copied!' : 'Copy to Clipboard'}>
+    <Tooltip title={isCopied ? copy.copied : copy.copyToClipboard}>
       <IconButton
         size="small"
         onClick={onCopy}
@@ -95,7 +99,7 @@ const EditorActions: React.FC<{
       </IconButton>
     </Tooltip>
 
-    <Tooltip title={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+    <Tooltip title={isFullscreen ? copy.exitFullscreen : copy.enterFullscreen}>
       <IconButton
         size="small"
         onClick={onFullscreenToggle}
@@ -114,6 +118,7 @@ const EditorActions: React.FC<{
 
 // Language badge, read-only marker and the four action buttons.
 export const EditorToolbar: React.FC<{
+  copy: CodeEditorCopy;
   language: string;
   readOnly: boolean;
   isWrapped: boolean;
@@ -125,6 +130,7 @@ export const EditorToolbar: React.FC<{
   onWrapToggle: () => void;
   onFullscreenToggle: () => void;
 }> = ({
+  copy,
   language,
   readOnly,
   isWrapped,
@@ -147,12 +153,13 @@ export const EditorToolbar: React.FC<{
       </LanguageBadge>
       {readOnly && (
         <Typography variant="caption" color="text.secondary">
-          Read Only
+          {copy.readOnly}
         </Typography>
       )}
     </Stack>
 
     <EditorActions
+      copy={copy}
       readOnly={readOnly}
       isWrapped={isWrapped}
       isCopied={isCopied}

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

@@ -61,6 +61,8 @@ 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 }) => `${isoToBr(from)} – ${isoToBr(to)}`,
+    calendarLabel: 'Calendar',
+    dayMask: 'dd/mm/yyyy',
   };
 }
 

package/src/components/form/DateRangePicker/DateRangePicker.tsx

@@ -129,6 +129,7 @@ function useMonthCount(requested: number | undefined): number | undefined {
 
 /** The grid, in range mode — `Calendar`, never a second implementation of one. */
 function RangeCalendar({
+  calendarLabel,
   picker,
   value,
   locale,
@@ -142,10 +143,12 @@ function RangeCalendar({
   weekStartsOn: WeekStart;
   months: number | undefined;
   maxRangeDays: number | undefined;
+  calendarLabel: string;
 }): React.JSX.Element {
   return (
     <Calendar
       key={picker.viewNonce}
+      ariaLabel={calendarLabel}
       className={CALENDAR_CLASS}
       selectionMode="range"
       locale={locale}
@@ -223,6 +226,7 @@ export function DateRangePicker({
     <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>
       <Box sx={BODY_SX}>
         <RangeCalendar
+          calendarLabel={picker.copy.calendarLabel}
           picker={picker}
           value={value}
           locale={locale}

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

@@ -96,6 +96,17 @@ export interface DateRangePickerMessages {
   overMax: (info: { maxRangeDays: number; days: number }) => string;
   /** The chosen window, in words. */
   summary: (window: DayWindow) => string;
+  /**
+   * The month grid's accessible name. The grid is a `role="application"`, so
+   * this is the only thing a screen reader announces for it.
+   */
+  calendarLabel: string;
+  /**
+   * The two fields' mask, which IS their placeholder — the expected ORDER is
+   * on screen before the first keystroke rather than discovered by getting it
+   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.
+   */
+  dayMask: string;
 }
 
 /** Which of the three views moved the range, and what it moved it to. */

package/src/components/form/DateRangePicker/DateRangePickerFields.tsx

@@ -57,6 +57,7 @@ export function DateRangeFields({
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
         <DayBoundInput
+          mask={messages.dayMask}
           label={messages.from}
           value={value.from ?? undefined}
           onChange={(bound) => onEdit('from', bound ?? null)}
@@ -65,6 +66,7 @@ export function DateRangeFields({
           describedBy={statusId}
         />
         <DayBoundInput
+          mask={messages.dayMask}
           label={messages.to}
           value={value.to ?? undefined}
           onChange={(bound) => onEdit('to', bound ?? null)}

package/src/components/form/Menubar/Menubar.toolbar.tsx

@@ -7,6 +7,7 @@ import { MenubarSeparator } from './Menubar.separator';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
 
 export interface MenubarToolbarProps {
+  ariaLabel: string;
   barSx: CSSObject;
   items: MenubarItem[];
   size: NonNullable<MenubarProps['size']>;
@@ -31,6 +32,7 @@ export interface MenubarToolbarProps {
  * wrapping it differs.
  */
 export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
+  ariaLabel,
   barSx,
   items,
   size,
@@ -53,7 +55,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
   return (
     <Toolbar
       role="toolbar"
-      aria-label="Main navigation"
+      aria-label={ariaLabel}
       sx={{
         ...barSx,
         width: fullWidth ? '100%' : 'auto',

package/src/components/form/Menubar/Menubar.tsx

@@ -47,7 +47,7 @@ type ResolvedProps = MenubarProps & Required<Pick<MenubarProps, keyof typeof DEF
 
 export const Menubar: React.FC<MenubarProps> = (props) => {
   const {
-    items, variant, size, color, orientation, glow, pulse, glass, gradient,
+    ariaLabel, items, variant, size, color, orientation, glow, pulse, glass, gradient,
     loading, disabled, className, style, logo, endContent, sticky, transparent,
     blur, elevation, fullWidth, onClick, onFocus, onBlur,
     'data-testid': dataTestId,
@@ -65,6 +65,7 @@ export const Menubar: React.FC<MenubarProps> = (props) => {
 
   const content = (
     <MenubarToolbar
+      ariaLabel={ariaLabel}
       barSx={barSx}
       items={items}
       size={size}

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

@@ -13,6 +13,11 @@ export interface MenubarItem {
 }
 
 export interface MenubarProps {
+  /**
+   * The bar's accessible name. REQUIRED: it is a `role="toolbar"` whose items
+   * are the host's own, so only the host can say what this bar navigates.
+   */
+  ariaLabel: string;
   items: MenubarItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'bordered';
   size?: SizeValue;

package/src/components/form/PasswordStrength/PasswordStrength.helpers.tsx

@@ -4,6 +4,7 @@ import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Typography } from '@mui/material';
 import React from 'react';
 
+import type { PasswordRequirementCopy, PasswordStrengthCopy } from '../../../copy';
 import type { PasswordRequirements } from './PasswordStrength.types';
 
 export const defaultRequirements: PasswordRequirements = {
@@ -72,15 +73,19 @@ export const calculatePasswordStrength = (
   return Math.min(earned + lengthBonus(password.length), 100);
 };
 
-const STRENGTH_LABELS: ReadonlyArray<[number, string]> = [
-  [20, 'Very Weak'],
-  [40, 'Weak'],
-  [60, 'Fair'],
-  [80, 'Good'],
+// The four ceilings, and which band each one names. The band NAMES come from
+// the host's table — only the thresholds are ours.
+const STRENGTH_BANDS: ReadonlyArray<[number, keyof PasswordStrengthCopy['bands']]> = [
+  [20, 'veryWeak'],
+  [40, 'weak'],
+  [60, 'fair'],
+  [80, 'good'],
 ];
 
-export const getStrengthLabel = (strength: number): string =>
-  STRENGTH_LABELS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'Strong';
+export const getStrengthLabel = (
+  strength: number,
+  bands: PasswordStrengthCopy['bands'],
+): string => bands[STRENGTH_BANDS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'strong'];
 
 export const getStrengthIcon = (strength: number) => {
   if (strength <= 40) return <WarningIcon />;
@@ -88,23 +93,34 @@ export const getStrengthIcon = (strength: number) => {
   return <SuccessIcon />;
 };
 
-const SUGGESTIONS: ReadonlyArray<[keyof RequirementChecks, string]> = [
-  ['length', 'Use at least 8 characters'],
-  ['uppercase', 'Add uppercase letters'],
-  ['lowercase', 'Add lowercase letters'],
-  ['numbers', 'Include numbers'],
-  ['special', 'Add special characters'],
+// One tip per unmet requirement, in checklist order. The `length` tip carries
+// the configured minimum, so the number in the sentence is the one enforced.
+const SUGGESTION_KEYS: ReadonlyArray<[keyof RequirementChecks, keyof PasswordRequirementCopy]> = [
+  ['length', 'minLength'],
+  ['uppercase', 'uppercase'],
+  ['lowercase', 'lowercase'],
+  ['numbers', 'numbers'],
+  ['special', 'special'],
 ];
 
-export const buildSuggestions = (checks: RequirementChecks): string[] =>
-  SUGGESTIONS.filter(([key]) => !checks[key]).map(([, tip]) => tip);
+export const buildSuggestions = (
+  checks: RequirementChecks,
+  copy: PasswordRequirementCopy,
+  minLength: number,
+): string[] =>
+  SUGGESTION_KEYS.filter(([check]) => !checks[check]).map(([, key]) =>
+    key === 'minLength' ? copy.minLength(minLength) : copy[key],
+  );
 
 // Rendered by PasswordStrength; depends on nothing styled, so it lives beside
 // the pure helpers rather than in the component file.
-export const SuggestionsList: React.FC<{ suggestions: string[] }> = ({ suggestions }) => (
+export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string }> = ({
+  suggestions,
+  heading,
+}) => (
   <Box>
     <Typography variant="caption" color="text.secondary" fontWeight="medium">
-      Suggestions:
+      {heading}
     </Typography>
     <Box sx={{ mt: 1 }}>
       {suggestions.map((tip) => (

package/src/components/form/PasswordStrength/PasswordStrength.tsx

@@ -25,6 +25,7 @@ import {
   getStrengthLabel,
   SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
+import type { PasswordStrengthCopy } from '../../../copy';
 
 interface RequirementIconProps {
   met: boolean;
@@ -217,18 +218,19 @@ const StrengthIndicator: React.FC<{
 };
 
 const StrengthHeading: React.FC<{
+  copy: PasswordStrengthCopy;
   strength: number;
   hasValue: boolean;
   animated: boolean;
-}> = ({ strength, hasValue, animated }) => (
+}> = ({ copy, strength, hasValue, animated }) => (
   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
     <Typography variant="body2" color="text.secondary">
-      Password Strength
+      {copy.strengthHeading}
     </Typography>
     {hasValue && (
       <Fade in={true}>
         <StrengthLabel
-          label={getStrengthLabel(strength)}
+          label={getStrengthLabel(strength, copy.bands)}
           icon={getStrengthIcon(strength)}
           size="small"
           strength={strength}
@@ -242,22 +244,23 @@ const StrengthHeading: React.FC<{
 // One row per enabled requirement. Previously five near-identical JSX blocks,
 // each with its own `requirements.x &&` guard.
 const RequirementsList: React.FC<{
+  copy: PasswordStrengthCopy;
   requirements: PasswordRequirements;
   checks: RequirementChecks;
   animated: boolean;
-}> = ({ requirements, checks, animated }) => {
+}> = ({ copy, requirements, checks, animated }) => {
   const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [
-    [requirements.minLength, 'length', `At least ${requirements.minLength} characters`],
-    [requirements.uppercase, 'uppercase', 'One uppercase letter'],
-    [requirements.lowercase, 'lowercase', 'One lowercase letter'],
-    [requirements.numbers, 'numbers', 'One number'],
-    [requirements.special, 'special', 'One special character'],
+    [requirements.minLength, 'length', copy.requirements.minLength(requirements.minLength ?? 0)],
+    [requirements.uppercase, 'uppercase', copy.requirements.uppercase],
+    [requirements.lowercase, 'lowercase', copy.requirements.lowercase],
+    [requirements.numbers, 'numbers', copy.requirements.numbers],
+    [requirements.special, 'special', copy.requirements.special],
   ];
 
   return (
     <Stack spacing={1}>
       <Typography variant="caption" color="text.secondary" fontWeight="medium">
-        Requirements:
+        {copy.requirementsHeading}
       </Typography>
       {rows
         .filter(([enabled]) => Boolean(enabled))
@@ -277,6 +280,7 @@ const RequirementsList: React.FC<{
 const PasswordStrengthBody: React.FC<{
   value: string;
   strength: number;
+  copy: PasswordStrengthCopy;
   requirements: PasswordRequirements;
   requirementChecks: RequirementChecks;
   suggestions: string[];
@@ -286,6 +290,7 @@ const PasswordStrengthBody: React.FC<{
   variant: PasswordStrengthProps['variant'];
   animated: boolean;
 }> = ({
+  copy,
   value,
   strength,
   requirements,
@@ -298,7 +303,12 @@ const PasswordStrengthBody: React.FC<{
   animated }) => (
     <Stack spacing={2}>
       {showStrengthLabel && (
-        <StrengthHeading strength={strength} hasValue={value.length > 0} animated={animated} />
+        <StrengthHeading
+          copy={copy}
+          strength={strength}
+          hasValue={value.length > 0}
+          animated={animated}
+        />
       )}
 
       <StrengthIndicator variant={variant} strength={strength} animated={animated} />
@@ -306,6 +316,7 @@ const PasswordStrengthBody: React.FC<{
       {showRequirements && (
         <Fade in={value.length > 0}>
           <RequirementsList
+            copy={copy}
             requirements={requirements}
             checks={requirementChecks}
             animated={animated}
@@ -315,7 +326,7 @@ const PasswordStrengthBody: React.FC<{
 
       {showSuggestions && suggestions.length > 0 && value.length > 0 && (
         <Fade in={true}>
-          <SuggestionsList suggestions={suggestions} />
+          <SuggestionsList suggestions={suggestions} heading={copy.suggestionsHeading} />
         </Fade>
       )}
     </Stack>
@@ -323,6 +334,7 @@ const PasswordStrengthBody: React.FC<{
 
 // Main component
 export const PasswordStrength: FC<PasswordStrengthProps> = ({
+  copy,
   value = '',
   showRequirements = true,
   requirements = defaultRequirements,
@@ -342,11 +354,15 @@ export const PasswordStrength: FC<PasswordStrengthProps> = ({
     [value, requirements],
   );
 
-  const suggestions = useMemo(() => buildSuggestions(requirementChecks), [requirementChecks]);
+  const suggestions = useMemo(
+    () => buildSuggestions(requirementChecks, copy.suggestions, requirements.minLength ?? 0),
+    [requirementChecks, copy.suggestions, requirements.minLength],
+  );
 
   return (
     <StrengthContainer animated={animated} data-testid={dataTestId}>
       <PasswordStrengthBody
+        copy={copy}
         value={value}
         strength={strength}
         requirements={requirements}

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

@@ -1,3 +1,5 @@
+import type { PasswordStrengthCopy } from '../../../copy';
+
 export interface PasswordRequirements {
   minLength?: number;
   uppercase?: boolean;
@@ -7,6 +9,13 @@ export interface PasswordRequirements {
 }
 
 export interface PasswordStrengthProps {
+  /**
+   * Every word the meter renders: the three headings, the five strength bands,
+   * the checklist and the tips. REQUIRED: this package ships no default copy,
+   * and eighteen sentences is exactly the size that used to make an English
+   * default look like a component and not like a leak.
+   */
+  copy: PasswordStrengthCopy;
   value: string;
   showRequirements?: boolean;
   requirements?: PasswordRequirements;

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

@@ -18,6 +18,7 @@ import React, {  } from 'react';
 import { countries } from './countries';
 import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
+import type { PhoneInputCopy } from '../../../copy';
 
 // Country data with expanded support
 
@@ -81,8 +82,10 @@ const PhoneField: React.FC<{
   onBlur: () => void;
   onCountryOpen: (event: React.MouseEvent<HTMLElement>) => void;
   onCountryOpenViaKeyboard: (element: HTMLElement) => void;
+  copy: PhoneInputCopy;
 }> = ({
   TextFieldComponent,
+  copy,
   variant,
   label,
   placeholder,
@@ -118,6 +121,7 @@ const PhoneField: React.FC<{
         InputProps={{
           startAdornment: (
             <CountryAdornment
+              selectCountryLabel={copy.selectCountry}
               country={selectedCountry}
               menuOpen={Boolean(anchorEl)}
               onOpen={onCountryOpen}
@@ -157,12 +161,13 @@ const CountryAdornment: React.FC<{
   menuOpen: boolean;
   onOpen: (event: React.MouseEvent<HTMLElement>) => void;
   onOpenViaKeyboard: (element: HTMLElement) => void;
-}> = ({ country, menuOpen, onOpen, onOpenViaKeyboard }) => (
+  selectCountryLabel: string;
+}> = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => (
   <InputAdornment position="start" data-testid="phone-input-start-adornment">
     <CountrySelector
       onClick={onOpen}
       role="button"
-      aria-label="Select country"
+      aria-label={selectCountryLabel}
       aria-expanded={menuOpen}
       tabIndex={0}
       data-testid="country-selector"
@@ -267,7 +272,8 @@ const resolveValidation = ({
   value,
   isFocused,
   helper,
-  countryName }: {
+  countryName,
+  copy }: {
   error: boolean;
   errorMessage?: string;
   isValid: boolean;
@@ -275,6 +281,7 @@ const resolveValidation = ({
   isFocused: boolean;
   helper?: React.ReactNode;
   countryName?: string;
+  copy: PhoneInputCopy;
 }) => {
   const looksInvalid = !isValid && value !== '' && !isFocused;
 
@@ -282,10 +289,11 @@ const resolveValidation = ({
     hasError: error || looksInvalid,
     helperText:
       errorMessage ||
-      (looksInvalid ? `Invalid phone number for ${countryName || 'selected country'}` : helper) };
+      (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper) };
 };
 
 export const PhoneInput: FC<PhoneInputProps> = (props) => {
+  const { copy } = props;
   const {
     variant,
     label,
@@ -322,13 +330,15 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     value,
     isFocused,
     helper,
-    countryName: selectedCountry?.name });
+    countryName: selectedCountry?.name,
+    copy });
 
   const TextFieldComponent = variant === 'glass' ? GlassTextField : TextField;
 
   return (
     <Box data-testid="phone-input-container">
       <PhoneField
+        copy={copy}
         TextFieldComponent={TextFieldComponent}
         variant={variant}
         label={floating ? undefined : label}

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

@@ -1,6 +1,13 @@
 import type { CountryCode } from 'libphonenumber-js';
+import type { PhoneInputCopy } from '../../../copy';
 
 export interface PhoneInputProps {
+  /**
+   * Every word this field renders on its own account — the picker's accessible
+   * name and the invalid-number sentence. REQUIRED: this package ships no
+   * default copy, and the shopper reads both at the checkout.
+   */
+  copy: PhoneInputCopy;
   variant?: 'glass' | 'outlined' | 'filled';
   label?: string;
   placeholder?: string;