@12-apps/ui 6.2.0 → 6.3.0

package/src/components/data-display/DataViews/save-view-preview.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * What a saved view actually GUARDS, listed before it is saved.
+ *
+ * Split out of `SaveViewModal.tsx` when that file crossed the size gate: this
+ * is the one self-contained piece of it — a read-only summary of the view
+ * state, with no form and no dialog around it.
+ */
+import { useDataViewsCopy } from "./data-views-copy-context";
+import { Box } from "../../../mui/Box";
+import { Stack } from "../../../mui/Stack";
+import { Text } from "../../typography/Text";
+
+export interface PreviewBoxProps {
+  preview: { filters: string[]; columns: string[]; sort: string[] };
+  testIdPrefix: string;
+}
+
+/** One "label — value" line of the summary. */
+function SummaryRow({
+  label,
+  items,
+  testId,
+}: {
+  label: string;
+  items: string[];
+  testId: string;
+}): React.JSX.Element | null {
+  if (items.length === 0) return null;
+  return (
+    <Box sx={{ display: "flex", gap: 1.5 }} data-testid={testId}>
+      <Text variant="caption" as="span">
+        <Box component="span" sx={{ width: 116, flexShrink: 0, color: "text.secondary" }}>
+          {label}
+        </Box>
+      </Text>
+      <Text variant="caption" as="span">
+        <Box component="span" sx={{ minWidth: 0, flex: 1 }}>
+          {items.join(", ")}
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+export function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
+  const empty =
+    preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;
+  return (
+    <Box sx={{ p: 1.5, borderRadius: 1.5, bgcolor: "action.hover", border: (theme) => `1px solid ${theme.palette.divider}` }}>
+      <Text variant="caption" as="p">
+        <Box
+          component="span"
+          sx={{ display: "block", mb: 1, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, color: "text.disabled" }}
+        >
+          {copy.saveView.previewHeading}
+        </Box>
+      </Text>
+      {empty ? (
+        // Saving is still allowed — an operator may be naming the default on
+        // purpose — but it should not be a surprise afterwards.
+        <Text variant="caption" as="p">
+          <Box component="span" sx={{ color: "warning.main", lineHeight: 1.6 }} data-testid={`${testIdPrefix}-preview-empty`}>
+            {copy.saveView.previewUnchanged}
+          </Box>
+        </Text>
+      ) : (
+        <Stack spacing={0.75}>
+          <SummaryRow label={copy.saveView.previewFilters} items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />
+          <SummaryRow label={copy.saveView.previewHiddenColumns} items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />
+          <SummaryRow label={copy.saveView.sortRowLabel} items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />
+        </Stack>
+      )}
+    </Box>
+  );
+}

package/src/components/data-display/DataViews/use-saved-views-controller.ts

@@ -2,6 +2,7 @@
 
 import { useRef, useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { useViewMutations, type ViewMutations } from "./data-views-view-mutations";
 import {
   coerceViewState,
@@ -99,6 +100,7 @@ export function useSavedViewsController(
   initialView: SavedViewSummary | undefined,
   initialState: DataViewState | undefined,
 ): SavedViewsController {
+  const copy = useDataViewsCopy();
   const { applied, currentRef, activeViewName, applyView, selectMain } =
     useAppliedView(router, columnIds, views, initialView, initialState);
   const [saveOpen, setSaveOpen] = useState(false);
@@ -122,7 +124,7 @@ export function useSavedViewsController(
     } else {
       // A rejected pin/share/default/delete must be visible (FUT-100) — the
       // menus close on click, so an inline Alert is the only surviving signal.
-      setMutationError(error ?? "Não foi possível salvar a alteração da visão.");
+      setMutationError(error ?? copy.nav.saveFailed);
     }
   };
 

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

@@ -100,8 +100,8 @@ const ConfiguredView: React.FC<SectionOnboardingProps> = ({
   title,
   configuredTitle,
   configuredSummary,
-  editLabel = 'Editar',
-  collapseLabel = 'Ocultar',
+  editLabel,
+  collapseLabel,
   defaultExpanded = false,
   children,
   className,
@@ -167,7 +167,7 @@ const HeroView: React.FC<SectionOnboardingProps & { onStart: () => void }> = ({
   activeStepId,
   completedStepIds,
   primaryAction,
-  startLabel = 'Começar',
+  startLabel,
   secondaryAction,
   helpLink,
   children,

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

@@ -64,7 +64,14 @@ export interface SectionOnboardingProps {
    * and `children` exist. Clicking it advances the hero to the in-progress view
    * (steps + form) without the parent managing state. @default 'Começar'
    */
-  startLabel?: string;
+  /** The button that begins the section. REQUIRED since FUT-760. */
+  startLabel: string;
+
+  /** Label of the reveal toggle in the configured state. */
+  editLabel: string;
+
+  /** Label of that toggle while the form is revealed. */
+  collapseLabel: string;
 
   /** Optional secondary CTA of the hero — e.g. "Ver como funciona". */
   secondaryAction?: SectionOnboardingAction;
@@ -81,12 +88,6 @@ export interface SectionOnboardingProps {
    */
   configuredSummary?: ReactNode;
 
-  /** Label of the reveal toggle in the configured state. @default 'Editar' */
-  editLabel?: string;
-
-  /** Label of the reveal toggle while expanded. @default 'Ocultar' */
-  collapseLabel?: string;
-
   /** Start the configured state with the form already revealed. @default false */
   defaultExpanded?: boolean;
 

package/src/components/feedback/ConfirmAction/ConfirmAction.hooks.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ConfirmHandler, UseConfirmActionResult } from './ConfirmAction.types';
 
 /** Used when the guarded action rejects and the caller supplied no wording. */
-export const DEFAULT_ERROR_TEXT = 'Não foi possível concluir a ação. Tente novamente.';
+
 
 /**
  * What the popup says after a failed attempt.
@@ -29,7 +29,7 @@ function failureMessage(cause: unknown, errorText: string): string {
  */
 export function useConfirmAction(
   onConfirm: ConfirmHandler,
-  errorText: string = DEFAULT_ERROR_TEXT,
+  errorText: string,
 ): UseConfirmActionResult {
   const [open, setOpen] = useState(false);
   const [pending, setPending] = useState(false);

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

@@ -1,3 +1,4 @@
+import type { ConfirmActionCopy } from "../../../copy";
 import { Alert, Stack, TextField, Typography } from '@mui/material';
 import React, { type ReactNode } from 'react';
 
@@ -10,7 +11,6 @@ import type {
   UseConfirmActionResult,
 } from './ConfirmAction.types';
 
-const DEFAULT_CANCEL_TEXT = 'Cancelar';
 const DEFAULT_TEST_ID = 'confirm-action';
 
 /**
@@ -22,8 +22,12 @@ const DEFAULT_TEST_ID = 'confirm-action';
  * mention it. A body with neither a name nor a description would leave the
  * operator with only the title to decide on, so a neutral fallback covers that.
  */
-function confirmBody(description: ReactNode, entityName?: string): ReactNode {
-  if (!entityName) return description ?? "Esta ação não pode ser desfeita.";
+function confirmBody(
+  description: ReactNode,
+  copy: ConfirmActionCopy,
+  entityName?: string,
+): ReactNode {
+  if (!entityName) return description ?? copy.irreversible;
   return (
     <>
       <Typography component="span" sx={{ fontWeight: 600, display: "block" }}>
@@ -86,6 +90,8 @@ function TypeToConfirmField({
 }
 
 export interface ConfirmActionDialogProps extends ConfirmOptions {
+  /** The fallback body when no entity is named. REQUIRED — no default copy. */
+  copy: ConfirmActionCopy;
   state: UseConfirmActionResult;
 }
 
@@ -101,12 +107,13 @@ export function ConfirmActionDialog({
   description,
   entityName,
   confirmText,
-  cancelText = DEFAULT_CANCEL_TEXT,
+  cancelText,
   typeToConfirm,
   typeToConfirmLabel,
   tone = 'destructive',
   initialFocus,
   dataTestId = DEFAULT_TEST_ID,
+  copy,
 }: ConfirmActionDialogProps): React.ReactElement {
   const [typed, setTyped] = React.useState('');
 
@@ -123,7 +130,7 @@ export function ConfirmActionDialog({
       open={state.open}
       variant={tone === 'destructive' ? 'destructive' : 'default'}
       title={title}
-      description={confirmBody(description, entityName)}
+      description={confirmBody(description, copy, entityName)}
       confirmText={confirmText}
       cancelText={cancelText}
       loading={state.pending}

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

@@ -1,3 +1,4 @@
+import type { ConfirmActionCopy } from "../../../copy";
 import type { ComponentType, ReactNode } from 'react';
 
 /**
@@ -43,7 +44,6 @@ export interface ConfirmOptions {
   /** Defaults to `cancel` for the destructive tone, `confirm` otherwise. */
   initialFocus?: ConfirmInitialFocus;
   /** Shown inside the dialog when the action rejects; the dialog stays open. */
-  errorText?: string;
   /** Root test id; the dialog's parts derive theirs from it. */
   dataTestId?: string;
 }
@@ -82,6 +82,14 @@ export interface UseConfirmActionResult {
  * the trigger — a button, a menu item, an icon.
  */
 export interface ConfirmActionProps extends ConfirmOptions {
+  /**
+   * What the operator is told when the action fails and the cause carries no
+   * message. REQUIRED since FUT-760 — it used to default to this package's own
+   * pt-BR, so a host that passed nothing shipped one product's Portuguese.
+   */
+  errorText: string;
+  /** The fallback body when no entity is named. REQUIRED — see `errorText`. */
+  copy: ConfirmActionCopy;
   onConfirm: ConfirmHandler;
   children: (request: () => void, state: { pending: boolean }) => ReactNode;
 }

package/src/components/feedback/ConfirmAction/ConfirmButton.tsx

@@ -1,3 +1,4 @@
+import type { ConfirmActionCopy } from '../../../copy';
 import { Button } from '../../form/Button';
 import type { ButtonProps } from '../../form/Button/Button.types';
 
@@ -12,7 +13,14 @@ import type { ConfirmableComponent } from './ConfirmAction.types';
  * The baked-in defaults are only the wording and tone every destructive
  * confirmation shares, and each instance can still override them.
  */
-export const ConfirmButton: ConfirmableComponent<ButtonProps> = withConfirmation<ButtonProps>(
-  Button,
-  { cancelText: 'Cancelar', tone: 'destructive' },
-);
+export function createConfirmButton(
+  copy: ConfirmActionCopy,
+  errorText: string,
+): ConfirmableComponent<ButtonProps> {
+  return withConfirmation<ButtonProps>(Button, {
+    cancelText: copy.cancel,
+    tone: 'destructive',
+    errorText,
+    copy,
+  });
+}

package/src/components/feedback/ConfirmAction/index.ts

@@ -1,6 +1,6 @@
 export { ConfirmAction } from './ConfirmAction';
-export { ConfirmButton } from './ConfirmButton';
-export { DEFAULT_ERROR_TEXT, useConfirmAction } from './ConfirmAction.hooks';
+export { createConfirmButton } from './ConfirmButton';
+export { useConfirmAction } from './ConfirmAction.hooks';
 export { ConfirmActionDialog } from './ConfirmAction.parts';
 export { withConfirmation } from './with-confirmation';
 export type {

package/src/components/feedback/ConfirmAction/with-confirmation.tsx

@@ -1,3 +1,4 @@
+import type { ConfirmActionCopy } from '../../../copy';
 import React from 'react';
 import type { ComponentType } from 'react';
 
@@ -81,12 +82,12 @@ function useGuardedHandler(onClick: ConfirmableProps['onClick']): ConfirmHandler
  */
 export function withConfirmation<P extends ConfirmableProps>(
   Wrapped: ComponentType<P>,
-  defaults?: Partial<ConfirmOptions>,
+  defaults: Partial<ConfirmOptions> & { errorText: string; copy: ConfirmActionCopy },
 ): ConfirmableComponent<P> {
   function WithConfirmation(props: P & WithConfirmationProps): React.ReactElement {
     const { confirm, onClick } = props;
     const options = resolveOptions(defaults, confirm);
-    const state = useConfirmAction(useGuardedHandler(onClick), options?.errorText);
+    const state = useConfirmAction(useGuardedHandler(onClick), defaults.errorText);
 
     // `confirm` is ours and must not reach the DOM — an unknown attribute on a
     // <button> is a React warning at every render. The cast is the standard HOC
@@ -99,7 +100,7 @@ export function withConfirmation<P extends ConfirmableProps>(
     return (
       <>
         <Wrapped {...forwarded} onClick={state.request} />
-        <ConfirmActionDialog state={state} {...options} />
+        <ConfirmActionDialog state={state} {...options} copy={defaults.copy} />
       </>
     );
   }

package/src/components/form/CategorySelect/CategoryPanel.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CategorySelectCopy } from "../../../copy";
 import { Box } from '@mui/material';
 
 import { removeChip } from './category-tree';
@@ -12,6 +13,8 @@ import type { CategoryGroup, CategorySelectionChip } from './CategorySelect.type
 import type { CategorySelectState } from './useCategorySelect';
 
 export interface CategoryPanelProps {
+  /** The words this panel renders. REQUIRED — no default copy. */
+  copy: CategorySelectCopy;
   state: CategorySelectState;
   chips: CategorySelectionChip[];
   rowIds: string[];
@@ -55,6 +58,7 @@ export function CategoryPanel({
   searchInputRef,
   listRef,
   dataTestId,
+  copy,
 }: CategoryPanelProps): React.JSX.Element {
   return (
     <Box
@@ -65,8 +69,9 @@ export function CategoryPanel({
       sx={(theme) => ({ ...panelSx(theme), ...(sheet ? sheetSx(theme) : {}) })}
     >
       <CategoryPanelHead
+        copy={copy}
         query={state.query}
-        placeholder={single ? 'Buscar categoria…' : 'Buscar categoria ou subcategoria'}
+        placeholder={single ? copy.search.placeholderSingle : copy.search.placeholderMulti}
         sheet={sheet}
         quickActions={
           single ? undefined : <CategoryQuickActions state={state} dataTestId={dataTestId} />
@@ -76,9 +81,9 @@ export function CategoryPanel({
         dataTestId={dataTestId}
       />
       {!single && !loading && (
-        <PinnedTray state={state} chips={chips} dataTestId={dataTestId} />
+        <PinnedTray state={state} chips={chips} dataTestId={dataTestId} copy={copy} />
       )}
-      <CategoryPanelList
+      <CategoryPanelList copy={copy}
         groups={state.visibleGroups}
         query={state.query}
         draft={state.draft}
@@ -103,6 +108,7 @@ export function CategoryPanel({
         changed={changed}
         single={single}
         sheet={sheet}
+        copy={copy}
         onApply={onApply}
         onCancel={onCancel}
         dataTestId={dataTestId}
@@ -116,9 +122,11 @@ function PinnedTray({
   state,
   chips,
   dataTestId,
-}: Pick<CategoryPanelProps, 'state' | 'chips' | 'dataTestId'>): React.JSX.Element {
+  copy,
+}: Pick<CategoryPanelProps, 'state' | 'chips' | 'dataTestId' | 'copy'>): React.JSX.Element {
   return (
     <CategoryPinnedTray
+      copy={copy}
       chips={chips}
       onRemove={(chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft))}
       dataTestId={dataTestId}
@@ -135,18 +143,22 @@ function PanelFooter({
   onApply,
   onCancel,
   dataTestId,
+  copy,
 }: Pick<
   CategoryPanelProps,
-  'state' | 'changed' | 'single' | 'sheet' | 'onApply' | 'onCancel' | 'dataTestId'
+  'state' | 'changed' | 'single' | 'sheet' | 'onApply' | 'onCancel' | 'dataTestId' | 'copy'
 >): React.JSX.Element {
   if (single) {
-    return <CategorySingleFoot sheet={sheet} onCancel={onCancel} dataTestId={dataTestId} />;
+    return (
+      <CategorySingleFoot sheet={sheet} onCancel={onCancel} dataTestId={dataTestId} copy={copy} />
+    );
   }
   return (
     <CategoryMultiFoot
       count={state.draft.size}
       changed={changed}
       sheet={sheet}
+      copy={copy}
       onClear={() => state.setDraft(new Set())}
       onApply={onApply}
       dataTestId={dataTestId}

package/src/components/form/CategorySelect/CategoryPanelFoot.tsx

@@ -2,6 +2,7 @@
 
 import { Box, Button } from '@mui/material';
 
+import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
 
 const buttonSx = (sheet: boolean) =>
@@ -23,6 +24,7 @@ interface MultiFootProps {
   onClear: () => void;
   onApply: () => void;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }
 
 /**
@@ -37,11 +39,12 @@ export function CategoryMultiFoot({
   onClear,
   onApply,
   dataTestId,
+  copy,
 }: MultiFootProps): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
       <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
-        <strong>{count}</strong> selecionada{count === 1 ? '' : 's'}
+        {copy.footer.selectedCount(count)}
       </Box>
       <Box sx={{ display: 'flex', gap: '6px' }}>
         <Button
@@ -51,7 +54,7 @@ export function CategoryMultiFoot({
           onClick={onClear}
           data-testid={`${dataTestId}-clear`}
         >
-          Limpar
+          {copy.footer.clear}
         </Button>
         <Button
           variant="contained"
@@ -59,7 +62,7 @@ export function CategoryMultiFoot({
           onClick={onApply}
           data-testid={`${dataTestId}-apply`}
         >
-          {changed ? 'Aplicar' : 'Fechar'}
+          {changed ? copy.footer.apply : copy.footer.close}
         </Button>
       </Box>
     </Box>
@@ -71,15 +74,17 @@ export function CategorySingleFoot({
   sheet,
   onCancel,
   dataTestId,
+  copy,
 }: {
   sheet: boolean;
   onCancel: () => void;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }): React.JSX.Element {
   return (
     <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
       <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
-        Escolha uma categoria
+        {copy.footer.singleHint}
       </Box>
       <Button
         variant="outlined"
@@ -87,7 +92,7 @@ export function CategorySingleFoot({
         onClick={onCancel}
         data-testid={`${dataTestId}-cancel`}
       >
-        Cancelar
+        {copy.footer.cancel}
       </Button>
     </Box>
   );

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CategorySelectCopy } from '../../../copy';
 import { Box, InputBase } from '@mui/material';
 
 import { SearchGlyph } from './CategoryIcons';
@@ -21,6 +22,7 @@ interface PanelHeadProps {
   onQueryChange: (next: string) => void;
   searchInputRef: React.RefObject<HTMLInputElement | null>;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }
 
 const searchFieldSx = {
@@ -72,6 +74,7 @@ export function CategoryPanelHead({
   onQueryChange,
   searchInputRef,
   dataTestId,
+  copy,
 }: PanelHeadProps): React.JSX.Element {
   return (
     <Box sx={(theme) => panelHeadSx(theme, sheet)}>
@@ -99,7 +102,7 @@ export function CategoryPanelHead({
           <Box
             component="button"
             type="button"
-            aria-label="Limpar busca"
+            aria-label={copy.search.clear}
             data-testid={`${dataTestId}-search-clear`}
             sx={clearButtonSx}
             onClick={() => onQueryChange('')}
@@ -129,6 +132,7 @@ interface PinnedTrayProps {
   chips: CategorySelectionChip[];
   onRemove: (chipId: string) => void;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }
 
 /**
@@ -142,18 +146,19 @@ export function CategoryPinnedTray({
   chips,
   onRemove,
   dataTestId,
+  copy,
 }: PinnedTrayProps): React.JSX.Element | null {
   if (chips.length === 0) return null;
   return (
     <Box sx={pinnedSx} data-testid={`${dataTestId}-pinned`}>
-      <Box sx={pinnedLabelSx}>Selecionadas · {chips.length}</Box>
+      <Box sx={pinnedLabelSx}>{copy.search.pinnedLabel(chips.length)}</Box>
       <Box sx={chipWrapSx}>
         {chips.map((chip) => (
           <Box component="span" key={chip.id} sx={chipSx}>
             {chip.label}
             <button
               type="button"
-              aria-label={`Remover ${chip.label}`}
+              aria-label={copy.search.removeChip(chip.label)}
               data-testid={`${dataTestId}-unpin-${chip.id}`}
               onClick={() => onRemove(chip.id)}
             >

package/src/components/form/CategorySelect/CategoryPanelList.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CategorySelectCopy } from "../../../copy";
 import { Box, Button, Skeleton } from '@mui/material';
 
 import { categoryCheckState } from './category-tree';
@@ -18,6 +19,8 @@ const SENTENCE_CASE = { textTransform: 'none' } as const;
 const SKELETON_ROWS = 6;
 
 interface PanelListProps {
+  /** The words this panel renders. REQUIRED — no default copy. */
+  copy: CategorySelectCopy;
   groups: CategoryGroup[];
   query: string;
   draft: ReadonlySet<string>;
@@ -52,17 +55,19 @@ function LoadingRows(): React.JSX.Element {
 function EmptyCatalogue({
   onCreateCategory,
   dataTestId,
+  copy,
 }: {
   onCreateCategory?: (name?: string) => void;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }): React.JSX.Element {
   return (
     <Box sx={emptySx} data-testid={`${dataTestId}-empty-catalogue`}>
-      <strong>Nenhuma categoria ainda</strong>
-      <p>Categorias organizam o cardápio e os filtros da loja.</p>
+      <strong>{copy.emptyTitle}</strong>
+      <p>{copy.purpose}</p>
       {onCreateCategory && (
         <Button variant="contained" size="small" sx={SENTENCE_CASE} onClick={() => onCreateCategory()}>
-          Criar categoria
+          {copy.createCategory}
         </Button>
       )}
     </Box>
@@ -75,19 +80,21 @@ function NoResults({
   onClearQuery,
   onCreateCategory,
   dataTestId,
+  copy,
 }: {
   query: string;
   onClearQuery: () => void;
   onCreateCategory?: (name?: string) => void;
   dataTestId: string;
+  copy: CategorySelectCopy;
 }): React.JSX.Element {
   return (
     <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>
-      <strong>Nada encontrado para “{query}”</strong>
-      <p>Tente outro termo ou verifique a grafia.</p>
+      <strong>{copy.noResults.title(query)}</strong>
+      <p>{copy.noResults.hint}</p>
       <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>
         <Button variant="outlined" size="small" sx={SENTENCE_CASE} onClick={onClearQuery}>
-          Limpar busca
+          {copy.noResults.clearSearch}
         </Button>
         {onCreateCategory && (
           <Button
@@ -97,7 +104,7 @@ function NoResults({
             data-testid={`${dataTestId}-create`}
             onClick={() => onCreateCategory(query.trim())}
           >
-            Criar “{query.trim()}”
+            {copy.noResults.create(query.trim())}
           </Button>
         )}
       </Box>
@@ -161,13 +168,13 @@ function CategoryGroupRows({
 
 /** The scrolling body of the panel, including its three non-list states. */
 export function CategoryPanelList(props: PanelListProps): React.JSX.Element {
-  const { groups, loading, query, listRef, sheet, dataTestId } = props;
+  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
 
   const body = (): React.JSX.Element => {
     if (loading) return <LoadingRows />;
     if (groups.length === 0 && query.trim().length > 0) {
       return (
-        <NoResults
+        <NoResults copy={copy}
           query={query}
           onClearQuery={props.onClearQuery}
           onCreateCategory={props.onCreateCategory}
@@ -177,7 +184,7 @@ export function CategoryPanelList(props: PanelListProps): React.JSX.Element {
     }
     if (groups.length === 0) {
       return (
-        <EmptyCatalogue
+        <EmptyCatalogue copy={copy}
           onCreateCategory={props.onCreateCategory}
           dataTestId={dataTestId}
         />

package/src/components/form/CategorySelect/CategorySelect.tsx

@@ -102,7 +102,7 @@ function usePanelFocus(
  * is the only way a 290px-tall list stays usable one-handed.
  */
 export function CategorySelect(props: CategorySelectProps): React.JSX.Element {
-  const { options, label, error, onCreateCategory } = props;
+  const { options, label, error, onCreateCategory, copy } = props;
   const {
     single,
     placeholder,
@@ -135,7 +135,7 @@ export function CategorySelect(props: CategorySelectProps): React.JSX.Element {
   return (
     <FormControl fullWidth={fullWidth} error={Boolean(error)}>
       {label && <FormLabel error={Boolean(error)}>{label}</FormLabel>}
-      <CategoryTrigger
+      <CategoryTrigger copy={copy}
         placeholder={placeholder}
         selectionLabel={
           props.mode === 'single' ? singleLabel(state.allGroups, props.value) : undefined
@@ -155,7 +155,7 @@ export function CategorySelect(props: CategorySelectProps): React.JSX.Element {
         anchorEl={state.triggerRef.current}
         onClose={actions.cancel}
       >
-        <CategoryPanel
+        <CategoryPanel copy={copy}
           state={state}
           chips={chips}
           rowIds={rowIds}