@transferwise/components 0.0.0-experimental-537d2bc → 0.0.0-experimental-e093446

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/index.js

@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
 var Button_resolver = require('./button/Button.resolver.js');
 var IconButton = require('./iconButton/IconButton.js');
 var Carousel = require('./carousel/Carousel.js');
-var Card$1 = require('./card/Card.js');
+var Card = require('./card/Card.js');
 var Checkbox = require('./checkbox/Checkbox.js');
 var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
 var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
 var CircularButton = require('./circularButton/CircularButton.js');
 var Option = require('./common/Option/Option.js');
 var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
-var Card = require('./common/card/Card.js');
+var Card$1 = require('./common/card/Card.js');
 var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
 var DateInput = require('./dateInput/DateInput.js');
 var DateLookup = require('./dateLookup/DateLookup.js');
@@ -173,7 +173,7 @@ exports.Body = Body.default;
 exports.Button = Button_resolver.default;
 exports.IconButton = IconButton.default;
 exports.Carousel = Carousel.default;
-exports.Card = Card$1.default;
+exports.Card = Card.default;
 exports.Checkbox = Checkbox.default;
 exports.CheckboxButton = CheckboxButton.default;
 exports.CheckboxOption = CheckboxOption.default;
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
 exports.CircularButton = CircularButton.default;
 exports.Option = Option.default;
 exports.BottomSheet = BottomSheet.default;
-exports.BaseCard = Card.default;
+exports.BaseCard = Card$1.default;
 exports.CriticalCommsBanner = CriticalCommsBanner.default;
 exports.DateInput = DateInput.default;
 exports.DateLookup = DateLookup.default;

package/build/inputs/SelectInput.mjs

@@ -2,7 +2,7 @@ import { Listbox, ListboxOptions, ListboxButton, ListboxOption } from '@headless
 import { CrossCircle, ChevronDown, Cross, Check } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
-import { useState, useRef, useEffect, useDeferredValue, useContext, useMemo, useId, createContext, forwardRef } from 'react';
+import { useState, useRef, useEffect, useDeferredValue, createContext, useContext, useMemo, useId, forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Virtualizer } from 'virtua';
 import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';

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/popover/Popover.mjs

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
+import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';

package/build/promoCard/PromoCardContext.mjs

@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const defaultPromoCardContext = {
   state: '',

package/build/prompt/ActionPrompt/ActionPrompt.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var clsx = require('clsx');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
@@ -142,4 +144,5 @@ const ActionPrompt = ({
 };
 
 exports.ActionPrompt = ActionPrompt;
+exports.default = ActionPrompt;
 //# sourceMappingURL=ActionPrompt.js.map

package/build/prompt/ActionPrompt/ActionPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n    'aria-hidden'?: boolean;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          id={mediaId}\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView\n          {...media.avatar}\n          badge={badge}\n          aria-label={media['aria-label']}\n          aria-hidden={media['aria-hidden']}\n          id={mediaId}\n          size={48}\n        >\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView\n        id={mediaId}\n        size={48}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n      >\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon\n        id={mediaId}\n        size={48}\n        sentiment={sentiment}\n        iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n      />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  media?: {\n    imgSrc?: string;\n    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n      asset?: AvatarViewProps['children'];\n      badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n    };\n    'aria-label'?: string;\n    'aria-hidden'?: boolean;\n  };\n  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () => {\n    if (media?.imgSrc) {\n      return (\n        <Image\n          id={mediaId}\n          src={media.imgSrc}\n          className=\"wds-action-prompt--media-image\"\n          alt={media['aria-label'] ?? ''}\n        />\n      );\n    }\n    if (media?.avatar) {\n      const badge = media.avatar.badge\n        ? media.avatar.badge\n        : sentiment === 'proposition'\n          ? {}\n          : { status: sentiment };\n      return (\n        <AvatarView\n          {...media.avatar}\n          badge={badge}\n          aria-label={media['aria-label']}\n          aria-hidden={media['aria-hidden']}\n          id={mediaId}\n          size={48}\n        >\n          {media.avatar.asset}\n        </AvatarView>\n      );\n    }\n    return sentiment === 'proposition' ? (\n      <AvatarView\n        id={mediaId}\n        size={48}\n        aria-label={media['aria-label']}\n        aria-hidden={media['aria-hidden']}\n      >\n        <GiftBox />\n      </AvatarView>\n    ) : (\n      <StatusIcon\n        id={mediaId}\n        size={48}\n        sentiment={sentiment}\n        iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n      />\n    );\n  };\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/prompt/ActionPrompt/ActionPrompt.mjs

@@ -139,5 +139,5 @@ const ActionPrompt = ({
   });
 };
 
-export { ActionPrompt };
+export { ActionPrompt, ActionPrompt as default };
 //# sourceMappingURL=ActionPrompt.mjs.map

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-537d2bc",
+  "version": "0.0.0-experimental-e093446",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,22 +38,22 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.12.2",
+    "@formatjs/cli": "^6.8.4",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.0-alpha.4",
-    "@storybook/addon-docs": "^10.3.0-alpha.4",
+    "@storybook/addon-a11y": "^10.3.0-alpha.0",
+    "@storybook/addon-docs": "^10.3.0-alpha.0",
     "@storybook/addon-mcp": "^0.2.2",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/react-webpack5": "^10.3.0-alpha.4",
+    "@storybook/react-webpack5": "10.3.0-alpha.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -63,37 +63,37 @@
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "4.17.23",
+    "@types/lodash": "4.17.21",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.28",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.26.0",
     "@wise/eslint-config": "^13.3.0",
-    "babel-plugin-formatjs": "^10.5.41",
+    "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^10.3.0-alpha.4",
+    "eslint-plugin-storybook": "^10.3.0-alpha.0",
     "gulp": "^5.0.1",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
-    "react-intl": "^7.1.14",
-    "rollup": "^4.57.1",
+    "react-intl": "^7.1.11",
+    "rollup": "^4.54.0",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.0-alpha.4",
-    "storybook-addon-tag-badges": "^3.0.6",
+    "storybook": "^10.3.0-alpha.0",
+    "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-537d2bc",
+    "@transferwise/neptune-css": "14.26.2",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "0.0.0-experimental-537d2bc",
+    "@transferwise/neptune-css": "^14.26",
     "@wise/art": "^2.26",
     "@wise/components-theming": "^1.9.1",
     "framer-motion": "^12.23.26",
@@ -102,24 +102,24 @@
     "react-intl": "^5.10.0 || ^6 || ^7"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
-    "@floating-ui/react": "^0.27.17",
+    "@babel/runtime": "^7.28.4",
+    "@floating-ui/react": "^0.26.28",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/overlays": "^3.31.1",
-    "@transferwise/formatting": "^2.13.5",
-    "@transferwise/neptune-validation": "^3.3.3",
+    "@react-aria/focus": "^3.21.3",
+    "@react-aria/overlays": "^3.31.0",
+    "@transferwise/formatting": "^2.13.4",
+    "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.48.0",
-    "framer-motion": "^12.33.0",
+    "core-js": "^3.47.0",
+    "framer-motion": "^12.23.26",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.5"
+    "virtua": "^0.48.3"
   },
   "publishConfig": {
     "access": "public",

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/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>
   );
 };