@transferwise/components 46.166.0 → 46.168.0

package/src/ListItem/ListItem.css

@@ -391,6 +391,14 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/src/ListItem/ListItem.less

@@ -11,6 +11,14 @@
   padding: var(--size-12) 0;
   container-type: inline-size;
 
+  &-paddingY-8 {
+    padding: var(--size-8) 0;
+  }
+
+  &-paddingY-16 {
+    padding: var(--size-16) 0;
+  }
+
   &-paddingY-24 {
     padding: var(--size-24) 0;
   }

package/src/ListItem/ListItem.test.tsx

@@ -1516,16 +1516,36 @@ 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-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the smaller vertical padding when set to 8', () => {
+      render(<ListItem title="Test Title" paddingY={8} />);
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
       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-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the medium vertical padding when set to 16', () => {
+      render(<ListItem title="Test Title" paddingY={16} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-16');
       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')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
       expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
     });
   });

package/src/ListItem/ListItem.tsx

@@ -63,7 +63,7 @@ export type ListItemProps = {
    * Vertical padding of the list item, in pixels.
    * @default 12
    */
-  paddingY?: 12 | 24;
+  paddingY?: 8 | 12 | 16 | 24;
   title: ReactNode;
   subtitle?: ReactNode;
   /**
@@ -238,6 +238,8 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
+            'wds-list-item-paddingY-8': paddingY === 8,
+            'wds-list-item-paddingY-16': paddingY === 16,
             'wds-list-item-paddingY-24': paddingY === 24,
             disabled: disabled && !isPartiallyInteractive,
             'disabled--has-prompt-reason':

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

@@ -42,7 +42,7 @@ const disabledPromptMessage = (
 );
 
 /**
- * Please refer to the [design documentation](https://docs.wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#disabled-states) for more details
  */
 export default {
   component: ListItem,

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

@@ -72,7 +72,7 @@ export const PaddingY: Story = {
     };
     return (
       <List>
-        {([12, 24] as const).map((paddingY) => (
+        {([8, 12, 16, 24] as const).map((paddingY) => (
           <Fragment key={paddingY}>
             <ListItem {...props} paddingY={paddingY} />
             <ListItem {...props} paddingY={paddingY} spotlight="active" />

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

@@ -16,8 +16,8 @@ import Modal from '../../Modal';
 import Link from '../../Link';
 import List from '../../List';
 import Popover from '../../Popover';
-import { SnackbarConsumer, type SnackbarContextType } from '../../Snackbar/SnackbarContext';
-import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import { SnackbarConsumer, type SnackbarContextType } from '../../Prompt/Snackbar/SnackbarContext';
+import SnackbarProvider from '../../Prompt/Snackbar/SnackbarProvider';
 import Tooltip from '../../Tooltip';
 import { Position } from '../../common';
 import { ListItem, type ListItemProps } from '../ListItem';

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

@@ -76,7 +76,7 @@ export default {
     },
     paddingY: {
       control: 'radio',
-      options: ['unset (undefined)', 12, 24],
+      options: ['unset (undefined)', 8, 12, 16, 24],
       mapping: {
         'unset (undefined)': undefined,
       },

package/src/Loader/Loader.tsx

@@ -32,7 +32,7 @@ export type LoaderProps = {
 /**
  * Loader component
  *
- * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader
+ * Docs link: https://storybook.wise.design/?path=/docs/loading-loader--docs
  *
  * @param root0
  * @param root0.small

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

@@ -0,0 +1,122 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/CriticalBanner/Developer Guide" tags={['new']} />
+
+# Developer Guide
+
+**Note:** Any usages of `Layout`, `Flow` or `HashRouterFlow` rely on the `global-critical-banner` feature flag being enabled. Whilst this flag is currently disabled in production, it's recommended to test with this flag enabled in staging, to ensure the critical banner behaves as expected for your users.
+
+Typically `CriticalBanner` should be used in one of three ways. Pick the one that matches the page or flow you're building and avoid using CriticalBanner as a standalone component.
+
+- `Layout` via `@transferwise/navigation-ui` - Fetched automatically from navigation-service (for non-flow layouts)
+- `Flow` / `HashRouterFlow` via `@transferwise/flow` - Fetched automatically from navigation-service (for flows)
+- `FlowNavigation` via `@transferwise/components` - Passed in by you through the `banner` prop (for custom solutions)
+
+If your page uses `Layout`, `Flow` or `HashRouterFlow`, you don't need to render `CriticalBanner` yourself. These components fetch the banner, cache it and render it for you automatically.
+
+## Layout from @transferwise/navigation-ui
+
+`Layout` has no banner prop. It fetches the critical banner from navigation-service on the client and renders it above the page content.
+
+Requirements:
+
+- `@transferwise/navigation-ui` `4.46.0` or later
+- The page must use the composable layout, and `global-critical-banner` feature flags in navigation-service control this. The legacy layout doesn't render the banner.
+
+<Source
+  code={`import { Layout, fetchNavigationData, type NavigationData } from '@transferwise/navigation-ui';
+
+// Optional: fetch initial navigation data server side, so the banner cache is scoped correctly.
+export const getServerSideProps = async () => {
+    const navigationData = await fetchNavigationData({
+      httpClient,
+      navigationServiceUrl: process.env.NAVIGATION_SERVICE_URL,
+    });
+
+    return { props: { navigationData } };
+};
+
+const Page = ({ navigationData }: { navigationData: NavigationData }) => (
+    <Layout navigationData={navigationData} onMixpanelEvent={trackEvent}>
+      { /* Page content */ }
+    </Layout>
+);
+`}
+  language="typescript"
+  dark
+/>
+
+`Layout` also handles:
+
+- saving the collapsed or expanded state when the user toggles the banner
+- caching the banner for the session, so the entry animation only plays for new or changed banners
+- sending Mixpanel events for toggles and action clicks through `onMixpanelEvent`
+
+
+## Flow / HashRouterFlow from @transferwise/flow
+
+`Flow` and `HashRouterFlow`, from `@transferwise/flow` render `FlowNavigationWrapper` from `@transferwise/navigation-ui`. It fetches, caches and renders the critical banner the same way `Layout` does. You don't need to pass a banner, but do require `@transferwise/navigation-ui` as a dependency.
+
+Requirements:
+
+- `@transferwise/flow` `13.0.0` or later
+- `@transferwise/navigation-ui` `4.51.0` or later, which is a required peer dependency
+
+You can pass two optional properties in the `navigation` options:
+
+- `navigationData`: initial navigation data, usually fetched server side, so the banner cache is scoped correctly. If you leave it out, the banner is fetched on the client.
+- `onMixpanelEvent`: called when the user toggles the banner or clicks its action.
+
+<Source
+  code={`import { HashRouterFlow } from '@transferwise/flow';
+import type { NavigationData } from '@transferwise/navigation-ui';
+
+const SendFlow = ({ navigationData }: { navigationData?: NavigationData }) => (
+    <HashRouterFlow
+      steps={steps}
+      trackEvent={trackEvent}
+      navigation={{
+      profile,
+      onClose,
+      navigationData,
+      onMixpanelEvent: trackEvent,
+      }}
+    />
+);
+`}
+  language="typescript"
+  dark
+/>
+
+## FlowNavigation from @transferwise/components
+
+`FlowNavigation` from `@transferwise/components` renders a critical banner above the navigation when you pass a `banner` prop. Use this if you build your flow with `FlowNavigation` directly. You're responsible for getting the banner data.
+
+`banner` accepts either:
+
+- `CriticalBannerProps`, the same props `CriticalBanner` takes
+- the legacy `CriticalBannerData` shape returned by navigation-service. `FlowNavigation` maps it to `CriticalBannerProps` for you.
+
+<Source
+  code={`import { FlowNavigation, type 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: handleVerify },
+    };
+
+    <FlowNavigation
+      banner={banner}
+      steps={steps}
+      activeStep={activeStep}
+      avatar={avatar}
+      onClose={onClose}
+    />;
+`}
+  language="typescript"
+  dark
+/>
+
+Requires `@transferwise/components` `46.162.0` or later. Support for the legacy `CriticalBannerData` shape was added in `46.164.0`.

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

@@ -14,8 +14,6 @@ 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/Prompt/PrimitivePrompt/PrimitivePrompt.test.tsx

@@ -74,7 +74,30 @@ describe('PrimitivePrompt', () => {
       const onDismiss = jest.fn();
       render(<PrimitivePrompt {...defaultProps} onDismiss={onDismiss} />);
 
-      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Close' })).toHaveClass(
+        'np-icon-button-secondary-default',
+      );
+    });
+
+    it('supports a minimal dismiss button without changing its accessible name or handler', async () => {
+      const onDismiss = jest.fn();
+      const user = userEvent.setup();
+      render(
+        <PrimitivePrompt
+          {...defaultProps}
+          dismissButtonPriority="minimal"
+          data-testid="prompt"
+          onDismiss={onDismiss}
+        />,
+      );
+
+      const dismissButton = screen.getByRole('button', { name: 'Close' });
+      expect(dismissButton).toHaveClass('np-icon-button-minimal-default');
+      expect(screen.getByTestId('prompt')).not.toHaveAttribute('dismissButtonPriority');
+
+      await user.click(dismissButton);
+
+      expect(onDismiss).toHaveBeenCalledTimes(1);
     });
 
     it('calls onDismiss when dismiss button is clicked', async () => {

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -1,7 +1,7 @@
 import { Cross } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import SentimentSurface, { Emphasis, Sentiment } from '../../SentimentSurface';
-import IconButton from '../../IconButton';
+import IconButton, { type IconButtonProps } from '../../IconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/CloseButton/CloseButton.messages';
 import { forwardRef, HTMLAttributes, ReactNode } from 'react';
@@ -29,6 +29,11 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
    * Handler called when the close button is clicked. If not provided, then the close button is hidden.
    */
   onDismiss?: () => void;
+  /**
+   * The priority of the dismiss IconButton.
+   * @default 'secondary'
+   */
+  dismissButtonPriority?: IconButtonProps['priority'];
   /**
    * Test ID for testing tools
    */
@@ -46,6 +51,7 @@ export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
       media,
       actions,
       onDismiss,
+      dismissButtonPriority = 'secondary',
       className,
       children,
       ...restProps
@@ -73,7 +79,7 @@ export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
           {onDismiss && (
             <IconButton
               size={24}
-              priority="secondary"
+              priority={dismissButtonPriority}
               aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
               className="wds-prompt__dismiss"
               onClick={onDismiss}

package/src/Prompt/Snackbar/Snackbar.css

@@ -0,0 +1,134 @@
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: 1060;
+}
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
+  text-align: start;
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
+}
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
+  }
+}
+.wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
+  }
+}

package/src/Prompt/Snackbar/Snackbar.less

@@ -0,0 +1,159 @@
+@import (reference) "./../../styles/variables/zindex.less";
+
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-bottom: calc(var(--size-16) + env(safe-area-inset-bottom));
+  position: fixed;
+  bottom: 0;
+  inset-inline: 0;
+  z-index: @zindex-mobile-nav;
+
+  @media (--screen-sm) {
+    padding-bottom: var(--size-24);
+  }
+
+  &--swipe-dismiss {
+    transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+  }
+
+  &--swipe-settle {
+    transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+  }
+
+  &-container {
+    --Prompt-border-radius: var(--radius-medium);
+    --Prompt-gap: var(--size-8);
+    --Prompt-padding-x: var(--size-12);
+    --Prompt-padding-y: var(--size-12);
+    box-sizing: border-box;
+    max-width: 480px;
+    text-align: start;
+    cursor: grab;
+    touch-action: pan-x pinch-zoom;
+  }
+
+  &-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr);
+
+    @media (--screen-sm) {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+  }
+
+  &-container .wds-prompt__media-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: max(var(--size-32), 1lh);
+    padding-top: 0;
+    color: var(--color-sentiment-content-primary);
+
+    // At 400% reflow spacing shrinks, but the text's line height does not.
+    &:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+      min-height: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+    }
+  }
+
+  &__media-asset {
+    display: flex;
+
+    svg {
+      width: var(--size-24);
+      height: var(--size-24);
+    }
+  }
+
+  &__process-indicator .process-circle {
+    stroke: currentColor;
+  }
+
+  &-container .wds-prompt__dismiss {
+    display: none;
+    align-self: flex-start;
+    margin-top: calc(var(--size-4) - 1px);
+
+    @media (--screen-sm) {
+      display: flex;
+    }
+  }
+
+  &__action {
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-8);
+    flex: 1 0 0;
+    min-height: var(--size-32);
+    min-width: 0;
+  }
+
+  &__message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: auto;
+    flex: 1 0 0;
+    min-width: 0;
+    align-self: stretch;
+  }
+
+  &__body {
+    display: block;
+  }
+}
+
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 150ms linear,
+    transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition:
+    opacity 50ms linear 50ms,
+    transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
+  }
+}

package/src/Prompt/Snackbar/Snackbar.messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  escapeDismissHint: {
+    id: 'neptune.Snackbar.escapeDismissHint',
+    defaultMessage: 'Press Escape to dismiss.',
+    description: 'Screen-reader instruction for dismissing a Snackbar without moving focus',
+  },
+});