@transferwise/components 46.163.0 → 46.165.0

package/src/FlowNavigation/FlowNavigation.tsx

@@ -15,6 +15,8 @@ import AnimatedLabel from './AnimatedLabel';
 import IconButton from '../IconButton';
 import { ArrowLeft } from '@transferwise/icons';
 import { CriticalBanner, CriticalBannerProps } from '../Prompt';
+import { isCriticalBannerData, mapCriticalBannerDataToBannerProps } from './helpers';
+import { CriticalBannerLegacyData } from './types';
 
 const defaultLogo = <Logo />;
 
@@ -32,8 +34,11 @@ export interface FlowNavigationProps {
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
   steps?: readonly Step[];
-  /** Optional critical banner data, to be displayed above the flow navigation. */
-  banner?: CriticalBannerProps | null;
+  /**
+   * Optional critical banner data, to be displayed above the flow navigation.
+   * Accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape — the latter is mapped to `CriticalBannerProps` internally.
+   */
+  banner?: CriticalBannerLegacyData | CriticalBannerProps | null;
   /**
    * Controls whether the bottom border is displayed.
    * @default true
@@ -59,6 +64,12 @@ const FlowNavigation = ({
   const hasSteps = steps && steps.length > 0;
   const displayGoBack = onGoBack != null && activeStep > 0;
 
+  const resolvedBannerData: CriticalBannerProps | null = banner
+    ? isCriticalBannerData(banner)
+      ? mapCriticalBannerDataToBannerProps(banner)
+      : banner
+    : null;
+
   const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
   const newAvatar = done ? null : avatar;
 
@@ -117,7 +128,7 @@ const FlowNavigation = ({
 
   return (
     <>
-      {banner && <CriticalBanner {...banner} />}
+      {resolvedBannerData && <CriticalBanner {...resolvedBannerData} />}
       <Container
         size="fluid"
         className={clsx('np-flow-navigation', {

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/ListItem/ListItem.css

@@ -397,6 +397,11 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/src/ListItem/ListItem.less

@@ -11,6 +11,10 @@
   padding: var(--size-12) 0;
   container-type: inline-size;
 
+  &-paddingY-24 {
+    padding: var(--size-24) 0;
+  }
+
   & + .wds-list-item-spotlight,
   .wds-list-item-spotlight + & {
     margin-top: var(--size-16);

package/src/ListItem/ListItem.test.tsx

@@ -1513,6 +1513,23 @@ describe('ListItem', () => {
     });
   });
 
+  describe('paddingY', () => {
+    it('uses the default vertical padding when not set', () => {
+      render(<ListItem title="Test Title" />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the default vertical padding when set to 12', () => {
+      render(<ListItem title="Test Title" paddingY={12} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the larger vertical padding when set to 24', () => {
+      render(<ListItem title="Test Title" paddingY={24} />);
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
+    });
+  });
+
   describe('disable states', () => {
     describe('short-lived', () => {
       it('should override existing prompt if disabled and disabledPromptMessage are set', () => {

package/src/ListItem/ListItem.tsx

@@ -59,6 +59,11 @@ export type ListItemProps = {
    * Highlights the list item as an action to be taken or already taken. <br />
    */
   spotlight?: 'active' | 'inactive';
+  /**
+   * Vertical padding of the list item, in pixels.
+   * @default 12
+   */
+  paddingY?: 12 | 24;
   title: ReactNode;
   subtitle?: ReactNode;
   /**
@@ -112,6 +117,7 @@ export const ListItem = ({
   inverted,
   media,
   spotlight,
+  paddingY = 12,
   valueTitle,
   valueSubtitle,
   control = null,
@@ -232,6 +238,7 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
+            'wds-list-item-paddingY-24': paddingY === 24,
             disabled: disabled && !isPartiallyInteractive,
             'disabled--has-prompt-reason':
               !disabledPromptMessage && disabled && !isPartiallyInteractive,

package/src/ListItem/_stories/ListItem.layout.test.story.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Plane } from '@transferwise/icons';
 import List from '../../List';
 import { ListItem, type ListItemProps } from '../ListItem';
 import { lorem10, lorem20, lorem5 } from '../../test-utils';
@@ -61,6 +62,28 @@ export const GapsBetweenItems: Story = {
   },
 };
 
+export const PaddingY: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: <ListItem.AvatarLayout size={32} avatars={[{ asset: <Plane /> }, { asset: '7+' }]} />,
+      control: CONTROLS.navigation,
+    };
+    return (
+      <List>
+        {([12, 24] as const).map((paddingY) => (
+          <Fragment key={paddingY}>
+            <ListItem {...props} paddingY={paddingY} />
+            <ListItem {...props} paddingY={paddingY} spotlight="active" />
+            <ListItem {...props} paddingY={paddingY} spotlight="inactive" />
+          </Fragment>
+        ))}
+      </List>
+    );
+  },
+};
+
 type PreviewStoryArgs = ListItemProps & {
   previewImageSize: ListItemMediaSize;
   previewWithLineGuides: boolean;

package/src/ListItem/_stories/ListItem.story.tsx

@@ -60,6 +60,7 @@ export default {
     disabled: false,
     disabledPromptMessage: undefined,
     spotlight: undefined,
+    paddingY: undefined,
     inverted: false,
     valueColumnWidth: undefined,
   },
@@ -73,6 +74,13 @@ export default {
         inactive: 'inactive',
       },
     },
+    paddingY: {
+      control: 'radio',
+      options: ['unset (undefined)', 12, 24],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+    },
   },
 } satisfies Meta<ListItemProps>;
 

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/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/fr.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.PhoneNumberInput.countryCodeLabel": "Code pays",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Indicatif",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.StatusIcon.iconLabel.error": "Erreur :",

package/src/i18n/pt.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefixo",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.StatusIcon.iconLabel.error": "Erro:",

package/src/i18n/ru.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Код страны",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",

package/src/i18n/th.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "คำนำหน้า",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",

package/src/i18n/tr.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ülke kodu",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefon numarası",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Ön ek",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
   "neptune.StatusIcon.iconLabel.error": "Hata:",

package/src/index.ts

@@ -5,7 +5,7 @@
  */
 export type { ContainerProps } from './Container';
 export type { LogoProps, LogoSize, LogoAssetName } from './Logo';
-export type { FlowNavigationProps } from './FlowNavigation';
+export type { FlowNavigationProps, CriticalBannerLegacyData } from './FlowNavigation';
 export type { AccordionItem, AccordionProps } from './Accordion';
 export type { ActionOptionProps } from './_deprecated/ActionOption';
 export type { AlertAction, AlertProps, AlertType } from './_deprecated/Alert';

package/src/main.css

@@ -23806,6 +23806,11 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;