@transferwise/components 0.0.0-experimental-e4f5e73 → 0.0.0-experimental-c718986

package/build/alert/Alert.js

@@ -26,13 +26,13 @@ require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 var constants = require('../common/constants.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 var StatusIcon = require('../statusIcon/StatusIcon.js');
 var Title = require('../title/Title.js');
 var logActionRequired = require('../utilities/logActionRequired.js');
 var InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
 var Button_resolver = require('../button/Button.resolver.js');
 var Link = require('../link/Link.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 exports.AlertArrowPosition = void 0;
 (function (AlertArrowPosition) {

package/build/alert/Alert.mjs

@@ -22,13 +22,13 @@ import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import { WDS_LIVE_REGION_DELAY_MS } from '../common/constants.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import StatusIcon from '../statusIcon/StatusIcon.mjs';
 import Title from '../title/Title.mjs';
 import { logActionRequired } from '../utilities/logActionRequired.mjs';
 import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
 import Button from '../button/Button.resolver.mjs';
 import Link from '../link/Link.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 var AlertArrowPosition;
 (function (AlertArrowPosition) {

package/build/common/liveRegion/LiveRegion.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const ARIA_LIVE_ROLE_MAP = {
+  assertive: 'alert',
+  polite: 'status'
+};
+/**
+ * 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`.
+ */
+const LiveRegion = ({
+  'aria-live': ariaLive,
+  children,
+  ...props
+}) => {
+  if (ariaLive === 'off') {
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: ARIA_LIVE_ROLE_MAP[ariaLive],
+    "aria-live": ariaLive,
+    "aria-atomic": "true",
+    style: {
+      display: 'contents'
+    },
+    ...props,
+    children: children
+  });
+};
+
+exports.LiveRegion = LiveRegion;
+//# sourceMappingURL=LiveRegion.js.map

package/build/common/liveRegion/LiveRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.js","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nconst ARIA_LIVE_ROLE_MAP = {\n  assertive: 'alert',\n  polite: 'status',\n} as const;\n\nexport type AriaLive = 'off' | 'polite' | 'assertive';\n\nexport interface LiveRegionProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'role' | 'aria-live' | 'aria-atomic'\n> {\n  /**\n   * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n   */\n  'aria-live': AriaLive;\n  /** Test ID for testing tools */\n  'data-testid'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Renders an ARIA live region with the correct implicit role.\n *\n * - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region\n *\n * The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {\n  if (ariaLive === 'off') {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      role={ARIA_LIVE_ROLE_MAP[ariaLive]}\n      aria-live={ariaLive}\n      aria-atomic=\"true\"\n      style={{ display: 'contents' }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["ARIA_LIVE_ROLE_MAP","assertive","polite","LiveRegion","ariaLive","children","props","_jsx","_Fragment","role","style","display"],"mappings":";;;;AAEA,MAAMA,kBAAkB,GAAG;AACzBC,EAAAA,SAAS,EAAE,OAAO;AAClBC,EAAAA,MAAM,EAAE;CACA;AAiBV;;;;;;;;;AASG;AACI,MAAMC,UAAU,GAAGA,CAAC;AAAE,EAAA,WAAW,EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,KAAI;EAC3F,IAAIF,QAAQ,KAAK,KAAK,EAAE;IACtB,oBAAOG,cAAA,CAAAC,mBAAA,EAAA;AAAAH,MAAAA,QAAA,EAAGA;AAAQ,MAAI;AACxB,EAAA;AAEA,EAAA,oBACEE,cAAA,CAAA,KAAA,EAAA;AACEE,IAAAA,IAAI,EAAET,kBAAkB,CAACI,QAAQ,CAAE;AACnC,IAAA,WAAA,EAAWA,QAAS;AACpB,IAAA,aAAA,EAAY,MAAM;AAClBM,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;KAAa;AAAA,IAAA,GAC3BL,KAAK;AAAAD,IAAAA,QAAA,EAERA;AAAQ,GACN,CAAC;AAEV;;;;"}

package/build/common/liveRegion/LiveRegion.mjs

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const ARIA_LIVE_ROLE_MAP = {
+  assertive: 'alert',
+  polite: 'status'
+};
+/**
+ * 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`.
+ */
+const LiveRegion = ({
+  'aria-live': ariaLive,
+  children,
+  ...props
+}) => {
+  if (ariaLive === 'off') {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    role: ARIA_LIVE_ROLE_MAP[ariaLive],
+    "aria-live": ariaLive,
+    "aria-atomic": "true",
+    style: {
+      display: 'contents'
+    },
+    ...props,
+    children: children
+  });
+};
+
+export { LiveRegion };
+//# sourceMappingURL=LiveRegion.mjs.map

package/build/common/liveRegion/LiveRegion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.mjs","sources":["../../../src/common/liveRegion/LiveRegion.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nconst ARIA_LIVE_ROLE_MAP = {\n  assertive: 'alert',\n  polite: 'status',\n} as const;\n\nexport type AriaLive = 'off' | 'polite' | 'assertive';\n\nexport interface LiveRegionProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'role' | 'aria-live' | 'aria-atomic'\n> {\n  /**\n   * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.\n   */\n  'aria-live': AriaLive;\n  /** Test ID for testing tools */\n  'data-testid'?: string;\n  children?: ReactNode;\n}\n\n/**\n * Renders an ARIA live region with the correct implicit role.\n *\n * - `aria-live=\"polite\"` → `role=\"status\"`\n * - `aria-live=\"assertive\"` → `role=\"alert\"`\n * - `aria-live=\"off\"` → no live region\n *\n * The `role` prop is intentionally excluded from the public API\n * to prevent mismatches between `aria-live` and `role`.\n */\nexport const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {\n  if (ariaLive === 'off') {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      role={ARIA_LIVE_ROLE_MAP[ariaLive]}\n      aria-live={ariaLive}\n      aria-atomic=\"true\"\n      style={{ display: 'contents' }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["ARIA_LIVE_ROLE_MAP","assertive","polite","LiveRegion","ariaLive","children","props","_jsx","_Fragment","role","style","display"],"mappings":";;AAEA,MAAMA,kBAAkB,GAAG;AACzBC,EAAAA,SAAS,EAAE,OAAO;AAClBC,EAAAA,MAAM,EAAE;CACA;AAiBV;;;;;;;;;AASG;AACI,MAAMC,UAAU,GAAGA,CAAC;AAAE,EAAA,WAAW,EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAmB,KAAI;EAC3F,IAAIF,QAAQ,KAAK,KAAK,EAAE;IACtB,oBAAOG,GAAA,CAAAC,QAAA,EAAA;AAAAH,MAAAA,QAAA,EAAGA;AAAQ,MAAI;AACxB,EAAA;AAEA,EAAA,oBACEE,GAAA,CAAA,KAAA,EAAA;AACEE,IAAAA,IAAI,EAAET,kBAAkB,CAACI,QAAQ,CAAE;AACnC,IAAA,WAAA,EAAWA,QAAS;AACpB,IAAA,aAAA,EAAY,MAAM;AAClBM,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;KAAa;AAAA,IAAA,GAC3BL,KAAK;AAAAD,IAAAA,QAAA,EAERA;AAAQ,GACN,CAAC;AAEV;;;;"}

package/build/flowNavigation/FlowNavigation.js

@@ -24,6 +24,7 @@ require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FlowHeader = require('../common/flowHeader/FlowHeader.js');
 var Logo = require('../logo/Logo.js');
 var Stepper = require('../stepper/Stepper.js');
@@ -32,7 +33,6 @@ var FlowNavigation_messages = require('./FlowNavigation.messages.js');
 var AnimatedLabel = require('./animatedLabel/AnimatedLabel.js');
 var IconButton = require('../iconButton/IconButton.js');
 var icons = require('@transferwise/icons');
-var jsxRuntime = require('react/jsx-runtime');
 
 const FlowNavigation = ({
   activeStep = 0,

package/build/flowNavigation/FlowNavigation.mjs

@@ -20,6 +20,7 @@ import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
 import Logo from '../logo/Logo.mjs';
 import Stepper from '../stepper/Stepper.mjs';
@@ -28,7 +29,6 @@ import messages from './FlowNavigation.messages.mjs';
 import AnimatedLabel from './animatedLabel/AnimatedLabel.mjs';
 import IconButton from '../iconButton/IconButton.mjs';
 import { ArrowLeft } from '@transferwise/icons';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const FlowNavigation = ({
   activeStep = 0,

package/build/overlayHeader/OverlayHeader.js

@@ -23,9 +23,9 @@ require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FlowHeader = require('../common/flowHeader/FlowHeader.js');
 var Logo = require('../logo/Logo.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 function OverlayHeader({

package/build/overlayHeader/OverlayHeader.mjs

@@ -19,9 +19,9 @@ import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
 import Logo from '../logo/Logo.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 function OverlayHeader({

package/build/prompt/InfoPrompt/InfoPrompt.js

@@ -25,6 +25,7 @@ var clsx = require('clsx');
 require('react-intl');
 require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
 var Link = require('../../link/Link.js');
@@ -38,6 +39,7 @@ const InfoPrompt = ({
   title,
   description,
   className,
+  'aria-live': ariaLive = 'polite',
   'data-testid': dataTestId,
   ...restProps
 }) => {
@@ -76,35 +78,39 @@ const InfoPrompt = ({
       sentiment: statusIconSentiment
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
-    sentiment: sentiment$1,
-    media: renderMedia(),
-    "data-testid": dataTestId,
-    className: clsx.clsx('wds-info-prompt', className),
-    ...restProps,
-    onTouchStart: handleTouchStart,
-    onTouchEnd: handleTouchEnd,
-    onTouchMove: handleTouchMove,
-    onDismiss: onDismiss,
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wds-info-prompt__content",
-      children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-        className: "wds-info-prompt__title",
-        type: typography.Typography.BODY_LARGE_BOLD,
-        as: "span",
-        children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-        as: "span",
-        className: "wds-info-prompt__description",
-        children: description
-      }), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
-        href: action.href,
-        target: action.target,
-        type: typography.Typography.LINK_DEFAULT,
-        className: "wds-info-prompt__action",
-        onClick: action.onClick,
-        children: action.label
-      })]
+  // Render content directly in LiveRegion
+  return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
+    "aria-live": ariaLive,
+    children: /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
+      sentiment: sentiment$1,
+      media: renderMedia(),
+      "data-testid": dataTestId,
+      className: clsx.clsx('wds-info-prompt', className),
+      ...restProps,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      onTouchMove: handleTouchMove,
+      onDismiss: onDismiss,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "wds-info-prompt__content",
+        children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          className: "wds-info-prompt__title",
+          type: typography.Typography.BODY_LARGE_BOLD,
+          as: "span",
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          as: "span",
+          className: "wds-info-prompt__description",
+          children: description
+        }), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
+          href: action.href,
+          target: action.target,
+          type: typography.Typography.LINK_DEFAULT,
+          className: "wds-info-prompt__action",
+          onClick: action.onClick,
+          children: action.label
+        })]
+      })
     })
   });
 };

package/build/prompt/InfoPrompt/InfoPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n  /**\n   * The label text for the action link\n   */\n  label: string;\n};\n\nexport type InfoPromptMedia = {\n  /**\n   * The icon/image asset to display.\n   * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n   */\n  asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n  Pick<PrimitivePromptProps, 'data-testid'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: SurfaceSentiment;\n    /**\n     * Handler called when the close button is clicked.\n     * If not provided, the close button is hidden.\n     */\n    onDismiss?: () => void;\n    /**\n     * Custom media to override the default status icon.\n     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n     */\n    media?: InfoPromptMedia;\n    /**\n     * Action link to be displayed below the description\n     */\n    action?: InfoPromptAction;\n    /**\n     * Title content for the prompt\n     */\n    title?: string;\n    /**\n     * Description text for the prompt (required)\n     */\n    description: string;\n    className?: string;\n  };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n  sentiment = 'neutral',\n  onDismiss,\n  media,\n  action,\n  title,\n  description,\n  className,\n  'data-testid': dataTestId,\n  ...restProps\n}: InfoPromptProps) => {\n  const [shouldFire, setShouldFire] = useState<boolean>();\n  const statusIconSentiment =\n    sentiment === 'success'\n      ? Sentiment.POSITIVE\n      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n  const handleTouchStart = () => {\n    setShouldFire(true);\n  };\n\n  const handleTouchEnd = () => {\n    if (shouldFire && action?.href) {\n      if (action.target === '_blank') {\n        window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n      } else {\n        window.top?.location.assign(action.href);\n      }\n    }\n    setShouldFire(false);\n  };\n\n  const handleTouchMove = () => {\n    setShouldFire(false);\n  };\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return <GiftBox size={24} />;\n    }\n\n    return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n  };\n\n  return (\n    <PrimitivePrompt\n      sentiment={sentiment}\n      media={renderMedia()}\n      data-testid={dataTestId}\n      className={clsx('wds-info-prompt', className)}\n      {...restProps}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      onTouchMove={handleTouchMove}\n      onDismiss={onDismiss}\n    >\n      <div className=\"wds-info-prompt__content\">\n        {title && (\n          <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n            {title}\n          </Body>\n        )}\n        <Body as=\"span\" className=\"wds-info-prompt__description\">\n          {description}\n        </Body>\n        {action && (\n          <Link\n            href={action.href}\n            target={action.target}\n            type={Typography.LINK_DEFAULT}\n            className=\"wds-info-prompt__action\"\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Link>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}
+{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n  /**\n   * The label text for the action link\n   */\n  label: string;\n};\n\nexport type InfoPromptMedia = {\n  /**\n   * The icon/image asset to display.\n   * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n   */\n  asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n  Pick<PrimitivePromptProps, 'data-testid'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: SurfaceSentiment;\n    /**\n     * Handler called when the close button is clicked.\n     * If not provided, the close button is hidden.\n     */\n    onDismiss?: () => void;\n    /**\n     * Custom media to override the default status icon.\n     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n     */\n    media?: InfoPromptMedia;\n    /**\n     * Action link to be displayed below the description\n     */\n    action?: InfoPromptAction;\n    /**\n     * Title content for the prompt\n     */\n    title?: string;\n    /**\n     * Description text for the prompt (required)\n     */\n    description: string;\n    className?: string;\n    /**\n     * Sets the ARIA live region politeness level.\n     * - `'polite'` — announced after the current speech (default)\n     * - `'assertive'` — interrupts the current speech immediately\n     * - `'off'` — disables the live region entirely\n     * @default 'polite'\n     */\n    'aria-live'?: AriaLive;\n  };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n  sentiment = 'neutral',\n  onDismiss,\n  media,\n  action,\n  title,\n  description,\n  className,\n  'aria-live': ariaLive = 'polite',\n  'data-testid': dataTestId,\n  ...restProps\n}: InfoPromptProps) => {\n  const [shouldFire, setShouldFire] = useState<boolean>();\n  const statusIconSentiment =\n    sentiment === 'success'\n      ? Sentiment.POSITIVE\n      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n  const handleTouchStart = () => {\n    setShouldFire(true);\n  };\n\n  const handleTouchEnd = () => {\n    if (shouldFire && action?.href) {\n      if (action.target === '_blank') {\n        window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n      } else {\n        window.top?.location.assign(action.href);\n      }\n    }\n    setShouldFire(false);\n  };\n\n  const handleTouchMove = () => {\n    setShouldFire(false);\n  };\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return <GiftBox size={24} />;\n    }\n\n    return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n  };\n\n  // Render content directly in LiveRegion\n  return (\n    <LiveRegion aria-live={ariaLive}>\n      <PrimitivePrompt\n        sentiment={sentiment}\n        media={renderMedia()}\n        data-testid={dataTestId}\n        className={clsx('wds-info-prompt', className)}\n        {...restProps}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        onTouchMove={handleTouchMove}\n        onDismiss={onDismiss}\n      >\n        <div className=\"wds-info-prompt__content\">\n          {title && (\n            <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n              {title}\n            </Body>\n          )}\n          <Body as=\"span\" className=\"wds-info-prompt__description\">\n            {description}\n          </Body>\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              type={Typography.LINK_DEFAULT}\n              className=\"wds-info-prompt__action\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Link>\n          )}\n        </div>\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EO,MAAMA,UAAU,GAAGA,CAAC;AACzBC,aAAAA,WAAS,GAAG,SAAS;EACrBC,SAAS;EACTC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,WAAW;EACXC,SAAS;EACT,WAAW,EAAEC,QAAQ,GAAG,QAAQ;AAChC,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACI,KAAI;EACpB,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,EAAW;EACvD,MAAMC,mBAAmB,GACvBb,WAAS,KAAK,SAAS,GACnBc,mBAAS,CAACC,QAAQ,GACjBf,WAAsD;EAE7D,MAAMgB,gBAAgB,GAAGA,MAAK;IAC5BL,aAAa,CAAC,IAAI,CAAC;EACrB,CAAC;EAED,MAAMM,cAAc,GAAGA,MAAK;AAC1B,IAAA,IAAIP,UAAU,IAAIP,MAAM,EAAEe,IAAI,EAAE;AAC9B,MAAA,IAAIf,MAAM,CAACgB,MAAM,KAAK,QAAQ,EAAE;AAC9BC,QAAAA,MAAM,CAACC,GAAG,EAAEC,IAAI,CAACnB,MAAM,CAACe,IAAI,EAAE,QAAQ,EAAE,sBAAsB,CAAC;AACjE,MAAA,CAAC,MAAM;QACLE,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAACrB,MAAM,CAACe,IAAI,CAAC;AAC1C,MAAA;AACF,IAAA;IACAP,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,MAAMc,eAAe,GAAGA,MAAK;IAC3Bd,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,MAAMe,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIxB,KAAK,EAAE;AACT,MAAA,oBAAOyB,cAAA,CAAA,MAAA,EAAA;AAAMrB,QAAAA,SAAS,EAAC,wBAAwB;QAAAsB,QAAA,EAAE1B,KAAK,CAAC2B;AAAK,OAAO,CAAC;AACtE,IAAA;IAEA,IAAI7B,WAAS,KAAK,aAAa,EAAE;MAC/B,oBAAO2B,cAAA,CAACG,aAAO,EAAA;AAACC,QAAAA,IAAI,EAAE;AAAG,OAAA,CAAG;AAC9B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACD,MAAAA,IAAI,EAAE,EAAG;AAAC/B,MAAAA,SAAS,EAAEa;AAAoB,MAAG;EACjE,CAAC;AAED;EACA,oBACEc,cAAA,CAACM,qBAAU,EAAA;AAAC,IAAA,WAAA,EAAW1B,QAAS;IAAAqB,QAAA,eAC9BD,cAAA,CAACO,+BAAe,EAAA;AACdlC,MAAAA,SAAS,EAAEA,WAAU;MACrBE,KAAK,EAAEwB,WAAW,EAAG;AACrB,MAAA,aAAA,EAAalB,UAAW;AACxBF,MAAAA,SAAS,EAAE6B,SAAI,CAAC,iBAAiB,EAAE7B,SAAS,CAAE;AAAA,MAAA,GAC1CG,SAAS;AACb2B,MAAAA,YAAY,EAAEpB,gBAAiB;AAC/BqB,MAAAA,UAAU,EAAEpB,cAAe;AAC3BqB,MAAAA,WAAW,EAAEb,eAAgB;AAC7BxB,MAAAA,SAAS,EAAEA,SAAU;AAAA2B,MAAAA,QAAA,eAErBW,eAAA,CAAA,KAAA,EAAA;AAAKjC,QAAAA,SAAS,EAAC,0BAA0B;AAAAsB,QAAAA,QAAA,EAAA,CACtCxB,KAAK,iBACJuB,cAAA,CAACa,YAAI,EAAA;AAAClC,UAAAA,SAAS,EAAC,wBAAwB;UAACmC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAhB,UAAAA,QAAA,EACjFxB;AAAK,SACF,CACP,eACDuB,cAAA,CAACa,YAAI,EAAA;AAACI,UAAAA,EAAE,EAAC,MAAM;AAACtC,UAAAA,SAAS,EAAC,8BAA8B;AAAAsB,UAAAA,QAAA,EACrDvB;AAAW,SACR,CACN,EAACF,MAAM,iBACLwB,cAAA,CAACkB,YAAI,EAAA;UACH3B,IAAI,EAAEf,MAAM,CAACe,IAAK;UAClBC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;UACtBsB,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAC9BxC,UAAAA,SAAS,EAAC,yBAAyB;UACnCyC,OAAO,EAAE5C,MAAM,CAAC4C,OAAQ;UAAAnB,QAAA,EAEvBzB,MAAM,CAAC6C;AAAK,SACT,CACP;OACE;KACU;AACnB,GAAY,CAAC;AAEjB;;;;"}

package/build/prompt/InfoPrompt/InfoPrompt.mjs

@@ -23,6 +23,7 @@ import { clsx } from 'clsx';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
 import Link from '../../link/Link.mjs';
@@ -36,6 +37,7 @@ const InfoPrompt = ({
   title,
   description,
   className,
+  'aria-live': ariaLive = 'polite',
   'data-testid': dataTestId,
   ...restProps
 }) => {
@@ -74,35 +76,39 @@ const InfoPrompt = ({
       sentiment: statusIconSentiment
     });
   };
-  return /*#__PURE__*/jsx(PrimitivePrompt, {
-    sentiment: sentiment,
-    media: renderMedia(),
-    "data-testid": dataTestId,
-    className: clsx('wds-info-prompt', className),
-    ...restProps,
-    onTouchStart: handleTouchStart,
-    onTouchEnd: handleTouchEnd,
-    onTouchMove: handleTouchMove,
-    onDismiss: onDismiss,
-    children: /*#__PURE__*/jsxs("div", {
-      className: "wds-info-prompt__content",
-      children: [title && /*#__PURE__*/jsx(Body, {
-        className: "wds-info-prompt__title",
-        type: Typography.BODY_LARGE_BOLD,
-        as: "span",
-        children: title
-      }), /*#__PURE__*/jsx(Body, {
-        as: "span",
-        className: "wds-info-prompt__description",
-        children: description
-      }), action && /*#__PURE__*/jsx(Link, {
-        href: action.href,
-        target: action.target,
-        type: Typography.LINK_DEFAULT,
-        className: "wds-info-prompt__action",
-        onClick: action.onClick,
-        children: action.label
-      })]
+  // Render content directly in LiveRegion
+  return /*#__PURE__*/jsx(LiveRegion, {
+    "aria-live": ariaLive,
+    children: /*#__PURE__*/jsx(PrimitivePrompt, {
+      sentiment: sentiment,
+      media: renderMedia(),
+      "data-testid": dataTestId,
+      className: clsx('wds-info-prompt', className),
+      ...restProps,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      onTouchMove: handleTouchMove,
+      onDismiss: onDismiss,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "wds-info-prompt__content",
+        children: [title && /*#__PURE__*/jsx(Body, {
+          className: "wds-info-prompt__title",
+          type: Typography.BODY_LARGE_BOLD,
+          as: "span",
+          children: title
+        }), /*#__PURE__*/jsx(Body, {
+          as: "span",
+          className: "wds-info-prompt__description",
+          children: description
+        }), action && /*#__PURE__*/jsx(Link, {
+          href: action.href,
+          target: action.target,
+          type: Typography.LINK_DEFAULT,
+          className: "wds-info-prompt__action",
+          onClick: action.onClick,
+          children: action.label
+        })]
+      })
     })
   });
 };

package/build/prompt/InfoPrompt/InfoPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n  /**\n   * The label text for the action link\n   */\n  label: string;\n};\n\nexport type InfoPromptMedia = {\n  /**\n   * The icon/image asset to display.\n   * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n   */\n  asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n  Pick<PrimitivePromptProps, 'data-testid'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: SurfaceSentiment;\n    /**\n     * Handler called when the close button is clicked.\n     * If not provided, the close button is hidden.\n     */\n    onDismiss?: () => void;\n    /**\n     * Custom media to override the default status icon.\n     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n     */\n    media?: InfoPromptMedia;\n    /**\n     * Action link to be displayed below the description\n     */\n    action?: InfoPromptAction;\n    /**\n     * Title content for the prompt\n     */\n    title?: string;\n    /**\n     * Description text for the prompt (required)\n     */\n    description: string;\n    className?: string;\n  };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n  sentiment = 'neutral',\n  onDismiss,\n  media,\n  action,\n  title,\n  description,\n  className,\n  'data-testid': dataTestId,\n  ...restProps\n}: InfoPromptProps) => {\n  const [shouldFire, setShouldFire] = useState<boolean>();\n  const statusIconSentiment =\n    sentiment === 'success'\n      ? Sentiment.POSITIVE\n      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n  const handleTouchStart = () => {\n    setShouldFire(true);\n  };\n\n  const handleTouchEnd = () => {\n    if (shouldFire && action?.href) {\n      if (action.target === '_blank') {\n        window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n      } else {\n        window.top?.location.assign(action.href);\n      }\n    }\n    setShouldFire(false);\n  };\n\n  const handleTouchMove = () => {\n    setShouldFire(false);\n  };\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return <GiftBox size={24} />;\n    }\n\n    return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n  };\n\n  return (\n    <PrimitivePrompt\n      sentiment={sentiment}\n      media={renderMedia()}\n      data-testid={dataTestId}\n      className={clsx('wds-info-prompt', className)}\n      {...restProps}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      onTouchMove={handleTouchMove}\n      onDismiss={onDismiss}\n    >\n      <div className=\"wds-info-prompt__content\">\n        {title && (\n          <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n            {title}\n          </Body>\n        )}\n        <Body as=\"span\" className=\"wds-info-prompt__description\">\n          {description}\n        </Body>\n        {action && (\n          <Link\n            href={action.href}\n            target={action.target}\n            type={Typography.LINK_DEFAULT}\n            className=\"wds-info-prompt__action\"\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Link>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}
+{"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n  /**\n   * The label text for the action link\n   */\n  label: string;\n};\n\nexport type InfoPromptMedia = {\n  /**\n   * The icon/image asset to display.\n   * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n   */\n  asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n  Pick<PrimitivePromptProps, 'data-testid'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: SurfaceSentiment;\n    /**\n     * Handler called when the close button is clicked.\n     * If not provided, the close button is hidden.\n     */\n    onDismiss?: () => void;\n    /**\n     * Custom media to override the default status icon.\n     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n     */\n    media?: InfoPromptMedia;\n    /**\n     * Action link to be displayed below the description\n     */\n    action?: InfoPromptAction;\n    /**\n     * Title content for the prompt\n     */\n    title?: string;\n    /**\n     * Description text for the prompt (required)\n     */\n    description: string;\n    className?: string;\n    /**\n     * Sets the ARIA live region politeness level.\n     * - `'polite'` — announced after the current speech (default)\n     * - `'assertive'` — interrupts the current speech immediately\n     * - `'off'` — disables the live region entirely\n     * @default 'polite'\n     */\n    'aria-live'?: AriaLive;\n  };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n  sentiment = 'neutral',\n  onDismiss,\n  media,\n  action,\n  title,\n  description,\n  className,\n  'aria-live': ariaLive = 'polite',\n  'data-testid': dataTestId,\n  ...restProps\n}: InfoPromptProps) => {\n  const [shouldFire, setShouldFire] = useState<boolean>();\n  const statusIconSentiment =\n    sentiment === 'success'\n      ? Sentiment.POSITIVE\n      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n  const handleTouchStart = () => {\n    setShouldFire(true);\n  };\n\n  const handleTouchEnd = () => {\n    if (shouldFire && action?.href) {\n      if (action.target === '_blank') {\n        window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n      } else {\n        window.top?.location.assign(action.href);\n      }\n    }\n    setShouldFire(false);\n  };\n\n  const handleTouchMove = () => {\n    setShouldFire(false);\n  };\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return <GiftBox size={24} />;\n    }\n\n    return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n  };\n\n  // Render content directly in LiveRegion\n  return (\n    <LiveRegion aria-live={ariaLive}>\n      <PrimitivePrompt\n        sentiment={sentiment}\n        media={renderMedia()}\n        data-testid={dataTestId}\n        className={clsx('wds-info-prompt', className)}\n        {...restProps}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        onTouchMove={handleTouchMove}\n        onDismiss={onDismiss}\n      >\n        <div className=\"wds-info-prompt__content\">\n          {title && (\n            <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n              {title}\n            </Body>\n          )}\n          <Body as=\"span\" className=\"wds-info-prompt__description\">\n            {description}\n          </Body>\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              type={Typography.LINK_DEFAULT}\n              className=\"wds-info-prompt__action\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Link>\n          )}\n        </div>\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}

package/build/types/common/index.d.ts

@@ -26,4 +26,6 @@ export * from './initials';
 export * from './colors';
 export * from './constants';
 export { CloseButton } from './closeButton';
+export { LiveRegion } from './liveRegion';
+export type { AriaLive, LiveRegionProps } from './liveRegion';
 //# sourceMappingURL=index.d.ts.map

package/build/types/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACxE,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAE5B,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACxE,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAE5B,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/build/types/common/liveRegion/LiveRegion.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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 declare const LiveRegion: ({ "aria-live": ariaLive, children, ...props }: LiveRegionProps) => import("react").JSX.Element;
+//# sourceMappingURL=LiveRegion.d.ts.map

package/build/types/common/liveRegion/LiveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,WAAW,GAAG,aAAa,CACrC;IACC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,+CAA+C,eAAe,gCAgBxF,CAAC"}

package/build/types/common/liveRegion/index.d.ts

@@ -0,0 +1,3 @@
+export { LiveRegion } from './LiveRegion';
+export type { AriaLive, LiveRegionProps } from './LiveRegion';
+//# sourceMappingURL=index.d.ts.map

package/build/types/common/liveRegion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e4f5e73",
+  "version": "0.0.0-experimental-c718986",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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/listItem/ListItem.less

@@ -266,10 +266,8 @@
   }
 
   &-spotlight {
-    // .wds-list-item-gridWrapper {
     padding-left: var(--size-12);
     padding-right: var(--size-12);
-    // }
 
     &-active {
       background-color: var(--color-background-neutral);

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

@@ -428,9 +428,8 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
 
     return (
       <List>
-        <ListItem {...props} {...previewProps} title="Inactive Spotlgiht" spotlight="inactive" />
-        <ListItem {...props} {...previewProps} title="Active Spotlgiht" spotlight="active" />
-        <ListItem {...props} {...previewProps} title="No Spotlgiht" />
+        <ListItem {...props} {...previewProps} spotlight="inactive" />
+        <ListItem {...props} {...previewProps} spotlight="active" />
       </List>
     );
   },

package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx

@@ -297,3 +297,122 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * Test that the default LiveRegion renders with role="status" and aria-live="polite".
+ */
+export const LiveRegionPoliteDefault: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="status" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('status');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'polite'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('status');
+      await expect(within(liveRegion).getByText('Polite announcement')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Polite announcement',
+  },
+};
+
+/**
+ * Test that aria-live="assertive" renders with role="alert".
+ */
+export const LiveRegionAssertive: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="alert" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('alert');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'assertive'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('alert');
+      await expect(within(liveRegion).getByText('Payment failed')).toBeInTheDocument();
+    });
+  },
+  args: {
+    sentiment: 'negative',
+    description: 'Payment failed',
+    'aria-live': 'assertive',
+  },
+};
+
+/**
+ * Test that aria-live="off" renders without a live region wrapper.
+ */
+export const LiveRegionOff: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify no live region wrapper exists', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+        await expect(canvas.queryByRole('alert')).not.toBeInTheDocument();
+      });
+    });
+
+    await step('Verify prompt content still renders', async () => {
+      await expect(canvas.getByText('Static info')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Static info',
+    'aria-live': 'off',
+  },
+};
+
+/**
+ * Test that a dismissed prompt also removes the live region.
+ */
+export const LiveRegionDismiss: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region exists before dismiss', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByRole('status')).toBeInTheDocument();
+      });
+    });
+
+    await step('Dismiss the prompt', async () => {
+      const dismissButton = canvas.getByRole('button', { name: /close/i });
+      await userEvent.click(dismissButton);
+    });
+
+    await step('Verify live region is removed', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="Dismissable live region"
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode, useState } from 'react';
-import { Sentiment, Typography } from '../../common';
+import { LiveRegion, Sentiment, Typography } from '../../common';
+import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
 import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
 import StatusIcon from '../../statusIcon';
@@ -23,7 +24,7 @@ export type InfoPromptMedia = {
   asset: ReactNode;
 };
 
-export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &
   Pick<PrimitivePromptProps, 'data-testid'> & {
     /**
      * The sentiment determines the colour scheme
@@ -53,6 +54,14 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
      */
     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;
   };
 
 /**
@@ -72,6 +81,7 @@ export const InfoPrompt = ({
   title,
   description,
   className,
+  'aria-live': ariaLive = 'polite',
   'data-testid': dataTestId,
   ...restProps
 }: InfoPromptProps) => {
@@ -112,39 +122,42 @@ export const InfoPrompt = ({
     return <StatusIcon size={24} sentiment={statusIconSentiment} />;
   };
 
+  // Render content directly in LiveRegion
   return (
-    <PrimitivePrompt
-      sentiment={sentiment}
-      media={renderMedia()}
-      data-testid={dataTestId}
-      className={clsx('wds-info-prompt', className)}
-      {...restProps}
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
-      onDismiss={onDismiss}
-    >
-      <div className="wds-info-prompt__content">
-        {title && (
-          <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
-            {title}
+    <LiveRegion aria-live={ariaLive}>
+      <PrimitivePrompt
+        sentiment={sentiment}
+        media={renderMedia()}
+        data-testid={dataTestId}
+        className={clsx('wds-info-prompt', className)}
+        {...restProps}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchMove={handleTouchMove}
+        onDismiss={onDismiss}
+      >
+        <div className="wds-info-prompt__content">
+          {title && (
+            <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
+              {title}
+            </Body>
+          )}
+          <Body as="span" className="wds-info-prompt__description">
+            {description}
           </Body>
-        )}
-        <Body as="span" className="wds-info-prompt__description">
-          {description}
-        </Body>
-        {action && (
-          <Link
-            href={action.href}
-            target={action.target}
-            type={Typography.LINK_DEFAULT}
-            className="wds-info-prompt__action"
-            onClick={action.onClick}
-          >
-            {action.label}
-          </Link>
-        )}
-      </div>
-    </PrimitivePrompt>
+          {action && (
+            <Link
+              href={action.href}
+              target={action.target}
+              type={Typography.LINK_DEFAULT}
+              className="wds-info-prompt__action"
+              onClick={action.onClick}
+            >
+              {action.label}
+            </Link>
+          )}
+        </div>
+      </PrimitivePrompt>
+    </LiveRegion>
   );
 };

package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import List from '../../../list';
-import { ListItem, type ListItemProps } from '../../ListItem';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_PROMPTS as PROMPT,
-  SB_LIST_ITEM_TEXT as TEXT,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../subcomponents';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/NoMedia',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
-} satisfies Meta<ListItemProps>;
-
-type Story = StoryObj<ListItemProps>;
-
-const widths = [240, 241];
-
-const sharedProps: Partial<ListItemProps> = {
-  subtitle: TEXT.subtitle,
-  valueTitle: TEXT.valueTitle,
-  valueSubtitle: TEXT.valueSubtitle,
-  additionalInfo: INFO.nonInteractive,
-  control: CONTROLS.switch,
-  prompt: PROMPT.interactive,
-  media: MEDIA.avatarSingle,
-};
-
-export const NoMedia: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
-        gap: 16,
-      }}
-    >
-      {widths.map((w) => (
-        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
-          {w}px
-        </div>
-      ))}
-      {widths.map((w) => (
-        <div key={w} style={{ width: w }}>
-          <List>
-            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
-            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
-            <ListItem {...sharedProps} title="No Spotlight" />
-          </List>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import List from '../../../list';
-import { ListItem, type ListItemProps } from '../../ListItem';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-  SB_LIST_ITEM_PROMPTS as PROMPT,
-  SB_LIST_ITEM_TEXT as TEXT,
-} from '../subcomponents';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/SideMedia',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
-} satisfies Meta<ListItemProps>;
-
-type Story = StoryObj<ListItemProps>;
-
-const widths = [332, 333];
-
-const sharedProps: Partial<ListItemProps> = {
-  subtitle: TEXT.subtitle,
-  valueTitle: TEXT.valueTitle,
-  valueSubtitle: TEXT.valueSubtitle,
-  additionalInfo: INFO.nonInteractive,
-  control: CONTROLS.switch,
-  prompt: PROMPT.interactive,
-  media: MEDIA.avatarSingle,
-};
-
-export const SideMedia: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
-        gap: 16,
-      }}
-    >
-      {widths.map((w) => (
-        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
-          {w}px
-        </div>
-      ))}
-      {widths.map((w) => (
-        <div key={w} style={{ width: w }}>
-          <List>
-            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
-            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
-            <ListItem {...sharedProps} title="No Spotlight" />
-          </List>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import List from '../../../list';
-import { ListItem, type ListItemProps } from '../../ListItem';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-  SB_LIST_ITEM_PROMPTS as PROMPT,
-  SB_LIST_ITEM_TEXT as TEXT,
-} from '../subcomponents';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
-} satisfies Meta<ListItemProps>;
-
-type Story = StoryObj<ListItemProps>;
-
-const widths = [308, 309];
-
-const sharedProps: Partial<ListItemProps> = {
-  subtitle: TEXT.subtitle,
-  valueTitle: TEXT.valueTitle,
-  valueSubtitle: TEXT.valueSubtitle,
-  additionalInfo: INFO.nonInteractive,
-  control: CONTROLS.switch,
-  prompt: PROMPT.interactive,
-  media: MEDIA.avatarSingle,
-};
-
-export const StackedMedia: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
-        gap: 16,
-      }}
-    >
-      {widths.map((w) => (
-        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
-          {w}px
-        </div>
-      ))}
-      {widths.map((w) => (
-        <div key={w} style={{ width: w }}>
-          <List>
-            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
-            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
-            <ListItem {...sharedProps} title="No Spotlight" />
-          </List>
-        </div>
-      ))}
-    </div>
-  ),
-};