@transferwise/components 46.149.1 → 46.150.0

package/src/main.css

@@ -32099,30 +32099,22 @@ html:not([dir="rtl"]) .np-navigation-option {
   inline-size: 100%;
 }
 
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
-}
-
 @container critical-banner-overhang (max-width: 600px) {
-  .wds-critical-banner__entry-mask {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
     --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat,
-      radial-gradient(
-          circle at 0% 100%,
-          transparent var(--critical-banner-mobile-overhang-size),
-          #000 var(--critical-banner-mobile-overhang-size)
-        )
-        100% 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+          var(--critical-banner-mobile-overhang-size) no-repeat,
+        radial-gradient(
+            circle at 0% 100%,
+            transparent var(--critical-banner-mobile-overhang-size),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -32136,21 +32128,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32158,11 +32135,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }
 
 .wds-expander-toggle {

package/src/navigationOption/NavigationOption.tsx

@@ -6,6 +6,9 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
+/**
+ * @deprecated Use ListItem and associated typings
+ */
 export type NavigationOptionProps = OptionProps;
 
 /**

package/src/navigationOption/index.ts

@@ -1 +1,3 @@
 export { default } from './NavigationOption';
+
+export type { NavigationOptionProps } from './NavigationOption';

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Children } from 'react';
 
+/**
+ * @deprecated Use List and ListItem and associated typings
+ */
 export interface NavigationOptionListProps {
   children: React.ReactNode;
 }

package/src/nudge/index.ts

@@ -1 +1,3 @@
 export { default } from './Nudge';
+
+export type { Props as NudgeProps, OptionalId as NudgeOptionalId, RequiredPersistProps as NudgeRequiredPersistProps } from './Nudge';

package/src/phoneNumberInput/index.ts

@@ -1 +1,3 @@
 export { default } from './PhoneNumberInput';
+
+export type { PhoneNumberInputProps } from './PhoneNumberInput';

package/src/promoCard/index.ts

@@ -1,2 +1,10 @@
 export { default } from './PromoCard';
 export { default as PromoCardGroup } from './PromoCardGroup';
+
+export type {
+  PromoCardCommonProps,
+  PromoCardLinkProps,
+  PromoCardCheckedProps,
+  PromoCardProps,
+} from './PromoCard';
+export type { PromoCardGroupProps } from './PromoCardGroup';

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

@@ -66,10 +66,7 @@ Screen readers announce the banner content whenever:
 
 ## Reduced Motion
 
-`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
-
-- the entry animation that reveals the banner from above when it first appears
-- the collapse and expand animation used when the user toggles the banner content
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show the collapse and expand animation used when the user toggles the banner content.
 
 The same content is still rendered and announced. Reduced motion only removes the visual movement.
 

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -127,29 +127,22 @@
   container-type: inline-size;
   inline-size: 100%;
 }
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
-}
 @container critical-banner-overhang (max-width: 600px) {
-  .wds-critical-banner__entry-mask {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
     --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat,
-      radial-gradient(
-          circle at 0% 100%,
-          transparent var(--critical-banner-mobile-overhang-size),
-          #000 var(--critical-banner-mobile-overhang-size)
-        )
-        100% 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+          var(--critical-banner-mobile-overhang-size) no-repeat,
+        radial-gradient(
+            circle at 0% 100%,
+            transparent var(--critical-banner-mobile-overhang-size),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -162,19 +155,6 @@
     mask: var(--critical-banner-overhang-mask);
   }
 }
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -182,9 +162,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -151,40 +151,30 @@
   }
 }
 
-// Entry animation: after a 500ms delay, reveal the already-positioned banner
-// over 400ms. The mask clips only during the reveal, then becomes visible so the
-// overhang and actions are not clipped after the animation.
 .wds-critical-banner-overhang-query {
   container-name: critical-banner-overhang;
   container-type: inline-size;
   inline-size: 100%;
-}
-
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
 
   @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
-    --critical-banner-mobile-overhang-size: 32px;
-    --critical-banner-overhang-mask:
-      radial-gradient(
-          circle at 100% 100%,
-          transparent var(--critical-banner-mobile-overhang-size),
-          #000 var(--critical-banner-mobile-overhang-size)
-        )
-        0 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat,
-      radial-gradient(
-          circle at 0% 100%,
-          transparent var(--critical-banner-mobile-overhang-size),
-          #000 var(--critical-banner-mobile-overhang-size)
-        )
-        100% 0 / var(--critical-banner-mobile-overhang-size)
-        var(--critical-banner-mobile-overhang-size) no-repeat;
-
     .wds-critical-banner-overhang {
+      --critical-banner-mobile-overhang-size: 32px;
+      --critical-banner-overhang-mask:
+        radial-gradient(
+            circle at 100% 100%,
+            transparent var(--critical-banner-mobile-overhang-size),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          0 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat,
+        radial-gradient(
+            circle at 0% 100%,
+            transparent var(--critical-banner-mobile-overhang-size),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+
       margin-bottom: var(--critical-banner-mobile-overhang-size);
 
       &::after {
@@ -203,22 +193,6 @@
   }
 }
 
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
-
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -227,10 +201,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { useState, useEffect, useRef, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
@@ -137,29 +137,6 @@ const hiddenArgTypes = {
   'data-testid': { table: { disable: true } },
 } as const;
 
-const AnimatedEntryPreview = (args: CriticalBannerProps) => {
-  const { id = 'animated-entry' } = args;
-  const [bannerInstance, setBannerInstance] = useState(0);
-  const animatedBanner = useMemo(
-    () => ({
-      ...args,
-      id: `${id}-${bannerInstance}`,
-    }),
-    [args, bannerInstance, id],
-  );
-
-  return (
-    <>
-      <CriticalBanner key={animatedBanner.id} {...animatedBanner} />
-      <div className="p-t-3">
-        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
-          Replay
-        </Button>
-      </div>
-    </>
-  );
-};
-
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -608,25 +585,6 @@ export const MobileOverhang: Story = {
   },
 };
 
-/**
- * Mobile-only entry animation: the banner reveals from above.
- */
-export const AnimatedEntry: Story = {
-  args: {
-    title: 'Your account is restricted.',
-    description: 'Review your personal details to get your account active again.',
-    action: { label: 'Review details', onClick: fn() },
-  },
-  argTypes: hiddenArgTypes,
-  render: (args) => <AnimatedEntryPreview {...args} />,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      canvas: { sourceState: 'hidden' },
-    },
-  },
-};
-
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.

package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx

@@ -21,7 +21,6 @@ const wait = async (ms: number) =>
   });
 
 const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
-const ENTRY_ANIMATION_DURATION = 950; // 500ms delay + 400ms animation + 50ms buffer
 
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
@@ -198,7 +197,6 @@ export const BackgroundIsNotTransparent: Story = {
 
     if (scrollContainer) {
       scrollContainer.scrollTop = 250;
-      await wait(ENTRY_ANIMATION_DURATION);
     }
   },
   ...withVariantConfig(['mobile'], {
@@ -208,25 +206,6 @@ export const BackgroundIsNotTransparent: Story = {
   }),
 };
 
-/** Mobile entry animation visual regression test. */
-export const AnimatedEntryMobile: Story = {
-  render: function Render() {
-    return (
-      <CriticalBanner
-        sentiment="negative"
-        title="Your account is restricted."
-        description="Review your personal details to get your account active again."
-        action={{ label: 'Review details', onClick: fn() }}
-      />
-    );
-  },
-  ...withVariantConfig(['mobile'], {
-    parameters: {
-      chromatic: { pauseAnimationAtEnd: true },
-    },
-  }),
-};
-
 /**
  * Tests keyboard navigation and interaction:
  * - Tab focuses the first chevron toggle button

package/src/prompt/CriticalBanner/CriticalBanner.test.tsx

@@ -15,7 +15,7 @@ describe('CriticalBanner', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
-  it('applies mobile overhang classes by default', () => {
+  it('renders mobile overhang markup without entry animation markup', () => {
     const { container } = render(
       <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
     );
@@ -23,15 +23,7 @@ describe('CriticalBanner', () => {
     expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
-  });
-
-  it('wraps the banner in the css entry animation structure', () => {
-    const { container } = render(
-      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
-    );
-
-    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-mask')).not.toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).not.toBeInTheDocument();
   });
 });

package/src/prompt/CriticalBanner/CriticalBanner.tsx

@@ -179,11 +179,7 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      <div className="wds-critical-banner-overhang-query">
-        <div className="wds-critical-banner__entry-mask">
-          <div className="wds-critical-banner__entry-track">{bannerSurface}</div>
-        </div>
-      </div>
+      <div className="wds-critical-banner-overhang-query">{bannerSurface}</div>
     </LiveRegion>
   );
 };

package/src/select/Select.tsx

@@ -98,6 +98,9 @@ const getUniqueIdForOption = (parentId: string | undefined, option: SelectItem |
   return `option-${parentId ?? ''}-${uniqueOptionId}`;
 };
 
+/**
+ * @deprecated Use SelectInput and associated typings
+ */
 export interface SelectProps {
   placeholder?: string;
   id?: string;

package/src/snackbar/index.ts

@@ -1 +1,4 @@
 export { default as Snackbar } from './Snackbar';
+
+export type { SnackbarProps } from './Snackbar';
+export type { SnackbarProviderProps } from './SnackbarProvider';

package/src/ssr.test.tsx

@@ -92,9 +92,7 @@ describe('Server side rendering', () => {
 
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
-    actionPrimary: { label: 'Action', onClick: jest.fn(), href: '#' },
     currencies: [],
-    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],
@@ -184,7 +182,11 @@ describe('Server side rendering', () => {
   // Override props in case of name collision.
   const overrideProps: Partial<Record<keyof ExposedLibraryItemsType, Record<string, unknown>>> = {
     Logo: { size: 16 },
-    ActionPrompt: { action: { label: 'Action', onClick: jest.fn(), href: '#' } },
+    BadgeAssets: { status: undefined },
+    ActionPrompt: {
+      actionPrimary: { label: 'Action', onClick: jest.fn(), href: '#' },
+      action: { label: 'Action', onClick: jest.fn(), href: '#' },
+    },
     Alert: { children: undefined, message: 'Fluffy kittens', size: undefined },
     Card: { isExpanded: true },
     CheckboxButton: { children: undefined, onChange: jest.fn() },
@@ -193,6 +195,7 @@ describe('Server side rendering', () => {
     TextareaWithDisplayFormat: { displayPattern: '**-**' },
     Sticky: { position: 'top' },
     MoneyInput: { selectedCurrency: { currency: 'EUR' } },
+    ExpressiveMoneyInput: { currencySelector: { options: [] } },
     Tabs: { selected: 1, onTabSelect: jest.fn() },
     Markdown: { children: '# Markdown string' },
     SnackbarConsumer: {

package/src/statusIcon/index.ts

@@ -1,2 +1,2 @@
 export { default } from './StatusIcon';
-export type { StatusIconProps } from './StatusIcon';
+export type { StatusIconProps, StatusIconSentiment } from './StatusIcon';

package/src/table/index.ts

@@ -1,11 +1,14 @@
 export { default } from './Table';
 export type { TableProps } from './Table';
-export type { TableRowType, TableRowClickableType } from './TableRow';
-export type { TableHeaderType } from './TableHeader';
+export type { TableRowType, TableRowClickableType, TableRowProps } from './TableRow';
+export type { TableHeaderType, TableHeaderProps } from './TableHeader';
 export type {
   TableCellLeading,
   TableCellText,
   TableCellCurrency,
   TableCellStatus,
   TableCellType,
+  TableCellMedia,
+  TableCellProps,
 } from './TableCell';
+export type { TableStatusTextProps } from './TableStatusText';

package/src/tabs/index.ts

@@ -1,2 +1,5 @@
 export { default } from './Tabs';
 export type { TabItem, TabsProps } from './Tabs';
+export type { TabProps } from './Tab';
+export type { TabListProps } from './TabList';
+export type { TabPanelProps } from './TabPanel';

package/src/tile/index.ts

@@ -1 +1,2 @@
 export { default } from './Tile';
+export type { TileProps } from './Tile';

package/src/uploadInput/index.ts

@@ -1 +1,3 @@
 export { default } from './UploadInput';
+
+export type { UploadInputProps } from './UploadInput';

package/build/avatarWrapper/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var AvatarWrapper = require('./AvatarWrapper.js');
-
-
-
-exports.default = AvatarWrapper.default;
-//# sourceMappingURL=index.js.map

package/build/avatarWrapper/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/build/avatarWrapper/index.mjs

@@ -1,6 +0,0 @@
-import AvatarWrapper from './AvatarWrapper.mjs';
-
-
-
-export { AvatarWrapper as default };
-//# sourceMappingURL=index.mjs.map

package/build/avatarWrapper/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}