@transferwise/components 46.38.0 → 46.40.0

package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts

@@ -1,22 +1,18 @@
-export default UploadImageStep;
-declare class UploadImageStep extends PureComponent<any, any, any> {
-    constructor();
-    uploadInputRef: import("react").RefObject<any>;
+import { PureComponent } from 'react';
+export interface UploadImageStepProps {
+    fileDropped: (file: File) => void;
+    isComplete: boolean;
+    usAccept: string;
+    usButtonText: string;
+    usDisabled: boolean;
+    usHelpImage: React.ReactNode;
+    usLabel: string;
+    usPlaceholder: string;
+}
+export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
+    uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
-    getImage: () => any;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
-declare namespace UploadImageStep {
-    namespace propTypes {
-        let fileDropped: any;
-        let isComplete: any;
-        let usAccept: any;
-        let usButtonText: any;
-        let usDisabled: any;
-        let usHelpImage: any;
-        let usLabel: any;
-        let usPlaceholder: any;
-    }
-}
-import { PureComponent } from 'react';
 //# sourceMappingURL=uploadImageStep.d.ts.map

package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.js"],"names":[],"mappings":";AAIA;IACE,cAGC;IADC,+CAAiC;IAGnC,2BAME;IAEF,oBAgBE;IAEF,sCA8BC;CACF;;;;;;;;;;;;;8BAjEwC,OAAO"}
+{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,aAAa,CAAC,oBAAoB,CAAC;IAC9E,cAAc,8CAAiC;IAE/C,cAAc,aAMZ;IAEF,QAAQ,0FAgBN;IAEF,MAAM;CA+BP"}

package/build/types/upload/utils/asyncFileRead/asyncFileRead.d.ts

@@ -1,2 +1,2 @@
-export function asyncFileRead(file: any): Promise<any>;
+export declare function asyncFileRead(file: Blob): Promise<string>;
 //# sourceMappingURL=asyncFileRead.d.ts.map

package/build/types/upload/utils/asyncFileRead/asyncFileRead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asyncFileRead.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/asyncFileRead.js"],"names":[],"mappings":"AAAO,uDAUH"}
+{"version":3,"file":"asyncFileRead.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/asyncFileRead.ts"],"names":[],"mappings":"AAAA,wBAAsB,aAAa,CAAC,IAAI,EAAE,IAAI,mBAW7C"}

package/build/types/upload/utils/asyncFileRead/index.d.ts

@@ -1,2 +1,2 @@
-export { asyncFileRead } from "./asyncFileRead";
+export { asyncFileRead } from './asyncFileRead';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/asyncFileRead/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/upload/utils/getFileType/getFileType.d.ts

@@ -1,2 +1,2 @@
-export function getFileType(file: any, file64: any): any;
+export declare function getFileType(file: Blob, file64?: string): string;
 //# sourceMappingURL=getFileType.d.ts.map

package/build/types/upload/utils/getFileType/getFileType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getFileType.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/getFileType.js"],"names":[],"mappings":"AAAO,yDAkBN"}
+{"version":3,"file":"getFileType.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/getFileType.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,UAetD"}

package/build/types/upload/utils/getFileType/index.d.ts

@@ -1,2 +1,2 @@
-export { getFileType } from "./getFileType";
+export { getFileType } from './getFileType';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/getFileType/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/index.d.ts

@@ -1,8 +1,6 @@
-export { postData } from "./postData";
-export { asyncFileRead } from "./asyncFileRead";
-export { isSizeValid } from "./isSizeValid";
-export { isTypeValid } from "./isTypeValid";
-export { getFileType } from "./getFileType";
-export { getSupportedSpotMimeTypes } from "./getSupportedSpotMimeTypes";
-export { requestMedia } from "./requestMedia";
+export { postData } from './postData';
+export { asyncFileRead } from './asyncFileRead';
+export { isSizeValid } from './isSizeValid';
+export { isTypeValid } from './isTypeValid';
+export { getFileType } from './getFileType';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/upload/utils/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/upload/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isSizeValid/index.d.ts

@@ -1,2 +1,2 @@
-export { isSizeValid } from "./isSizeValid";
+export { isSizeValid } from './isSizeValid';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/isSizeValid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isSizeValid/isSizeValid.d.ts

@@ -1,2 +1,2 @@
-export function isSizeValid(file: any, maxSize: any): boolean;
+export declare function isSizeValid(file: Blob, maxSize: number): boolean;
 //# sourceMappingURL=isSizeValid.d.ts.map

package/build/types/upload/utils/isSizeValid/isSizeValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isSizeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/isSizeValid.js"],"names":[],"mappings":"AAAO,8DAAwF"}
+{"version":3,"file":"isSizeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/isSizeValid.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAEtD"}

package/build/types/upload/utils/isTypeValid/index.d.ts

@@ -1,2 +1,2 @@
-export { isTypeValid } from "./isTypeValid";
+export { isTypeValid } from './isTypeValid';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/isTypeValid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isTypeValid/isTypeValid.d.ts

@@ -1,2 +1,2 @@
-export function isTypeValid(file: any, rule: any, file64: any): any;
+export declare function isTypeValid(file: Blob, rule: string, file64?: string): boolean;
 //# sourceMappingURL=isTypeValid.d.ts.map

package/build/types/upload/utils/isTypeValid/isTypeValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isTypeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/isTypeValid.js"],"names":[],"mappings":"AAEO,oEAuBN"}
+{"version":3,"file":"isTypeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/isTypeValid.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,WAgBpE"}

package/build/types/upload/utils/postData/index.d.ts

@@ -1,2 +1,2 @@
-export { postData } from "./postData";
+export { postData } from './postData';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/postData/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/types/upload/utils/postData/postData.d.ts

@@ -1,2 +1,12 @@
-export function postData(httpOptions: any, data?: {}, fetcher?: typeof fetch): Promise<Response>;
+export declare class ResponseError extends Error {
+    response: Response;
+    status: number;
+    constructor(response: Response, message?: string);
+}
+export interface PostDataHTTPOptions extends Omit<RequestInit, 'body'> {
+    url: string;
+    method?: 'POST' | 'PUT' | 'PATCH';
+}
+export type PostDataFetcher = (input: string, init: RequestInit) => Promise<Response>;
+export declare function postData({ url, method, ...httpOptions }: PostDataHTTPOptions, data: RequestInit['body'], fetcher?: PostDataFetcher): Promise<Response>;
 //# sourceMappingURL=postData.d.ts.map

package/build/types/upload/utils/postData/postData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postData.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/postData.js"],"names":[],"mappings":"AAAO,iGAiBD"}
+{"version":3,"file":"postData.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/postData.ts"],"names":[],"mappings":"AAAA,qBAAa,aAAc,SAAQ,KAAK;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;gBAEH,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,MAAM;CAMjD;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IACpE,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;CACnC;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAEtF,wBAAsB,QAAQ,CAC5B,EAAE,GAAG,EAAE,MAAe,EAAE,GAAG,WAAW,EAAE,EAAE,mBAAmB,EAC7D,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,OAAO,GAAE,eAAuB,qBAajC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.38.0",
+  "version": "46.40.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -50,26 +50,25 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^7.6.19",
-    "@storybook/addon-actions": "^7.6.19",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-viewport": "^7.6.19",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/api": "^7.6.17",
-    "@storybook/components": "^7.6.19",
-    "@storybook/core-events": "^7.6.19",
-    "@storybook/manager-api": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/react-webpack5": "^7.6.19",
-    "@storybook/test": "^7.6.19",
-    "@storybook/theming": "^7.6.19",
-    "@storybook/types": "^7.6.19",
-    "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-viewport": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/components": "^8.1.10",
+    "@storybook/core-events": "^8.1.10",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-tokens": "^8.9.2",
     "@tsconfig/recommended": "^1.0.6",
@@ -82,7 +81,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "4.4.10",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "@wise/art": "^2.7.0",
     "babel-plugin-formatjs": "^10.5.14",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -93,10 +91,10 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
-    "storybook": "^7.6.19",
-    "@transferwise/less-config": "3.1.0",
+    "storybook": "^8.1.10",
+    "@transferwise/neptune-css": "14.10.0",
     "@wise/components-theming": "1.3.0",
-    "@transferwise/neptune-css": "14.10.0"
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
@@ -137,7 +135,7 @@
     "dev:less:watch": "gulp watchLess --dest=src",
     "dev:translations": "pnpm build:crowdin-source-file",
     "storybook:dev": "storybook dev -p 3001",
-    "storybook:build": "storybook build --webpack-stats-json",
+    "storybook:build": "storybook build --stats-json",
     "build:css": "gulp compileLess --dest=src",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",

package/src/accordion/Accordion.spec.js

@@ -49,25 +49,25 @@ describe('Accordion', () => {
   });
 
   describe('open and close', () => {
-    it('can open and close an item when clicked', () => {
+    it('can open and close an item when clicked', async () => {
       const item = items[0];
       render(<Accordion items={items} />);
 
-      userEvent.click(screen.getByRole('button', { name: item.title }));
+      await userEvent.click(screen.getByRole('button', { name: item.title }));
       expect(screen.getByText(item.content)).toBeInTheDocument();
 
-      userEvent.click(screen.getByRole('button', { name: item.title }));
+      await userEvent.click(screen.getByRole('button', { name: item.title }));
       expect(screen.queryByText(item.content)).not.toBeInTheDocument();
     });
   });
 
   describe('onClick', () => {
-    it('calls onClick when an item is clicked', () => {
+    it('calls onClick when an item is clicked', async () => {
       const onClick = jest.fn();
 
       render(<Accordion items={items} onClick={onClick} />);
 
-      userEvent.click(screen.getAllByRole('button')[0]);
+      await userEvent.click(screen.getAllByRole('button')[0]);
 
       expect(onClick).toHaveBeenCalledTimes(1);
       expect(onClick).toHaveBeenCalledWith(0);

package/src/accordion/AccordionItem/AccordionItem.spec.js

@@ -39,12 +39,12 @@ describe('AccordionItem', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when item is clicked', () => {
+    it('calls onClick when item is clicked', async () => {
       const onClick = jest.fn();
 
       render(<AccordionItem {...props} onClick={onClick} />);
 
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
 
       expect(onClick).toHaveBeenCalledTimes(1);
     });

package/src/actionButton/ActionButton.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen, userEvent } from '../test-utils';
 
 import ActionButton from '.';
@@ -40,17 +39,17 @@ describe('ActionButton', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', () => {
+    it('calls onClick when clicked', async () => {
       const onClick = jest.fn();
       render(<ActionButton {...props} onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', () => {
+    it('does not call onClick when clicked if disabled', async () => {
       const onClick = jest.fn();
       render(<ActionButton {...props} disabled onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/alert/Alert.spec.tsx

@@ -175,14 +175,14 @@ describe('Alert', () => {
       expect(element).not.toHaveAttribute('target');
     });
 
-    it('sets text and onClick', () => {
+    it('sets text and onClick', async () => {
       action = {
         onClick: jest.fn(),
         text: 'Learn more',
       };
       render(<Alert action={action} message={message} />);
 
-      userEvent.click(screen.getByText('Learn more'));
+      await userEvent.click(screen.getByText('Learn more'));
 
       expect(action.onClick).toHaveBeenCalled();
     });
@@ -246,12 +246,12 @@ describe('Alert', () => {
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
-    it('calls onDismiss when the close button is clicked', () => {
+    it('calls onDismiss when the close button is clicked', async () => {
       const onDismiss = jest.fn();
 
       render(<Alert message={message} onDismiss={onDismiss} />);
 
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
 
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });

package/src/alert/Alert.story.tsx

@@ -41,11 +41,7 @@ export default {
 
 type Story = StoryObj<typeof Alert>;
 
-export const Basic: Story = {
-  args: {
-    onDismiss: undefined,
-  },
-};
+export const Basic: Story = {};
 
 export const WithLinkAction: Story = {
   args: {
@@ -53,6 +49,7 @@ export const WithLinkAction: Story = {
       href: '/',
       text: 'Read more',
     },
+    onDismiss: () => {},
   },
 };
 
@@ -62,12 +59,14 @@ export const WithButtonAction: Story = {
       onClick: action('alert action clicked'),
       text: 'Open',
     },
+    onDismiss: () => {},
   },
 };
 
 export const WithArrow: Story = {
   args: {
     arrow: AlertArrowPosition.TOP_LEFT,
+    onDismiss: () => {},
   },
 };
 
@@ -93,6 +92,7 @@ const CustomIcon = () => {
 export const WithCustomIcon: Story = {
   args: {
     icon: <CustomIcon />,
+    onDismiss: () => {},
   },
 };
 
@@ -100,5 +100,6 @@ export const WithTitle: Story = {
   args: {
     type: Sentiment.NEUTRAL,
     title: 'We’re reviewing your information.',
+    onDismiss: () => {},
   },
 };

package/src/button/Button.spec.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import { createRef } from 'react';
 
-import '@testing-library/jest-dom';
 import { ControlType, Type, Priority, Size } from '../common';
 import { render, cleanup, screen, userEvent } from '../test-utils';
 
@@ -94,17 +93,17 @@ describe('Button', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', () => {
+    it('calls onClick when clicked', async () => {
       const onClick = jest.fn();
       render(<Button {...props} onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', () => {
+    it('does not call onClick when clicked if disabled', async () => {
       const onClick = jest.fn();
       render(<Button {...props} disabled onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/card/Card.spec.tsx

@@ -68,10 +68,10 @@ describe('Card', () => {
       expect(screen.getByTestId(dataTestId)).toHaveClass('np-card--inactive');
     });
 
-    it("doesn't call onClick when clicked", () => {
+    it("doesn't call onClick when clicked", async () => {
       renderCard();
 
-      userEvent.click(screen.getByText(defaultProps.title));
+      await userEvent.click(screen.getByText(defaultProps.title));
 
       expect(defaultProps.onClick).not.toHaveBeenCalled();
     });
@@ -84,7 +84,7 @@ describe('Card', () => {
   });
 
   describe('when there is children prop', () => {
-    it('calls on onClick with inverse of current isExpanded value when clicked', () => {
+    it('calls on onClick with inverse of current isExpanded value when clicked', async () => {
       const onClick = jest.fn();
       renderCard({
         'aria-label': 'test',
@@ -94,7 +94,7 @@ describe('Card', () => {
         onClick,
       });
 
-      userEvent.click(screen.getByRole('button', { name: 'test' }));
+      await userEvent.click(screen.getByRole('button', { name: 'test' }));
       expect(onClick).toHaveBeenCalledWith(true);
     });
 

package/src/carousel/Carousel.spec.tsx

@@ -69,7 +69,7 @@ describe('Carousel', () => {
     expect(screen.getByText('Get Quick Pay')).toBeInTheDocument();
   });
 
-  it('allows user to scroll carousel to the right when at start', () => {
+  it('allows user to scroll carousel to the right when at start', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -80,12 +80,12 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeDisabled();
     expect(scrollRightButton).toBeEnabled();
 
-    userEvent.click(scrollRightButton);
+    await userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left or right when in middle', () => {
+  it('allows user to scroll carousel to the left or right when in middle', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -99,16 +99,16 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeEnabled();
 
-    userEvent.click(scrollLeftButton);
+    await userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
 
-    userEvent.click(scrollRightButton);
+    await userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left when at end', () => {
+  it('allows user to scroll carousel to the left when at end', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -122,7 +122,7 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeDisabled();
 
-    userEvent.click(scrollLeftButton);
+    await userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
   });
@@ -142,23 +142,23 @@ describe('Carousel', () => {
     expect(focusSpy).toHaveBeenCalledTimes(0);
     expect(firstCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(yourWebsiteIndicator);
+    await userEvent.click(yourWebsiteIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(1);
     expect(secondCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(shopOrStallIndicator);
+    await userEvent.click(shopOrStallIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(2);
     expect(thirdCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(yourInvoiceIndicator);
+    await userEvent.click(yourInvoiceIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(3);
     expect(firstCard).toHaveClass('carousel__card--focused');
   });
 
-  it('is focused on the first element and lets user navigate through them', () => {
+  it('is focused on the first element and lets user navigate through them', async () => {
     renderCarousel();
 
     const firstCard = getFirstCard();
@@ -170,27 +170,27 @@ describe('Carousel', () => {
     firstCard.focus();
     expect(firstCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowright}');
+    await userEvent.keyboard('{arrowright}');
 
     expect(secondCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowright}');
+    await userEvent.keyboard('{arrowright}');
 
     expect(thirdCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowleft}');
+    await userEvent.keyboard('{arrowleft}');
 
     expect(secondCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowleft}');
+    await userEvent.keyboard('{arrowleft}');
 
     expect(firstCard).toHaveFocus();
   });
 
-  it('calls onClick when a card is clicked', () => {
+  it('calls onClick when a card is clicked', async () => {
     renderCarousel();
 
-    userEvent.click(getFirstCard());
+    await userEvent.click(getFirstCard());
 
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(yourInvoiceOnClick).toHaveBeenCalledTimes(1);

package/src/checkbox/Checkbox.spec.tsx

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom';
-
 import { render, fireEvent, screen } from '@testing-library/react';
 
 import Checkbox, { CheckboxProps } from '.';

package/src/checkboxButton/CheckboxButton.spec.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxButton from '.';

package/src/checkboxOption/CheckboxOption.spec.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxOption from '.';

package/src/chevron/Chevron.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { Size, Position } from '../common';
 import { render } from '../test-utils';
 

package/src/chips/Chips.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../test-utils';
 
 import Chips from '.';