@transferwise/components 46.162.2 → 46.164.0

package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx

@@ -0,0 +1,66 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Navigation/FlowNavigation/Critical Banner Guide" />
+
+# Critical Banner in FlowNavigation
+
+The `FlowNavigation` component supports displaying critical banners above the navigation, by passing a `banner` prop.
+
+`banner` accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape (e.g. as received from `navigation-service`/`navigation-ui`) — `FlowNavigation` maps the legacy shape to `CriticalBannerProps` internally, so no manual mapping is required.
+
+## Basic Usage
+
+When you're using `FlowNavigation` directly from `@transferwise/components`.
+
+<Source
+code={`import { FlowNavigation, CriticalBannerProps } from '@transferwise/components';
+
+const banner: CriticalBannerProps = {
+    sentiment: 'negative',
+    title: 'Action required',
+    description: 'Please verify your identity to continue with this transfer.',
+    action: {
+      label: 'Verify now',
+      onClick: () => {
+          // Handle action
+      },
+    },
+};
+
+<FlowNavigation
+    banner={banner}
+    steps={steps}
+    activeStep={activeStep}
+    avatar={avatar}
+    onClose={onClose}
+/>;
+`}
+language="typescript"
+dark
+/>
+
+## Using Legacy Backend Data
+
+If your application receives banner data from a backend service (e.g. navigation-ui) in the legacy shape, you can pass it directly to `banner` — `FlowNavigation` maps it to the internal `CriticalBannerProps` shape automatically.
+
+<Source
+code={`import { FlowNavigation, CriticalBannerData } from '@transferwise/components';
+
+const banner: CriticalBannerData = {
+    id: 'banner-123',
+    title: 'Your account requires attention', // Rendered as the banner description
+    subtitle: 'Action required', // Rendered as the banner title
+    style: 'WARNING',
+    action: { label: 'Take action', href: '/action' },
+    collapsed: false, // Rendered expanded
+};
+
+<FlowNavigation
+    banner={banner}
+    steps={steps}
+    activeStep={activeStep}
+/>;
+`}
+language="typescript"
+dark
+/>

package/src/FlowNavigation/_stories/FlowNavigation.story.tsx

@@ -646,3 +646,52 @@ export const WithCriticalBanner: Story = {
     );
   },
 };
+
+export const WithLegacyCriticalBannerData: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    padding: '0',
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+
+    const steps = [
+      { label: 'Recipient', onClick: () => setActiveStep(0) },
+      { label: 'Amount', ...(activeStep > 1 && { onClick: () => setActiveStep(1) }) },
+      { label: 'Review', ...(activeStep > 2 && { onClick: () => setActiveStep(2) }) },
+      { label: 'Pay', ...(activeStep > 3 && { onClick: () => setActiveStep(3) }) },
+    ];
+
+    return (
+      // Legacy backend banner data shape - mapped to CriticalBannerProps internally
+      <FlowNavigation
+        avatar={<AvatarView profileType={args.profileType} />}
+        logo={<Logo />}
+        activeStep={activeStep}
+        steps={steps}
+        banner={{
+          id: 'banner-123',
+          title: 'Your account requires attention',
+          subtitle: 'Action required',
+          style: 'WARNING',
+          action: {
+            label: 'Take action',
+            href: '#action',
+          },
+          collapsed: false,
+        }}
+        onClose={args.showCloseButton ? () => {} : undefined}
+        onGoBack={
+          args.showMobileBackButton
+            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+            : undefined
+        }
+      />
+    );
+  },
+};

package/src/FlowNavigation/helpers.ts

@@ -0,0 +1,28 @@
+import { CriticalBannerProps } from '../Prompt';
+import { CriticalBannerLegacyData } from './types';
+
+const sentimentMap: Record<CriticalBannerLegacyData['style'], CriticalBannerProps['sentiment']> = {
+  NEGATIVE: 'negative',
+  WARNING: 'warning',
+  NEUTRAL: 'neutral',
+};
+
+export const isCriticalBannerData = (
+  banner: CriticalBannerLegacyData | CriticalBannerProps,
+): banner is CriticalBannerLegacyData => 'style' in banner;
+
+export const mapCriticalBannerDataToBannerProps = (
+  data: CriticalBannerLegacyData,
+): CriticalBannerProps => ({
+  id: data.id,
+  title: data.title,
+  description: data.subtitle, // subtitle → description
+  sentiment: sentimentMap[data.style],
+  action: data.action
+    ? {
+        label: data.action.label,
+        href: data.action.href,
+      }
+    : undefined,
+  expanded: !data.collapsed, // collapsed → expanded (inverted)
+});

package/src/FlowNavigation/index.ts

@@ -1,2 +1,3 @@
 export { default } from './FlowNavigation';
 export type { FlowNavigationProps } from './FlowNavigation';
+export type { CriticalBannerLegacyData } from './types';

package/src/FlowNavigation/types.ts

@@ -0,0 +1,16 @@
+export type CriticalBannerStyle = 'WARNING' | 'NEGATIVE' | 'NEUTRAL';
+
+export type CriticalBannerAction = {
+  label: string;
+  href: string;
+};
+
+export type CriticalBannerLegacyData = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  style: CriticalBannerStyle;
+  action?: CriticalBannerAction;
+  mixpanelEvent?: string;
+  collapsed?: boolean;
+};

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx

@@ -14,6 +14,8 @@ import { CriticalBanner, type CriticalBannerProps } from '..';
  * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
  *
  * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
+ *
+ * **Using with FlowNavigation**: See the [FlowNavigation Critical Banner Guide](?path=/docs/navigation-flownavigation-critical-banner-guide--docs) for integration patterns and data mapping examples.
  */
 const meta = {
   component: CriticalBanner,

package/src/Snackbar/Snackbar.test.tsx

@@ -0,0 +1,190 @@
+import { act, render, screen, userEvent } from '../test-utils';
+import Button from '../Button';
+
+import { Snackbar, type SnackbarProps } from './Snackbar';
+import { SnackbarConsumer } from './SnackbarContext';
+import SnackbarProvider from './SnackbarProvider';
+
+const CSS_TRANSITION_DURATION = 400;
+const TIMEOUT = 4000;
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+const advanceTimers = (duration: number) => {
+  act(() => {
+    jest.advanceTimersByTime(duration);
+  });
+};
+
+const renderSnackbar = (props: Partial<SnackbarProps> = {}) =>
+  render(<Snackbar text="" timeout={TIMEOUT} timestamp={0} {...props} />);
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+describe('Snackbar', () => {
+  it('renders the live region wrapper even while no notification is shown', () => {
+    renderSnackbar();
+
+    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
+    expect(screen.getByRole('alert')).toHaveClass('snackbar');
+  });
+
+  it('does not show a notification that is already present on mount', () => {
+    renderSnackbar({ text: 'Changes saved', timestamp: 1 });
+
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('shows the notification once text arrives after mount', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('renders an action and calls its onClick handler', async () => {
+    const onClick = jest.fn();
+    const { rerender } = renderSnackbar();
+
+    rerender(
+      <Snackbar
+        action={{ label: 'View', onClick }}
+        text="Transfer completed"
+        timeout={TIMEOUT}
+        timestamp={1}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'View' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('dismisses the notification once the timeout elapses', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('exits the current notification before entering the next one', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+
+    advanceTimers(CSS_TRANSITION_DURATION - 1);
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+  });
+
+  it('shows the next notification immediately when the previous one has already been dismissed', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
+
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('restarts the timeout for a replacing notification', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(TIMEOUT - 100);
+
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  });
+
+  // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
+  // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
+  it('keeps the notification visible for as long as text is empty', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="" timeout={TIMEOUT} timestamp={2} />);
+
+    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('ignores a repeated timestamp', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={1} />);
+
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  });
+
+  it('clears its pending dismissal timer on unmount', () => {
+    const { rerender, unmount } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    const pendingTimers = jest.getTimerCount();
+    unmount();
+
+    // The timer left behind belongs to CSSTransition's enter timeout, not to Snackbar.
+    expect(jest.getTimerCount()).toBe(pendingTimers - 1);
+  });
+});
+
+describe('Snackbar created through SnackbarProvider', () => {
+  const renderProvider = () =>
+    render(
+      <SnackbarProvider timeout={TIMEOUT}>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => (
+            <Button onClick={() => createSnackbar({ text: 'Changes saved' })}>Show</Button>
+          )}
+        </SnackbarConsumer>
+      </SnackbarProvider>,
+    );
+
+  it('shows a notification created through the context', async () => {
+    renderProvider();
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('shows only one notification when the trigger is clicked repeatedly', async () => {
+    renderProvider();
+
+    const trigger = screen.getByRole('button', { name: 'Show' });
+    await user.click(trigger);
+    await user.click(trigger);
+    await user.click(trigger);
+
+    expect(screen.getAllByRole('alert')).toHaveLength(1);
+  });
+});

package/src/Typeahead/Typeahead.css

@@ -65,6 +65,9 @@
   cursor: text;
   display: flex;
 }
+.typeahead--multiple .input-group.disabled .typeahead__input-container {
+  cursor: not-allowed;
+}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/src/Typeahead/Typeahead.less

@@ -77,6 +77,10 @@
       display: flex;
     }
 
+    .input-group.disabled .typeahead__input-container {
+      cursor: not-allowed;
+    }
+
     .sizer {
       white-space: pre;
       position: absolute;

package/src/Typeahead/Typeahead.test.tsx

@@ -256,4 +256,77 @@ describe('Typeahead', () => {
       expect.arrayContaining([{ label: 'foo' }, { label: 'bar' }]),
     );
   });
+
+  describe('when disabled', () => {
+    it('disables the input', () => {
+      render(<Typeahead id="test" name="test" options={[]} disabled onChange={() => {}} />);
+      expect(screen.getByRole('combobox')).toBeDisabled();
+    });
+
+    it('does not show the clear button when there is a value', () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[]}
+          initialValue={[{ label: 'Chip' }]}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+      expect(screen.queryByRole('button', { name: /clear/i })).not.toBeInTheDocument();
+    });
+
+    it('keeps chips but does not let them be removed', () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[]}
+          multiple
+          initialValue={[{ label: 'Chip' }]}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+      expect(screen.getByText('Chip').closest('.np-chip')).toHaveClass('disabled');
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('does not open the suggestions when the input is clicked', async () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[{ label: 'Option 1' }]}
+          minQueryLength={0}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes the open menu when it becomes disabled', async () => {
+      const onChange = jest.fn();
+      const props = {
+        id: 'test',
+        name: 'test',
+        options: [],
+        allowNew: true,
+        minQueryLength: 0,
+        onChange,
+      };
+      const { rerender } = render(<Typeahead {...props} />);
+
+      await userEvent.type(screen.getByRole('combobox'), 'New thing');
+      rerender(<Typeahead {...props} disabled />);
+      await userEvent.click(document.body);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Typeahead/Typeahead.tsx

@@ -61,6 +61,8 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   chipSeparators?: readonly string[];
   /** @default true */
   clearable?: boolean;
+  /** @default false */
+  disabled?: boolean;
   footer?: ReactNode;
   /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
@@ -112,6 +114,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     autoFocus: false,
     chipSeparators: [],
     clearable: true,
+    disabled: false,
     initialValue: [],
     inputAutoComplete: 'new-password',
     minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
@@ -160,6 +163,12 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     }
   }
 
+  componentDidUpdate(previousProps: TypeaheadPropsWithInputAttributes<T>) {
+    if (this.props.disabled && !previousProps.disabled) {
+      this.hideMenu();
+    }
+  }
+
   componentWillUnmount() {
     this.handleSearchDebounced.cancel();
   }
@@ -398,6 +407,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   renderChip = (option: TypeaheadOption<T>, idx: number): ReactNode => {
+    const { disabled } = this.props;
     const valid = this.props.validateChip?.(option);
 
     return (
@@ -408,7 +418,8 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           'has-error': !valid,
           'np-chip--valid': valid,
         })}
-        onRemove={() => this.removeChip(option)}
+        disabled={disabled}
+        onRemove={disabled ? undefined : () => this.removeChip(option)}
       />
     );
   };
@@ -486,6 +497,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       addon,
       name,
       clearable,
+      disabled,
       allowNew,
       footer,
       showSuggestions,
@@ -501,9 +513,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
 
     const { errorState, query, selected, optionsShown, keyboardFocusedOptionIndex } = this.state;
 
-    const clearButton = clearable && (query || selected.length > 0);
+    const clearButton = !disabled && clearable && (query || selected.length > 0);
 
-    const dropdownOpen = optionsShown && showSuggestions && query.length >= minQueryLength;
+    const dropdownOpen =
+      !disabled && optionsShown && showSuggestions && query.length >= minQueryLength;
 
     const menu = this.renderMenu({
       footer,
@@ -556,6 +569,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           <div
             className={clsx(`input-group input-group-${size}`, {
               'input-group--has-error': hasError,
+              disabled,
             })}
           >
             {addon && <span className="input-group-addon input-group-addon--search">{addon}</span>}
@@ -563,6 +577,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
             <TypeaheadInput
               {...{
                 autoFocus,
+                disabled,
                 multiple,
                 dropdownOpen,
                 placeholder,

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -23,7 +23,10 @@ export type TypeaheadInputProps<T> = {
   onPaste: React.ClipboardEventHandler<HTMLInputElement>;
   renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
   ariaActivedescendant?: string;
-} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
+} & Pick<
+  TypeaheadProps<T>,
+  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'
+>;
 
 type TypeaheadInputState = {
   inputWidth: number;
@@ -73,6 +76,7 @@ export default class TypeaheadInput<T> extends Component<
     const {
       typeaheadId,
       autoFocus,
+      disabled,
       multiple,
       name,
       dropdownOpen,
@@ -98,6 +102,7 @@ export default class TypeaheadInput<T> extends Component<
         id={`input-${typeaheadId}`}
         aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
+        disabled={disabled}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}

package/src/Typeahead/_stories/Typeahead.story.tsx

@@ -36,6 +36,7 @@ const meta: Meta<typeof Typeahead> = {
     autoFocus: false,
     chipSeparators: [',', ' '],
     clearable: true,
+    disabled: false,
     inputAutoComplete: 'new-password',
     minQueryLength: 3,
     multiple: false,

package/src/Typeahead/_stories/Typeahead.test.story.tsx

@@ -3,6 +3,7 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import Button from '../../Button';
+import Field from '../../Field/Field';
 import Modal from '../../Modal';
 import Typeahead from '../Typeahead';
 
@@ -17,6 +18,46 @@ const meta: Meta<typeof Typeahead> = {
 };
 export default meta;
 
+export const Disabled: Story = {
+  render: () => (
+    <div className="d-flex flex-column">
+      <Field id="typeahead-disabled-empty" label="Empty">
+        <Typeahead
+          id="typeahead-disabled-empty"
+          name="typeahead-disabled-empty"
+          disabled
+          placeholder="Search currencies"
+          addon={<SearchIcon size={24} />}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-disabled-value" label="With a value">
+        <Typeahead
+          id="typeahead-disabled-value"
+          name="typeahead-disabled-value"
+          disabled
+          addon={<SearchIcon size={24} />}
+          initialValue={[{ label: 'British pound' }]}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-disabled-chips" label="With chips">
+        <Typeahead
+          id="typeahead-disabled-chips"
+          name="typeahead-disabled-chips"
+          disabled
+          multiple
+          initialValue={[{ label: 'British pound' }, { label: 'Euro' }]}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+    </div>
+  ),
+};
+
 export const AutoFocusInModal: Story = {
   parameters: {
     docs: {

package/src/i18n/cs.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Předčíslí",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
   "neptune.StatusIcon.iconLabel.error": "Chyba:",

package/src/i18n/de.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ländercode",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Vorwahl",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.StatusIcon.iconLabel.error": "Fehler:",

package/src/i18n/es.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código de país",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de teléfono",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefijo",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.StatusIcon.iconLabel.error": "Error:",