@transferwise/components 46.93.1 → 46.94.0

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

@@ -43,7 +43,9 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
               width="24"
             >
               <path
-                d="M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
+                clip-rule="evenodd"
+                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
+                fill-rule="evenodd"
               />
             </svg>
           </span>
@@ -97,7 +99,9 @@ exports[`AccordionItem open / close renders an item open 1`] = `
               width="24"
             >
               <path
-                d="M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
+                clip-rule="evenodd"
+                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
+                fill-rule="evenodd"
               />
             </svg>
           </span>

package/src/alert/Alert.story.tsx

@@ -213,7 +213,7 @@ export const DynamicRender: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+        <Button v2 onClick={() => setIsOneActive(true)}>
           Trigger Alert
         </Button>
 
@@ -248,7 +248,7 @@ function Render(args) {
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+      <Button v2 onClick={() => setIsOneActive(true)}>
         Trigger Alert
       </Button>
 
@@ -325,7 +325,7 @@ export const MultipleDynamicAlerts: Story = {
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );
@@ -352,8 +352,8 @@ function Render() {
 
       {alerts.map(props => (
         <Alert 
-          {...props} 
           key={props.title} 
+          {...props} 
           className="m-t-3" 
         />
       ))}

package/src/alert/Alert.tests.story.tsx

@@ -37,7 +37,7 @@ export const SimpleTrigger: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive(true)}>
+        <Button v2 onClick={() => setIsActive(true)}>
           Trigger Alert
         </Button>
 
@@ -119,12 +119,12 @@ export const MultipleDynamicAlerts: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setAlerts(getAlerts())}>
+        <Button v2 onClick={() => setAlerts(getAlerts())}>
           Generate dynamic alerts
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -36,7 +36,9 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
         width="24"
       >
         <path
-          d="M21.428 6.429H18V3.857A.86.86 0 0 0 17.143 3H6.857A.86.86 0 0 0 6 3.857V6.43H2.571a.86.86 0 0 0-.857.857v12.857a.86.86 0 0 0 .857.857h18.857a.86.86 0 0 0 .858-.857V7.286a.86.86 0 0 0-.858-.857ZM7.714 4.714h8.572V6.43H7.714V4.714Zm8.572 3.429v11.143H7.714V8.143h8.572Zm-12.857 0H6v11.143H3.429V8.143ZM20.57 19.286H18V8.143h2.571v11.143Z"
+          clip-rule="evenodd"
+          d="M9.01 3A1.01 1.01 0 0 0 8 4.01V7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3V4.01A1.01 1.01 0 0 0 14.99 3zM14 7V5h-4v2zm-4 2h4v9h-4zM8 9H5v9h3zm8 9V9h3v9z"
+          fill-rule="evenodd"
         />
       </svg>
     </span>
@@ -65,7 +67,9 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
         width="24"
       >
         <path
-          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+          clip-rule="evenodd"
+          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
+          fill-rule="evenodd"
         />
       </svg>
     </span>
@@ -100,7 +104,9 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
             width="24"
           >
             <path
-              d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+              clip-rule="evenodd"
+              d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
+              fill-rule="evenodd"
             />
           </svg>
         </span>
@@ -139,7 +145,9 @@ exports[`FlowNavigationAvatar with a name AND profileType with nothing passed re
         width="24"
       >
         <path
-          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+          clip-rule="evenodd"
+          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
+          fill-rule="evenodd"
         />
       </svg>
     </span>

package/src/button/LegacyButton.tsx

@@ -133,10 +133,8 @@ const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
         disabled,
       },
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       typeClassMap[newType],
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       priorityClassMap[newPriority],
       className,
     );

package/src/carousel/Carousel.spec.tsx

@@ -47,9 +47,7 @@ describe('Carousel', () => {
   const scrollBy = jest.fn();
 
   beforeEach(() => {
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollIntoView = focusSpy;
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollBy = scrollBy;
   });
 
@@ -198,13 +196,11 @@ describe('Carousel', () => {
 });
 
 const mockPositions = (scrollWidth: number, offsetWidth: number) => {
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
     configurable: true,
     value: scrollWidth,
   });
 
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
     configurable: true,
     value: offsetWidth,

package/src/carousel/Carousel.tsx

@@ -228,7 +228,6 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
                 className={clsx('carousel__card-content', {
                   [card.className ?? '']: !!card.className,
                 })}
-                // eslint-disable-next-line react/forbid-dom-props
                 style={card.styles}
               >
                 {card.content}

package/src/checkbox/Checkbox.tsx

@@ -44,7 +44,6 @@ export default function Checkbox({
   const innerDisabled = disabled || readOnly;
   return (
     <div id={id} className={classList}>
-      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
       <label className={clsx({ disabled })}>
         <CheckboxButton
           className="p-r-2"

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -23,7 +23,6 @@ export const Basic: Story = {
     'aria-label': 'Toggle email updates',
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [checked, setChecked] = useState(true);
 
     return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
@@ -36,7 +35,6 @@ export const Indeterminate: Story = {
     indeterminate: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [indeterminate, setIndeterminate] = useState(true);
 
     return (

package/src/checkboxButton/CheckboxButton.tsx

@@ -19,7 +19,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(functio
 
   useEffect(() => {
     if (internalRef.current) {
-      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      // eslint-disable-next-line functional/immutable-data
       internalRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate, reference]);

package/src/checkboxOption/CheckboxOption.tsx

@@ -2,8 +2,7 @@ import { forwardRef } from 'react';
 
 import CheckboxButton from '../checkboxButton';
 import Option from '../common/Option';
-import { ReferenceType } from '../common/Option/Option';
-import { BaseOptionProps } from '../common/Option/Option';
+import { ReferenceType, BaseOptionProps } from '../common/Option/Option';
 
 export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
   /**

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -140,7 +140,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
             width="16"
           >
             <path
-              d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+              d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
             />
           </svg>
         </span>

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -2,7 +2,6 @@ import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 mockMatchMedia();
 
 describe('BottomSheet', () => {

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -19,8 +19,8 @@ export default {
     open: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(args.open);
+
     return (
       <div style={{ height: '2000px' }}>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -201,7 +201,6 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         position={Position.BOTTOM}
         className={clsx('np-bottom-sheet', props.className)}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
           aria-labelledby={props['aria-labelledby'] || undefined}

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -52,7 +52,7 @@ exports[`BottomSheet renders content when open 1`] = `
                       width="16"
                     >
                       <path
-                        d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                        d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
                       />
                     </svg>
                   </span>

package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`CloseButton renders as expected 1`] = `
         width="24"
       >
         <path
-          d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+          d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
         />
       </svg>
     </span>

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -1,11 +1,13 @@
 export const isDateValid = (date: Date | string | null) => {
   if (date === null) {
     return false;
-  } else if (date instanceof Date) {
+  }
+
+  if (date instanceof Date) {
     return validDateObject(date);
-  } else {
-    return validDateString(date);
   }
+
+  return validDateString(date);
 };
 
 export const validDateString = (dateString: string) => validDateObject(new Date(dateString));

package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js

@@ -65,7 +65,6 @@ describe('useHasIntersected', () => {
       });
 
       it('calls observer', () => {
-        // eslint-disable-next-line jest/prefer-spy-on
         window.IntersectionObserver = jest.fn(() => ({
           observe,
           unobserve,
@@ -107,7 +106,6 @@ describe('useHasIntersected', () => {
   });
 
   const setupIntersectionObserver = (isIntersecting) => {
-    // eslint-disable-next-line jest/prefer-spy-on
     window.IntersectionObserver = jest.fn((callback) => {
       callback([{ isIntersecting }], { unobserve });
       return {

package/src/common/panel/Panel.tsx

@@ -119,26 +119,15 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
         {...rest}
         ref={setPopperElement}
         role="dialog"
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
-        <div
-          ref={reference}
-          /* eslint-disable-next-line react/forbid-dom-props */
-          style={contentStyle}
-          className={clsx('np-panel__content')}
-        >
+        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
           {arrow && (
-            <div
-              ref={setArrowElement}
-              className={clsx('np-panel__arrow')}
-              // eslint-disable-next-line react/forbid-dom-props
-              style={styles.arrow}
-            />
+            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
           )}
         </div>
       </div>

package/src/dimmer/Dimmer.spec.tsx

@@ -33,7 +33,9 @@ describe('Dimmer', () => {
     it('does not call onClose if the dimmer content is clicked', async () => {
       render(
         <Dimmer {...props}>
-          <Button onClick={() => {}}>McClicky</Button>
+          <Button v2 onClick={() => {}}>
+            McClicky
+          </Button>
         </Dimmer>,
       );
       await userEvent.click(screen.getByRole('button'));

package/src/dimmer/Dimmer.story.tsx

@@ -18,12 +18,13 @@ type Story = StoryObj<typeof Dimmer>;
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(false);
 
     return (
       <>
-        <Button onClick={() => setOpen((isOpen) => !isOpen)}>Toggle dimmer</Button>
+        <Button v2 onClick={() => setOpen((isOpen) => !isOpen)}>
+          Toggle dimmer
+        </Button>
         <Dimmer
           {...args}
           open={open}

package/src/dimmer/dimmerManager/DimmerManager.ts

@@ -5,7 +5,7 @@ export default class DimmerManager {
   /**
    * Dimmer refs
    */
-  private dimmers: Element[];
+  private readonly dimmers: Element[];
 
   constructor() {
     this.dimmers = [];

package/src/display/Display.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/accessible-emoji */
-
 import { Typography } from '../common';
 import Money from '../money/Money';
 import Title from '../title/Title';

package/src/drawer/Drawer.story.tsx

@@ -18,7 +18,7 @@ export const Basic = () => {
 
   return (
     <>
-      <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+      <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
         Open drawer
       </Button>
       <Drawer
@@ -27,10 +27,10 @@ export const Basic = () => {
         headerTitle="This is the title of the drawer"
         footerContent={
           <>
-            <Button block onClick={() => {}}>
+            <Button v2 block onClick={() => {}}>
               Action 1
             </Button>
-            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
+            <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
               Action 2
             </Button>
           </>
@@ -50,7 +50,9 @@ export const Basic = () => {
         <Section className="m-t-2">
           <Input />
           <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
-          <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
+          <Button v2 onClick={() => setOpenModal(true)}>
+            Open Modal
+          </Button>
           <Modal
             body={
               <p className="m-t-4">

package/src/dropFade/DropFade.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/forbid-dom-props */
 import { action } from '@storybook/addon-actions';
 import { useState } from 'react';
 
@@ -35,7 +34,7 @@ export const Basic = () => {
           }}
         />
       </DropFade>
-      <Button className="m-t-3" block onClick={() => setOpen(true)}>
+      <Button v2 className="m-t-3" block onClick={() => setOpen(true)}>
         Some other content
       </Button>
     </div>

package/src/dropFade/DropFade.tsx

@@ -26,7 +26,6 @@ const DropFade = ({ children, show }: { children: ReactElement; show: boolean })
         setHeight(0);
       }}
     >
-      {/* eslint-disable-next-line react/forbid-dom-props */}
       <div ref={reference} style={{ height }} className="np-dropfade">
         {clonedChild}
       </div>

package/src/emphasis/EmphasisHtmlTransformer.spec.tsx

@@ -7,7 +7,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><p>some text & more text</p>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;&lt;p&gt;some text &amp; more text&lt;/p&gt;',
     );
   });
@@ -18,7 +18,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><positive>hello</positive><negative>world</negative><positive>!</positive>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;<em class="emphasis emphasis--positive">hello</em><em class="emphasis emphasis--negative">world</em><em class="emphasis emphasis--positive">!</em>',
     );
   });
@@ -26,11 +26,11 @@ describe('creates safe, enphasised html', () => {
   describe('supports new line characters', () => {
     it('supports slash n in the string', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toBe('hello<br />world');
     });
     it('supports new line characters', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\nworld')).toBe('hello<br />world');
     });
   });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

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

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -235,7 +235,12 @@ export const SendFlow = () => {
 
       <Sticky>
         <div className="d-flex justify-content-center align-items-center p-a-3">
-          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+          <Button
+            v2
+            disabled={activeStep === 3}
+            block
+            onClick={() => setActiveStep(activeStep + 1)}
+          >
             Continue
           </Button>
         </div>

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -29,7 +29,9 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
             width="16"
           >
             <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+              clip-rule="evenodd"
+              d="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z"
+              fill-rule="evenodd"
             />
           </svg>
         </span>
@@ -74,7 +76,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               width="24"
             >
               <path
-                d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
               />
             </svg>
           </span>
@@ -190,7 +192,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               width="24"
             >
               <path
-                d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
               />
             </svg>
           </span>

package/src/inputs/Input.tsx

@@ -31,7 +31,6 @@ export const Input = forwardRef(function Input(
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
-      // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
       {...inputAttributes}
       {...restProps}

package/src/inputs/SelectInput.story.tsx

@@ -464,7 +464,9 @@ export const WithinDrawer: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open drawer</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open drawer
+          </Button>
           <Drawer
             open={open}
             headerTitle="This is the title of the drawer"
@@ -485,7 +487,9 @@ export const WithinModal: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open modal</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open modal
+          </Button>
           <Modal open={open} body={<Story />} onClose={() => setOpen(false)} />
         </>
       );

package/src/inputs/SelectInput.tsx

@@ -629,13 +629,7 @@ function SelectInputOptions<T = string>({
   const getItemNode = (index: number) => {
     const item = filteredItems[index];
     return (
-      <SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        item={item}
-        renderValue={renderValue}
-        needle={needle}
-      />
+      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />
     );
   };
 

package/src/inputs/_ButtonInput.tsx

@@ -19,7 +19,6 @@ export const ButtonInput = forwardRef(function ButtonInput(
       ref={ref}
       type="button"
       className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
-      // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

package/src/inputs/_Popover.tsx

@@ -113,7 +113,6 @@ export function Popover({
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
-                  // eslint-disable-next-line react/forbid-dom-props
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >

package/src/link/Link.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
 import Body from '../body/Body';
 import { Typography } from '../common';
 import Title from '../title/Title';

package/src/listItem/ListItem.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
-
 import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';

package/src/markdown/Markdown.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import { MarkdownNodeType } from '../common';
 import { render, screen } from '../test-utils';