@transferwise/components 46.148.0 → 46.149.0

package/build/prompt/CriticalBanner/CriticalBanner.js

@@ -4,6 +4,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Body = require('../../body/Body.js');
 var Button_resolver = require('../../button/Button.resolver.js');
+var Container = require('../../container/Container.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
 var neptuneTokens = require('@transferwise/neptune-tokens');
@@ -58,8 +59,10 @@ const CriticalBanner = ({
   const titleId = React.useId();
   const descId = React.useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
-  const bannerSurface = /*#__PURE__*/jsxRuntime.jsxs(PrimitivePrompt.PrimitivePrompt, {
+  const bannerSurface = /*#__PURE__*/jsxRuntime.jsxs(Container.default, {
     ref: containerRef,
+    size: "fluid",
+    as: PrimitivePrompt.PrimitivePrompt,
     id: id,
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',

package/build/prompt/CriticalBanner/CriticalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\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  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <PrimitivePrompt\n      ref={containerRef}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </PrimitivePrompt>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","PrimitivePrompt","ref","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","size","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}
+{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport Container from '../../container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\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  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.mjs

@@ -2,6 +2,7 @@ import { useState, useId } from 'react';
 import { clsx } from 'clsx';
 import Body from '../../body/Body.mjs';
 import Button from '../../button/Button.resolver.mjs';
+import Container from '../../container/Container.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
 import { Breakpoint } from '@transferwise/neptune-tokens';
@@ -56,8 +57,10 @@ const CriticalBanner = ({
   const titleId = useId();
   const descId = useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
-  const bannerSurface = /*#__PURE__*/jsxs(PrimitivePrompt, {
+  const bannerSurface = /*#__PURE__*/jsxs(Container, {
     ref: containerRef,
+    size: "fluid",
+    as: PrimitivePrompt,
     id: id,
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',

package/build/prompt/CriticalBanner/CriticalBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\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  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <PrimitivePrompt\n      ref={containerRef}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </PrimitivePrompt>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","PrimitivePrompt","ref","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","size","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}
+{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport Container from '../../container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\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  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}

package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,gBAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,oBACEC,cAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,SAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,eAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,SAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,cAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,SAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,cAAA,CAACI,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,cAAA,CAACW,WAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,cAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding-x. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,gBAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,oBACEC,cAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,SAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,eAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,SAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,cAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,SAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,cAAA,CAACI,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,cAAA,CAACW,WAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,cAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}

package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,IAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,IAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,IAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding-x. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,IAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,IAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,IAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}

package/build/styles/css/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--bright-green {

package/build/styles/flowNavigation/FlowNavigation.css

@@ -1,9 +1,12 @@
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  box-sizing: border-box;
+  min-height: 96px;
 }
 .np-flow-navigation--border-bottom {
-  min-height: 96px;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
@@ -69,6 +72,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
+.np-flow-navigation--composable {
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation--composable {
+    min-height: 128px;
+  }
+}
+.np-flow-navigation--composable .np-flow-navigation__content {
+  max-width: none;
+}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/build/styles/less/legacy-variables.less

@@ -5,7 +5,7 @@
 //== Media queries breakpoints
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 27 May 2026 15:50:09 GMT
+// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 // @deprecated Use @screen-xs-min
 @screen-xs: 320px;

package/build/styles/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 27 May 2026 15:50:09 GMT
+// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 27 May 2026 15:50:09 GMT
+// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/build/styles/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1990,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -28754,12 +28754,15 @@ button.np-option {
 }
 
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  box-sizing: border-box;
+  min-height: 96px;
 }
 
 .np-flow-navigation--border-bottom {
-  min-height: 96px;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
@@ -28844,6 +28847,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
+.np-flow-navigation--composable {
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation--composable {
+    min-height: 128px;
+  }
+}
+
+.np-flow-navigation--composable .np-flow-navigation__content {
+  max-width: none;
+}
+
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31706,8 +31723,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;
@@ -31759,7 +31776,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -31829,7 +31847,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 
 .wds-info-prompt__content {
@@ -31895,7 +31914,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);
@@ -31930,7 +31950,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -1,5 +1,6 @@
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);

package/build/styles/prompt/CriticalBanner/CriticalBanner.css

@@ -1,5 +1,6 @@
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;

package/build/styles/prompt/InfoPrompt/InfoPrompt.css

@@ -1,7 +1,8 @@
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -1,6 +1,7 @@
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -5,8 +5,8 @@
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/build/styles/props/custom-media.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 @custom-media --screen-400-zoom (width <= 320px);

package/build/styles/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */