@transferwise/components 46.101.0 → 46.103.0

package/src/button/Button.spec.tsx

@@ -202,6 +202,24 @@ describe('Button', () => {
             expect(button).not.toHaveAttribute('href');
           });
         });
+
+        describe('content id', () => {
+          it('should not set id for content by default', () => {
+            const { container } = render(<Button v2>clickMe</Button>);
+
+            expect(container.querySelector('[id$="_content"]')).not.toBeInTheDocument();
+          });
+
+          it('should set id for content by default if `id` is passed as a button prop', () => {
+            const { container } = render(
+              <Button v2 id="myId">
+                clickMe
+              </Button>,
+            );
+
+            expect(container.querySelector('#myId_content')).toBeInTheDocument();
+          });
+        });
       });
     });
   });

package/src/button/Button.story.tsx

@@ -4,7 +4,7 @@ import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';
 import type { ButtonProps, ButtonPriority } from './Button.types';
-import { storyConfig } from '../test-utils';
+import { lorem20, storyConfig } from '../test-utils';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -503,9 +503,14 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <Button {...props} {...previewProps}>
-        Full-width button
-      </Button>
+      <div className="d-flex flex-column gap-y-1">
+        <Button {...props} {...previewProps}>
+          Full-width button
+        </Button>
+        <Button {...props} {...previewProps}>
+          {lorem20}
+        </Button>
+      </div>
     );
   },
   argTypes: {

package/src/button/Button.tsx

@@ -62,7 +62,11 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
             data-testid="button-loader-indicator"
           />
         )}
-        <span className="wds-Button-label" aria-hidden={loading}>
+        <span
+          className="wds-Button-label"
+          id={props.id ? `${props.id}_content` : undefined}
+          aria-hidden={loading}
+        >
           {size === 'lg' ? (
             <span className="wds-Button-labelText">{children}</span>
           ) : (

package/src/button/Button.types.ts

@@ -5,7 +5,7 @@ export type ButtonSentiment = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'secondary-neutral' | 'tertiary';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-type ButtonAddonIcon = {
+export type ButtonAddonIcon = {
   type: 'icon';
   value: ReactNode;
 };

package/src/button/index.ts

@@ -1,5 +1,5 @@
 export { default } from './Button.resolver';
-export type { ButtonProps as NewButtonProps } from './Button.types';
+export type { ButtonProps as NewButtonProps, ButtonAddonIcon } from './Button.types';
 
 // export legacy button props for backwards compatibility with legacy Button interface
 // delete this when migration to new Button is done (or aleast no more deep imports, use following query)

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -29,21 +29,40 @@ export const Basic: Story = {
   },
 };
 
+/**
+ * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
+ * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
+ * It is used to indicate a mixed state, where some but not all items are selected, but does not
+ * change the `checked` state of the input itself – it remains either checked or unchecked.
+ *
+ * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
+ */
 export const Indeterminate: Story = {
   args: {
-    'aria-label': 'Group checkbox with indeterminate state',
     indeterminate: true,
   },
   render: (args) => {
-    const [indeterminate, setIndeterminate] = useState(true);
+    const [checked1, setChecked1] = useState<boolean | undefined>(false);
+    const [checked2, setChecked2] = useState<boolean | undefined>(true);
 
     return (
-      <CheckboxButton
-        {...args}
-        checked
-        indeterminate={indeterminate}
-        onChange={() => setIndeterminate(!indeterminate)}
-      />
+      <>
+        <CheckboxButton
+          {...args}
+          checked={checked1}
+          indeterminate={args.indeterminate}
+          aria-label="Initially disabled checkbox with indeterminate state"
+          onChange={() => setChecked1((current) => !current)}
+        />
+
+        <CheckboxButton
+          {...args}
+          checked={checked2}
+          indeterminate={args.indeterminate}
+          aria-label="Initially enabled checkbox with indeterminate state"
+          onChange={() => setChecked2((current) => !current)}
+        />
+      </>
     );
   },
 };

package/src/common/RadioButton/RadioButton.tsx

@@ -8,6 +8,8 @@ export interface RadioButtonProps<T extends string | number = string> {
   disabled?: boolean;
   value?: T;
   readOnly?: boolean;
+  className?: string;
+  'aria-describedby'?: string;
 }
 
 export default function RadioButton<T extends string | number = ''>({
@@ -18,17 +20,20 @@ export default function RadioButton<T extends string | number = ''>({
   onChange,
   disabled,
   readOnly,
+  className,
+  'aria-describedby': ariaDescribedBy,
 }: RadioButtonProps<T>) {
   return (
     <>
       <input
         type="radio"
-        className="sr-only"
+        className={clsx('sr-only', className)}
         id={id}
         value={value}
         name={name}
         checked={checked}
         disabled={disabled || readOnly}
+        aria-describedby={ariaDescribedBy}
         onChange={() => {
           if (!checked) {
             onChange?.(value);

package/src/common/initials.spec.tsx

@@ -39,4 +39,17 @@ describe('getInitials', () => {
   it('handles single character', () => {
     expect(getInitials('Q')).toBe('Q');
   });
+
+  it('handles names with (parenthesized) values', () => {
+    expect(getInitials('Squirrel (GBP)')).toBe('S');
+    expect(getInitials('Fantastic Squirrel (USD)')).toBe('FS');
+    expect(getInitials('Squirrel [GBP]')).toBe('S');
+    expect(getInitials('Fantastic Squirrel [USD]')).toBe('FS');
+    expect(getInitials('Squirrel {GBP}')).toBe('S');
+    expect(getInitials('Fantastic Squirrel {USD}')).toBe('FS');
+    expect(getInitials('Squirrel <GBP>')).toBe('S');
+    expect(getInitials('Fantastic Squirrel <USD>')).toBe('FS');
+    expect(getInitials('(Super) Fantastic Squirrel')).toBe('FS');
+    expect(getInitials('Super (Fantastic) Squirrel')).toBe('SS');
+  });
 });

package/src/common/initials.ts

@@ -5,6 +5,7 @@ export function getInitials(name: string) {
 
   const allInitials = name
     .split(' ')
+    .filter((part) => !startsWithParenthesis(part))
     .map((part) => part[0])
     .join('')
     .toUpperCase();
@@ -14,4 +15,8 @@ export function getInitials(name: string) {
   }
 
   return allInitials[0] + allInitials.slice(-1);
+
+  function startsWithParenthesis(part: string) {
+    return /^[({[<]/.test(part);
+  }
 }

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -6,7 +6,7 @@ import BottomSheet from '../../common/bottomSheet';
 import Option from '../../common/Option';
 import { Check, ChevronDown } from '@transferwise/icons';
 import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
-import { List } from '../../legacylistItem';
+import List from '../../list';
 
 export interface AnimatedLabelProps {
   activeLabel: number;

package/src/i18n/de.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
   "neptune.Upload.csSuccessText": "Fertig hochgeladen!",
   "neptune.Upload.csTooLargeMessage": "Bitte wähle eine Datei aus, die kleiner als {maxSize} MB ist",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Bitte stelle eine kleinere Datei zur Verfügung",
   "neptune.Upload.csWrongTypeMessage": "Dateityp wird nicht unterstützt. Bitte versuche es erneut mit einer anderen Datei",
   "neptune.Upload.psButtonText": "Abbrechen",
   "neptune.Upload.psProcessingText": "Wird hochgeladen...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Oder wähle eine Datei aus",
   "neptune.Upload.usDropMessage": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.Upload.usPlaceholder": "Zieh eine Datei in dieses Feld, die kleiner als {maxSize} MB ist",
+  "neptune.Upload.usPlaceholderNoLimit": "Ziehe eine Datei hierher",
   "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
   "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",

package/src/i18n/fr.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Échec du téléchargement. Veuillez réessayer",
   "neptune.Upload.csSuccessText": "Téléchargement terminé !",
   "neptune.Upload.csTooLargeMessage": "Veuillez fournir un fichier de moins de {maxSize} Mo",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Veuillez fournir un fichier plus petit",
   "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
   "neptune.Upload.psButtonText": "Annuler",
   "neptune.Upload.psProcessingText": "Téléchargement...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
   "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
+  "neptune.Upload.usPlaceholderNoLimit": "Glissez et déposez un fichier",
   "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
   "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",

package/src/i18n/hu.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Feltöltés sikertelen. Kérünk, próbáld újra",
   "neptune.Upload.csSuccessText": "Feltöltés sikeres",
   "neptune.Upload.csTooLargeMessage": "Kérünk, olyan fájlt küldj el, amely kisebb mint {maxSize}MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Kérünk, egy kisebb fájlt küldj",
   "neptune.Upload.csWrongTypeMessage": "Nem támogatott fájltípus. Kérünk, próbáld újra másik fájllal",
   "neptune.Upload.psButtonText": "Mégsem",
   "neptune.Upload.psProcessingText": "Feltöltés...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
   "neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
   "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize}MB méretű fájlt",
+  "neptune.Upload.usPlaceholderNoLimit": "Húzd át a fájlt",
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",

package/src/i18n/it.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Caricamento fallito. Per favore riprova",
   "neptune.Upload.csSuccessText": "Caricamento completato!",
   "neptune.Upload.csTooLargeMessage": "Carica un file inferiore a {maxSize}MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Fornisci un file più piccolo",
   "neptune.Upload.csWrongTypeMessage": "Formato del documento non supportato. Riprova con un formato diverso",
   "neptune.Upload.psButtonText": "Annulla",
   "neptune.Upload.psProcessingText": "Caricamento...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "O seleziona un documento",
   "neptune.Upload.usDropMessage": "Rilascia il documento per iniziare il caricamento",
   "neptune.Upload.usPlaceholder": "Trascina e rilascia un file inferiore a {maxSize}MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Trascina e rilascia un file",
   "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
   "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
   "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",

package/src/i18n/ja.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",
   "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
+  "neptune.Upload.csTooLargeNoLimitMessage": "より小さいファイルをアップロードしてください",
   "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
   "neptune.Upload.psButtonText": "キャンセルする",
   "neptune.Upload.psProcessingText": "アップロードしています…",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "またはファイルを選択する",
   "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
   "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ＆ドロップしてください",
+  "neptune.Upload.usPlaceholderNoLimit": "ファイルをドラッグ＆ドロップ",
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
   "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
   "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",

package/src/i18n/pl.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
   "neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
   "neptune.Upload.csTooLargeMessage": "Prosimy przesłać plik mniejszy niż {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Prosimy przesłać mniejszy plik",
   "neptune.Upload.csWrongTypeMessage": "Nieobsługiwany typ pliku. Spróbuj ponownie z innym plikiem",
   "neptune.Upload.psButtonText": "Anuluj",
   "neptune.Upload.psProcessingText": "Przesyłanie...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Lub wybierz plik",
   "neptune.Upload.usDropMessage": "Upuść plik, aby rozpocząć przesyłanie",
   "neptune.Upload.usPlaceholder": "Przeciągnij i upuść plik nie większy niż {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Przeciągnij i upuść plik",
   "neptune.UploadButton.allFileTypes": "Wszystkie typy plików",
   "neptune.UploadButton.dropFiles": "Upuść plik, żeby rozpocząć przesyłanie",
   "neptune.UploadButton.instructions": "{fileTypes}, mniejsze niż {size}MB",

package/src/i18n/pt.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Falha no envio. Por favor, tente novamente",
   "neptune.Upload.csSuccessText": "Envio concluído!",
   "neptune.Upload.csTooLargeMessage": "Por favor, envie um arquivo com menos de {maxSize}MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Forneça um arquivo menor",
   "neptune.Upload.csWrongTypeMessage": "Não trabalhamos com este tipo de arquivo. Por favor, tente novamente com um arquivo diferente",
   "neptune.Upload.psButtonText": "Cancelar",
   "neptune.Upload.psProcessingText": "Enviando...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Ou escolha um arquivo",
   "neptune.Upload.usDropMessage": "Arraste o arquivo para iniciar o envio",
   "neptune.Upload.usPlaceholder": "Selecione e envie um arquivo com menos de {maxSize}MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Arraste e solte um arquivo",
   "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
   "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
   "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",

package/src/i18n/ro.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
   "neptune.Upload.csSuccessText": "Încărcare completă!",
   "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Te rugăm să furnizezi un fișier mai mic",
   "neptune.Upload.csWrongTypeMessage": "Tipul de fișier nu a fost acceptat. Te rugăm să încerci din nou cu un alt fișier",
   "neptune.Upload.psButtonText": "Anulează",
   "neptune.Upload.psProcessingText": "Se încarcă...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Sau selectează un fișier",
   "neptune.Upload.usDropMessage": "Atașează fișierul pentru a începe încărcarea",
   "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier mai mic de {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Glisează și lipește un fișier",
   "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
   "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
   "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",

package/src/i18n/ru.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Загрузка не удалась. Пожалуйста, попробуйте снова",
   "neptune.Upload.csSuccessText": "Загрузка завершена!",
   "neptune.Upload.csTooLargeMessage": "Пожалуйста, загрузите файл размером менее {maxSize} Мб",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Пожалуйста, загрузите файл меньшего размера",
   "neptune.Upload.csWrongTypeMessage": "Тип файла не поддерживается. Пожалуйста, попробуйте еще раз с другим файлом",
   "neptune.Upload.psButtonText": "Отменить",
   "neptune.Upload.psProcessingText": "Загружаем...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Или выберите файл",
   "neptune.Upload.usDropMessage": "Перетащите файл, чтобы начать загрузку",
   "neptune.Upload.usPlaceholder": "Перетащите файл размером не более {maxSize} Mб",
+  "neptune.Upload.usPlaceholderNoLimit": "Перетащите файл",
   "neptune.UploadButton.allFileTypes": "Все типы файлов",
   "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
   "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",

package/src/i18n/tr.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
   "neptune.Upload.csSuccessText": "Yükleme tamamlandı!",
   "neptune.Upload.csTooLargeMessage": "Lütfen {maxSize} MB'den küçük bir dosya sağlayın",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Lütfen daha küçük bir dosya gönderin",
   "neptune.Upload.csWrongTypeMessage": "Desteklenmeyen dosya biçimi. Lütfen başka bir dosyayla tekrar deneyin",
   "neptune.Upload.psButtonText": "İptal edin",
   "neptune.Upload.psProcessingText": "Yükleniyor...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Veya bir dosya seçin",
   "neptune.Upload.usDropMessage": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.Upload.usPlaceholder": "{maxSize} MB'den küçük bir dosya sürükleyin ve bırakın",
+  "neptune.Upload.usPlaceholderNoLimit": "Dosyayı sürükleyip bırakın",
   "neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
   "neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",

package/src/i18n/zh-CN.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",
   "neptune.Upload.csTooLargeMessage": "请提供一个小于 {maxSize} MB 的文件",
+  "neptune.Upload.csTooLargeNoLimitMessage": "请提供更小的文件。",
   "neptune.Upload.csWrongTypeMessage": "不支持该文件类型，请试试其他文件",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "正在上传…",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "或选择文件",
   "neptune.Upload.usDropMessage": "拖放文件开始上传",
   "neptune.Upload.usPlaceholder": "拖放一个不超过 {maxSize} MB 的文件",
+  "neptune.Upload.usPlaceholderNoLimit": "拖放文件",
   "neptune.UploadButton.allFileTypes": "所有文件类型",
   "neptune.UploadButton.dropFiles": "拖放文件开始上传",
   "neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",

package/src/i18n/zh-HK.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "上載失敗，請重試。",
   "neptune.Upload.csSuccessText": "上載完成！",
   "neptune.Upload.csTooLargeMessage": "請提供一個小於{maxSize}MB的檔案",
+  "neptune.Upload.csTooLargeNoLimitMessage": "請提供較小的檔案",
   "neptune.Upload.csWrongTypeMessage": "不支持檔案類型，請使用其他檔案重試",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "上載中...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "或者選擇一個檔案",
   "neptune.Upload.usDropMessage": "拖放檔案以開始上載",
   "neptune.Upload.usPlaceholder": "拖放一個不超過{maxSize}MB的檔案",
+  "neptune.Upload.usPlaceholderNoLimit": "拖放檔案",
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",

package/src/iconButton/IconButton.story.tsx

@@ -91,7 +91,7 @@ export const Basic: Story = {
           gridTemplate: `auto auto / repeat(6, min-content)`,
         }}
       >
-        {['Primary', 'Secondary', 'Tertiary', 'Text', 'Neg primary', 'Neg secondary'].map(
+        {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
           (variant) => (
             <Body type="body-default-bold">{variant}</Body>
           ),

package/src/iconButton/IconButton.tsx

@@ -12,7 +12,7 @@ export type Props = {
   Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
   Pick<
     HTMLAttributes<HTMLDivElement>,
-    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
+    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
   >;
 
 const IconButton = forwardRef(function IconButton(

package/src/image/Image.tsx

@@ -10,6 +10,9 @@ export interface ImageProps {
   onLoad?: () => void;
   onError?: () => void;
   className?: string;
+  /**
+   * Specifies the [loading behavior of the image](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading).
+   */
   loading?: 'lazy' | 'eager';
   stretch?: boolean;
   role?: string;

package/src/image/index.ts

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

package/src/index.ts

@@ -50,7 +50,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
-export type { ListProps, LegacyListItemProps } from './legacylistItem';
+export type { LegacyListItemProps } from './legacylistItem';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -108,6 +108,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ListProps } from './list';
 
 /**
  * Components
@@ -165,7 +166,7 @@ export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
 export { Label } from './label/Label';
 export { default as Link } from './link';
-export { List, default as LegacyListItem } from './legacylistItem';
+export { default as LegacyListItem } from './legacylistItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -209,6 +210,7 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
+export { default as List } from './list';
 
 /**
  * Hooks

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -2,11 +2,11 @@ import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button, IconButton } from '..';
+import { Button, IconButton, List } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import LegacyListItem, { List } from '.';
+import LegacyListItem from '.';
 
 export default {
   component: LegacyListItem,

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,7 +1,8 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import LegacyListItem, { List, type LegacyListItemProps } from '.';
+import LegacyListItem, { type LegacyListItemProps } from '.';
+import List from '../list';
 
 export default {
   component: LegacyListItem,

package/src/legacylistItem/index.ts

@@ -1,4 +1,2 @@
-export { List } from './List';
-export type { ListProps } from './List';
 export { default } from './LegacyListItem';
 export type { LegacyListItemProps } from './LegacyListItem';

package/src/list/List.spec.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '../test-utils';
+import List from './List';
+
+describe('List', () => {
+  it('should render content', () => {
+    render(
+      <List>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </List>,
+    );
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  describe('`as` prop', () => {
+    it('renders `ul` by default', () => {
+      render(<List>Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it('renders as `ol`', () => {
+      render(<List as="ol">Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLOListElement);
+    });
+
+    it('renders as `ul`', () => {
+      render(<List as="ul">Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it('renders as `div`', () => {
+      render(
+        <List as="div" data-testid="list">
+          Content
+        </List>,
+      );
+      expect(screen.getByTestId('list')).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  it('accepts custom classname', () => {
+    render(<List className="custom-class">Content</List>);
+    expect(screen.getByRole('list')).toHaveClass('custom-class');
+  });
+
+  it('accepts CSS style', () => {
+    render(<List style={{ color: 'red' }}>Content</List>);
+    expect(screen.getByRole('list')).toHaveStyle({ color: 'red' });
+  });
+});

package/src/list/List.story.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import LegacyListItem from '../legacylistItem';
+import List from './List';
+
+export default {
+  component: List,
+  title: 'Content/List',
+  tags: ['autodocs'],
+} satisfies Meta<typeof List>;
+
+type Story = StoryObj<typeof List>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <List {...args}>
+      <LegacyListItem title="First item" value="This is the first item." />
+      <LegacyListItem title="Second item" value="This is the second item." />
+    </List>
+  ),
+};

package/src/list/List.tsx

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+export interface ListProps {
+  as?: 'ul' | 'ol' | 'div';
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  id?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+export default function List({ as: Element = 'ul', className, ...props }: ListProps) {
+  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;
+}

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export type { ListProps } from './List';
+export { default } from './List';