@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd

package/build/markdown/Markdown.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var commonmark = require('commonmark');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/markdown/Markdown.mjs

@@ -1,8 +1,8 @@
 import * as commonmark from 'commonmark';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/modal/Modal.js

@@ -8,8 +8,8 @@ var reactTransitionGroup = require('react-transition-group');
 var reactIntl = require('react-intl');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/modal/Modal.mjs

@@ -4,8 +4,8 @@ import { CSSTransition } from 'react-transition-group';
 import { useIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/moneyInput/MoneyInput.js

@@ -9,8 +9,8 @@ var React = require('react');
 var reactIntl = require('react-intl');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/moneyInput/MoneyInput.mjs

@@ -5,8 +5,8 @@ import { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/navigationOption/NavigationOption.js

@@ -7,8 +7,8 @@ var React = require('react');
 var Chevron = require('../chevron/Chevron.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/navigationOption/NavigationOption.mjs

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import Chevron from '../chevron/Chevron.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/nudge/Nudge.js

@@ -8,8 +8,8 @@ var React = require('react');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/nudge/Nudge.mjs

@@ -4,8 +4,8 @@ import { useState, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/overlayHeader/OverlayHeader.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/overlayHeader/OverlayHeader.mjs

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/phoneNumberInput/PhoneNumberInput.js

@@ -6,8 +6,8 @@ var React = require('react');
 var reactIntl = require('react-intl');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/phoneNumberInput/PhoneNumberInput.mjs

@@ -2,8 +2,8 @@ import { useRef, useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/popover/Popover.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var React = require('react');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/popover/Popover.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/processIndicator/ProcessIndicator.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var React = require('react');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/processIndicator/ProcessIndicator.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { Component } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/progressBar/ProgressBar.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/progressBar/ProgressBar.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/promoCard/PromoCard.js

@@ -8,8 +8,8 @@ var React = require('react');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/promoCard/PromoCard.mjs

@@ -4,8 +4,8 @@ import React__default, { forwardRef, useState, useId, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/promoCard/PromoCardIndicator.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/promoCard/PromoCardIndicator.mjs

@@ -3,8 +3,8 @@ import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/prompt/ActionPrompt/ActionPrompt.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var React = require('react');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 var clsx = require('clsx');
+var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
 var Button_resolver = require('../../button/Button.resolver.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
 require('../../common/propsValues/control.js');
-var breakpoint = require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');
@@ -24,13 +25,14 @@ require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
 require('@transferwise/formatting');
-require('@transferwise/icons');
+var icons = require('@transferwise/icons');
 require('react-intl');
 require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var AvatarView = require('../../avatarView/AvatarView.js');
+var Image = require('../../image/Image.js');
 var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
 var useScreenSize = require('../../common/hooks/useScreenSize.js');
-var promptMedia = require('../helpers/promptMedia.js');
 
 const ActionPrompt = ({
   sentiment = 'neutral',
@@ -45,17 +47,47 @@ const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel
 }) => {
-  const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
+  const isMobile = !useScreenSize.useScreenSize(neptuneTokens.Breakpoint.MEDIUM);
   const mediaId = React.useId();
   const titleId = React.useId();
   const descId = React.useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
-  const renderMedia = () => promptMedia.renderPromptMedia({
-    media,
-    sentiment,
-    mediaId,
-    imgClassName: 'wds-action-prompt--media-image'
-  });
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+        id: mediaId,
+        src: media.imgSrc,
+        className: "wds-action-prompt--media-image",
+        alt: media['aria-label'] ?? ''
+      });
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
+        status: sentiment
+      };
+      return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+        ...media.avatar,
+        badge: badge,
+        "aria-label": media['aria-label'],
+        "aria-hidden": media['aria-hidden'],
+        id: mediaId,
+        size: 48,
+        children: media.avatar.asset
+      });
+    }
+    return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+      id: mediaId,
+      size: 48,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
+    }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+      id: mediaId,
+      size: 48,
+      sentiment: sentiment,
+      iconLabel: media['aria-hidden'] ? null : media['aria-label']
+    });
+  };
   return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
     id: id,
     sentiment: sentiment,

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 Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\n  media?: PromptMedia;\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' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\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    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\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","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","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 { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { 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  /** @default {} */\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' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\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

@@ -1,11 +1,12 @@
 import { useId } from 'react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
+import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
 import Button from '../../button/Button.resolver.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
 import '../../common/propsValues/control.mjs';
-import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';
@@ -22,13 +23,14 @@ import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
 import '@transferwise/formatting';
-import '@transferwise/icons';
+import { GiftBox } from '@transferwise/icons';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import AvatarView from '../../avatarView/AvatarView.mjs';
+import Image from '../../image/Image.mjs';
 import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
 import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
-import { renderPromptMedia } from '../helpers/promptMedia.mjs';
 
 const ActionPrompt = ({
   sentiment = 'neutral',
@@ -48,12 +50,42 @@ const ActionPrompt = ({
   const titleId = useId();
   const descId = useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
-  const renderMedia = () => renderPromptMedia({
-    media,
-    sentiment,
-    mediaId,
-    imgClassName: 'wds-action-prompt--media-image'
-  });
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return /*#__PURE__*/jsx(Image, {
+        id: mediaId,
+        src: media.imgSrc,
+        className: "wds-action-prompt--media-image",
+        alt: media['aria-label'] ?? ''
+      });
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
+        status: sentiment
+      };
+      return /*#__PURE__*/jsx(AvatarView, {
+        ...media.avatar,
+        badge: badge,
+        "aria-label": media['aria-label'],
+        "aria-hidden": media['aria-hidden'],
+        id: mediaId,
+        size: 48,
+        children: media.avatar.asset
+      });
+    }
+    return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
+      id: mediaId,
+      size: 48,
+      "aria-label": media['aria-label'],
+      "aria-hidden": media['aria-hidden'],
+      children: /*#__PURE__*/jsx(GiftBox, {})
+    }) : /*#__PURE__*/jsx(StatusIcon, {
+      id: mediaId,
+      size: 48,
+      sentiment: sentiment,
+      iconLabel: media['aria-hidden'] ? null : media['aria-label']
+    });
+  };
   return /*#__PURE__*/jsx(PrimitivePrompt, {
     id: id,
     sentiment: sentiment,

package/build/prompt/ActionPrompt/ActionPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\n  media?: PromptMedia;\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' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\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    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\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","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { 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  /** @default {} */\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' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\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/InfoPrompt/InfoPrompt.js

@@ -3,8 +3,8 @@
 var React = require('react');
 require('../../common/theme.js');
 require('../../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
-require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/prompt/InfoPrompt/InfoPrompt.mjs

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
-import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -2,8 +2,8 @@
 
 require('../../common/theme.js');
 require('../../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
-require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -1,7 +1,7 @@
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
-import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';