@transferwise/components 46.128.3 → 46.130.0

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import type { AriaLive } from '../../common';
 import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
 import { LinkProps } from '../../link';
 import { PrimitivePromptProps } from '../PrimitivePrompt';
@@ -15,7 +16,7 @@ export type InfoPromptMedia = {
      */
     asset: ReactNode;
 };
-export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pick<PrimitivePromptProps, 'data-testid'> & {
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> & Pick<PrimitivePromptProps, 'data-testid'> & {
     /**
      * The sentiment determines the colour scheme
      * @default 'neutral'
@@ -44,6 +45,14 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pi
      */
     description: string;
     className?: string;
+    /**
+     * Sets the ARIA live region politeness level.
+     * - `'polite'` — announced after the current speech (default)
+     * - `'assertive'` — interrupts the current speech immediately
+     * - `'off'` — disables the live region entirely
+     * @default 'polite'
+     */
+    'aria-live'?: AriaLive;
 };
 /**
  * InfoPrompt displays important contextual messages to users within a screen.
@@ -54,5 +63,5 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pi
  *
  * Guidance can be found in the [design system](https://wise.design/components/info-prompt).
  */
-export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
+export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "aria-live": ariaLive, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
 //# sourceMappingURL=InfoPrompt.d.ts.map

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GACzE,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,iHAUxB,eAAe,gCAyEjB,CAAC"}
+{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA4EjB,CAAC"}

package/build/types/sentimentSurface/SentimentSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBAsCtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBAwCtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.128.3",
+  "version": "46.130.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -103,7 +103,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@floating-ui/react": "^0.27.17",
+    "@floating-ui/react": "^0.27.18",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.4",

package/src/card/Card.story.tsx

@@ -8,13 +8,14 @@ import Card from '.';
 type Story = StoryObj<typeof Card>;
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
  *
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const meta: Meta<typeof Card> = {
   component: Card,
-  title: 'Layouts/Card (Deprecated)',
+  title: 'Layouts/Card',
+  tags: ['deprecated'],
   args: {
     title: 'A card',
     details: 'Some details about this card',

package/src/card/Card.tsx

@@ -21,7 +21,7 @@ export interface CardProps {
 }
 
 /**
- * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * @deprecated Use [new ListItem component](?path=/docs/content-listitem--docs) instead.
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
 const Card = forwardRef(function Card(

package/src/common/{card/Card.less → baseCard/BaseCard.less}

@@ -50,4 +50,4 @@
     --Card-closeButton-position: var(--size-8);
     --Card-padding: var(--size-16);
   }
-}
+}

package/src/common/{card/Card.story.tsx → baseCard/BaseCard.story.tsx}

@@ -4,15 +4,15 @@ import { lorem10 } from '../../test-utils';
 import Title from '../../title';
 import { Typography } from '../propsValues/typography';
 
-import Card from '.';
+import BaseCard from '.';
 
-const meta: Meta<typeof Card> = {
-  component: Card,
-  title: 'Internal/Card',
+const meta: Meta<typeof BaseCard> = {
+  component: BaseCard,
+  title: 'Internal/BaseCard',
 };
 
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof BaseCard>;
 
 export const Default: Story = {
   args: {

package/src/common/{card/Card.test.tsx → baseCard/BaseCard.test.tsx}

@@ -1,10 +1,9 @@
 import { render, fireEvent, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 
-import Card from './Card';
+import BaseCard from './BaseCard';
 
-describe('Card', () => {
+describe('BaseCard', () => {
   const defaultProps = {
     children: 'Test Content',
     testId: 'test-card',
@@ -15,13 +14,13 @@ describe('Card', () => {
       ...defaultProps,
       children: 'Test text',
     };
-    const { rerender } = render(<Card {...defaultProps}>Test Content</Card>);
+    const { rerender } = render(<BaseCard {...defaultProps}>Test Content</BaseCard>);
 
     expect(screen.getByTestId('test-card')).toBeInTheDocument();
     expect(screen.getByTestId('test-card')).toHaveClass('np-Card');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByText('Test text')).toBeInTheDocument();
   });
@@ -31,12 +30,12 @@ describe('Card', () => {
       ...defaultProps,
       className: 'test-custom',
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('test-custom');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('test-custom');
   });
@@ -46,12 +45,12 @@ describe('Card', () => {
       ...defaultProps,
       isDisabled: true,
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('is-disabled');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('is-disabled');
   });
@@ -61,12 +60,12 @@ describe('Card', () => {
       ...defaultProps,
       isSmall: true,
     };
-    const { rerender } = render(<Card {...defaultProps} />);
+    const { rerender } = render(<BaseCard {...defaultProps} />);
 
     expect(screen.getByTestId('test-card')).not.toHaveClass('np-Card--small');
 
     // Change props
-    rerender(<Card {...props} />);
+    rerender(<BaseCard {...props} />);
 
     expect(screen.getByTestId('test-card')).toHaveClass('np-Card--small');
   });
@@ -79,7 +78,7 @@ describe('Card', () => {
     };
     render(
       <IntlProvider locale="en">
-        <Card {...props} />
+        <BaseCard {...props} />
       </IntlProvider>,
     );
 

package/src/common/{card/Card.tsx → baseCard/BaseCard.tsx}

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
-import { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';
+import { type ReactNode, forwardRef, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
 import { stopPropagation } from '../domHelpers';
 
-export interface CardProps {
+export interface BaseCardProps {
   /** Content to display inside Card. */
   children: ReactNode;
 
@@ -28,9 +28,9 @@ export interface CardProps {
 }
 
 /**
- * Card component.
+ * BaseCard component.
  *
- * A card is a container for content that is used to group related information.
+ * A BaseCard is a container for content that is used to group related information.
  * It can be used to display information in a structured way, and can be
  * customized with various props to suit different use cases.
  *
@@ -44,11 +44,11 @@ export interface CardProps {
  * @param {string} testId - Optional ID to add to the card container for testing purposes.
  * @returns {React.JSX.Element} - The card component.
  * @example
- * <Card>
+ * <BaseCard>
  *   <p>Hello World!</p>
- * </Card>
+ * </BaseCard>
  */
-const Card = forwardRef<HTMLDivElement, CardProps>(
+const BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(
   (
     {
       className,
@@ -98,6 +98,6 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
   },
 );
 
-Card.displayName = 'Card';
+BaseCard.displayName = 'Card';
 
-export default Card;
+export default BaseCard;

package/src/common/baseCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseCard';
+export * from './BaseCard';

package/src/common/index.ts

@@ -27,3 +27,5 @@ export * from './initials';
 export * from './colors';
 export * from './constants';
 export { CloseButton } from './closeButton';
+export { LiveRegion } from './liveRegion';
+export type { AriaLive, LiveRegionProps } from './liveRegion';

package/src/common/liveRegion/LiveRegion.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { LiveRegion, LiveRegionProps } from './LiveRegion';
+
+describe('LiveRegion', () => {
+  const renderLiveRegion = (props: Partial<LiveRegionProps> & Pick<LiveRegionProps, 'aria-live'>) =>
+    render(<LiveRegion {...props}>{props.children ?? 'Live content'}</LiveRegion>);
+
+  describe('when aria-live is "polite"', () => {
+    it('renders with role="status"', () => {
+      renderLiveRegion({ 'aria-live': 'polite' });
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
+
+    it('sets aria-live="polite"', () => {
+      renderLiveRegion({ 'aria-live': 'polite' });
+      expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('sets aria-atomic="true"', () => {
+      renderLiveRegion({ 'aria-live': 'polite' });
+      expect(screen.getByRole('status')).toHaveAttribute('aria-atomic', 'true');
+    });
+  });
+
+  describe('when aria-live is "assertive"', () => {
+    it('renders with role="alert"', () => {
+      renderLiveRegion({ 'aria-live': 'assertive' });
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('sets aria-live="assertive"', () => {
+      renderLiveRegion({ 'aria-live': 'assertive' });
+      expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
+    });
+
+    it('sets aria-atomic="true"', () => {
+      renderLiveRegion({ 'aria-live': 'assertive' });
+      expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
+    });
+  });
+
+  it('renders children', () => {
+    renderLiveRegion({ 'aria-live': 'polite', children: 'Transfer sent' });
+    expect(screen.getByText('Transfer sent')).toBeInTheDocument();
+  });
+
+  it('passes additional HTML attributes to the wrapper div', () => {
+    renderLiveRegion({ 'aria-live': 'polite', className: 'custom' });
+    expect(screen.getByRole('status')).toHaveClass('custom');
+  });
+
+  it('supports data-testid prop', () => {
+    renderLiveRegion({ 'aria-live': 'polite', 'data-testid': 'live-region' });
+    expect(screen.getByTestId('live-region')).toBeInTheDocument();
+  });
+});

package/src/common/liveRegion/LiveRegion.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const ARIA_LIVE_ROLE_MAP = {
+  assertive: 'alert',
+  polite: 'status',
+} as const;
+
+export type AriaLive = 'off' | 'polite' | 'assertive';
+
+export interface LiveRegionProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'role' | 'aria-live' | 'aria-atomic'
+> {
+  /**
+   * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
+   */
+  'aria-live': AriaLive;
+  /** Test ID for testing tools */
+  'data-testid'?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Renders an ARIA live region with the correct implicit role.
+ *
+ * - `aria-live="polite"` → `role="status"`
+ * - `aria-live="assertive"` → `role="alert"`
+ * - `aria-live="off"` → no live region
+ *
+ * The `role` prop is intentionally excluded from the public API
+ * to prevent mismatches between `aria-live` and `role`.
+ */
+export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
+  if (ariaLive === 'off') {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      role={ARIA_LIVE_ROLE_MAP[ariaLive]}
+      aria-live={ariaLive}
+      aria-atomic="true"
+      style={{ display: 'contents' }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/common/liveRegion/index.ts

@@ -0,0 +1,2 @@
+export { LiveRegion } from './LiveRegion';
+export type { AriaLive, LiveRegionProps } from './LiveRegion';

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,34 +1,52 @@
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
+}
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,51 +1,61 @@
-.np-theme-personal {
-  .critical-comms {
-    .alert-warning {
-      color: var(--color-contrast-overlay);
-      background-color: var(--color-sentiment-negative);
-
-      .np-text-title-body {
-        color: var(--color-contrast-overlay);
-      }
-    }
+.critical-comms {
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 
-    .status-circle.warning {
-      background-color: var(--color-background-screen);
+  .alert {
+    background-color: var(--color-sentiment-background-surface);
+    color: var(--color-sentiment-content-primary);
+    margin-bottom: 0;
 
-      .status-icon {
-        color: var(--color-contrast-theme);
-      }
+    .np-text-title-body {
+      color: var(--color-sentiment-content-primary);
     }
+  }
 
-    .alert__message {
-      .alert__action {
-        margin-top: var(--size-16);
-      }
+  .status-circle.negative {
+    background-color: var(--color-background-screen);
+
+    .status-icon {
+      color: var(--color-content-primary);
     }
+  }
 
-    .wds-Button {
-      --Button-background: var(--color-contrast-overlay);
-      --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-      --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  .alert__message {
+    .alert__action {
+      margin-top: var(--size-16);
     }
   }
 
+  .wds-Button {
+    --Button-color: var(--color-content-primary);
+    --Button-color-hover: var(--color-content-primary);
+    --Button-color-active: var(--color-content-primary);
+
+    --Button-background: var(--color-background-screen);
+    --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+    --Button-background-active: var(--color-sentiment-interactive-primary-active);
+  }
+
+  .alert-warning .wds-Button {
+    --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+    --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
+  }
 
   @media (--screen-md) {
-    .critical-comms {
-      .alert-warning {
-        .alert__message {
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-
-          .alert__action {
-            margin-top: 0;
-            margin-left: var(--padding-small);
-          }
+    .alert-warning,
+    .alert-negative,
+    .alert-neutral {
+      .alert__message {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        .alert__action {
+          margin-top: 0;
+          margin-left: var(--padding-small);
         }
       }
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-
 import CriticalCommsBanner from '.';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
@@ -18,21 +16,17 @@ export const Basic = {
   },
 };
 
-export const Variants: Story = {
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" title="Your account is overdrawn" />
+      <CriticalCommsBanner {...args} sentiment="warning" title="Your account needs attention" />
+      <CriticalCommsBanner {...args} sentiment="neutral" title="Your transfer is being processed" />
+    </>
+  ),
   args: {
-    title: 'Your account is overdrawn',
-    subtitle: 'Add money within the next 30 days',
-    action: { label: 'Take action', href: 'https://wise.com' },
-  },
-  ...withVariantConfig(['default', 'dark', 'rtl']),
-};
-
-export const Mobile: Story = {
-  tags: ['!autodocs'],
-  args: {
-    title: 'Your account is overdrawn',
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
   },
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import CriticalCommsBanner from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+export default {
+  component: CriticalCommsBanner,
+  title: 'Prompts/CriticalCommsBanner/tests',
+  tags: ['!autodocs'],
+} satisfies Meta<typeof CriticalCommsBanner>;
+
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig([
+    'default',
+    'dark',
+    'bright-green',
+    'forest-green',
+    'business',
+    'business--forest-green',
+    'business--bright-green',
+  ]),
+};
+
+export const RTL: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+export const Mobile: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+export const Zoom: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['400%']),
+};