@transferwise/components 46.83.3 → 46.84.1

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveButton from '..';
+import PrimitiveButton from '../src';
 
 const meta = {
   title: 'Primitives/Button/Tests',
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Clicked!');
+
+    await step('Click the button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -40,12 +46,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -59,14 +71,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
-    await expect(button).toHaveTextContent('Blurred!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+    });
+
+    await step('Tab away from the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -80,11 +104,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Hovered!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -98,11 +128,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Left!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Unhover the button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text changes to "Left!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -116,11 +156,17 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Key Pressed!');
+
+    await step('Press Enter key on the button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -134,11 +180,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const DisabledClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Click the disabled button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -150,11 +202,17 @@ export const DisabledClickInteraction: Story = {
 };
 
 export const DisabledFocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -166,11 +224,17 @@ export const DisabledFocusInteraction: Story = {
 };
 
 export const DisabledBlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -182,11 +246,17 @@ export const DisabledBlurInteraction: Story = {
 };
 
 export const DisabledKeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Press Enter key on the disabled button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -198,11 +268,17 @@ export const DisabledKeyDownInteraction: Story = {
 };
 
 export const DisabledMouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Hover over the disabled button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -214,11 +290,17 @@ export const DisabledMouseEnterInteraction: Story = {
 };
 
 export const DisabledMouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Unhover the disabled button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (

package/src/summary/Summary.css

@@ -67,6 +67,10 @@
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/summary/Summary.less

@@ -72,6 +72,9 @@
       padding-right: 0;
     }
   }
+  &__description-icon {
+    margin-top: var(--size-4);
+  }
 
   &__action {
     margin-top: var(--size-4);

package/src/summary/Summary.story.tsx

@@ -38,7 +38,7 @@ export const Basic = () => {
           'aria-label': ' Click here to change address',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         info={{
           title: 'You entered your address',
           content: 'Your address has been verified, no more actions are required.',
@@ -58,7 +58,7 @@ export const Basic = () => {
           'aria-label': ' Click here to change address',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         info={{
           title: 'Address verification pending',
           content:
@@ -80,11 +80,21 @@ export const Basic = () => {
           target: '_blank',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         icon={<HomeIcon size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />
+      <Summary
+        action={{
+          text: actionText,
+          href: '#change-address',
+          'aria-label': ' Click here to change address',
+        }}
+        as="li"
+        description={description}
+        title={title}
+      />
     </ul>
   );
 };

package/src/summary/Summary.tsx

@@ -124,16 +124,18 @@ const Summary = ({
       // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
       aria-label={status && intl.formatMessage(messages[statusLabels[status]])}
     >
-      <div className="np-summary__icon">
-        {media}
-        {Badge && (
-          <div>
-            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
-            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
-          </div>
-        )}
-      </div>
-      <div className="np-summary__body m-l-2">
+      {icon && (
+        <div className="np-summary__icon">
+          {media}
+          {Badge && (
+            <div>
+              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
+              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
+            </div>
+          )}
+        </div>
+      )}
+      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>
         <div className="np-summary__title d-flex">
           <Body
             as="span"
@@ -161,7 +163,7 @@ const Summary = ({
           <Body
             as="span"
             type={Typography.BODY_DEFAULT}
-            className="d-block np-summary__description"
+            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
           >
             {description}
           </Body>

package/build/flowNavigation/backButton/BackButton.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var icons = require('@transferwise/icons');
-var clsx = require('clsx');
-var avatarTypes = require('../../avatar/avatarTypes.js');
-var Avatar = require('../../avatar/Avatar.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-    type: avatarTypes.AvatarType.ICON,
-    size: 40,
-    children: /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      "aria-label": ariaLabel,
-      className: clsx.clsx('np-back-button', 'btn-unstyled', className),
-      onClick: onClick,
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {
-        size: 24
-      })
-    })
-  });
-}
-
-module.exports = BackButton;
-//# sourceMappingURL=BackButton.js.map

package/build/flowNavigation/backButton/BackButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.js","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n  'aria-label': string;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n  className,\n  onClick,\n  'aria-label': ariaLabel,\n}: BackButtonProps) {\n  return (\n    <Avatar type={AvatarType.ICON} size={40}>\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={clsx('np-back-button', 'btn-unstyled', className)}\n        onClick={onClick}\n      >\n        <ArrowLeftIcon size={24} />\n      </button>\n    </Avatar>\n  );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,cAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,sBAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,cAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,cAAA,CAACQ,eAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/flowNavigation/backButton/BackButton.mjs

@@ -1,28 +0,0 @@
-import { ArrowLeft } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { AvatarType } from '../../avatar/avatarTypes.mjs';
-import Avatar from '../../avatar/Avatar.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel
-}) {
-  return /*#__PURE__*/jsx(Avatar, {
-    type: AvatarType.ICON,
-    size: 40,
-    children: /*#__PURE__*/jsx("button", {
-      type: "button",
-      "aria-label": ariaLabel,
-      className: clsx('np-back-button', 'btn-unstyled', className),
-      onClick: onClick,
-      children: /*#__PURE__*/jsx(ArrowLeft, {
-        size: 24
-      })
-    })
-  });
-}
-
-export { BackButton as default };
-//# sourceMappingURL=BackButton.mjs.map

package/build/flowNavigation/backButton/BackButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.mjs","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n  'aria-label': string;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n  className,\n  onClick,\n  'aria-label': ariaLabel,\n}: BackButtonProps) {\n  return (\n    <Avatar type={AvatarType.ICON} size={40}>\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={clsx('np-back-button', 'btn-unstyled', className)}\n        onClick={onClick}\n      >\n        <ArrowLeftIcon size={24} />\n      </button>\n    </Avatar>\n  );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,GAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,GAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,GAAA,CAACQ,SAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/styles/flowNavigation/backButton/BackButton.css

@@ -1,32 +0,0 @@
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}

package/build/types/flowNavigation/backButton/BackButton.d.ts

@@ -1,7 +0,0 @@
-export interface BackButtonProps {
-    'aria-label': string;
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-export default function BackButton({ className, onClick, 'aria-label': ariaLabel, }: BackButtonProps): import("react").JSX.Element;
-//# sourceMappingURL=BackButton.d.ts.map

package/build/types/flowNavigation/backButton/BackButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,+BAajB"}

package/build/types/flowNavigation/backButton/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './BackButton';
-export type { BackButtonProps } from './BackButton';
-//# sourceMappingURL=index.d.ts.map

package/build/types/flowNavigation/backButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/src/flowNavigation/backButton/BackButton.css

@@ -1,32 +0,0 @@
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}

package/src/flowNavigation/backButton/BackButton.less

@@ -1,36 +0,0 @@
-.np-back-button {
-  color: var(--color-interactive-accent);
-  display: flex !important;
-
-  &:hover {
-    color: var(--color-interactive-accent-hover);
-  }
-
-  &:active {
-    color: var(--color-interactive-accent-active);
-  }
-
-  .np-theme-personal & {
-    color: var(--color-content-primary);
-
-    &:hover {
-      color: var(--color-content-primary-hover);
-    }
-
-    &:active {
-      color: var(--color-content-primary-active);
-    }
-
-    & .tw-icon {
-      color: var(--color-interactive-primary);
-
-      &:hover {
-        color: var(--color-interactive-primary-hover);
-      }
-
-      &:active {
-        color: var(--color-interactive-primary-active);
-      }
-    }
-  }
-}

package/src/flowNavigation/backButton/BackButton.tsx

@@ -1,29 +0,0 @@
-import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import { clsx } from 'clsx';
-
-import Avatar, { AvatarType } from '../../avatar';
-
-export interface BackButtonProps {
-  'aria-label': string;
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export default function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel,
-}: BackButtonProps) {
-  return (
-    <Avatar type={AvatarType.ICON} size={40}>
-      <button
-        type="button"
-        aria-label={ariaLabel}
-        className={clsx('np-back-button', 'btn-unstyled', className)}
-        onClick={onClick}
-      >
-        <ArrowLeftIcon size={24} />
-      </button>
-    </Avatar>
-  );
-}

package/src/flowNavigation/backButton/index.ts

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