@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-162ecb1

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,134 +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;
-  container-type: inline-size;
-  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
-  --critical-banner-duration: 150ms;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below mobile-max token (container query) */
-}
-.wds-critical-banner--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-.wds-critical-banner__title {
-  display: -webkit-box;
-  -webkit-line-clamp: 8;
-  line-clamp: 8;
-  -webkit-box-orient: vertical;
-  max-height: 192px;
-  overflow: hidden;
-  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
-}
-.wds-critical-banner--collapsed .wds-critical-banner__title {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  max-height: 48px;
-}
-.wds-critical-banner__description {
-  max-height: 30vh;
-  opacity: 1;
-  overflow: hidden;
-  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing), opacity var(--critical-banner-duration) var(--critical-banner-easing);
-}
-.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
-  max-height: 0;
-  opacity: 0;
-}
-.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.wds-critical-banner .wds-prompt__content-wrapper {
-  grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
-  transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
-}
-.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
-  row-gap: 0;
-}
-.wds-critical-banner__text-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  text-align: start;
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (--screen-400-zoom) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0px;
-  }
-}
-.wds-critical-banner--collapsed .wds-critical-banner__title,
-.wds-critical-banner--collapsed .wds-critical-banner__description {
-  transform: translateY(0);
-}
-.wds-critical-banner__toggle {
-  flex-shrink: 0;
-  transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
-}
-.wds-critical-banner__toggle--collapsed {
-  transform: rotate(180deg);
-}
-@container (min-width: 768px) {
-  .wds-critical-banner__toggle {
-    display: none;
-  }
-}
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  max-height: 200px;
-  opacity: 1;
-  overflow: visible;
-}
-@container (max-width: 600px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-  .wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 100%;
-    width: 100%;
-  }
-}
-.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-@container (max-width: 600px) {
-  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .wds-critical-banner__description,
-  .wds-critical-banner__title,
-  .wds-critical-banner .wds-prompt__content-wrapper,
-  .wds-critical-banner__toggle {
-    transition: none !important;
-  }
-}

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/common/hooks/useContainerSize.d.ts

@@ -1,14 +0,0 @@
-/**
- * Hook that returns a ref and a boolean indicating if the container
- * has a width >= the specified breakpoint.
- *
- * Useful for synchronizing React state with CSS container queries.
- *
- * Uses content-box measurements to match CSS container query behavior
- * (excludes padding and border).
- *
- * @param breakpoint - Minimum width in pixels
- * @returns [ref, isAboveBreakpoint] tuple
- */
-export declare function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean];
-//# sourceMappingURL=useContainerSize.d.ts.map

package/build/types/common/hooks/useContainerSize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContainerSize.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useContainerSize.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAe/F"}

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

@@ -1,39 +0,0 @@
-import { 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, as a controlled component.
-     * When collapsed with a title, only the title is shown.
-     * When collapsed without a title, the description is trimmed to 2 lines.
-     *
-     * Note: On desktop (container width >= 768px), the banner is always expanded
-     * regardless of this prop value.
-     */
-    expanded?: boolean;
-    /**
-     * Called when the user clicks the chevron toggle.
-     * If not provided, the component will manage expanded state internally.
-     */
-    onToggle?: () => void;
-} & 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: expandedProp, onToggle, id, className, "data-testid": testId, }: 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,SAAS,EAA8B,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,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;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAoHrB,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/common/hooks/useContainerSize.test.tsx

@@ -1,121 +0,0 @@
-import React, { act } from 'react';
-import { render, screen } from '@testing-library/react';
-
-import { mockResizeObserver } from '../../test-utils/window-mock';
-
-import { useContainerSize } from './useContainerSize';
-
-mockResizeObserver();
-
-describe('useContainerSize', () => {
-  let resizeObserverCallback: ResizeObserverCallback | null = null;
-
-  beforeEach(() => {
-    resizeObserverCallback = null;
-
-    // Capture the ResizeObserver callback for testing
-    const OriginalResizeObserver = global.ResizeObserver;
-    global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
-      resizeObserverCallback = callback;
-      const instance = new OriginalResizeObserver(callback);
-      return instance;
-    }) as unknown as typeof ResizeObserver;
-  });
-
-  // Helper to create a test component
-  function TestComponent({
-    breakpoint,
-    onStateChange,
-  }: {
-    breakpoint: number;
-    onStateChange: (state: boolean) => void;
-  }) {
-    const [ref, isAboveBreakpoint] = useContainerSize(breakpoint);
-
-    // Call the callback whenever state changes
-    React.useEffect(() => {
-      onStateChange(isAboveBreakpoint);
-    }, [isAboveBreakpoint, onStateChange]);
-
-    return (
-      <div ref={ref} data-testid="container">
-        Test
-      </div>
-    );
-  }
-
-  // Helper to simulate container resize
-  function simulateResize(width: number, options?: { noBorderBoxSize?: boolean }) {
-    const container = screen.getByTestId('container');
-
-    act(() => {
-      if (resizeObserverCallback) {
-        const entry = {
-          target: container,
-          borderBoxSize: options?.noBorderBoxSize
-            ? undefined
-            : [{ inlineSize: width, blockSize: 100 }],
-          contentRect: {
-            width,
-            height: 100,
-            x: 0,
-            y: 0,
-            top: 0,
-            right: width,
-            bottom: 100,
-            left: 0,
-            toJSON: () => ({}),
-          },
-          contentBoxSize: [{ inlineSize: width, blockSize: 100 }],
-          devicePixelContentBoxSize: [{ inlineSize: width, blockSize: 100 }],
-        } as ResizeObserverEntry;
-
-        resizeObserverCallback([entry], {} as ResizeObserver);
-      }
-    });
-  }
-
-  it('returns initial state as false', () => {
-    const onStateChange = jest.fn();
-    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
-
-    // Initial call with false
-    expect(onStateChange).toHaveBeenCalledWith(false);
-  });
-
-  it('updates to true when container width is above breakpoint', () => {
-    const onStateChange = jest.fn();
-    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
-
-    simulateResize(600);
-    expect(onStateChange).toHaveBeenCalledWith(true);
-  });
-
-  it('remains false when container width is below breakpoint', () => {
-    const onStateChange = jest.fn();
-    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
-
-    simulateResize(400);
-    expect(onStateChange).toHaveBeenCalledWith(false);
-    expect(onStateChange).not.toHaveBeenCalledWith(true);
-  });
-
-  it('returns true when container width equals breakpoint', () => {
-    const onStateChange = jest.fn();
-    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
-
-    simulateResize(480);
-    expect(onStateChange).toHaveBeenCalledWith(true);
-  });
-
-  it('updates state when container crosses breakpoint from below to above', () => {
-    const onStateChange = jest.fn();
-    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
-
-    simulateResize(400);
-    expect(onStateChange).toHaveBeenCalledWith(false);
-
-    simulateResize(600);
-    expect(onStateChange).toHaveBeenCalledWith(true);
-  });
-});

package/src/common/hooks/useContainerSize.ts

@@ -1,32 +0,0 @@
-import { useRef, useState } from 'react';
-
-import { useResizeObserver } from './useResizeObserver';
-
-/**
- * Hook that returns a ref and a boolean indicating if the container
- * has a width >= the specified breakpoint.
- *
- * Useful for synchronizing React state with CSS container queries.
- *
- * Uses content-box measurements to match CSS container query behavior
- * (excludes padding and border).
- *
- * @param breakpoint - Minimum width in pixels
- * @returns [ref, isAboveBreakpoint] tuple
- */
-export function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {
-  const ref = useRef<HTMLDivElement>(null);
-  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
-
-  useResizeObserver(
-    ref,
-    (entry) => {
-      // Use contentRect.width to match CSS container query box model (content-box)
-      const inlineSize = entry.contentRect.width;
-      setIsAboveBreakpoint(inlineSize >= breakpoint);
-    },
-    'content-box',
-  );
-
-  return [ref, isAboveBreakpoint];
-}

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

@@ -1,113 +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
-
-## 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}
-/>
-`}
-/>