@12-apps/ui 6.6.0 → 6.8.0

package/src/components/data-display/MapPreview/MapLayers.tsx

@@ -46,6 +46,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showSearch && (
         <MapSearchBar
+          label={settings.copy.search}
           value={search.searchValue}
           placeholder={settings.searchPlaceholder}
           isSearching={search.isSearching}
@@ -56,6 +57,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showControls && (
         <MapControlBar
+          copy={settings.copy}
           zoom={zoom}
           mapType={mapType}
           onZoomIn={controls.handleZoomIn}

package/src/components/data-display/MapPreview/MapPreview.types.ts

@@ -1,3 +1,5 @@
+import type { MapPreviewCopy } from '../../../copy';
+
 export type MapType = 'roadmap' | 'satellite' | 'hybrid' | 'terrain';
 
 export interface LatLng {
@@ -20,6 +22,14 @@ export interface HeatmapPoint {
 }
 
 export interface MapPreviewProps {
+  /**
+   * The control bar's six names and the search field's own. Every control is a
+   * glyph carrying a `title` and an `aria-label`, so this is both the tooltip
+   * and what a screen reader reads. REQUIRED — `searchPlaceholder` beside it
+   * shows the shape this replaces: an English default that read as
+   * configurable right up until nobody configured it.
+   */
+  copy: MapPreviewCopy;
   /** Map center coordinates */
   center?: { lat: number; lng: number };
   /** Legacy coordinates prop (use center instead) */

package/src/components/data-display/MapPreview/MapSearchBar.tsx

@@ -28,6 +28,8 @@ const SearchField = styled(TextField)(({ theme }) => ({
 }));
 
 export interface MapSearchBarProps {
+  /** The field's accessible name — it renders no visible label. REQUIRED. */
+  label: string;
   value: string;
   placeholder: string;
   isSearching: boolean;
@@ -36,6 +38,7 @@ export interface MapSearchBarProps {
 }
 
 export const MapSearchBar: FC<MapSearchBarProps> = ({
+  label,
   value,
   placeholder,
   isSearching,
@@ -58,7 +61,7 @@ export const MapSearchBar: FC<MapSearchBarProps> = ({
         ),
       }}
       disabled={isSearching}
-      aria-label="Search location"
+      aria-label={label}
     />
   </SearchBar>
 );

package/src/components/data-display/Table/Table.tsx

@@ -299,10 +299,13 @@ const TableLoadingState: React.FC<{
 const TableEmptyState: React.FC<{
   shell: TableShellProps;
   emptyStateComponent?: React.ReactNode;
+  emptyText: string;
   colSpan: number;
-}> = ({ shell, emptyStateComponent, colSpan }) => (
+}> = ({ shell, emptyStateComponent, emptyText, colSpan }) => (
   <TableShell {...shell}>
-    <EmptyRow colSpan={colSpan}>{emptyStateComponent || <NoDataPlaceholder />}</EmptyRow>
+    <EmptyRow colSpan={colSpan}>
+      {emptyStateComponent || <NoDataPlaceholder emptyText={emptyText} />}
+    </EmptyRow>
   </TableShell>
 );
 
@@ -316,6 +319,7 @@ export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
       loading,
       loadingComponent,
       emptyStateComponent,
+      emptyText,
       children,
       ...props
     } = resolved;
@@ -345,6 +349,7 @@ export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
         <TableEmptyState
           shell={shell}
           emptyStateComponent={emptyStateComponent}
+          emptyText={emptyText}
           colSpan={finalColumns?.length || 1}
         />
       );

package/src/components/data-display/Table/Table.types.ts

@@ -62,6 +62,11 @@ export interface SelectionConfig {
 export type TableStripeColor = ColorValue;
 
 export interface TableProps extends Omit<MuiTableProps, 'variant'> {
+  /**
+   * What an empty result reads as. REQUIRED — the fallback was the English
+   * "No data available", on the package every host renders.
+   */
+  emptyText: string;
   /**
    * The variant of the table
    */

package/src/components/data-display/Table/TableStates.tsx

@@ -2,9 +2,9 @@ import { Box, TableBody, TableCell, TableRow } from '@mui/material';
 import React from 'react';
 
 
-export const NoDataPlaceholder: React.FC = () => (
+export const NoDataPlaceholder: React.FC<{ emptyText: string }> = ({ emptyText }) => (
   <Box py={4} color="text.secondary">
-    No data available
+    {emptyText}
   </Box>
 );
 

package/src/components/data-display/TimingDiagram/TimingDiagram.tsx

@@ -76,6 +76,7 @@ const VIEWS: Record<string, FC<TimingViewProps>> = {
 
 // Main component
 export const TimingDiagram: FC<TimingDiagramProps> = ({
+  copy,
   data,
   showLabels = true,
   height = 40,
@@ -88,9 +89,9 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   const View = VIEWS[variant];
 
   return (
-    <DiagramContainer elevation={2} role="region" aria-label="Timing diagram" tabIndex={0}>
+    <DiagramContainer elevation={2} role="region" aria-label={copy.regionLabel} tabIndex={0}>
       <Typography variant="h6" fontWeight="bold" gutterBottom>
-        Request Timing
+        {copy.heading}
       </Typography>
 
       {View && (

package/src/components/data-display/TimingDiagram/TimingDiagram.types.ts

@@ -1,3 +1,4 @@
+import type { TimingDiagramCopy } from '../../../copy';
 // Types
 export interface TimingData {
   dns?: number;
@@ -9,6 +10,8 @@ export interface TimingData {
 }
 
 export interface TimingDiagramProps {
+  /** The region's accessible name and its visible heading. REQUIRED. */
+  copy: TimingDiagramCopy;
   data: TimingData;
   showLabels?: boolean;
   color?: string;

package/src/components/feedback/Sonner/Sonner.tsx

@@ -71,7 +71,16 @@ const trackPromiseWithToasts = async <T,>(
   }
 };
 
-export const SonnerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const SonnerProvider: React.FC<{
+  children: React.ReactNode;
+  /**
+   * The dismiss button's accessible name, for every toast this provider
+   * raises. REQUIRED and mounted ONCE — the shortcut helpers
+   * (`sonner.success(…)`) take a message and nothing else by design, so the
+   * word cannot be a per-call argument without changing what they are for.
+   */
+  dismissLabel: string;
+}> = ({ children, dismissLabel }) => {
   const [toasts, setToasts] = useState<SonnerItem[]>([]);
   const toastCounter = useRef(0);
 
@@ -106,7 +115,7 @@ export const SonnerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   const makeShortcut = useCallback(
     (type: SonnerProps['type'], extra?: Partial<SonnerProps>) =>
       (message: React.ReactNode, options?: Partial<SonnerProps>) =>
-        addToast({ ...options, ...extra, title: message }, type),
+        addToast({ dismissLabel, ...options, ...extra, title: message }, type),
     [addToast],
   );
 
@@ -306,4 +315,7 @@ export const Toaster: React.FC<{
   expand?: boolean;
   richColors?: boolean;
   closeButton?: boolean;
-}> = ({ children }) => <SonnerProvider>{children}</SonnerProvider>;
+  dismissLabel: string;
+}> = ({ children, dismissLabel }) => (
+  <SonnerProvider dismissLabel={dismissLabel}>{children}</SonnerProvider>
+);

package/src/components/feedback/Sonner/Sonner.types.ts

@@ -4,6 +4,8 @@ export type SonnerVariant = 'default' | 'glass' | 'minimal';
 export type SonnerType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
 
 export interface SonnerProps {
+  /** The dismiss button's accessible name — it carries a glyph only. REQUIRED. */
+  dismissLabel: string;
   id?: string;
   title?: ReactNode;
   description?: ReactNode;

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -153,6 +153,7 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
   type = 'default',
   variant = 'default',
   closable = true,
+  dismissLabel,
   action,
   cancel,
   icon,
@@ -198,7 +199,7 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
           <IconButton
             size="small"
             onClick={handleDismiss}
-            aria-label="Dismiss notification"
+            aria-label={dismissLabel}
             sx={{
               ml: 'auto',
               color: 'text.secondary',

package/src/components/feedback/StackedModal/StackedModal.parts.tsx

@@ -121,6 +121,8 @@ interface ModalHeaderProps {
   /** Deeper than the first panel, so the leading button goes back instead of closing. */
   canGoBack: boolean;
   onBack: () => void;
+  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
+  backLabel: string;
   onClose: () => void;
   /** Renders the bar without its ✕ — the panel's content owns the dismiss. */
   hideClose?: boolean;
@@ -135,15 +137,18 @@ interface ModalHeaderProps {
  * all when the panel's content carries its own ✕ (`hideClose`).
  */
 const HeaderLeadingButton: FC<
-  Pick<ModalHeaderProps, 'canGoBack' | 'onBack' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'>
-> = ({ canGoBack, onBack, onClose, hideClose, rtl, dataTestId }) => {
+  Pick<
+    ModalHeaderProps,
+    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'
+  >
+> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
   if (canGoBack) {
     return (
       <IconButton
         edge="start"
         color="inherit"
         onClick={onBack}
-        aria-label="go back"
+        aria-label={backLabel}
         size="small"
         sx={{ transform: rtl ? 'rotate(180deg)' : 'none' }}
         data-testid={testId(dataTestId, 'back-button')}
@@ -174,6 +179,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   onBack,
   onClose,
   hideClose,
+  backLabel,
   headerActions,
   rtl,
   dataTestId,
@@ -183,6 +189,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
       <HeaderLeadingButton
         canGoBack={canGoBack}
         onBack={onBack}
+        backLabel={backLabel}
         onClose={onClose}
         hideClose={hideClose}
         rtl={rtl}

package/src/components/feedback/StackedModal/StackedModal.tsx

@@ -59,7 +59,7 @@ type ResolvedProps = StackedModalProps & { modalId: string };
 
 const StackedModalPanel: FC<ResolvedProps> = (props) => {
   const {
-    open, onClose, glass, navigationTitle, hideClose, children, actions, modalId,
+    open, onClose, glass, navigationTitle, backLabel, hideClose, children, actions, modalId,
     closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, disableBackdrop,
     disableFocusTrap, keepMounted, rtl, dataTestId,
     'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps
@@ -105,6 +105,7 @@ const StackedModalPanel: FC<ResolvedProps> = (props) => {
       {...otherProps}
     >
       <ModalPanelContents
+        backLabel={backLabel}
         showSkeleton={showSkeleton}
         loadingText={loadingText}
         titleId={titleId}

package/src/components/feedback/StackedModal/StackedModal.types.ts

@@ -7,6 +7,8 @@ export type ModalPanelRole = 'primary' | 'secondary' | 'background';
 export type PanelMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
 
 export interface StackedModalProps {
+  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
+  backLabel: string;
   /** Controls the visibility of the modal */
   open: boolean;
   /** Callback fired when the component requests to be closed */

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -202,7 +202,16 @@ const TutorialTooltip: React.FC<{
   showProgress: boolean;
   animated: boolean;
   requiresActionBeforeNext: boolean;
-}> = ({ tutorial, steps, allowSkip, showProgress, animated, requiresActionBeforeNext }) => (
+  copy: TutorialOverlayProps['copy'];
+}> = ({
+  tutorial,
+  steps,
+  allowSkip,
+  showProgress,
+  animated,
+  requiresActionBeforeNext,
+  copy,
+}) => (
         <Fade in={tutorial.isVisible} timeout={300}>
           <TooltipContainer
             ref={tutorial.tooltipRef}
@@ -218,6 +227,7 @@ const TutorialTooltip: React.FC<{
             data-testid={`tutorial-step-${tutorial.currentStep}`}
           >
             <TutorialStepBody
+              copy={copy}
               step={tutorial.currentStepData}
               currentStep={tutorial.currentStep}
               stepCount={steps.length}
@@ -237,6 +247,7 @@ const TutorialTooltip: React.FC<{
 
 export const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {
   const {
+    copy,
     steps,
     onComplete,
     onSkip,
@@ -280,6 +291,7 @@ export const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {
         />
 
         <TutorialTooltip
+          copy={copy}
           tutorial={{ ...tutorial, currentStepData }}
           steps={steps}
           allowSkip={allowSkip}

package/src/components/feedback/TutorialOverlay/TutorialOverlay.types.ts

@@ -1,3 +1,4 @@
+import type { TutorialCopy } from '../../../copy';
 // Component types
 export interface TutorialStep {
   id: string;
@@ -15,6 +16,8 @@ export interface TutorialStep {
 }
 
 export interface TutorialOverlayProps {
+  /** The tour's four controls. REQUIRED — all four were English literals. */
+  copy: TutorialCopy;
   steps: TutorialStep[];
   onComplete?: () => void;
   onSkip?: () => void;

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -14,6 +14,7 @@ import {
 import React, {  } from 'react';
 
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
+import type { TutorialCopy } from '../../../copy';
 
 // Animation keyframes
 
@@ -42,6 +43,7 @@ const StepDot = styled(Box, {
 
 // The step's controls: skip/restart on the left, previous/next on the right.
 const TutorialStepNav: React.FC<{
+  copy: TutorialCopy;
   currentStep: number;
   stepCount: number;
   isLastStep: boolean;
@@ -52,6 +54,7 @@ const TutorialStepNav: React.FC<{
   onSkip: () => void;
   onRestart: () => void;
 }> = ({
+  copy,
   currentStep,
   stepCount,
   isLastStep,
@@ -70,7 +73,7 @@ const TutorialStepNav: React.FC<{
           <Stack direction="row" spacing={1}>
             {allowSkip && (
               <Button size="small" onClick={onSkip} variant="text">
-                Skip
+                {copy.skip}
               </Button>
             )}
             {stepCount > 1 && (
@@ -78,7 +81,7 @@ const TutorialStepNav: React.FC<{
                 size="small"
                 onClick={onRestart}
                 disabled={currentStep === 0}
-                title="Restart"
+                title={copy.restart}
               >
                 <RestartIcon fontSize="small" />
               </IconButton>
@@ -94,7 +97,7 @@ const TutorialStepNav: React.FC<{
                 disabled={currentStep === 0}
                 data-testid="tutorial-prev-button"
               >
-                Previous
+                {copy.previous}
               </Button>
             )}
 
@@ -108,7 +111,7 @@ const TutorialStepNav: React.FC<{
                 title={requiresActionBeforeNext ? 'Complete the required action first' : ''}
                 data-testid="tutorial-next-button"
               >
-                Next
+                {copy.next}
               </Button>
             ) : (
               <Button
@@ -175,6 +178,7 @@ const TutorialStepHeader: React.FC<{
 );
 
 export const TutorialStepBody: React.FC<{
+  copy: TutorialCopy;
   step: TutorialOverlayProps['steps'][number];
   currentStep: number;
   stepCount: number;
@@ -188,6 +192,7 @@ export const TutorialStepBody: React.FC<{
   onSkip: () => void;
   onRestart: () => void;
 }> = ({
+  copy,
   step,
   currentStep,
   stepCount,
@@ -239,6 +244,7 @@ export const TutorialStepBody: React.FC<{
         <StepDots currentStep={currentStep} stepCount={stepCount} />
 
         <TutorialStepNav
+          copy={copy}
           currentStep={currentStep}
           stepCount={stepCount}
           isLastStep={isLastStep}

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 
+import type { AddressAutocompleteCopy } from '../../../copy';
 import type { MockPrediction } from './mockPlaces';
 
 /// <reference types="@types/google.maps" />
@@ -27,6 +28,12 @@ export interface AddressDetails {
 }
 
 export interface AddressAutocompleteProps {
+  /**
+   * The field's own three sentences. REQUIRED: this package ships no default
+   * copy, and two of the three are read while the field is unusable because
+   * Google Maps never arrived — the worst moment to speak the wrong language.
+   */
+  copy: AddressAutocompleteCopy;
   variant?: 'glass' | 'outlined' | 'filled';
   label?: string;
   placeholder?: string;

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

@@ -17,6 +17,7 @@ export type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutoco
 
 // The live field, rendered once Google Maps (or the mock stand-in) is ready.
 export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -62,6 +63,7 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       )}
       renderInput={(params) => (
         <AddressInputField
+          copy={copy}
           params={params}
           addressVariant={variant}
           label={floating ? undefined : label}

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

@@ -6,6 +6,7 @@ import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
 export interface AddressFallbackFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   variant: AddressAutocompleteProps['variant'];
   label?: string;
   placeholder?: string;
@@ -18,6 +19,7 @@ export interface AddressFallbackFieldProps {
 // Stands in for the Autocomplete before Google Maps is usable: a disabled field
 // that either spins or explains why it never loaded.
 export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -33,7 +35,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
       <AddressTextField
         addressVariant={variant}
         label={floating ? undefined : label}
-        placeholder="Loading Google Maps..."
+        placeholder={copy.loadingMaps}
         disabled
         fullWidth={fullWidth}
         InputProps={{
@@ -57,7 +59,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
         InputProps={{ startAdornment }}
       />
       <Alert severity="error" sx={{ mt: 1 }}>
-        Google Maps API failed to load. Please check your API key and internet connection.
+        {copy.mapsLoadFailed}
       </Alert>
     </Box>
   );

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

@@ -7,16 +7,17 @@ import React from 'react';
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
-const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
-  disabled,
-  onClick,
-}) => (
+const CurrentLocationButton: FC<{
+  disabled: boolean;
+  onClick: () => void;
+  currentLocationLabel: string;
+}> = ({ disabled, onClick, currentLocationLabel }) => (
   <InputAdornment position="end">
     <IconButton
       edge="end"
       onClick={onClick}
       size="small"
-      title="Use current location"
+      title={currentLocationLabel}
       disabled={disabled}
       data-testid="address-current-location-button"
     >
@@ -26,6 +27,7 @@ const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
 );
 
 export interface AddressInputFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   params: AutocompleteRenderInputParams;
   addressVariant: AddressAutocompleteProps['variant'];
   label?: string;
@@ -41,6 +43,7 @@ export interface AddressInputFieldProps {
 }
 
 export const AddressInputField: FC<AddressInputFieldProps> = ({
+  copy,
   params,
   addressVariant,
   label,
@@ -69,7 +72,11 @@ export const AddressInputField: FC<AddressInputFieldProps> = ({
         <>
           {loading && <CircularProgress color="inherit" size={20} data-testid="address-loading" />}
           {showCurrentLocation && (
-            <CurrentLocationButton disabled={disabled} onClick={onGetCurrentLocation} />
+            <CurrentLocationButton
+              disabled={disabled}
+              onClick={onGetCurrentLocation}
+              currentLocationLabel={copy.useCurrentLocation}
+            />
           )}
           {params.InputProps.endAdornment}
         </>

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

@@ -17,6 +17,7 @@ import React from 'react';
 
 import { highlightLabel, type MatchMode } from './Autocomplete.helpers';
 import type { SuggestionItemState, SuggestionType } from './Autocomplete.types';
+import type { AutocompleteCopy } from '../../../copy';
 
 const StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
@@ -213,13 +214,13 @@ export function DefaultSuggestion<T>({
 }
 
 /** A "Loading…" row shown while async suggestions resolve. */
-export function LoadingRow(): React.JSX.Element {
+export function LoadingRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Box display="flex" alignItems="center" gap={1}>
         <CircularProgress size={16} />
         <Typography variant="body2" color="text.secondary">
-          Loading...
+          {label}
         </Typography>
       </Box>
     </ListItem>
@@ -227,11 +228,11 @@ export function LoadingRow(): React.JSX.Element {
 }
 
 /** The empty "No results found" row. */
-export function NoResultsRow(): React.JSX.Element {
+export function NoResultsRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Typography variant="body2" color="text.secondary">
-        No results found
+        {label}
       </Typography>
     </ListItem>
   );
@@ -251,6 +252,7 @@ const SAME_WIDTH_MODIFIER = {
 };
 
 export interface SuggestionListBoxProps<T> {
+  copy: AutocompleteCopy;
   open: boolean;
   anchorEl: HTMLElement | null;
   portal: boolean | { container?: HTMLElement };
@@ -272,6 +274,7 @@ export interface SuggestionListBoxProps<T> {
 
 /** The suggestions dropdown: a same-width Popper with the option list + loading/empty rows. */
 export function SuggestionListBox<T>({
+  copy,
   open,
   anchorEl,
   portal,
@@ -328,8 +331,8 @@ export function SuggestionListBox<T>({
               {renderItem(item, index === activeIndex)}
             </ListItem>
           ))}
-          {isLoading && <LoadingRow />}
-          {showNoResults && <NoResultsRow />}
+          {isLoading && <LoadingRow label={copy.loading} />}
+          {showNoResults && <NoResultsRow label={copy.noResults} />}
         </List>
       </Paper>
     </StyledPopper>

package/src/components/form/Autocomplete/Autocomplete.tsx

@@ -54,7 +54,7 @@ function resolveRenderConfig<T>(p: AutocompleteProps<T>): RenderConfig<T> {
     selectedItems: p.selectedItems ?? [],
     isLoading: Boolean(p.isLoading),
     showGhostText: p.showGhostText ?? true,
-    placeholder: p.placeholder ?? 'Type to search...',
+    placeholder: p.placeholder ?? p.copy.placeholder,
     autoFocus: Boolean(p.autoFocus),
     disabled: Boolean(p.disabled),
     portal: p.portal ?? false,
@@ -137,6 +137,7 @@ export const Autocomplete = <T = AutocompleteOption>(props: AutocompleteProps<T>
 
         {s.open && (
           <SuggestionListBox
+            copy={props.copy}
             open={s.open}
             anchorEl={s.inputRef.current}
             portal={cfg.portal}

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { AutocompleteCopy } from '../../../copy';
 
 /**
  * A suggestion's behavior on select:
@@ -24,6 +25,12 @@ export interface AutocompleteOption<T = unknown> {
 }
 
 export interface AutocompleteProps<T = AutocompleteOption> {
+  /**
+   * The two rows the dropdown shows in place of options — while an async
+   * fetch is in flight, and when it came back empty. REQUIRED: this package
+   * ships no default copy.
+   */
+  copy: AutocompleteCopy;
   /** Controlled input value */
   value: string;
   /** Input value change */