@transferwise/components 0.0.0-experimental-c54e90a → 0.0.0-experimental-e611dd1

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}
-/>
-`}
-/>

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -1,132 +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;
-  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/src/prompt/CriticalBanner/CriticalBanner.less

@@ -1,153 +0,0 @@
-@import (reference) "./CriticalBanner.vars.less";
-
-.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;
-
-  // Animation variables
-  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
-  --critical-banner-duration: 150ms;
-
-  &--media-image {
-    width: var(--size-48);
-    height: var(--size-48);
-    object-fit: contain;
-  }
-
-  &__title {
-    display: -webkit-box;
-    -webkit-line-clamp: 8;
-    line-clamp: 8;
-    -webkit-box-orient: vertical;
-    max-height: 192px; // ~8 lines (24px line-height × 8) - balanced for common cases
-    overflow: hidden;
-    transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
-  }
-
-  &--collapsed &__title {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    max-height: 48px; // ~2 lines (24px line-height × 2)
-  }
-
-  &__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);
-  }
-
-  &--collapsed &__description--with-title {
-    max-height: 0;
-    opacity: 0;
-  }
-
-  // When collapsed WITHOUT a title: show 2 lines
-  &--collapsed &__description:not(&__description--with-title) {
-    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;
-    transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
-  }
-
-  &--collapsed .wds-prompt__content-wrapper {
-    row-gap: 0;
-  }
-
-  &__text-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-width: 0;
-    max-width: 480px;
-    height: 100%;
-
-    // Padding prevents text shifting when collapsing/expanding layout shift
-    padding-top: 3px;
-
-    @media (--screen-400-zoom) {
-      padding-top: 0;
-    }
-
-    @container (--screen-400-zoom) {
-      padding-top: 0px;
-    }
-  }
-
-  &--collapsed &__title,
-  &--collapsed &__description {
-    transform: translateY(0);
-  }
-
-  &__toggle {
-    flex-shrink: 0;
-    transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
-
-    &--collapsed {
-      transform: rotate(180deg);
-    }
-
-    @container (min-width: @wds-critical-banner-collapsible-max) {
-      display: none;
-    }
-  }
-
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below mobile-max token (container query) */
-  .wds-prompt__actions-wrapper {
-    grid-column-start: 2;
-    grid-column-end: 3;
-    max-height: 200px;
-    opacity: 1;
-    overflow: visible;
-
-    @container (max-width: @wds-critical-banner-action-wrapper-max) {
-      grid-column: span 3;
-      width: 100%;
-
-      .wds-Button {
-        flex: 1 1 100%;
-        width: 100%;
-      }
-    }
-  }
-
-  &--collapsed .wds-prompt__actions-wrapper {
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  &--with-two-actions .wds-prompt__actions-wrapper {
-    @container (max-width: @wds-critical-banner-action-wrapper-max) {
-      .wds-Button {
-        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-        min-width: fit-content;
-      }
-    }
-  }
-}
-
-// Reduced motion support
-@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;
-  }
-}