@transferwise/components 0.0.0-experimental-540916f → 0.0.0-experimental-57bd91d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/build/alert/Alert.js +1 -1
  2. package/build/alert/Alert.mjs +1 -1
  3. package/build/flowNavigation/FlowNavigation.js +1 -1
  4. package/build/flowNavigation/FlowNavigation.mjs +1 -1
  5. package/build/index.js +4 -4
  6. package/build/inputs/SelectInput.mjs +1 -1
  7. package/build/overlayHeader/OverlayHeader.js +1 -1
  8. package/build/overlayHeader/OverlayHeader.mjs +1 -1
  9. package/build/popover/Popover.mjs +1 -1
  10. package/build/promoCard/PromoCardContext.mjs +1 -1
  11. package/build/prompt/ActionPrompt/ActionPrompt.js +0 -3
  12. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  13. package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -1
  14. package/build/prompt/InfoPrompt/InfoPrompt.js +1 -7
  15. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  16. package/build/prompt/InfoPrompt/InfoPrompt.mjs +1 -7
  17. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  18. package/build/types/common/index.d.ts +0 -2
  19. package/build/types/common/index.d.ts.map +1 -1
  20. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +2 -11
  21. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  22. package/package.json +25 -25
  23. package/src/common/index.ts +0 -2
  24. package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +0 -119
  25. package/src/prompt/InfoPrompt/InfoPrompt.tsx +3 -15
  26. package/build/common/liveRegion/LiveRegion.js +0 -39
  27. package/build/common/liveRegion/LiveRegion.js.map +0 -1
  28. package/build/common/liveRegion/LiveRegion.mjs +0 -37
  29. package/build/common/liveRegion/LiveRegion.mjs.map +0 -1
  30. package/build/types/common/liveRegion/LiveRegion.d.ts +0 -23
  31. package/build/types/common/liveRegion/LiveRegion.d.ts.map +0 -1
  32. package/build/types/common/liveRegion/index.d.ts +0 -3
  33. package/build/types/common/liveRegion/index.d.ts.map +0 -1
  34. package/src/common/liveRegion/LiveRegion.test.tsx +0 -56
  35. package/src/common/liveRegion/LiveRegion.tsx +0 -42
  36. package/src/common/liveRegion/index.ts +0 -2
@@ -26,13 +26,13 @@ require('../common/propsValues/markdownNodeType.js');
26
26
  require('../common/fileType.js');
27
27
  var constants = require('../common/constants.js');
28
28
  var CloseButton = require('../common/closeButton/CloseButton.js');
29
- var jsxRuntime = require('react/jsx-runtime');
30
29
  var StatusIcon = require('../statusIcon/StatusIcon.js');
31
30
  var Title = require('../title/Title.js');
32
31
  var logActionRequired = require('../utilities/logActionRequired.js');
33
32
  var InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
34
33
  var Button_resolver = require('../button/Button.resolver.js');
35
34
  var Link = require('../link/Link.js');
35
+ var jsxRuntime = require('react/jsx-runtime');
36
36
 
37
37
  exports.AlertArrowPosition = void 0;
38
38
  (function (AlertArrowPosition) {
@@ -22,13 +22,13 @@ import '../common/propsValues/markdownNodeType.mjs';
22
22
  import '../common/fileType.mjs';
23
23
  import { WDS_LIVE_REGION_DELAY_MS } from '../common/constants.mjs';
24
24
  import { CloseButton } from '../common/closeButton/CloseButton.mjs';
25
- import { jsx, jsxs } from 'react/jsx-runtime';
26
25
  import StatusIcon from '../statusIcon/StatusIcon.mjs';
27
26
  import Title from '../title/Title.mjs';
28
27
  import { logActionRequired } from '../utilities/logActionRequired.mjs';
29
28
  import InlineMarkdown from './inlineMarkdown/InlineMarkdown.mjs';
30
29
  import Button from '../button/Button.resolver.mjs';
31
30
  import Link from '../link/Link.mjs';
31
+ import { jsx, jsxs } from 'react/jsx-runtime';
32
32
 
33
33
  var AlertArrowPosition;
34
34
  (function (AlertArrowPosition) {
@@ -24,7 +24,6 @@ require('../common/propsValues/scroll.js');
24
24
  require('../common/propsValues/markdownNodeType.js');
25
25
  require('../common/fileType.js');
26
26
  var CloseButton = require('../common/closeButton/CloseButton.js');
27
- var jsxRuntime = require('react/jsx-runtime');
28
27
  var FlowHeader = require('../common/flowHeader/FlowHeader.js');
29
28
  var Logo = require('../logo/Logo.js');
30
29
  var Stepper = require('../stepper/Stepper.js');
@@ -33,6 +32,7 @@ var FlowNavigation_messages = require('./FlowNavigation.messages.js');
33
32
  var AnimatedLabel = require('./animatedLabel/AnimatedLabel.js');
34
33
  var IconButton = require('../iconButton/IconButton.js');
35
34
  var icons = require('@transferwise/icons');
35
+ var jsxRuntime = require('react/jsx-runtime');
36
36
 
37
37
  const FlowNavigation = ({
38
38
  activeStep = 0,
@@ -20,7 +20,6 @@ import '../common/propsValues/scroll.mjs';
20
20
  import '../common/propsValues/markdownNodeType.mjs';
21
21
  import '../common/fileType.mjs';
22
22
  import { CloseButton } from '../common/closeButton/CloseButton.mjs';
23
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
24
23
  import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
25
24
  import Logo from '../logo/Logo.mjs';
26
25
  import Stepper from '../stepper/Stepper.mjs';
@@ -29,6 +28,7 @@ import messages from './FlowNavigation.messages.mjs';
29
28
  import AnimatedLabel from './animatedLabel/AnimatedLabel.mjs';
30
29
  import IconButton from '../iconButton/IconButton.mjs';
31
30
  import { ArrowLeft } from '@transferwise/icons';
31
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
32
32
 
33
33
  const FlowNavigation = ({
34
34
  activeStep = 0,
package/build/index.js CHANGED
@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
23
23
  var Button_resolver = require('./button/Button.resolver.js');
24
24
  var IconButton = require('./iconButton/IconButton.js');
25
25
  var Carousel = require('./carousel/Carousel.js');
26
- var Card = require('./card/Card.js');
26
+ var Card$1 = require('./card/Card.js');
27
27
  var Checkbox = require('./checkbox/Checkbox.js');
28
28
  var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
29
29
  var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
33
33
  var CircularButton = require('./circularButton/CircularButton.js');
34
34
  var Option = require('./common/Option/Option.js');
35
35
  var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
36
- var Card$1 = require('./common/card/Card.js');
36
+ var Card = require('./common/card/Card.js');
37
37
  var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
38
38
  var DateInput = require('./dateInput/DateInput.js');
39
39
  var DateLookup = require('./dateLookup/DateLookup.js');
@@ -173,7 +173,7 @@ exports.Body = Body.default;
173
173
  exports.Button = Button_resolver.default;
174
174
  exports.IconButton = IconButton.default;
175
175
  exports.Carousel = Carousel.default;
176
- exports.Card = Card.default;
176
+ exports.Card = Card$1.default;
177
177
  exports.Checkbox = Checkbox.default;
178
178
  exports.CheckboxButton = CheckboxButton.default;
179
179
  exports.CheckboxOption = CheckboxOption.default;
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
183
183
  exports.CircularButton = CircularButton.default;
184
184
  exports.Option = Option.default;
185
185
  exports.BottomSheet = BottomSheet.default;
186
- exports.BaseCard = Card$1.default;
186
+ exports.BaseCard = Card.default;
187
187
  exports.CriticalCommsBanner = CriticalCommsBanner.default;
188
188
  exports.DateInput = DateInput.default;
189
189
  exports.DateLookup = DateLookup.default;
@@ -2,7 +2,7 @@ import { Listbox, ListboxOptions, ListboxButton, ListboxOption } from '@headless
2
2
  import { CrossCircle, ChevronDown, Cross, Check } from '@transferwise/icons';
3
3
  import { clsx } from 'clsx';
4
4
  import mergeProps from 'merge-props';
5
- import { useState, useRef, useEffect, useDeferredValue, createContext, useContext, useMemo, useId, forwardRef } from 'react';
5
+ import { useState, useRef, useEffect, useDeferredValue, useContext, useMemo, useId, createContext, forwardRef } from 'react';
6
6
  import { useIntl } from 'react-intl';
7
7
  import { Virtualizer } from 'virtua';
8
8
  import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
@@ -23,9 +23,9 @@ require('../common/propsValues/scroll.js');
23
23
  require('../common/propsValues/markdownNodeType.js');
24
24
  require('../common/fileType.js');
25
25
  var CloseButton = require('../common/closeButton/CloseButton.js');
26
- var jsxRuntime = require('react/jsx-runtime');
27
26
  var FlowHeader = require('../common/flowHeader/FlowHeader.js');
28
27
  var Logo = require('../logo/Logo.js');
28
+ var jsxRuntime = require('react/jsx-runtime');
29
29
 
30
30
  const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
31
31
  function OverlayHeader({
@@ -19,9 +19,9 @@ import '../common/propsValues/scroll.mjs';
19
19
  import '../common/propsValues/markdownNodeType.mjs';
20
20
  import '../common/fileType.mjs';
21
21
  import { CloseButton } from '../common/closeButton/CloseButton.mjs';
22
- import { jsx, jsxs } from 'react/jsx-runtime';
23
22
  import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
24
23
  import Logo from '../logo/Logo.mjs';
24
+ import { jsx, jsxs } from 'react/jsx-runtime';
25
25
 
26
26
  const defaultLogo = /*#__PURE__*/jsx(Logo, {});
27
27
  function OverlayHeader({
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
2
+ import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
3
3
  import '../common/theme.mjs';
4
4
  import '../common/direction.mjs';
5
5
  import '../common/propsValues/control.mjs';
@@ -1,4 +1,4 @@
1
- import { createContext, useContext } from 'react';
1
+ import { useContext, createContext } from 'react';
2
2
 
3
3
  const defaultPromoCardContext = {
4
4
  state: '',
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var clsx = require('clsx');
7
5
  var StatusIcon = require('../../statusIcon/StatusIcon.js');
@@ -144,5 +142,4 @@ const ActionPrompt = ({
144
142
  };
145
143
 
146
144
  exports.ActionPrompt = ActionPrompt;
147
- exports.default = ActionPrompt;
148
145
  //# sourceMappingURL=ActionPrompt.js.map
@@ -1 +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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"}
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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"}
@@ -139,5 +139,5 @@ const ActionPrompt = ({
139
139
  });
140
140
  };
141
141
 
142
- export { ActionPrompt, ActionPrompt as default };
142
+ export { ActionPrompt };
143
143
  //# sourceMappingURL=ActionPrompt.mjs.map
@@ -25,7 +25,6 @@ var clsx = require('clsx');
25
25
  require('react-intl');
26
26
  require('../../common/closeButton/CloseButton.messages.js');
27
27
  var jsxRuntime = require('react/jsx-runtime');
28
- var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
29
28
  var StatusIcon = require('../../statusIcon/StatusIcon.js');
30
29
  var Body = require('../../body/Body.js');
31
30
  var Link = require('../../link/Link.js');
@@ -39,7 +38,6 @@ const InfoPrompt = ({
39
38
  title,
40
39
  description,
41
40
  className,
42
- 'aria-live': ariaLive = 'polite',
43
41
  'data-testid': dataTestId,
44
42
  ...restProps
45
43
  }) => {
@@ -78,7 +76,7 @@ const InfoPrompt = ({
78
76
  sentiment: statusIconSentiment
79
77
  });
80
78
  };
81
- const content = /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
79
+ return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
82
80
  sentiment: sentiment$1,
83
81
  media: renderMedia(),
84
82
  "data-testid": dataTestId,
@@ -109,10 +107,6 @@ const InfoPrompt = ({
109
107
  })]
110
108
  })
111
109
  });
112
- return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
113
- "aria-live": ariaLive,
114
- children: content
115
- });
116
110
  };
117
111
 
118
112
  exports.InfoPrompt = InfoPrompt;
@@ -1 +1 @@
1
- {"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 const content = (\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 return <LiveRegion aria-live={ariaLive}>{content}</LiveRegion>;\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","content","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label","LiveRegion"],"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,EAAA,MAAMoB,OAAO,gBACXN,cAAA,CAACO,+BAAe,EAAA;AACdlC,IAAAA,SAAS,EAAEA,WAAU;IACrBE,KAAK,EAAEwB,WAAW,EAAG;AACrB,IAAA,aAAA,EAAalB,UAAW;AACxBF,IAAAA,SAAS,EAAE6B,SAAI,CAAC,iBAAiB,EAAE7B,SAAS,CAAE;AAAA,IAAA,GAC1CG,SAAS;AACb2B,IAAAA,YAAY,EAAEpB,gBAAiB;AAC/BqB,IAAAA,UAAU,EAAEpB,cAAe;AAC3BqB,IAAAA,WAAW,EAAEb,eAAgB;AAC7BxB,IAAAA,SAAS,EAAEA,SAAU;AAAA2B,IAAAA,QAAA,eAErBW,eAAA,CAAA,KAAA,EAAA;AAAKjC,MAAAA,SAAS,EAAC,0BAA0B;AAAAsB,MAAAA,QAAA,EAAA,CACtCxB,KAAK,iBACJuB,cAAA,CAACa,YAAI,EAAA;AAAClC,QAAAA,SAAS,EAAC,wBAAwB;QAACmC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACC,QAAAA,EAAE,EAAC,MAAM;AAAAhB,QAAAA,QAAA,EACjFxB;AAAK,OACF,CACP,eACDuB,cAAA,CAACa,YAAI,EAAA;AAACI,QAAAA,EAAE,EAAC,MAAM;AAACtC,QAAAA,SAAS,EAAC,8BAA8B;AAAAsB,QAAAA,QAAA,EACrDvB;AAAW,OACR,CACN,EAACF,MAAM,iBACLwB,cAAA,CAACkB,YAAI,EAAA;QACH3B,IAAI,EAAEf,MAAM,CAACe,IAAK;QAClBC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;QACtBsB,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAC9BxC,QAAAA,SAAS,EAAC,yBAAyB;QACnCyC,OAAO,EAAE5C,MAAM,CAAC4C,OAAQ;QAAAnB,QAAA,EAEvBzB,MAAM,CAAC6C;AAAK,OACT,CACP;KACE;AACP,GAAiB,CAClB;EAED,oBAAOrB,cAAA,CAACsB,qBAAU,EAAA;AAAC,IAAA,WAAA,EAAW1C,QAAS;AAAAqB,IAAAA,QAAA,EAAEK;AAAO,GAAa,CAAC;AAChE;;;;"}
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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"}
@@ -23,7 +23,6 @@ import { clsx } from 'clsx';
23
23
  import 'react-intl';
24
24
  import '../../common/closeButton/CloseButton.messages.mjs';
25
25
  import { jsx, jsxs } from 'react/jsx-runtime';
26
- import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
27
26
  import StatusIcon from '../../statusIcon/StatusIcon.mjs';
28
27
  import Body from '../../body/Body.mjs';
29
28
  import Link from '../../link/Link.mjs';
@@ -37,7 +36,6 @@ const InfoPrompt = ({
37
36
  title,
38
37
  description,
39
38
  className,
40
- 'aria-live': ariaLive = 'polite',
41
39
  'data-testid': dataTestId,
42
40
  ...restProps
43
41
  }) => {
@@ -76,7 +74,7 @@ const InfoPrompt = ({
76
74
  sentiment: statusIconSentiment
77
75
  });
78
76
  };
79
- const content = /*#__PURE__*/jsx(PrimitivePrompt, {
77
+ return /*#__PURE__*/jsx(PrimitivePrompt, {
80
78
  sentiment: sentiment,
81
79
  media: renderMedia(),
82
80
  "data-testid": dataTestId,
@@ -107,10 +105,6 @@ const InfoPrompt = ({
107
105
  })]
108
106
  })
109
107
  });
110
- return /*#__PURE__*/jsx(LiveRegion, {
111
- "aria-live": ariaLive,
112
- children: content
113
- });
114
108
  };
115
109
 
116
110
  export { InfoPrompt };
@@ -1 +1 @@
1
- {"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 const content = (\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 return <LiveRegion aria-live={ariaLive}>{content}</LiveRegion>;\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","content","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label","LiveRegion"],"mappings":"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"}
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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"}
@@ -26,6 +26,4 @@ export * from './initials';
26
26
  export * from './colors';
27
27
  export * from './constants';
28
28
  export { CloseButton } from './closeButton';
29
- export { LiveRegion } from './liveRegion';
30
- export type { AriaLive, LiveRegionProps } from './liveRegion';
31
29
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
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"}
@@ -1,5 +1,4 @@
1
1
  import { HTMLAttributes, ReactNode } from 'react';
2
- import type { AriaLive } from '../../common';
3
2
  import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
4
3
  import { LinkProps } from '../../link';
5
4
  import { PrimitivePromptProps } from '../PrimitivePrompt';
@@ -16,7 +15,7 @@ export type InfoPromptMedia = {
16
15
  */
17
16
  asset: ReactNode;
18
17
  };
19
- export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> & Pick<PrimitivePromptProps, 'data-testid'> & {
18
+ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pick<PrimitivePromptProps, 'data-testid'> & {
20
19
  /**
21
20
  * The sentiment determines the colour scheme
22
21
  * @default 'neutral'
@@ -45,14 +44,6 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
45
44
  */
46
45
  description: string;
47
46
  className?: string;
48
- /**
49
- * Sets the ARIA live region politeness level.
50
- * - `'polite'` — announced after the current speech (default)
51
- * - `'assertive'` — interrupts the current speech immediately
52
- * - `'off'` — disables the live region entirely
53
- * @default 'polite'
54
- */
55
- 'aria-live'?: AriaLive;
56
47
  };
57
48
  /**
58
49
  * InfoPrompt displays important contextual messages to users within a screen.
@@ -63,5 +54,5 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
63
54
  *
64
55
  * Guidance can be found in the [design system](https://wise.design/components/info-prompt).
65
56
  */
66
- export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "aria-live": ariaLive, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
57
+ export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
67
58
  //# sourceMappingURL=InfoPrompt.d.ts.map
@@ -1 +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;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,gCA2EjB,CAAC"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-540916f",
3
+ "version": "0.0.0-experimental-57bd91d",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -38,22 +38,22 @@
38
38
  "!**/*.tsbuildinfo"
39
39
  ],
40
40
  "devDependencies": {
41
- "@babel/core": "^7.28.5",
42
- "@babel/plugin-transform-runtime": "^7.28.5",
43
- "@babel/preset-env": "^7.28.5",
41
+ "@babel/core": "^7.29.0",
42
+ "@babel/plugin-transform-runtime": "^7.29.0",
43
+ "@babel/preset-env": "^7.29.0",
44
44
  "@babel/preset-react": "^7.28.5",
45
45
  "@babel/preset-typescript": "^7.28.5",
46
- "@formatjs/cli": "^6.8.4",
46
+ "@formatjs/cli": "^6.12.2",
47
47
  "@rollup/plugin-babel": "^6.1.0",
48
48
  "@rollup/plugin-json": "^6.1.0",
49
49
  "@rollup/plugin-node-resolve": "^16.0.3",
50
50
  "@rollup/plugin-typescript": "^12.3.0",
51
51
  "@rollup/plugin-url": "^8.0.2",
52
- "@storybook/addon-a11y": "^10.3.0-alpha.0",
53
- "@storybook/addon-docs": "^10.3.0-alpha.0",
52
+ "@storybook/addon-a11y": "^10.3.0-alpha.4",
53
+ "@storybook/addon-docs": "^10.3.0-alpha.4",
54
54
  "@storybook/addon-mcp": "^0.2.2",
55
55
  "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
56
- "@storybook/react-webpack5": "10.3.0-alpha.0",
56
+ "@storybook/react-webpack5": "^10.3.0-alpha.4",
57
57
  "@testing-library/dom": "^10.4.1",
58
58
  "@testing-library/jest-dom": "^6.9.1",
59
59
  "@testing-library/react": "^16.3.2",
@@ -63,28 +63,28 @@
63
63
  "@types/babel__core": "^7.20.5",
64
64
  "@types/commonmark": "^0.27.10",
65
65
  "@types/jest": "^30.0.0",
66
- "@types/lodash": "4.17.21",
66
+ "@types/lodash": "4.17.23",
67
67
  "@types/lodash.clamp": "^4.0.9",
68
68
  "@types/lodash.debounce": "^4.0.9",
69
- "@types/react": "^18.3.23",
69
+ "@types/react": "^18.3.28",
70
70
  "@types/react-dom": "^18.3.7",
71
71
  "@types/react-transition-group": "4.4.12",
72
72
  "@wise/art": "^2.26.0",
73
73
  "@wise/eslint-config": "^13.3.0",
74
- "babel-plugin-formatjs": "^10.5.39",
74
+ "babel-plugin-formatjs": "^10.5.41",
75
75
  "eslint": "^9.39.2",
76
- "eslint-plugin-storybook": "^10.3.0-alpha.0",
76
+ "eslint-plugin-storybook": "^10.3.0-alpha.4",
77
77
  "gulp": "^5.0.1",
78
78
  "jest": "^30.2.0",
79
79
  "jest-environment-jsdom": "^29.7.0",
80
80
  "jest-fetch-mock": "^3.0.3",
81
81
  "jsdom-testing-mocks": "^1.16.0",
82
82
  "lodash.times": "^4.3.2",
83
- "react-intl": "^7.1.11",
84
- "rollup": "^4.54.0",
83
+ "react-intl": "^7.1.14",
84
+ "rollup": "^4.57.1",
85
85
  "rollup-preserve-directives": "^1.1.3",
86
- "storybook": "^10.3.0-alpha.0",
87
- "storybook-addon-tag-badges": "^3.0.4",
86
+ "storybook": "^10.3.0-alpha.4",
87
+ "storybook-addon-tag-badges": "^3.0.6",
88
88
  "storybook-addon-test-codegen": "^3.0.1",
89
89
  "@transferwise/less-config": "3.1.2",
90
90
  "@transferwise/neptune-css": "14.26.2",
@@ -102,24 +102,24 @@
102
102
  "react-intl": "^5.10.0 || ^6 || ^7"
103
103
  },
104
104
  "dependencies": {
105
- "@babel/runtime": "^7.28.4",
106
- "@floating-ui/react": "^0.26.28",
105
+ "@babel/runtime": "^7.28.6",
106
+ "@floating-ui/react": "^0.27.17",
107
107
  "@headlessui/react": "^2.2.9",
108
108
  "@popperjs/core": "^2.11.8",
109
- "@react-aria/focus": "^3.21.3",
110
- "@react-aria/overlays": "^3.31.0",
111
- "@transferwise/formatting": "^2.13.4",
112
- "@transferwise/neptune-validation": "^3.3.1",
109
+ "@react-aria/focus": "^3.21.4",
110
+ "@react-aria/overlays": "^3.31.1",
111
+ "@transferwise/formatting": "^2.13.5",
112
+ "@transferwise/neptune-validation": "^3.3.3",
113
113
  "clsx": "^2.1.1",
114
114
  "commonmark": "^0.31.2",
115
- "core-js": "^3.47.0",
116
- "framer-motion": "^12.23.26",
115
+ "core-js": "^3.48.0",
116
+ "framer-motion": "^12.33.0",
117
117
  "lodash.clamp": "^4.0.3",
118
118
  "lodash.debounce": "^4.0.8",
119
119
  "merge-props": "^6.0.0",
120
120
  "react-popper": "^2.3.0",
121
121
  "react-transition-group": "^4.4.5",
122
- "virtua": "^0.48.3"
122
+ "virtua": "^0.48.5"
123
123
  },
124
124
  "publishConfig": {
125
125
  "access": "public",
@@ -27,5 +27,3 @@ export * from './initials';
27
27
  export * from './colors';
28
28
  export * from './constants';
29
29
  export { CloseButton } from './closeButton';
30
- export { LiveRegion } from './liveRegion';
31
- export type { AriaLive, LiveRegionProps } from './liveRegion';
@@ -297,122 +297,3 @@ export const TinyScreen: Story = {
297
297
  ),
298
298
  ...withVariantConfig(['400%']),
299
299
  };
300
-
301
- /**
302
- * Test that the default LiveRegion renders with role="status" and aria-live="polite".
303
- */
304
- export const LiveRegionPoliteDefault: Story = {
305
- play: async ({ canvasElement, step }) => {
306
- const canvas = within(canvasElement);
307
-
308
- await step('Verify live region with role="status" exists', async () => {
309
- await waitFor(async () => {
310
- const liveRegion = canvas.getByRole('status');
311
- await expect(liveRegion).toBeInTheDocument();
312
- await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'polite'));
313
- await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
314
- });
315
- });
316
-
317
- await step('Verify prompt content is inside the live region', async () => {
318
- const liveRegion = canvas.getByRole('status');
319
- await expect(within(liveRegion).getByText('Polite announcement')).toBeInTheDocument();
320
- });
321
- },
322
- args: {
323
- description: 'Polite announcement',
324
- },
325
- };
326
-
327
- /**
328
- * Test that aria-live="assertive" renders with role="alert".
329
- */
330
- export const LiveRegionAssertive: Story = {
331
- play: async ({ canvasElement, step }) => {
332
- const canvas = within(canvasElement);
333
-
334
- await step('Verify live region with role="alert" exists', async () => {
335
- await waitFor(async () => {
336
- const liveRegion = canvas.getByRole('alert');
337
- await expect(liveRegion).toBeInTheDocument();
338
- await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'assertive'));
339
- await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
340
- });
341
- });
342
-
343
- await step('Verify prompt content is inside the live region', async () => {
344
- const liveRegion = canvas.getByRole('alert');
345
- await expect(within(liveRegion).getByText('Payment failed')).toBeInTheDocument();
346
- });
347
- },
348
- args: {
349
- sentiment: 'negative',
350
- description: 'Payment failed',
351
- 'aria-live': 'assertive',
352
- },
353
- };
354
-
355
- /**
356
- * Test that aria-live="off" renders without a live region wrapper.
357
- */
358
- export const LiveRegionOff: Story = {
359
- play: async ({ canvasElement, step }) => {
360
- const canvas = within(canvasElement);
361
-
362
- await step('Verify no live region wrapper exists', async () => {
363
- await waitFor(async () => {
364
- await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
365
- await expect(canvas.queryByRole('alert')).not.toBeInTheDocument();
366
- });
367
- });
368
-
369
- await step('Verify prompt content still renders', async () => {
370
- await expect(canvas.getByText('Static info')).toBeInTheDocument();
371
- });
372
- },
373
- args: {
374
- description: 'Static info',
375
- 'aria-live': 'off',
376
- },
377
- };
378
-
379
- /**
380
- * Test that a dismissed prompt also removes the live region.
381
- */
382
- export const LiveRegionDismiss: Story = {
383
- play: async ({ canvasElement, step }) => {
384
- const canvas = within(canvasElement);
385
-
386
- await step('Verify live region exists before dismiss', async () => {
387
- await waitFor(async () => {
388
- await expect(canvas.getByRole('status')).toBeInTheDocument();
389
- });
390
- });
391
-
392
- await step('Dismiss the prompt', async () => {
393
- const dismissButton = canvas.getByRole('button', { name: /close/i });
394
- await userEvent.click(dismissButton);
395
- });
396
-
397
- await step('Verify live region is removed', async () => {
398
- await waitFor(async () => {
399
- await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
400
- });
401
- });
402
- },
403
- render: function Render(args: InfoPromptProps) {
404
- const [isVisible, setIsVisible] = useState(true);
405
-
406
- if (!isVisible) {
407
- return <div data-testid="dismissed">Prompt dismissed</div>;
408
- }
409
-
410
- return (
411
- <InfoPrompt
412
- {...args}
413
- description="Dismissable live region"
414
- onDismiss={() => setIsVisible(false)}
415
- />
416
- );
417
- },
418
- };
@@ -1,6 +1,5 @@
1
1
  import { HTMLAttributes, ReactNode, useState } from 'react';
2
- import { LiveRegion, Sentiment, Typography } from '../../common';
3
- import type { AriaLive } from '../../common';
2
+ import { Sentiment, Typography } from '../../common';
4
3
  import { GiftBox } from '@transferwise/icons';
5
4
  import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
6
5
  import StatusIcon from '../../statusIcon';
@@ -24,7 +23,7 @@ export type InfoPromptMedia = {
24
23
  asset: ReactNode;
25
24
  };
26
25
 
27
- export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &
26
+ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
28
27
  Pick<PrimitivePromptProps, 'data-testid'> & {
29
28
  /**
30
29
  * The sentiment determines the colour scheme
@@ -54,14 +53,6 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
54
53
  */
55
54
  description: string;
56
55
  className?: string;
57
- /**
58
- * Sets the ARIA live region politeness level.
59
- * - `'polite'` — announced after the current speech (default)
60
- * - `'assertive'` — interrupts the current speech immediately
61
- * - `'off'` — disables the live region entirely
62
- * @default 'polite'
63
- */
64
- 'aria-live'?: AriaLive;
65
56
  };
66
57
 
67
58
  /**
@@ -81,7 +72,6 @@ export const InfoPrompt = ({
81
72
  title,
82
73
  description,
83
74
  className,
84
- 'aria-live': ariaLive = 'polite',
85
75
  'data-testid': dataTestId,
86
76
  ...restProps
87
77
  }: InfoPromptProps) => {
@@ -122,7 +112,7 @@ export const InfoPrompt = ({
122
112
  return <StatusIcon size={24} sentiment={statusIconSentiment} />;
123
113
  };
124
114
 
125
- const content = (
115
+ return (
126
116
  <PrimitivePrompt
127
117
  sentiment={sentiment}
128
118
  media={renderMedia()}
@@ -157,6 +147,4 @@ export const InfoPrompt = ({
157
147
  </div>
158
148
  </PrimitivePrompt>
159
149
  );
160
-
161
- return <LiveRegion aria-live={ariaLive}>{content}</LiveRegion>;
162
150
  };
@@ -1,39 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
-
5
- const ARIA_LIVE_ROLE_MAP = {
6
- assertive: 'alert',
7
- polite: 'status'
8
- };
9
- /**
10
- * Renders an ARIA live region with the correct implicit role.
11
- *
12
- * - `aria-live="polite"` → `role="status"`
13
- * - `aria-live="assertive"` → `role="alert"`
14
- * - `aria-live="off"` → no live region
15
- *
16
- * The `role` prop is intentionally excluded from the public API
17
- * to prevent mismatches between `aria-live` and `role`.
18
- */
19
- const LiveRegion = ({
20
- 'aria-live': ariaLive,
21
- children,
22
- ...props
23
- }) => {
24
- if (ariaLive === 'off') {
25
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
26
- children: children
27
- });
28
- }
29
- return /*#__PURE__*/jsxRuntime.jsx("div", {
30
- role: ARIA_LIVE_ROLE_MAP[ariaLive],
31
- "aria-live": ariaLive,
32
- "aria-atomic": "true",
33
- ...props,
34
- children: children
35
- });
36
- };
37
-
38
- exports.LiveRegion = LiveRegion;
39
- //# sourceMappingURL=LiveRegion.js.map
@@ -1 +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 return (\n <div role={ARIA_LIVE_ROLE_MAP[ariaLive]} aria-live={ariaLive} aria-atomic=\"true\" {...props}>\n {children}\n </div>\n );\n};\n"],"names":["ARIA_LIVE_ROLE_MAP","assertive","polite","LiveRegion","ariaLive","children","props","_jsx","_Fragment","role"],"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;AACA,EAAA,oBACEE,cAAA,CAAA,KAAA,EAAA;AAAKE,IAAAA,IAAI,EAAET,kBAAkB,CAACI,QAAQ,CAAE;AAAC,IAAA,WAAA,EAAWA,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAAA,IAAA,GAAKE,KAAK;AAAAD,IAAAA,QAAA,EACvFA;AAAQ,GACN,CAAC;AAEV;;;;"}
@@ -1,37 +0,0 @@
1
- import { jsx, Fragment } from 'react/jsx-runtime';
2
-
3
- const ARIA_LIVE_ROLE_MAP = {
4
- assertive: 'alert',
5
- polite: 'status'
6
- };
7
- /**
8
- * Renders an ARIA live region with the correct implicit role.
9
- *
10
- * - `aria-live="polite"` → `role="status"`
11
- * - `aria-live="assertive"` → `role="alert"`
12
- * - `aria-live="off"` → no live region
13
- *
14
- * The `role` prop is intentionally excluded from the public API
15
- * to prevent mismatches between `aria-live` and `role`.
16
- */
17
- const LiveRegion = ({
18
- 'aria-live': ariaLive,
19
- children,
20
- ...props
21
- }) => {
22
- if (ariaLive === 'off') {
23
- return /*#__PURE__*/jsx(Fragment, {
24
- children: children
25
- });
26
- }
27
- return /*#__PURE__*/jsx("div", {
28
- role: ARIA_LIVE_ROLE_MAP[ariaLive],
29
- "aria-live": ariaLive,
30
- "aria-atomic": "true",
31
- ...props,
32
- children: children
33
- });
34
- };
35
-
36
- export { LiveRegion };
37
- //# sourceMappingURL=LiveRegion.mjs.map
@@ -1 +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 return (\n <div role={ARIA_LIVE_ROLE_MAP[ariaLive]} aria-live={ariaLive} aria-atomic=\"true\" {...props}>\n {children}\n </div>\n );\n};\n"],"names":["ARIA_LIVE_ROLE_MAP","assertive","polite","LiveRegion","ariaLive","children","props","_jsx","_Fragment","role"],"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;AACA,EAAA,oBACEE,GAAA,CAAA,KAAA,EAAA;AAAKE,IAAAA,IAAI,EAAET,kBAAkB,CAACI,QAAQ,CAAE;AAAC,IAAA,WAAA,EAAWA,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAAA,IAAA,GAAKE,KAAK;AAAAD,IAAAA,QAAA,EACvFA;AAAQ,GACN,CAAC;AAEV;;;;"}
@@ -1,23 +0,0 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
2
- export type AriaLive = 'off' | 'polite' | 'assertive';
3
- export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-live' | 'aria-atomic'> {
4
- /**
5
- * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
6
- */
7
- 'aria-live': AriaLive;
8
- /** Test ID for testing tools */
9
- 'data-testid'?: string;
10
- children?: ReactNode;
11
- }
12
- /**
13
- * Renders an ARIA live region with the correct implicit role.
14
- *
15
- * - `aria-live="polite"` → `role="status"`
16
- * - `aria-live="assertive"` → `role="alert"`
17
- * - `aria-live="off"` → no live region
18
- *
19
- * The `role` prop is intentionally excluded from the public API
20
- * to prevent mismatches between `aria-live` and `role`.
21
- */
22
- export declare const LiveRegion: ({ "aria-live": ariaLive, children, ...props }: LiveRegionProps) => import("react").JSX.Element;
23
- //# sourceMappingURL=LiveRegion.d.ts.map
@@ -1 +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,gCASxF,CAAC"}
@@ -1,3 +0,0 @@
1
- export { LiveRegion } from './LiveRegion';
2
- export type { AriaLive, LiveRegionProps } from './LiveRegion';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
@@ -1,56 +0,0 @@
1
- import { render, screen } from '@testing-library/react';
2
- import { LiveRegion, LiveRegionProps } from './LiveRegion';
3
-
4
- describe('LiveRegion', () => {
5
- const renderLiveRegion = (props: Partial<LiveRegionProps> & Pick<LiveRegionProps, 'aria-live'>) =>
6
- render(<LiveRegion {...props}>{props.children ?? 'Live content'}</LiveRegion>);
7
-
8
- describe('when aria-live is "polite"', () => {
9
- it('renders with role="status"', () => {
10
- renderLiveRegion({ 'aria-live': 'polite' });
11
- expect(screen.getByRole('status')).toBeInTheDocument();
12
- });
13
-
14
- it('sets aria-live="polite"', () => {
15
- renderLiveRegion({ 'aria-live': 'polite' });
16
- expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
17
- });
18
-
19
- it('sets aria-atomic="true"', () => {
20
- renderLiveRegion({ 'aria-live': 'polite' });
21
- expect(screen.getByRole('status')).toHaveAttribute('aria-atomic', 'true');
22
- });
23
- });
24
-
25
- describe('when aria-live is "assertive"', () => {
26
- it('renders with role="alert"', () => {
27
- renderLiveRegion({ 'aria-live': 'assertive' });
28
- expect(screen.getByRole('alert')).toBeInTheDocument();
29
- });
30
-
31
- it('sets aria-live="assertive"', () => {
32
- renderLiveRegion({ 'aria-live': 'assertive' });
33
- expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
34
- });
35
-
36
- it('sets aria-atomic="true"', () => {
37
- renderLiveRegion({ 'aria-live': 'assertive' });
38
- expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
39
- });
40
- });
41
-
42
- it('renders children', () => {
43
- renderLiveRegion({ 'aria-live': 'polite', children: 'Transfer sent' });
44
- expect(screen.getByText('Transfer sent')).toBeInTheDocument();
45
- });
46
-
47
- it('passes additional HTML attributes to the wrapper div', () => {
48
- renderLiveRegion({ 'aria-live': 'polite', className: 'custom' });
49
- expect(screen.getByRole('status')).toHaveClass('custom');
50
- });
51
-
52
- it('supports data-testid prop', () => {
53
- renderLiveRegion({ 'aria-live': 'polite', 'data-testid': 'live-region' });
54
- expect(screen.getByTestId('live-region')).toBeInTheDocument();
55
- });
56
- });
@@ -1,42 +0,0 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
2
-
3
- const ARIA_LIVE_ROLE_MAP = {
4
- assertive: 'alert',
5
- polite: 'status',
6
- } as const;
7
-
8
- export type AriaLive = 'off' | 'polite' | 'assertive';
9
-
10
- export interface LiveRegionProps extends Omit<
11
- HTMLAttributes<HTMLDivElement>,
12
- 'role' | 'aria-live' | 'aria-atomic'
13
- > {
14
- /**
15
- * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
16
- */
17
- 'aria-live': AriaLive;
18
- /** Test ID for testing tools */
19
- 'data-testid'?: string;
20
- children?: ReactNode;
21
- }
22
-
23
- /**
24
- * Renders an ARIA live region with the correct implicit role.
25
- *
26
- * - `aria-live="polite"` → `role="status"`
27
- * - `aria-live="assertive"` → `role="alert"`
28
- * - `aria-live="off"` → no live region
29
- *
30
- * The `role` prop is intentionally excluded from the public API
31
- * to prevent mismatches between `aria-live` and `role`.
32
- */
33
- export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
34
- if (ariaLive === 'off') {
35
- return <>{children}</>;
36
- }
37
- return (
38
- <div role={ARIA_LIVE_ROLE_MAP[ariaLive]} aria-live={ariaLive} aria-atomic="true" {...props}>
39
- {children}
40
- </div>
41
- );
42
- };
@@ -1,2 +0,0 @@
1
- export { LiveRegion } from './LiveRegion';
2
- export type { AriaLive, LiveRegionProps } from './LiveRegion';