@12-apps/ui 6.7.0 → 6.8.0

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -30,6 +30,7 @@
 import { TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
+
 /** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */
 export function isoToBr(iso: string): string {
   const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
@@ -112,6 +113,7 @@ export function DayBoundInput({
   testId,
   error = false,
   describedBy,
+  mask,
 }: {
   label: string;
   /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */
@@ -127,6 +129,17 @@ export function DayBoundInput({
   error?: boolean;
   /** Id of the element carrying that complaint, so it is read WITH the field. */
   describedBy?: string;
+  /**
+   * The day mask, which IS the placeholder — so 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.
+   *
+   * A PROP rather than a context read: this field has two callers, and only
+   * one of them is inside DataViews. `DateRangePicker` mounts it standalone
+   * with its own message table, so a context read here throws for every host
+   * of that picker — which is exactly what it did.
+   */
+  mask: string;
 }): React.JSX.Element {
   const applied = value ?? '';
   const [text, setText] = useState(() => isoToBr(applied));
@@ -146,9 +159,7 @@ export function DayBoundInput({
       type="text"
       label={label}
       error={error}
-      // The mask IS the placeholder, so the expected order is on screen before
-      // the first keystroke rather than discovered by getting it wrong.
-      placeholder="dd/mm/aaaa"
+      placeholder={mask}
       value={text}
       onChange={(event) => {
         const next = maskBrDate(event.target.value);

package/src/components/data-display/DataViews/data-views-filter-panel.tsx

@@ -159,6 +159,7 @@ export function FilterDialog<T extends Record<string, unknown>>({
       open={open}
       onClose={onClose}
       navigationTitle={copy.filters.panelTitle}
+      backLabel={copy.nav.goBack}
       modalId={`${props.testIdPrefix}-filters`}
       maxWidth="xs"
       dataTestId={`${props.testIdPrefix}-filter-dialog`}
@@ -174,7 +175,7 @@ export function FilterDialog<T extends Record<string, unknown>>({
               data-testid={`${props.testIdPrefix}-clear-filters`}
               sx={{ fontSize: "0.75rem", color: "text.secondary" }}
             >
-              Clear All Filters
+              {copy.filters.clearAllFilters}
             </Link>
           </Box>
           <FilterControls {...props} />

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -19,6 +19,7 @@ import { SelectAllStrip } from "./data-views-select-all-strip";
 import { ListCardGroup, type ListGroupConfig } from "./list-card-rails";
 import type { DataViewCardSelection } from "./data-views-types";
 import type { DataViewsController } from "./use-data-views-state";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /* ── Body (grid) ─────────────────────────────────────────────────────────── */
 
@@ -52,6 +53,7 @@ function GridBody<T extends Record<string, unknown>>({
   dataTestId,
   emptyState,
 }: GridBodyProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box
       sx={{
@@ -77,6 +79,7 @@ function GridBody<T extends Record<string, unknown>>({
         sorting={{ mode: sortMode, sortBy, onChangeSortBy }}
         data-testid={dataTestId}
         emptyState={emptyState}
+        emptyText={copy.grid.emptyFilteredTitle}
       />
     </Box>
   );

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -20,6 +20,7 @@ import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-
 import { ShellToolbar } from "./data-views-shell-toolbar";
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { DataViewExport } from "./data-views-export";
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { DataViewsEmpty } from "./data-views-empty";
 import { DataViewsPagination } from "./data-views-pagination";
 import type { BoardConfig } from "./DataViewsBoard";
@@ -286,6 +287,7 @@ function ShellStack<T extends Record<string, unknown>>({
   props: GridShellProps<T>;
   filters: ReturnType<typeof useGridShellFilters<T>>;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
   const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
   // The grid renders the FILTERED empty state itself — it is the only party
@@ -299,7 +301,10 @@ function ShellStack<T extends Record<string, unknown>>({
     />
   );
   return (
-    <TableFilter open={c.filterOpen} onOpenChange={c.setFilterOpen} hasActiveFilters={c.activeFilterCount > 0}>
+    <TableFilter
+      copy={copy.tableFilter} open={c.filterOpen} onOpenChange={c.setFilterOpen}
+      hasActiveFilters={c.activeFilterCount > 0}
+    >
       <Stack spacing={0} data-testid={dataTestId ? `${dataTestId}-container` : undefined}>
         <GridHeaderRow title={props.title} headerActions={props.headerActions} testIdPrefix={testIdPrefix} />
         <ShellToolbar
@@ -311,9 +316,7 @@ function ShellStack<T extends Record<string, unknown>>({
           filterControls={
             inlineVisible ? (
               <InlineFilterControls
-                {...filterProps}
-                split={split}
-                activeFilterCount={c.activeFilterCount}
+                {...filterProps} split={split} activeFilterCount={c.activeFilterCount}
                 onControlOpenChange={onControlOpenChange}
               />
             ) : undefined
@@ -328,12 +331,8 @@ function ShellStack<T extends Record<string, unknown>>({
           showInline={showInline}
         />
         <ScopeTabsSlot
-          scopes={scopes}
-          scopeFieldId={props.scopeFieldId}
-          board={props.board}
-          value={c.scope}
-          onChange={c.setScope}
-          counts={c.scopeCounts}
+          scopes={scopes} scopeFieldId={props.scopeFieldId} board={props.board}
+          value={c.scope} onChange={c.setScope} counts={c.scopeCounts}
           testIdPrefix={testIdPrefix}
         />
         <TableFilter.Layout>

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -60,7 +60,9 @@ function OverflowPill<T extends Record<string, unknown>>({
   if (options.length > INLINE_OPTION_LIMIT) {
     return (
       <MultiSelectDropdown
-          clearLabel={copy.filters.clearRange(field.label)}
+        extraOptionsHeading={copy.filters.optionsHeading}
+        clearText={copy.filters.clear}
+        clearLabel={copy.filters.clearRange(field.label)}
         label={field.pill?.label ?? field.label}
         options={options}
         selected={new Set(values)}

package/src/components/data-display/DataViews/data-views-pagination.tsx

@@ -4,6 +4,7 @@ import { Box } from "../../../mui/Box";
 import { Pagination } from "../../navigation/Pagination";
 
 import type { DataViewsController } from "./use-data-views-state";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /**
  * The server-mode pagination control rendered beneath the grid — shown only
@@ -17,10 +18,12 @@ export function DataViewsPagination<T extends Record<string, unknown>>({
   c: DataViewsController<T>;
   testIdPrefix: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (!c.serverMode || c.serverPageCount <= 1) return null;
   return (
     <Box sx={{ mt: 2, display: "flex", justifyContent: "center" }}>
       <Pagination
+        pageSizeLabel={copy.nav.pageSize}
         page={c.serverPage}
         count={c.serverPageCount}
         onChange={(_event, page) => c.changePage(page)}

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -52,9 +52,11 @@ function BoundField<T extends Record<string, unknown>>({
   onChange: (bound: number | string | undefined) => void;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   if (field.kind === 'day') {
     return (
       <DayBoundInput
+        mask={copy.filters.dayMask}
         label={label}
         value={value == null ? undefined : String(value)}
         onChange={onChange}
@@ -102,7 +104,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
         <BoundField
           field={field}
-          label="De"
+          label={copy.filters.rangeStart}
           value={value.min}
           onChange={(min) => onChange({ ...value, min })}
           testId={`${testId}-min`}

package/src/components/data-display/DataViews/data-views-toolbar.tsx

@@ -153,6 +153,8 @@ export function GridToolbar<T extends Record<string, unknown>>(props: GridToolba
     >
       <ContentToolbar
         selectAllLabel={copy.selection.selectAll}
+        selectAllText={copy.selection.selectAllOnPage}
+        clearAllText={copy.filters.clearAll}
         hasSelection={selectedRows.length > 0}
         selectedCount={selectedRows.length}
         selectAll={props.selectAll}

package/src/components/data-display/HoverCard/HoverCard.content.tsx

@@ -19,7 +19,14 @@ const testId = (base: string | undefined, suffix: string, fallback: string) =>
 export interface HoverCardContentProps
   extends Pick<
     HoverCardProps,
-    'variant' | 'title' | 'description' | 'avatar' | 'loading' | 'loadingComponent' | 'children'
+    | 'variant'
+    | 'title'
+    | 'description'
+    | 'avatar'
+    | 'loading'
+    | 'loadingComponent'
+    | 'loadingText'
+    | 'children'
   > {
   dataTestId?: string;
 }
@@ -113,6 +120,7 @@ const DetailedContent: React.FC<HoverCardContentProps> = ({
 export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
   const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } =
     props;
+  const { loadingText } = props;
 
   if (loading) {
     return (
@@ -120,7 +128,7 @@ export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
         {loadingComponent || (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CircularProgress size={20} />
-            <Typography variant="body2">Loading...</Typography>
+            <Typography variant="body2">{loadingText}</Typography>
           </Box>
         )}
       </LoadingContainer>

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

@@ -62,7 +62,7 @@ const offsetMargin = (placement: HoverCardPlacement, offset: number) => {
 export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props, ref) => {
   const {
     variant, glow, pulse, title, description, avatar, trigger, placement, showArrow,
-    animation, enterDelay, exitDelay, maxWidth, loading, loadingComponent, touchEnabled,
+    animation, enterDelay, exitDelay, maxWidth, loading, loadingComponent, loadingText, touchEnabled,
     offset, disabled, onOpen, onClose, children, dataTestId,
     ...rest
   } = withDefaults(props, DEFAULTS) as ResolvedProps;
@@ -122,8 +122,7 @@ export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props
           >
             <CardContent sx={{ p: padding, '&:last-child': { pb: padding } }}>
               <HoverCardContent
-                variant={variant}
-                title={title}
+                loadingText={loadingText} variant={variant} title={title}
                 description={description}
                 avatar={avatar}
                 loading={loading}

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

@@ -9,6 +9,8 @@ export type HoverCardPlacement =
 export type HoverCardAnimation = 'fade' | 'scale' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
 
 export interface HoverCardProps extends Omit<MuiPopoverProps, 'variant' | 'open' | 'anchorEl'> {
+  /** What the card says while its content is in flight. REQUIRED. */
+  loadingText: string;
   /**
    * The variant of the hover card
    */

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;