@12-apps/ui 6.7.0 → 6.8.0

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;

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

@@ -208,6 +208,7 @@ export function ResultRow(props: {
 /** The "see all results — Press ENTER" footer row. */
 export function SubmitAllFooter(props: {
   label: string;
+  keyLabel: string;
   selected: boolean;
   onSelect: () => void;
   onHover: () => void;
@@ -226,7 +227,7 @@ export function SubmitAllFooter(props: {
         {props.label}
       </Typography>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary' }}>
-        <Typography variant="caption">Enter</Typography>
+        <Typography variant="caption">{props.keyLabel}</Typography>
         <KeyboardReturnIcon sx={{ fontSize: 14 }} />
       </Box>
     </ListItemButton>
@@ -245,6 +246,7 @@ export interface BodyView<T> {
   activeIndex: number;
   trimmed: string;
   submitAllLabel: (q: string) => string;
+  submitKeyLabel: string;
   getKey: (item: T) => string;
   getPrimary: (item: T) => string;
   getSecondary?: (item: T) => string | undefined;
@@ -293,6 +295,7 @@ export function PaletteBody<T>(view: BodyView<T>): React.JSX.Element | null {
       {view.showFooter && (
         <SubmitAllFooter
           label={view.submitAllLabel(view.trimmed)}
+          keyLabel={view.submitKeyLabel}
           selected={view.activeIndex === view.footerIndex}
           onSelect={() => view.onSubmitAll?.(view.trimmed)}
           onHover={() => view.setActiveIndex(view.footerIndex)}

package/src/components/form/SearchPalette/SearchPalette.tsx

@@ -50,12 +50,14 @@ function resolveOpts<T>(props: SearchPaletteProps<T>): {
 /** String / label defaults. */
 function resolveText<T>(props: SearchPaletteProps<T>): {
   submitAllLabel: (q: string) => string;
+  submitKeyLabel: string;
   noResultsLabel: string;
   placeholder: string;
   dataTestId: string;
 } {
   return {
     submitAllLabel: props.submitAllLabel,
+    submitKeyLabel: props.submitKeyLabel,
     noResultsLabel: props.noResultsLabel,
     placeholder: props.placeholder,
     dataTestId: props.dataTestId ?? 'search-palette',
@@ -130,7 +132,8 @@ export function SearchPalette<T>(props: SearchPaletteProps<T>): React.JSX.Elemen
           hasQuery={hasQuery} emptyQueryContent={props.emptyQueryContent} visible={visible}
           isLoading={opts.isLoading} noResultsLabel={text.noResultsLabel} showFooter={showFooter}
           footerIndex={footerIndex} activeIndex={activeIndex} trimmed={trimmed}
-          submitAllLabel={text.submitAllLabel} getKey={props.getKey} getPrimary={props.getPrimary}
+          submitAllLabel={text.submitAllLabel} submitKeyLabel={text.submitKeyLabel}
+          getKey={props.getKey} getPrimary={props.getPrimary}
           getSecondary={props.getSecondary} getLead={props.getLead} getTrailing={props.getTrailing}
           onSelect={props.onSelect} onSubmitAll={props.onSubmitAll} setActiveIndex={setActiveIndex}
         />

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

@@ -56,6 +56,12 @@ export interface SearchPaletteProps<T> {
   onSubmitAll?: (query: string) => void;
   /** Footer label builder; defaults to `Todos os resultados para "{q}"`. */
   submitAllLabel: (query: string) => string;
+  /**
+   * The key legend beside the footer's return glyph. A key's printed name is
+   * not universal — an `ABNT2` keyboard says `Enter`, an `ISO` one may not —
+   * so the host names the key its own users are looking at.
+   */
+  submitKeyLabel: string;
 
   /**
    * Content shown when the query is empty (e.g. a "Populares" block). Keeps the

package/src/components/form/Textarea/Textarea.tsx

@@ -200,6 +200,10 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
     ...props
   } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
 
+  // Read off the props rather than the merged object: the spread widens every
+  // key to optional, which would lose what the variant union already proved.
+  const { richEditorCopy } = textareaProps;
+
   const [richTextValue, setRichTextValue] = useState('');
   const hasIcon = Boolean(icon);
   const testId = dataTestId || dataTestIdCamelCase;
@@ -213,10 +217,11 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
       [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };
 
   // If rich text variant, use the rich text editor
-  if (variant === 'rich') {
+  if (variant === 'rich' && richEditorCopy) {
     return (
       <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>
         <TextareaRichEditor
+          copy={richEditorCopy}
           value={richTextValue}
           onChange={setRichTextValue}
           placeholder={props.placeholder}

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

@@ -1,8 +1,21 @@
+import type { RichEditorToolbarCopy } from '../../../copy';
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { TextareaAutosizeProps } from '@mui/material';
 import type React from 'react';
 
-export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | 'color' | 'size'> {
+/**
+ * The rich variant mounts a formatting toolbar of ten glyph buttons; the other
+ * three variants mount no toolbar at all. So only that variant owes the words
+ * — a plain textarea is not asked for tooltips it has nowhere to put.
+ */
+type TextareaRichCopy =
+  | { variant?: 'default' | 'autosize' | 'resizable'; richEditorCopy?: never }
+  | { variant: 'rich'; richEditorCopy: RichEditorToolbarCopy };
+
+export type TextareaProps = TextareaBaseProps & TextareaRichCopy;
+
+export interface TextareaBaseProps
+  extends Omit<TextareaAutosizeProps, 'variant' | 'color' | 'size'> {
   /**
    * The variant of the textarea
    */

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -14,6 +14,7 @@ import { styled } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
+import type { RichEditorToolbarCopy } from '../../../copy';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -206,11 +207,12 @@ const useRichEditorState = ({
 };
 
 const InlineFormatButtons: React.FC<{
+  copy: RichEditorToolbarCopy;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ activeFormats, onCommand }) => (
+}> = ({ copy, activeFormats, onCommand }) => (
   <>
-    <Tooltip title="Bold" arrow>
+    <Tooltip title={copy.bold} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.bold}
@@ -220,7 +222,7 @@ const InlineFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Italic" arrow>
+    <Tooltip title={copy.italic} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.italic}
@@ -230,7 +232,7 @@ const InlineFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Underline" arrow>
+    <Tooltip title={copy.underline} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.underline}
@@ -244,13 +246,14 @@ const InlineFormatButtons: React.FC<{
 );
 
 const BlockFormatButtons: React.FC<{
+  copy: RichEditorToolbarCopy;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ activeFormats, onCommand }) => (
+}> = ({ copy, activeFormats, onCommand }) => (
   <>
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Bullet List" arrow>
+    <Tooltip title={copy.bulletList} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.list}
@@ -260,7 +263,7 @@ const BlockFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Numbered List" arrow>
+    <Tooltip title={copy.numberedList} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.orderedList}
@@ -272,13 +275,13 @@ const BlockFormatButtons: React.FC<{
 
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Quote" arrow>
+    <Tooltip title={copy.quote} arrow>
       <ToolbarButton size="small" onClick={() => onCommand('formatBlock', 'blockquote')}>
         <FormatQuote fontSize="small" />
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Code" arrow>
+    <Tooltip title={copy.code} arrow>
       <ToolbarButton size="small" onClick={() => onCommand('formatBlock', 'pre')}>
         <Code fontSize="small" />
       </ToolbarButton>
@@ -286,11 +289,11 @@ const BlockFormatButtons: React.FC<{
 
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Insert Link" arrow>
+    <Tooltip title={copy.insertLink} arrow>
       <ToolbarButton
         size="small"
         onClick={() => {
-          const url = window.prompt('Enter URL:');
+          const url = window.prompt(copy.linkPrompt);
           if (url) onCommand('createLink', url);
         }}
       >
@@ -298,13 +301,13 @@ const BlockFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Text Color" arrow>
+    <Tooltip title={copy.textColor} arrow>
       <ToolbarButton size="small">
         <FormatColorText fontSize="small" />
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Background Color" arrow>
+    <Tooltip title={copy.backgroundColor} arrow>
       <ToolbarButton size="small">
         <FormatColorFill fontSize="small" />
       </ToolbarButton>
@@ -315,17 +318,24 @@ const BlockFormatButtons: React.FC<{
 // The formatting buttons. Split out so the editor body is state, handlers and
 // the editable region.
 const EditorToolbar: React.FC<{
+  copy: RichEditorToolbarCopy;
   glass?: boolean;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ glass, activeFormats, onCommand }) => (
+}> = ({ copy, glass, activeFormats, onCommand }) => (
   <RichToolbar glass={glass}>
-    <InlineFormatButtons activeFormats={activeFormats} onCommand={onCommand} />
-    <BlockFormatButtons activeFormats={activeFormats} onCommand={onCommand} />
+    <InlineFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />
+    <BlockFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />
   </RichToolbar>
 );
 
 export const TextareaRichEditor: React.FC<{
+  /**
+   * The ten toolbar buttons' tooltips — which are also their accessible names,
+   * since every one of them is a glyph — plus the link prompt. REQUIRED: this
+   * package ships no default copy.
+   */
+  copy: RichEditorToolbarCopy;
   value?: string;
   onChange?: (html: string) => void;
   placeholder?: string;
@@ -333,7 +343,7 @@ export const TextareaRichEditor: React.FC<{
   glass?: boolean;
   color?: string;
   characterLimit?: number;
-}> = ({ value, onChange, placeholder, error, glass, color, characterLimit }) => {
+}> = ({ copy, value, onChange, placeholder, error, glass, color, characterLimit }) => {
   const {
     focused,
     setFocused,
@@ -346,7 +356,7 @@ export const TextareaRichEditor: React.FC<{
 
   return (
     <Box sx={{ position: 'relative' }}>
-      <EditorToolbar glass={glass} activeFormats={activeFormats} onCommand={handleFormat} />
+      <EditorToolbar copy={copy} glass={glass} activeFormats={activeFormats} onCommand={handleFormat} />
 
       <ContentEditableDiv
         ref={contentRef}

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

@@ -4,10 +4,12 @@ import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material
 import type React from 'react';
 
 import type { DragHandlers } from './UploadButton.hooks';
+import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
 
 /** Shared shape for the two trigger variants. */
 export interface TriggerProps {
+  copy: UploadButtonCopy;
   label: string;
   icon?: React.ReactNode;
   disabled: boolean;
@@ -19,6 +21,7 @@ export interface TriggerProps {
 
 /** The drag-and-drop surface. */
 export function UploadDropzone({
+  copy,
   label,
   icon,
   disabled,
@@ -61,7 +64,7 @@ export function UploadDropzone({
         onOpen();
       }}
       aria-describedby={describedBy}
-      aria-label={`Upload file dropzone. ${label}`}
+      aria-label={copy.dropzoneRole(label)}
     >
       <Box sx={{ mb: 2 }}>
         {icon || <CloudUploadOutlined sx={{ fontSize: 48, color: 'text.secondary' }} />}
@@ -70,7 +73,7 @@ export function UploadDropzone({
         {label}
       </Typography>
       <Typography variant="body2" color="text.secondary">
-        Drop your file here or click to browse
+        {copy.dropzoneHint}
       </Typography>
     </Box>
   );
@@ -81,6 +84,7 @@ const MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;
 
 /** The plain-button trigger. */
 export function UploadTrigger({
+  copy,
   label,
   icon,
   disabled,
@@ -110,18 +114,20 @@ export function UploadTrigger({
         }),
       }}
     >
-      {isUploading ? 'Uploading...' : label}
+      {isUploading ? copy.uploading : label}
     </Button>
   );
 }
 
 /** The screen-reader live region — drag, progress and error announcements. */
 function UploadAnnouncer({
+  copy,
   announceDragOver,
   isUploading,
   progress,
   error,
 }: {
+  copy: UploadButtonCopy;
   announceDragOver: boolean;
   isUploading: boolean;
   progress: number;
@@ -140,15 +146,16 @@ function UploadAnnouncer({
         overflow: 'hidden',
       }}
     >
-      {announceDragOver && 'File ready to drop'}
-      {isUploading && `Upload in progress: ${Math.round(progress)}%`}
-      {error && `Error: ${error}`}
+      {announceDragOver && copy.dropReady}
+      {isUploading && copy.uploadInProgress(Math.round(progress))}
+      {error && copy.errorAnnouncement(error)}
     </div>
   );
 }
 
 /** Progress bar, helper text, error text and the live region. */
 export function UploadFeedback({
+  copy,
   isUploading,
   progress,
   helperText,
@@ -157,6 +164,7 @@ export function UploadFeedback({
   errorId,
   announceDragOver,
 }: {
+  copy: UploadButtonCopy;
   isUploading: boolean;
   progress: number;
   helperText?: string;
@@ -171,7 +179,7 @@ export function UploadFeedback({
         <Box sx={{ mt: 1 }}>
           <LinearProgress variant="determinate" value={progress} sx={{ borderRadius: 1 }} />
           <Typography variant="caption" sx={{ mt: 0.5, display: 'block' }}>
-            {Math.round(progress)}% uploaded
+            {copy.percentUploaded(Math.round(progress))}
           </Typography>
         </Box>
       )}
@@ -200,6 +208,7 @@ export function UploadFeedback({
       )}
 
       <UploadAnnouncer
+        copy={copy}
         announceDragOver={announceDragOver}
         isUploading={isUploading}
         progress={progress}

package/src/components/form/UploadButton/UploadButton.tsx

@@ -19,8 +19,9 @@ import type { UploadButtonProps, UploadButtonState } from './UploadButton.types'
  */
 const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((props, ref) => {
   const {
+    copy,
     variant = 'default',
-    label = 'Upload File',
+    label = props.copy.buttonLabel,
     disabled = false,
     multiple = false,
     accept,
@@ -34,6 +35,7 @@ const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((prop
     useUploadButton(props);
 
   const trigger: TriggerProps = {
+    copy,
     label,
     icon,
     disabled,
@@ -65,6 +67,7 @@ const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((prop
       )}
 
       <UploadFeedback
+        copy={copy}
         isUploading={derived.isUploading}
         progress={derived.progress}
         helperText={helperText}