@transferwise/components 46.22.1 → 46.24.0

package/src/actionOption/ActionOption.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import { ReactChild, ReactElement } from 'react';
+import { ReactChild } from 'react';
 
 import ActionButton from '../actionButton';
 import { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';
 import Option from '../common/Option';
 
-type Props = {
+export type ActionOptionProps = {
   complex?: boolean;
   content?: ReactChild;
   disabled?: boolean;
@@ -32,7 +32,7 @@ const ActionOption = ({
   showMediaAtAllSizes,
   showMediaCircle,
   isContainerAligned,
-}: Props): ReactElement => {
+}: ActionOptionProps) => {
   const sharedProps = {
     media,
     title,

package/src/actionOption/index.ts

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

package/src/avatar/{Avatar.spec.js → Avatar.spec.tsx}

@@ -15,7 +15,7 @@ describe('Avatar', () => {
       </Avatar>,
     );
 
-    expect(screen.getByText('😎').parentElement.parentElement).toHaveClass(
+    expect(screen.getByText('😎')?.parentElement?.parentElement).toHaveClass(
       'tw-avatar tw-avatar--thumbnail tw-avatar--48',
     );
   });
@@ -29,23 +29,16 @@ describe('Avatar', () => {
       </Avatar>,
     );
 
-    expect(screen.getByText('💰').parentElement.parentElement).toHaveClass(
+    expect(screen.getByText('💰')?.parentElement?.parentElement).toHaveClass(
       'tw-avatar tw-avatar--emoji tw-avatar--24 tw-avatar--outlined',
     );
   });
 
   describe('branded avatar colors', () => {
-    it.each(getAvatarColorTestCases())(
-      'for seed of %s return background color of %s',
-      (key, color) => {
-        render(<Avatar backgroundColorSeed={key.toString()}>JS</Avatar>);
+    it.each(avatarColorTestCases)('for seed of %s return background color of %s', (item) => {
+      render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
 
-        expect(screen.getByText('JS')).toHaveStyle(`background-color: ${color.token}`);
-      },
-    );
+      expect(screen.getByText('JS')).toHaveStyle(`background-color: ${item.color.token}`);
+    });
   });
 });
-
-function getAvatarColorTestCases() {
-  return avatarColorTestCases.map(({ key, color }) => [key, color]);
-}

package/src/badge/{Badge.story.js → Badge.story.tsx}

@@ -24,7 +24,7 @@ export const ExampleBadgeCss = {
 
 export const Avatar = () => {
   const BadgeText = text('BadgeText', 'B');
-  const border = select('Border', [null, Theme.LIGHT, Theme.DARK]);
+  const border = select('Border', [undefined, Theme.LIGHT, Theme.DARK], Theme.LIGHT);
 
   return (
     <div>

package/src/badge/Badge.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import {
   Size,
@@ -25,7 +25,7 @@ const Badge = ({
   size = Size.SMALL,
   border = Theme.LIGHT,
   children,
-}: BadgeProps): ReactElement => {
+}: BadgeProps) => {
   const classes: string = classNames(
     'tw-badge',
     {

package/src/common/dateUtils/getFormatForLocale/getFormatForLocale.ts

@@ -0,0 +1,2 @@
+export const MDY = new Set(['en-US']);
+export const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);

package/src/common/dateUtils/index.ts

@@ -1,6 +1,7 @@
-export { getDayNames } from './getDayNames';
-export { moveToWithinRange } from './moveToWithinRange';
-export { isWithinRange } from './isWithinRange';
-export { getMonthNames } from './getMonthNames';
-export { isDateValid } from './isDateValid';
-export { isMonthAndYearFormat } from './isMonthAndYearFormat';
+export { getDayNames } from './getDayNames/getDayNames';
+export { moveToWithinRange } from './moveToWithinRange/moveToWithinRange';
+export { isWithinRange } from './isWithinRange/isWithinRange';
+export { getMonthNames } from './getMonthNames/getMonthNames';
+export { isDateValid } from './isDateValid/isDateValid';
+export { isMonthAndYearFormat } from './isMonthAndYearFormat/isMonthAndYearFormat';
+export { MDY, YMD } from './getFormatForLocale/getFormatForLocale';

package/src/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.ts

@@ -1,4 +1,4 @@
-import { validDateString } from '../isDateValid';
+import { validDateString } from '../isDateValid/isDateValid';
 
 export const isMonthAndYearFormat = (dateString: string) =>
   validDateString(dateString) && dateString.split('-').length < 3;

package/src/dateInput/DateInput.spec.js

@@ -1,11 +1,12 @@
 import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import { DateInput, Input } from '..';
+import { DateInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 const LOCALES = {
   jp: 'ja-JP',
+  us: 'en-US',
 };
 const DEFAULT_LOCALE = 'en-GB';
 const FEBRUARY_INDEX = 1;
@@ -182,24 +183,43 @@ describe('Date Input Component', () => {
   });
 
   describe('when locale is provided', () => {
-    it('shows day before month if locale not US', () => {
+    it('shows day before month if locale is GB', () => {
+      useIntl.mockReturnValue({
+        locale: DEFAULT_LOCALE,
+        formatMessage: (message) => message.defaultMessage,
+      });
+
       component = shallow(<DateInput {...props} />);
 
-      const labels = component.find('label');
-      expect(labels.at(0).find(Input).exists()).toBe(true);
-      expect(labels.at(1).find(Input).exists()).toBe(false);
+      expect(component.find('span').at(0).text()).toBe('Day');
+      expect(component.find('span').at(1).text()).toBe('Month');
+      expect(component.find('span').at(2).text()).toBe('Year');
     });
 
-    it('shows day before month if locale is JP', () => {
+    it('shows month before day if locale is US', () => {
+      useIntl.mockReturnValue({
+        locale: LOCALES.us,
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      component = shallow(<DateInput {...props} />);
+
+      expect(component.find('span').at(0).text()).toBe('Month');
+      expect(component.find('span').at(1).text()).toBe('Day');
+      expect(component.find('span').at(2).text()).toBe('Year');
+    });
+
+    it('shows year, month, day if locale is JP', () => {
       useIntl.mockReturnValue({
         locale: LOCALES.jp,
         formatMessage: (message) => message.defaultMessage,
       });
+
       component = shallow(<DateInput {...props} />);
 
-      const labels = component.find('label');
-      expect(labels.at(0).find(Input).exists()).toBe(false);
-      expect(labels.at(1).find(Input).exists()).toBe(true);
+      expect(component.find('span').at(0).text()).toBe('Year');
+      expect(component.find('span').at(1).text()).toBe('Month');
+      expect(component.find('span').at(2).text()).toBe('Day');
     });
   });
 

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
     monthLabel: 'Month select',
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
-    selectProps: {
-      placeholder: 'Month',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;

package/src/dateInput/DateInput.tsx

@@ -4,13 +4,11 @@ import { useIntl } from 'react-intl';
 
 import { Input, SelectInput, SelectInputProps, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
+import { getMonthNames, isDateValid, isMonthAndYearFormat, MDY, YMD } from '../common/dateUtils';
 
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
-const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-
 export interface DateInputProps {
   'aria-label'?: string;
   'aria-labelledby'?: string;
@@ -243,7 +241,59 @@ const DateInput = ({
     'col-sm-5': !monthYearOnly,
   });
 
-  const monthBeforeDay = MonthBeforeDay.has(locale);
+  const getMonth = () => {
+    return <div className={monthWidth}>{getSelectElement()}</div>;
+  };
+
+  const getDay = () => {
+    return (
+      <div className="col-sm-3">
+        <label>
+          <span className="sr-only">{dayLabel}</span>
+          <div className={`input-group input-group-${size}`}>
+            <Input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              name="day"
+              autoComplete={dayAutoComplete}
+              value={day || ''}
+              placeholder={placeholders?.day}
+              disabled={disabled}
+              min={1}
+              onChange={(event) => handleDayChange(event)}
+            />
+          </div>
+        </label>
+      </div>
+    );
+  };
+
+  const getYear = () => {
+    return (
+      <div className="col-sm-4">
+        <label>
+          <span className="sr-only">{yearLabel}</span>
+          <div className={`input-group input-group-${size}`}>
+            <Input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              name="year"
+              autoComplete={yearAutoComplete}
+              placeholder={placeholders?.year}
+              value={year || ''}
+              disabled={disabled}
+              min={1}
+              onChange={(event) => handleYearChange(event)}
+            />
+          </div>
+        </label>
+      </div>
+    );
+  };
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
 
   return (
     <div
@@ -260,50 +310,42 @@ const DateInput = ({
       }
     >
       <div className="row">
-        {monthBeforeDay && <div className={monthWidth}>{getSelectElement()}</div>}
-        {!monthYearOnly && (
-          <div className="col-sm-3">
-            <label>
-              <span className="sr-only">{dayLabel}</span>
-              <div className={`input-group input-group-${size}`}>
-                <Input
-                  type="text"
-                  inputMode="numeric"
-                  pattern="[0-9]*"
-                  name="day"
-                  autoComplete={dayAutoComplete}
-                  value={day || ''}
-                  placeholder={placeholders.day}
-                  disabled={disabled}
-                  min={1}
-                  onChange={(event) => handleDayChange(event)}
-                />
-              </div>
-            </label>
-          </div>
-        )}
-
-        {!monthBeforeDay && <div className={monthWidth}>{getSelectElement()}</div>}
-
-        <div className="col-sm-4">
-          <label>
-            <span className="sr-only">{yearLabel}</span>
-            <div className={`input-group input-group-${size}`}>
-              <Input
-                type="text"
-                inputMode="numeric"
-                pattern="[0-9]*"
-                name="year"
-                autoComplete={yearAutoComplete}
-                placeholder={placeholders.year}
-                value={year || ''}
-                disabled={disabled}
-                min={1}
-                onChange={(event) => handleYearChange(event)}
-              />
-            </div>
-          </label>
-        </div>
+        {(() => {
+          if (monthYearOnly) {
+            return (
+              <>
+                {!yearFirst && getMonth()}
+                {getYear()}
+                {yearFirst && getMonth()}
+              </>
+            );
+          }
+          if (monthBeforeDay) {
+            return (
+              <>
+                {getMonth()}
+                {getDay()}
+                {getYear()}
+              </>
+            );
+          } else if (yearFirst) {
+            return (
+              <>
+                {getYear()}
+                {getMonth()}
+                {getDay()}
+              </>
+            );
+          } else {
+            return (
+              <>
+                {getDay()}
+                {getMonth()}
+                {getYear()}
+              </>
+            );
+          }
+        })()}
       </div>
     </div>
   );

package/src/emphasis/{Emphasis.spec.js → Emphasis.spec.tsx}

@@ -12,10 +12,11 @@ describe('Emphasis', () => {
       ${'<negative>negative</negative>'}    | ${'em.emphasis.emphasis--negative'}
       ${'<warning>warning</warning>'}       | ${'em.emphasis.emphasis--warning'}
     `('$text renders as expected with selectoe $selector', ({ text, selector }) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const { container } = render(<Emphasis text={text} />);
 
       expect(container.querySelector(selector)).toBeInTheDocument();
-      expect(container.firstElementChild.tagName).toBe('SPAN');
+      expect(container?.firstElementChild?.tagName).toBe('SPAN');
     });
   });
 

package/src/emphasis/Emphasis.tsx

@@ -5,7 +5,7 @@ import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';
 const SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];
 const emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);
 
-type EmphasisProps = {
+export type EmphasisProps = {
   text?: string;
 };
 

package/src/emphasis/{EmphasisHtmlTransformer.spec.js → EmphasisHtmlTransformer.spec.tsx}

@@ -33,16 +33,4 @@ describe('creates safe, enphasised html', () => {
       expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
     });
   });
-
-  describe('returns null when no input provided', () => {
-    it('input is null', () => {
-      const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform(null)).toBeNull();
-    });
-
-    it('input is undefined', () => {
-      const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform(undefined)).toBeNull();
-    });
-  });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

@@ -15,7 +15,7 @@ type Tags = {
 class EmphasisHtmlTransformer {
   tags: Array<Tags>;
 
-  constructor(whitelistedTags: Array<string>) {
+  constructor(whitelistedTags?: Array<string>) {
     this.tags = (whitelistedTags || []).map((tag) => {
       return {
         transformed: {

package/src/emphasis/index.ts

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

package/src/i18n/es.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
   "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
   "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
-  "neptune.Upload.csTooLargeMessage": "Por favor, sube un archivo de menos de {maxSize}MB",
+  "neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
   "neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
   "neptune.Upload.psButtonText": "Cancela",
   "neptune.Upload.psProcessingText": "Subiendo...",
   "neptune.Upload.usButtonText": "O selecciona un archivo",
   "neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
-  "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo menor de {maxSize}MB",
+  "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/src/i18n/hu.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "Másik fájl feltöltése?",
   "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, {maxSize} MB-nál kisebb fájlt tölts fel",
+  "neptune.Upload.csTooLargeMessage": "Kérünk, olyan fájlt küldj el, amely kisebb mint {maxSize}MB",
   "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...",
   "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 {maxSize} MB-nál kisebb fájlt",
+  "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű 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/index.ts

@@ -21,6 +21,7 @@ const translations: Record<string, Record<string, string>> = {
   cs,
   de,
   en,
+  'en-US': en,
   es,
   fr,
   hu,

package/src/i18n/zh-HK.json

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

package/src/index.ts

@@ -2,14 +2,20 @@
  * Types
  */
 export type { AccordionProps, AccordionItem } from './accordion';
+export type { AvatarProps } from './avatar';
+export type { ActionOptionProps } from './actionOption';
+export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
+export type { EmphasisProps } from './emphasis';
 export type { InfoProps } from './info';
 export type { SummaryProps } from './summary';
 export type { InputProps } from './inputs/Input';
 export type { DateInputProps } from './dateInput';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
+export type { LoaderProps } from './loader';
+export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
   SelectInputGroupItem,
@@ -23,16 +29,23 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
+export type { ProgressProps } from './progress';
+export type { ProgressBarProps } from './progressBar';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
+export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
+export type { SwitchProps } from './switch';
+export type { SwitchOptionProps } from './switchOption';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
+export type { TooltipProps } from './tooltip';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
+export type { MoneyProps } from './money';
 export type {
   CurrencyHeaderItem,
   CurrencyItem,

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -34,14 +34,15 @@ const Template = (args) => {
   const placeholder = args.pattern;
   const displayPattern = args.pattern;
   const label = args.label;
+  const id = label.replaceAll(' ', '-').toLowerCase();
 
   return (
     <>
-      <label id="template" htmlFor="template">
+      <label id="template" htmlFor={id}>
         {label}
       </label>
       <InputWithDisplayFormat
-        id="template"
+        id={id}
         placeholder={placeholder}
         displayPattern={displayPattern}
         className="form-control"

package/src/inputs/SelectInput.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import mergeProps from 'merge-props';
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import mergeRefs from 'react-merge-refs';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -251,7 +250,7 @@ export function SelectInput<T = string, M extends boolean = false>({
     });
   });
 
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -290,7 +289,10 @@ export function SelectInput<T = string, M extends boolean = false>({
               <SelectInputTriggerButtonPropsContext.Provider
                 // eslint-disable-next-line react/jsx-no-constructed-context-values
                 value={{
-                  ref: mergeRefs([ref, triggerRef]),
+                  ref: (node) => {
+                    ref(node);
+                    triggerRef.current = node;
+                  },
                   id,
                   ...mergeProps(
                     {

package/src/loader/Loader.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { ReactElement, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
@@ -9,7 +9,7 @@ type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
-type Props = {
+export type LoaderProps = {
   /**
    * @deprecated use `size` instead
    */
@@ -37,7 +37,7 @@ const Loader = ({
   displayInstantly = false,
   classNames = {},
   ...restProps
-}: Props): ReactElement => {
+}: LoaderProps) => {
   const { theme } = useTheme();
   const [hasDebounced, setHasDebounced] = useState(displayInstantly);
 

package/src/loader/index.ts

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

package/src/money/{Money.spec.js → Money.spec.tsx}

@@ -11,7 +11,7 @@ describe('Money', () => {
   it('formats the string with amount, currency & the passed in locale', () => {
     const { container } = render(<Money amount={4.98} currency="GBP" />, {
       locale: 'fr',
-      messages: {},
+      messages: undefined,
     });
     expect(container).toHaveTextContent('4,98 GBP');
   });

package/src/money/{Money.js → Money.tsx}

@@ -1,15 +1,14 @@
 import { formatMoney } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-const Money = ({ amount, currency }) => {
+export interface MoneyProps {
+  amount: number;
+  currency: string;
+}
+
+const Money = ({ amount, currency }: MoneyProps) => {
   const { locale } = useIntl();
   return <>{formatMoney(amount, currency, locale)}</>;
 };
 
-Money.propTypes = {
-  amount: PropTypes.number.isRequired,
-  currency: PropTypes.string.isRequired,
-};
-
 export default Money;

package/src/money/index.ts

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