@transferwise/components 0.0.0-experimental-24a0a12 → 0.0.0-experimental-d678cd6

package/build/prompt/common/Expander/Expander.mjs

@@ -1,44 +0,0 @@
-import 'react';
-import { clsx } from 'clsx';
-import { ChevronUp } from '@transferwise/icons';
-import IconButton from '../../../iconButton/IconButton.mjs';
-import { useIntl } from 'react-intl';
-import messages from './Expander.messages.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-// Helper for conditional rendering based on expanded state
-function shouldShowWhenExpanded({
-  expanded,
-  hasContent,
-  alwaysShow = false
-}) {
-  if (alwaysShow) {
-    return hasContent;
-  }
-  return expanded && hasContent;
-}
-// Reusable toggle button component
-const ExpanderToggle = ({
-  expanded,
-  onToggle,
-  size = 24,
-  className,
-  'data-testid': testId
-}) => {
-  const intl = useIntl();
-  return /*#__PURE__*/jsx(IconButton, {
-    size: size,
-    priority: "secondary",
-    "aria-label": intl.formatMessage(expanded ? messages.collapseAriaLabel : messages.expandAriaLabel),
-    "aria-expanded": expanded,
-    className: clsx('wds-expander-toggle', {
-      'wds-expander-toggle--collapsed': !expanded
-    }, className),
-    "data-testid": testId,
-    onClick: onToggle,
-    children: /*#__PURE__*/jsx(ChevronUp, {})
-  });
-};
-
-export { ExpanderToggle, shouldShowWhenExpanded };
-//# sourceMappingURL=Expander.mjs.map

package/build/prompt/common/Expander/Expander.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander.mjs","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\nimport messages from './Expander.messages';\n\nexport type ExpanderState = {\n  expanded: boolean;\n  toggle: () => void;\n  setExpanded: (expanded: boolean) => void;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const toggle = useCallback(() => {\n    setExpanded((prev) => !prev);\n  }, []);\n\n  return {\n    expanded,\n    toggle,\n    setExpanded,\n  };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n  expanded,\n  hasContent,\n  alwaysShow = false,\n}: {\n  expanded: boolean;\n  hasContent: boolean;\n  alwaysShow?: boolean;\n}): boolean {\n  if (alwaysShow) {\n    return hasContent;\n  }\n\n  return expanded && hasContent;\n}\n\nexport type ExpanderToggleProps = {\n  expanded: boolean;\n  onToggle?: () => void;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  className?: string;\n  'data-testid'?: string;\n};\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n  expanded,\n  onToggle,\n  size = 24,\n  className,\n  'data-testid': testId,\n}: ExpanderToggleProps) => {\n  const intl = useIntl();\n\n  return (\n    <IconButton\n      size={size}\n      priority=\"secondary\"\n      aria-label={intl.formatMessage(\n        expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,\n      )}\n      aria-expanded={expanded}\n      className={clsx(\n        'wds-expander-toggle',\n        { 'wds-expander-toggle--collapsed': !expanded },\n        className,\n      )}\n      data-testid={testId}\n      onClick={onToggle}\n    >\n      <ChevronUp />\n    </IconButton>\n  );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","className","testId","intl","useIntl","_jsx","IconButton","priority","formatMessage","messages","collapseAriaLabel","expandAriaLabel","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;AA4BA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAUA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYJ,IAAI,CAACK,aAAa,CAC5Bb,QAAQ,GAAGc,QAAQ,CAACC,iBAAiB,GAAGD,QAAQ,CAACE,eAAe,CAChE;AACF,IAAA,eAAA,EAAehB,QAAS;AACxBM,IAAAA,SAAS,EAAEW,IAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACjB;KAAU,EAC/CM,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBW,IAAAA,OAAO,EAAEd,QAAS;AAAAe,IAAAA,QAAA,eAElBT,GAAA,CAACU,SAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;"}

package/build/prompt/helpers/promptMedia.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var icons = require('@transferwise/icons');
-var AvatarView = require('../../avatarView/AvatarView.js');
-var Image = require('../../image/Image.js');
-var StatusIcon = require('../../statusIcon/StatusIcon.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function renderPromptMedia({
-  media,
-  sentiment,
-  mediaId,
-  imgClassName
-}) {
-  if (media?.imgSrc) {
-    return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
-      id: mediaId,
-      src: media.imgSrc,
-      className: imgClassName,
-      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']
-  });
-}
-
-exports.renderPromptMedia = renderPromptMedia;
-//# sourceMappingURL=promptMedia.js.map

package/build/prompt/helpers/promptMedia.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"promptMedia.js","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\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\ntype RenderPromptMediaOptions = {\n  media: PromptMedia;\n  sentiment: PrimitivePromptProps['sentiment'];\n  mediaId: string;\n  imgClassName: string;\n};\n\nexport function renderPromptMedia({\n  media,\n  sentiment,\n  mediaId,\n  imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n  if (media?.imgSrc) {\n    return (\n      <Image\n        id={mediaId}\n        src={media.imgSrc}\n        className={imgClassName}\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"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,cAAA,CAACC,aAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,cAAA,CAACS,kBAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,cAAA,CAACS,kBAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,cAAA,CAACa,aAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,cAAA,CAACc,kBAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}

package/build/prompt/helpers/promptMedia.mjs

@@ -1,50 +0,0 @@
-import { GiftBox } from '@transferwise/icons';
-import AvatarView from '../../avatarView/AvatarView.mjs';
-import Image from '../../image/Image.mjs';
-import StatusIcon from '../../statusIcon/StatusIcon.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-function renderPromptMedia({
-  media,
-  sentiment,
-  mediaId,
-  imgClassName
-}) {
-  if (media?.imgSrc) {
-    return /*#__PURE__*/jsx(Image, {
-      id: mediaId,
-      src: media.imgSrc,
-      className: imgClassName,
-      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']
-  });
-}
-
-export { renderPromptMedia };
-//# sourceMappingURL=promptMedia.mjs.map

package/build/prompt/helpers/promptMedia.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"promptMedia.mjs","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\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\ntype RenderPromptMediaOptions = {\n  media: PromptMedia;\n  sentiment: PrimitivePromptProps['sentiment'];\n  mediaId: string;\n  imgClassName: string;\n};\n\nexport function renderPromptMedia({\n  media,\n  sentiment,\n  mediaId,\n  imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n  if (media?.imgSrc) {\n    return (\n      <Image\n        id={mediaId}\n        src={media.imgSrc}\n        className={imgClassName}\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"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,GAAA,CAACS,UAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,GAAA,CAACS,UAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,GAAA,CAACa,OAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,GAAA,CAACc,UAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}

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

@@ -1,59 +0,0 @@
-.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;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-}
-.wds-critical-banner__mobile--collapsed {
-  max-height: 30vh;
-}
-.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--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.wds-critical-banner__description--collapsed {
-  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;
-}
-.wds-critical-banner__text-wrapper {
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-}
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-@media not (min-width: 480px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-}
-@media not (min-width: 480px) {
-  .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;
-  }
-}

package/build/styles/prompt/common/Expander/Expander.css

@@ -1,8 +0,0 @@
-.wds-expander-toggle {
-  align-self: flex-start;
-  flex-shrink: 0;
-  transition: transform 0.2s ease-in-out;
-}
-.wds-expander-toggle--collapsed {
-  transform: rotate(180deg);
-}

package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts

@@ -1,40 +0,0 @@
-import { AriaAttributes, ReactNode } from 'react';
-import { ButtonProps } from '../../button/Button.types';
-import { PrimitivePromptProps } from '../PrimitivePrompt';
-import { PromptMedia } from '../helpers/promptMedia';
-export type CriticalBannerProps = {
-    title?: ReactNode;
-    description?: ReactNode;
-    media?: PromptMedia;
-    action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
-        label: ButtonProps['children'];
-    };
-    actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
-        label: ButtonProps['children'];
-    };
-    sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
-    /**
-     * Controls whether the description and actions are visible.
-     * When collapsed with a title, only the title is shown.
-     * When collapsed without a title, the description is trimmed to 2 lines.
-     */
-    expanded?: boolean;
-    /** Called when the user clicks the chevron toggle. */
-    onToggle?: () => void;
-    /**
-     * Overrides the default labelling derived from `title` and `description`.
-     *
-     * **NB:** When provided, the default `aria-labelledby` / `aria-describedby`
-     * attributes are removed — include all necessary context in the label.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;
-/**
- * A full-width, non-dismissible banner for critical messages such as account blocks or
- * time-sensitive actions that require immediate user attention.
-
- * @see {@link https://wise.design/components/critical-banner Design Spec}
- */
-export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, expanded, onToggle, id, className, "data-testid": testId, "aria-label": ariaLabel, }: CriticalBannerProps) => import("react").JSX.Element;
-export default CriticalBanner;
-//# sourceMappingURL=CriticalBanner.d.ts.map

package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,uJAa5B,mBAAmB,gCAkIrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/prompt/CriticalBanner/helpers.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * Helper to extract string from ReactNode for announcements.
- * Complex ReactNodes (JSX elements) return empty string.
- */
-export declare const getStringValue: (node: ReactNode) => string;
-/**
- * Builds the announcement string from visible content only.
- * Content visibility depends on expanded state and presence of title.
- */
-export declare const buildAnnouncementString: ({ title, description, expanded, actionLabel, actionSecondaryLabel, }: {
-    title?: ReactNode;
-    description?: ReactNode;
-    expanded: boolean;
-    actionLabel?: ReactNode;
-    actionSecondaryLabel?: ReactNode;
-}) => string;
-//# sourceMappingURL=helpers.d.ts.map

package/build/types/prompt/CriticalBanner/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,KAAG,MAKhD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,sEAMrC;IACD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,SAAS,CAAC;CAClC,KAAG,MASH,CAAC"}

package/build/types/prompt/CriticalBanner/index.d.ts

@@ -1,3 +0,0 @@
-export type { CriticalBannerProps } from './CriticalBanner';
-export { CriticalBanner } from './CriticalBanner';
-//# sourceMappingURL=index.d.ts.map

package/build/types/prompt/CriticalBanner/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/build/types/prompt/common/Expander/Expander.d.ts

@@ -1,20 +0,0 @@
-export type ExpanderState = {
-    expanded: boolean;
-    toggle: () => void;
-    setExpanded: (expanded: boolean) => void;
-};
-export declare function useExpanderState(initialExpanded?: boolean): ExpanderState;
-export declare function shouldShowWhenExpanded({ expanded, hasContent, alwaysShow, }: {
-    expanded: boolean;
-    hasContent: boolean;
-    alwaysShow?: boolean;
-}): boolean;
-export type ExpanderToggleProps = {
-    expanded: boolean;
-    onToggle?: () => void;
-    size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
-    className?: string;
-    'data-testid'?: string;
-};
-export declare const ExpanderToggle: ({ expanded, onToggle, size, className, "data-testid": testId, }: ExpanderToggleProps) => import("react").JSX.Element;
-//# sourceMappingURL=Expander.d.ts.map

package/build/types/prompt/common/Expander/Expander.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAGF,wBAAgB,gBAAgB,CAAC,eAAe,UAAO,GAAG,aAAa,CAYtE;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,UAAU,EACV,UAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAMV;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAGF,eAAO,MAAM,cAAc,GAAI,iEAM5B,mBAAmB,gCAsBrB,CAAC"}

package/build/types/prompt/common/Expander/Expander.messages.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    expandAriaLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    collapseAriaLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Expander.messages.d.ts.map

package/build/types/prompt/common/Expander/Expander.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander.messages.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;AAEA,wBAWG"}

package/build/types/prompt/helpers/promptMedia.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import { AvatarViewProps } from '../../avatarView';
-import { BadgeAssetsProps } from '../../badge';
-import { PrimitivePromptProps } from '../PrimitivePrompt';
-export type PromptMedia = {
-    imgSrc?: string;
-    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
-        asset?: AvatarViewProps['children'];
-        badge?: Pick<BadgeAssetsProps, 'flagCode'>;
-    };
-    'aria-label'?: string;
-    'aria-hidden'?: boolean;
-};
-type RenderPromptMediaOptions = {
-    media: PromptMedia;
-    sentiment: PrimitivePromptProps['sentiment'];
-    mediaId: string;
-    imgClassName: string;
-};
-export declare function renderPromptMedia({ media, sentiment, mediaId, imgClassName, }: RenderPromptMediaOptions): ReactNode;
-export {};
-//# sourceMappingURL=promptMedia.d.ts.map

package/build/types/prompt/helpers/promptMedia.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"promptMedia.d.ts","sourceRoot":"","sources":["../../../../src/prompt/helpers/promptMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;QACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC5C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA+CtC"}

package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx

@@ -1,131 +0,0 @@
-import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
-import * as CriticalBannerStories from './CriticalBanner.story';
-
-<Meta title="Prompts/CriticalBanner/Accessibility" tags={['new']} />
-
-# Accessibility
-
-Under the hood, `CriticalBanner` is marked as `role="region"` for a section of content that users might want to navigate to directly.
-
-By default, it's labelled by the `title` and described by the `description`.
-
-## Announcement Behavior
-
-`CriticalBanner` is designed for critical messages that require immediate attention. It always uses **`aria-live="assertive"`** to immediately interrupt and announce changes to screen readers.
-
-Unlike `InfoPrompt` which offers configurable politeness levels, `CriticalBanner` is always assertive because it communicates critical, time-sensitive information that users must be aware of immediately.
-
-### What Gets Announced
-
-The component intelligently announces only **visible content**, respecting the collapsed/expanded state:
-
-- **Collapsed with title**: Announces title only (description is hidden)
-- **Collapsed without title**: Announces description only (visible up to 2 lines)
-- **Expanded**: Announces title, description, and action button labels (all visible)
-
-<Source
-  dark
-  code={`
-// Collapsed with title - announces: "Your account requires verification"
-<CriticalBanner
-  title="Your account requires verification"
-  description="Please verify your identity to continue"
-  action={{ label: "Verify now", onClick: handleVerify }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-
-// Expanded - announces: "Your account requires verification | Please verify your identity to continue | Verify now | Learn more"
-
-<CriticalBanner
-  title="Your account requires verification"
-  description="Please verify your identity to continue"
-  action={{ label: 'Verify now', onClick: handleVerify }}
-  actionSecondary={{ label: 'Learn more', onClick: handleLearnMore }}
-  expanded={true}
-  onToggle={handleToggle}
-/>
-
-// Collapsed without title - announces: "Your verification is pending..."
-
-<CriticalBanner
-  description="Your verification is pending. We'll notify you once complete."
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>
-
-### When Announcements Trigger
-
-Screen readers announce the banner content whenever:
-
-- The banner first appears in the DOM
-- The user toggles between collapsed and expanded states
-- The content (title, description, or action labels) changes
-
-## Custom Labels
-
-If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
-
-<Source
-  dark
-  code={`
-<CriticalBanner
-  title="Account suspended"
-  description="Unusual activity detected"
-  action={{ label: "Verify identity", onClick: handleVerify }}
-  aria-label="Critical: Your account has been suspended due to unusual activity. Please verify your identity immediately to restore access."
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>
-
-## Media
-
-Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
-
-<Source
-  dark
-  code={`
-import { Bank, AlertCircle } from '@transferwise/icons';
-
-<CriticalBanner
-  title="Bank connection required"
-  description="Connect your bank account to continue"
-  media={{ avatar: { asset: <Bank title="Bank account" /> } }}
-  action={{ label: 'Connect now', onClick: handleConnect }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-
-<CriticalBanner
-  title="Verification required"
-  description="We need to verify your identity"
-  media={{ avatar: { asset: <AlertCircle title="Alert" /> } }}
-  action={{ label: "Start verification", onClick: handleVerify }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>
-
-Alternatively, you can use `media['aria-label']` to provide a label for custom images:
-
-<Source
-  dark
-  code={`
-<CriticalBanner
-  title="Card blocked"
-  description="Your card has been blocked for security reasons"
-  media={{
-    imgSrc: '/wise-card.svg',
-    'aria-label': 'Wise debit card'
-  }}
-  action={{ label: "Unblock card", onClick: handleUnblock }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -1,59 +0,0 @@
-.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;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-}
-.wds-critical-banner__mobile--collapsed {
-  max-height: 30vh;
-}
-.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--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.wds-critical-banner__description--collapsed {
-  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;
-}
-.wds-critical-banner__text-wrapper {
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-}
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-@media not (min-width: 480px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-}
-@media not (min-width: 480px) {
-  .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;
-  }
-}

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -1,64 +0,0 @@
-.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;
-
-  &__mobile--collapsed {
-    max-height: 30vh;
-  }
-
-  &--media-image {
-    width: var(--size-48);
-    height: var(--size-48);
-    object-fit: contain;
-  }
-
-  &__title--collapsed {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  &__description--collapsed {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .wds-prompt__content-wrapper {
-    grid-template-columns: auto 1fr auto;
-    align-items: flex-start;
-  }
-
-  &__text-wrapper {
-    min-width: 0;
-    max-width: 480px;
-    height: 100%;
-  }
-
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-  .wds-prompt__actions-wrapper {
-    grid-column-start: 2;
-    grid-column-end: 3;
-
-    @media not (--screen-xs) {
-      grid-column: span 3;
-      width: 100%;
-    }
-  }
-
-  &--with-two-actions .wds-prompt__actions-wrapper {
-    @media not (--screen-xs) {
-      .wds-Button {
-        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-        min-width: fit-content;
-      }
-    }
-  }
-}