@transferwise/components 46.155.0 → 46.156.0

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -1,10 +1,10 @@
 import { formatAmount } from '@transferwise/formatting';
 import { clsx } from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';
 import { useFocus } from '../hooks/useFocus';
 import { useInputStyle } from '../hooks/useInputStyle';
@@ -19,7 +19,7 @@ import {
   isInputPossiblyOverflowing,
 } from './utils';
 
-type Props = {
+type AmountInputProps = {
   id: string;
   describedById?: string;
   amount?: number | null;
@@ -38,7 +38,7 @@ export const AmountInput = ({
   onChange,
   onFocusChange,
   loading,
-}: Props) => {
+}: AmountInputProps) => {
   const intl = useIntl();
   const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
 

package/src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx

@@ -1,4 +1,4 @@
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'motion/react';
 import type { ReactNode } from 'react';
 
 interface Props {

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 interface Props {
   shouldShow: boolean;

package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx

@@ -5,7 +5,7 @@ import {
   SelectInputOptionContent,
   SelectInputTriggerButton,
 } from '../../Inputs/SelectInput';
-import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { CurrencyType, ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import {
@@ -34,7 +34,7 @@ export interface CurrencySection {
 
 export type CurrencyOptions = CurrencySection[];
 
-export type Props = {
+export type CurrencySelectorProps = {
   id: string;
   labelId: string;
   options?: CurrencyOptions;
@@ -53,7 +53,7 @@ export const CurrencySelector = ({
   addons,
   onOpen,
   onSearchChange,
-}: Props) => {
+}: CurrencySelectorProps) => {
   const intl = useIntl();
 
   const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.test.tsx

@@ -2,7 +2,7 @@ import { screen, render, mockMatchMedia, mockResizeObserver, waitFor } from '../
 import { Sentiment } from '../common';
 
 import ExpressiveMoneyInput from './ExpressiveMoneyInput';
-import type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
 import { Confetti } from '@transferwise/icons';
 
 const defaultProps: ExpressiveMoneyInputProps = {

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -1,12 +1,9 @@
 import Body from '../Body';
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useId, type ReactNode } from 'react';
 
-import {
-  type Props as CurrencySelectorProps,
-  CurrencySelector,
-} from './CurrencySelector/CurrencySelector';
+import { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';
 import { CommonProps } from '../common';
 import { AmountInput } from './AmountInput/AmountInput';
 import { Chevron } from './Chevron/Chevron';
@@ -26,7 +23,7 @@ type CustomCurrencySelectorInstanceType = {
 type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
   CustomCurrencySelectorInstanceType;
 
-export type Props = {
+export type ExpressiveMoneyInputProps = {
   label?: ReactNode;
   currencySelector?: CurrencySelectorType;
   amount?: AmountType;
@@ -65,7 +62,7 @@ export type Props = {
  * direct contributions by consuming product teams are highly encouraged.
  *
  * > ⚠️ **Prerequisite:** <br />The component depends on the
- * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * [motion](https://www.npmjs.com/package/motion) package, which has been
  * deliberately excluded from the Design System bundle and kept as an opt-in only.
  * **Make sure to add it to your project dependencies.**
  */
@@ -81,7 +78,7 @@ export default function ExpressiveMoneyInput({
   autoFocus,
   loading,
   onFocusChange,
-}: Props) {
+}: ExpressiveMoneyInputProps) {
   const inputId = useId();
   const labelId = useId();
   const customAlertId = useId();

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.story.tsx

@@ -19,7 +19,7 @@ import Modal from '../../Modal';
 import ListItem from '../../ListItem';
 import List from '../../List';
 import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '..';
-import type { Props as CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
+import type { CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
 
 const getCurrencySelectorProps = ({
   logEvents = false,

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.test.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
   component: ExpressiveMoneyInput,

package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts

@@ -6,7 +6,7 @@ import {
   useLayoutEffect,
   useState,
 } from 'react';
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 type InputStyleObject = {
   value: string;

package/src/ExpressiveMoneyInput/index.ts

@@ -1,2 +1,2 @@
-export type { Props as ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
+export type { ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
 export { default } from './ExpressiveMoneyInput';

package/src/IconButton/IconButton.tsx

@@ -3,7 +3,7 @@ import { PrimitiveAnchor, PrimitiveButton } from '../Primitives';
 import Circle from '../common/Circle';
 import { clsx } from 'clsx';
 
-export type Props = {
+export type IconButtonProps = {
   /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /** @default 'primary' */
@@ -27,7 +27,7 @@ const IconButton = forwardRef(function IconButton(
     priority = 'primary',
     type = 'default',
     ...props
-  }: Props,
+  }: IconButtonProps,
   ref,
 ) {
   const isLink = href !== '#';

package/src/IconButton/_stories/IconButton.story.tsx

@@ -18,7 +18,7 @@ import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import IconButton, { Props } from '../IconButton';
+import IconButton, { type IconButtonProps } from '../IconButton';
 import SentimentSurface from '../../SentimentSurface';
 
 /**
@@ -46,7 +46,7 @@ export default {
 
 type Story = StoryObj<typeof IconButton>;
 
-const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: IconButtonProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 /**
  * Explore size, priority, type, and disabled state via the controls panel.
@@ -107,7 +107,7 @@ export const Priority: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority="primary" type={args.type} aria-label="Primary" onClick={fn()}>
         <Plus />
@@ -152,7 +152,7 @@ export const Type: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority={args.priority} type="default" aria-label="Default" onClick={fn()}>
         <Plus />
@@ -195,7 +195,7 @@ export const Size: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       {sizes.map((size) => (
         <div
@@ -254,7 +254,7 @@ export const Disabled: Story = {
     target: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton disabled priority={args.priority} type={args.type} aria-label="Disabled">
       <Plus />
     </IconButton>
@@ -284,7 +284,7 @@ export const AsAnchor: Story = {
     disabled: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton {...args} aria-label="External link">
       <ArrowLeft />
     </IconButton>
@@ -305,7 +305,7 @@ export const SentimentAwareness: Story = {
       options: [16, 24, 32, 40, 48, 56, 72],
     },
   },
-  render: (args: Props) => {
+  render: (args: IconButtonProps) => {
     const priorities = [
       { key: 'primary', label: 'primary' },
       { key: 'secondary', label: 'secondary' },

package/src/IconButton/index.ts

@@ -1,2 +1,2 @@
-export type { Props as IconButtonProps } from './IconButton';
+export type { IconButtonProps } from './IconButton';
 export { default } from './IconButton';

package/src/Link/Link.tsx

@@ -8,7 +8,7 @@ import { LinkLarge, LinkDefault, Typography } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps &
+export type LinkProps = PrimitiveAnchorProps &
   Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -26,7 +26,7 @@ const Link = ({
   onClick,
   disabled,
   ...props
-}: Props) => {
+}: LinkProps) => {
   const { formatMessage } = useIntl();
   const isButton = Boolean(onClick) && href === undefined;
   const isBlank = target === '_blank';

package/src/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { Props as LinkProps } from './Link';
+export type { LinkProps } from './Link';

package/src/Markup/Markup.css

@@ -0,0 +1,28 @@
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+.wds-markup-paragraph {
+  margin: 0;
+}

package/src/Markup/Markup.injection.test.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+
+import { render } from '../test-utils';
+
+import { Markup } from './Markup';
+
+/**
+ * Proof of Concept: Markup Injection via Attacker-Controlled Data
+ *
+ * These tests demonstrate Laszlo's concern: when untrusted data (e.g. a payee name,
+ * company name, or any string from an external source) is interpolated into a markup
+ * template string, the attacker can break out of their structural context and inject
+ * arbitrary allowed markup — links, emphasis, etc.
+ *
+ * This is NOT about XSS (script execution is blocked). It's about content spoofing
+ * and phishing within trusted UI.
+ */
+describe('Markup injection via attacker-controlled data', () => {
+  describe('the vulnerability: structural injection', () => {
+    it('default allowedHrefs blocks injected external links', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // The default allowlist blocks external domains — the link is NOT rendered
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).not.toBeInTheDocument();
+
+      // But the structural injection still works (emphasis renders)
+      const injectedEmphasis = container.querySelector('.wds-markup-emphasis--important');
+      expect(injectedEmphasis).toBeInTheDocument();
+      expect(injectedEmphasis).toHaveTextContent('ACTION REQUIRED: Verify your identity');
+    });
+
+    it('injected external links render when allowLinks="all"', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup allowLinks="all">{template}</Markup>);
+
+      // With allowLinks="all", the link renders — demonstrating the structural injection
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).toBeInTheDocument();
+    });
+
+    it('default allowedHrefs blocks phishing links in paragraph injection', () => {
+      const attackerNote =
+        'Thanks!</p>' +
+        '<p><important>Your account has been compromised. ' +
+        'Contact support at </important>' +
+        '<link href="https://phishing.example.com">this secure link</link></p>' +
+        '<p>';
+
+      const template = `<p>Note from sender: ${attackerNote}</p>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      const phishingLink = container.querySelector('a[href="https://phishing.example.com"]');
+      expect(phishingLink).not.toBeInTheDocument();
+    });
+
+    it('attacker can inject misleading accessibility labels', () => {
+      const attackerValue =
+        'normal text</strong>' +
+        '<strong accessibilityLabel="Security alert: click to verify">' +
+        '<link href="https://evil.example.com">here</link>' +
+        '</strong>' +
+        '<strong>';
+
+      const template = `Your balance: <strong>${attackerValue}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      const misleadingElement = container.querySelector(
+        '[aria-label="Security alert: click to verify"]',
+      );
+      expect(misleadingElement).toBeInTheDocument();
+    });
+  });
+
+  describe('what IS blocked (XSS / script execution)', () => {
+    it('cannot inject arbitrary HTML elements', () => {
+      const xssAttempt = '<img src=x onerror=alert(1)>';
+      const template = `Hello <strong>${xssAttempt}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // <img> is not in the allow-list, so it's rendered as text
+      expect(container.querySelector('img')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent(/<img src=x onerror=alert\(1\)>/);
+    });
+
+    it('cannot inject script tags', () => {
+      const xssAttempt = '<script>alert("xss")</script>';
+      const template = `Hello <strong>${xssAttempt}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      expect(container.querySelector('script')).not.toBeInTheDocument();
+    });
+
+    it('blocks javascript: URLs in links', () => {
+      // Even if attacker injects a link, javascript: URLs are blocked
+      const attack = 'click</strong><link href="javascript:alert(1)">me</link><strong>';
+      const template = `<strong>${attack}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // The link renders but without the dangerous href (falls back to Fragment)
+      expect(container.querySelector('a[href*="javascript"]')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('the general nature of this problem', () => {
+    it('is identical to HTML injection via innerHTML', () => {
+      // This is the same class of bug — mixing code and data in a string
+      const attackerName = '<b>URGENT</b>';
+      const div = document.createElement('div');
+      div.innerHTML = `Hello ${attackerName}`;
+
+      // The attacker's data became structure
+      expect(div.querySelector('b')).not.toBeNull();
+      expect(div.querySelector('b')!).toHaveTextContent('URGENT');
+    });
+
+    it('react JSX prevents this by design', () => {
+      // In contrast, React treats variables as pure data — never as structure
+      const attackerName = '<strong>URGENT</strong>';
+
+      const { container } = render(<span>Hello {attackerName}</span>);
+
+      // React escapes the string — it renders as visible text, not as a <strong> tag
+      expect(container.querySelector('strong')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent(/<strong>URGENT<\/strong>/);
+    });
+
+    it('demonstrates why Markup reintroduces the problem React solved', () => {
+      // The same attacker string that React handles safely...
+      const attackerName = '<strong>URGENT: Call +44 123 456 789 NOW</strong>';
+
+      // ...becomes dangerous when passed through Markup's string parser
+      const { container } = render(<Markup>{`Hello ${attackerName}`}</Markup>);
+
+      // The attacker's data has been promoted to structure
+      const injected = container.querySelector('strong');
+      expect(injected).toBeInTheDocument();
+      expect(injected).toHaveTextContent('URGENT: Call +44 123 456 789 NOW');
+    });
+  });
+});

package/src/Markup/Markup.less

@@ -0,0 +1,29 @@
+.wds-markup-emphasis {
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+
+.wds-markup-emphasis--important {
+  color: var(--color-content-primary);
+}
+
+.wds-markup-emphasis--positive {
+  color: var(--color-content-positive);
+}
+
+.wds-markup-emphasis--negative {
+  color: var(--color-content-negative);
+}
+
+.wds-markup-strong {
+  font-weight: var(--font-weight-semi-bold);
+}
+
+/// @see https://www.webaxe.org/strikethrough-html-accessibility/
+.wds-markup-strikethrough {
+  text-decoration: line-through;
+}
+
+.wds-markup-paragraph {
+  margin: 0;
+}