@transferwise/components 0.0.0-experimental-24a0a12 → 0.0.0-experimental-72dd798

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;
-      }
-    }
-  }
-}