@transferwise/components 0.0.0-experimental-7089f72 → 0.0.0-experimental-26e03bf

package/src/{calendarInput → dateLookup}/monthCalendar/MonthCalendar.tsx

@@ -2,7 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import messages from '../CalendarInput.messages';
+import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
@@ -12,7 +12,7 @@ interface MonthCalendarProps extends WrappedComponentProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder?: string;
+  placeholder: string;
   onSelect: () => void;
   onLabelClick: () => void;
   onViewDateUpdate: (date: { year?: number; month?: number }) => void;

package/src/{calendarInput → dateLookup}/monthCalendar/table/MonthCalendarTable.tsx

@@ -9,7 +9,7 @@ interface MonthCalendarTableProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder?: string;
+  placeholder: string;
   onSelect: (date: number) => void;
 }
 

package/src/{calendarInput → dateLookup}/tableLink/TableLink.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
-import messages from '../CalendarInput.messages';
+import messages from '../DateLookup.messages';
 
 interface TableLinkProps {
   item: number;

package/src/{calendarInput → dateLookup}/yearCalendar/YearCalendar.tsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import messages from '../CalendarInput.messages';
+import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
@@ -11,7 +11,7 @@ interface YearCalendarProps extends WrappedComponentProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder?: string;
+  placeholder: string;
   onSelect: () => void;
   onViewDateUpdate: (date: { year: number }) => void;
 }

package/src/{calendarInput → dateLookup}/yearCalendar/table/YearCalendarTable.tsx

@@ -9,7 +9,7 @@ interface YearCalendarTableProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder?: string;
+  placeholder: string;
   onSelect: (year: number) => void;
 }
 

package/src/index.ts

@@ -29,7 +29,6 @@ export type {
 export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
-export type { CalendarInputProps } from './calendarInput';
 export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
@@ -164,7 +163,6 @@ export { default as CriticalCommsBanner } from './criticalBanner';
 export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
-export { default as CalendarInput } from './calendarInput';
 export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {
@@ -28313,26 +28313,23 @@ button.np-option {
   }
 }
 
+.tw-date-lookup-menu {
+  width: 400px;
+}
+
 .tw-date-lookup-calendar {
   min-width: 300px;
   text-align: center;
   table-layout: fixed;
-  border: none;
   background-color: inherit;
 }
 
-.tw-date-lookup-calendar thead {
-  background-color: transparent;
-  background-color: initial;
-}
-
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
 
 .tw-date-lookup-calendar > tbody > tr > td {
-  border: none;
   padding: 4px;
   padding: var(--size-4);
 }
@@ -28410,8 +28407,20 @@ button.np-option {
   display: inline;
 }
 
-.tw-date-lookup-menu {
-  width: 400px;
+.np-theme-personal.tw-date-lookup-menu .table-bordered,
+.np-theme-personal .tw-date-lookup-menu .table-bordered {
+  border: none;
+}
+
+.np-theme-personal.tw-date-lookup-menu thead,
+.np-theme-personal .tw-date-lookup-menu thead {
+  background-color: transparent;
+  background-color: initial;
+}
+
+.np-theme-personal.tw-date-lookup-menu td,
+.np-theme-personal .tw-date-lookup-menu td {
+  border: none;
 }
 
 .np-date-trigger {

package/src/main.less

@@ -30,7 +30,6 @@
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";
-@import "./calendarInput/CalendarInput.less";
 @import "./dateLookup/DateLookup.less";
 @import "./dateLookup/dateTrigger/DateTrigger.less";
 @import "./decision/Decision.less";

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -6,6 +6,7 @@ import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwi
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
+import Link from '../../link';
 import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
 
 const withComponentGrid =
@@ -232,6 +233,47 @@ export const WithAction: StoryObj<InfoPromptProps> = {
   ),
 };
 
+/**
+ * The `description` prop accepts rich content (ReactNode), allowing inline interactive elements
+ * such as links that can trigger a popover.
+ *
+ * **Important**: If the description contains an interactive element, do not use the `action` prop
+ * simultaneously — InfoPrompt should have at most one interaction.
+ */
+export const WithRichDescription: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="neutral"
+        description={
+          <>
+            Your transfer is subject to our{' '}
+            <Link href="/fees" target="_blank" type="link-default">
+              fee schedule
+            </Link>
+            .
+          </>
+        }
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Verification Required"
+        description={
+          <>
+            Please{' '}
+            <Link href="/verify" type="link-default">
+              verify your identity
+            </Link>{' '}
+            to continue sending money.
+          </>
+        }
+      />
+    </>
+  ),
+};
+
 /**
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
  * Note: The component itself is not automatically removed - you must handle state management.

package/src/prompt/InfoPrompt/InfoPrompt.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, mockMatchMedia, render, screen, userEvent, waitFor } from '../../test-utils';
+import { act, fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { WDS_LIVE_REGION_DELAY_MS } from '../../common/constants';
 import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
 import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
 
@@ -15,11 +16,74 @@ describe('InfoPrompt', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   it('renders description', () => {
     render(<InfoPrompt {...defaultProps} />);
     expect(screen.getByText('Prompt description')).toBeInTheDocument();
   });
 
+  it('renders rich-content description (ReactNode)', () => {
+    render(
+      <InfoPrompt
+        description={
+          <>
+            See our <a href="/fees">fee schedule</a>.
+          </>
+        }
+      />,
+    );
+    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toHaveAttribute(
+      'href',
+      '/fees',
+    );
+  });
+
+  it('re-announces when rich-content description text changes', () => {
+    jest.useFakeTimers();
+
+    const { rerender } = render(
+      <InfoPrompt
+        description={
+          <>
+            See our <a href="/fees">fee schedule</a>.
+          </>
+        }
+      />,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
+    });
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('See our fee schedule.');
+
+    rerender(
+      <InfoPrompt
+        description={
+          <>
+            Read the updated <a href="/fees">pricing guide</a>.
+          </>
+        }
+      />,
+    );
+
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    act(() => {
+      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
+    });
+
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('Read the updated pricing guide.');
+  });
+
   it('renders title when provided', () => {
     render(<InfoPrompt {...defaultProps} title="Test Title" />);
     expect(screen.getByText('Test Title')).toBeInTheDocument();

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, useState } from 'react';
+import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';
 import { LiveRegion, Sentiment, Typography } from '../../common';
 import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
@@ -50,9 +50,10 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
      */
     title?: string;
     /**
-     * Description text for the prompt (required)
+     * Description content for the prompt (required). Accepts plain text or rich content (ReactNode).
+     * If the description contains an interactive element, the `action` prop must not be used simultaneously.
      */
-    description: string;
+    description: ReactNode;
     className?: string;
     /**
      * Sets the ARIA live region politeness level.
@@ -86,7 +87,17 @@ export const InfoPrompt = ({
   ...restProps
 }: InfoPromptProps) => {
   const [shouldFire, setShouldFire] = useState<boolean>();
-  const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');
+  const announceOnChange = [
+    title,
+    Children.toArray(description)
+      .map((child) =>
+        isValidElement<{ children?: ReactNode }>(child) ? child.props.children : child,
+      )
+      .join(''),
+    action?.label,
+  ]
+    .filter(Boolean)
+    .join('|');
   const statusIconSentiment =
     sentiment === 'success'
       ? Sentiment.POSITIVE

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {

package/build/calendarInput/CalendarInput.js

@@ -1,159 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-require('../common/theme.js');
-require('../common/direction.js');
-require('@transferwise/neptune-tokens');
-require('../common/propsValues/control.js');
-require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-var monthFormat = require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
-require('@transferwise/formatting');
-require('@transferwise/icons');
-require('clsx');
-require('react-intl');
-require('../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-var moveToWithinRange = require('../common/dateUtils/moveToWithinRange/moveToWithinRange.js');
-var isWithinRange = require('../common/dateUtils/isWithinRange/isWithinRange.js');
-var getDateView = require('../common/dateUtils/getDateView/getDateView.js');
-var DayCalendar = require('./dayCalendar/DayCalendar.js');
-var getStartOfDay = require('./getStartOfDay/getStartOfDay.js');
-var MonthCalendar = require('./monthCalendar/MonthCalendar.js');
-var YearCalendar = require('./yearCalendar/YearCalendar.js');
-
-const CalendarInput = ({
-  value,
-  min: minProp = null,
-  max: maxProp = null,
-  monthFormat: monthFormat$1 = monthFormat.MonthFormat.LONG,
-  placeholder,
-  onChange,
-  onSelect
-}) => {
-  const selectedDate = getStartOfDay.getStartOfDay(value);
-  const min = getStartOfDay.getStartOfDay(minProp);
-  const max = getStartOfDay.getStartOfDay(maxProp);
-  React.useEffect(() => {
-    if (selectedDate && !isWithinRange.isWithinRange(selectedDate, min, max)) {
-      onChange(moveToWithinRange.moveToWithinRange(selectedDate, min, max));
-    }
-  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
-  const dateView = getDateView.returnDateView(selectedDate, min, max);
-  const [viewMonth, setViewMonth] = React.useState(dateView.getMonth());
-  const [viewYear, setViewYear] = React.useState(dateView.getFullYear());
-  const [mode, setMode] = React.useState('day');
-  React.useEffect(() => {
-    const view = getDateView.returnDateView(selectedDate, min, max);
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setViewMonth(view.getMonth());
-    setViewYear(view.getFullYear());
-  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
-  const handleViewDateUpdate = React.useCallback(
-  // eslint-disable-next-line react-hooks/preserve-manual-memoization
-  ({
-    month,
-    year
-  }) => {
-    if (month !== undefined) setViewMonth(month);
-    if (year !== undefined) setViewYear(year);
-  }, []);
-  const switchToDays = React.useCallback(() => setMode('day'), []);
-  const switchToMonths = React.useCallback(() => setMode('month'), []);
-  const switchToYears = React.useCallback(() => setMode('year'), []);
-  const handleSelectedDateUpdate = React.useCallback(date => {
-    if (onSelect) {
-      onSelect(date);
-    } else {
-      onChange(date);
-    }
-  }, [onChange, onSelect]);
-  const adjustDate = React.useCallback((daysToAdd, monthsToAdd, yearsToAdd) => {
-    let date;
-    if (selectedDate) {
-      date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
-    } else {
-      date = getStartOfDay.getStartOfDay(new Date());
-    }
-    date &&= moveToWithinRange.moveToWithinRange(date, min, max);
-    if (date?.getTime() !== selectedDate?.getTime()) {
-      onChange(date);
-    }
-  }, [selectedDate, min, max, mode, onChange]);
-  const handleKeyDown = React.useCallback(event => {
-    switch (event.key) {
-      case 'ArrowLeft':
-        adjustDate(-1, -1, -1);
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        adjustDate(-7, -4, -4);
-        event.preventDefault();
-        break;
-      case 'ArrowRight':
-        adjustDate(1, 1, 1);
-        event.preventDefault();
-        break;
-      case 'ArrowDown':
-        adjustDate(7, 4, 4);
-        event.preventDefault();
-        break;
-    }
-  }, [adjustDate]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxRuntime.jsxs("div", {
-      onKeyDown: handleKeyDown,
-      children: [mode === 'day' && /*#__PURE__*/jsxRuntime.jsx(DayCalendar.default, {
-        selectedDate: selectedDate,
-        min: min,
-        max: max,
-        viewMonth: viewMonth,
-        viewYear: viewYear,
-        monthFormat: monthFormat$1,
-        onSelect: handleSelectedDateUpdate,
-        onLabelClick: switchToYears,
-        onViewDateUpdate: handleViewDateUpdate
-      }), mode === 'month' && /*#__PURE__*/jsxRuntime.jsx(MonthCalendar.default, {
-        selectedDate: selectedDate,
-        min: min,
-        max: max,
-        viewYear: viewYear,
-        ...(placeholder != null && {
-          placeholder
-        }),
-        onSelect: switchToDays,
-        onLabelClick: switchToYears,
-        onViewDateUpdate: handleViewDateUpdate
-      }), mode === 'year' && /*#__PURE__*/jsxRuntime.jsx(YearCalendar.default, {
-        selectedDate: selectedDate,
-        min: min,
-        max: max,
-        viewYear: viewYear,
-        ...(placeholder != null && {
-          placeholder
-        }),
-        onSelect: switchToMonths,
-        onViewDateUpdate: handleViewDateUpdate
-      })]
-    })
-  );
-};
-
-exports.default = CalendarInput;
-//# sourceMappingURL=CalendarInput.js.map