@transferwise/components 46.136.0 → 46.137.0

package/build/main.css

@@ -31067,35 +31067,9 @@ button.np-link {
 
 .np-logo {
   display: inline-block;
-}
-
-.np-theme-personal--forest-green .np-logo-svg path,
-.np-theme-personal--bright-green .np-logo-svg path {
-  fill: var(--color-interactive-primary);
-}
-
-.np-theme-personal--dark .np-logo-svg path {
-  fill: var(--color-white);
-}
-
-.np-logo-svg--size-sm {
-  display: block;
-}
-
-@media (min-width: 576px) {
-  .np-logo-svg--size-sm {
-    display: none;
-  }
-}
-
-.np-logo-svg--size-md {
-  display: none;
-}
-
-@media (min-width: 576px) {
-  .np-logo-svg--size-md {
-    display: block;
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }
 
 .tw-modal--scrollable {
@@ -32233,6 +32207,228 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper {
+    padding-top: 4px;
+    padding-top: var(--size-4);
+  }
+}
+
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
+    padding-top: 8px;
+    padding-top: var(--size-8);
+  }
+}
+
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
+    padding-top: 8px;
+    padding-top: var(--size-8);
+  }
+}
+
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
+    padding-top: 12px;
+    padding-top: var(--size-12);
+  }
+}
+
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+  container-type: inline-size;
+  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
+  --critical-banner-duration: 150ms;
+  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
+     actions only go full-width below mobile-max token (container query) */
+}
+
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.wds-critical-banner__title {
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
+  -webkit-box-orient: vertical;
+  max-height: 192px;
+  overflow: hidden;
+  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__title {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  max-height: 48px;
+}
+
+.wds-critical-banner__description {
+  max-height: 30vh;
+  opacity: 1;
+  overflow: hidden;
+  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing), opacity var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
+  max-height: 0;
+  opacity: 0;
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+  transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
+  row-gap: 0;
+}
+
+.wds-critical-banner__text-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  text-align: start;
+  min-width: 0;
+  max-width: 480px;
+  height: 100%;
+  padding-top: 3px;
+}
+
+@media (max-width: 320px) {
+  .wds-critical-banner__text-wrapper {
+    padding-top: 0;
+  }
+}
+
+@container (max-width: 320px) {
+  .wds-critical-banner__text-wrapper {
+    padding-top: 0;
+  }
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__title,
+.wds-critical-banner--collapsed .wds-critical-banner__description {
+  transform: translateY(0);
+}
+
+.wds-critical-banner__toggle {
+  flex-shrink: 0;
+  transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner__toggle--collapsed {
+  transform: rotate(180deg);
+}
+
+@container (min-width: 768px) {
+  .wds-critical-banner__toggle {
+    display: none;
+  }
+}
+
+.wds-critical-banner .wds-prompt__actions-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  max-height: 200px;
+  opacity: 1;
+  overflow: visible;
+}
+
+@container (max-width: 600px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+    width: 100%;
+  }
+  .wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+}
+
+.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@container (max-width: 600px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wds-critical-banner__description,
+  .wds-critical-banner__title,
+  .wds-critical-banner .wds-prompt__content-wrapper,
+  .wds-critical-banner__toggle {
+    transition: none !important;
+  }
+}
+
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}
+
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34658,32 +34854,3 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
-
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/build/prompt/ActionPrompt/ActionPrompt.js

@@ -2,7 +2,6 @@
 
 var React = require('react');
 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');
@@ -25,14 +24,13 @@ require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
 require('@transferwise/formatting');
-var icons = require('@transferwise/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',
@@ -52,42 +50,12 @@ const ActionPrompt = ({
   const titleId = React.useId();
   const descId = React.useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
-  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']
-    });
-  };
+  const renderMedia = () => promptMedia.renderPromptMedia({
+    media,
+    sentiment,
+    mediaId,
+    imgClassName: 'wds-action-prompt--media-image'
+  });
   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 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  /** @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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"}
+{"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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"}

package/build/prompt/ActionPrompt/ActionPrompt.mjs

@@ -1,6 +1,5 @@
 import { useId } from 'react';
 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';
@@ -23,14 +22,13 @@ import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
 import '@transferwise/formatting';
-import { GiftBox } from '@transferwise/icons';
+import '@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',
@@ -50,42 +48,12 @@ const ActionPrompt = ({
   const titleId = useId();
   const descId = useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
-  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']
-    });
-  };
+  const renderMedia = () => renderPromptMedia({
+    media,
+    sentiment,
+    mediaId,
+    imgClassName: 'wds-action-prompt--media-image'
+  });
   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 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  /** @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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"}
+{"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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"}