@transferwise/components 46.100.1 → 46.101.0

package/src/accordion/Accordion.css

@@ -1,21 +1,24 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-accordion-item {
+.np-accordion-item {
   display: block;
   width: 100%;
-}.np-accordion-item--open .media {
+}
+.np-accordion-item--open .media {
   border: 0 !important;
-}.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
+}
+.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
   background-color: transparent;
-}.np-accordion-item.np-accordion-item--dark .media-body,
+}
+.np-accordion-item.np-accordion-item--dark .media-body,
 .np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
-}.np-accordion-item__content {
+}
+.np-accordion-item__content {
   padding: 0 12px 24px 12px;
   padding: 0 var(--size-12) var(--size-24) var(--size-12);
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-}@media (min-width: 480px) {
+}
+@media (min-width: 480px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }
@@ -24,22 +27,28 @@
     padding-left: 0;
     padding-left: initial;
   }
-}.np-accordion-item .np-option .np-option__title {
+}
+.np-accordion-item .np-option .np-option__title {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.np-theme-personal .np-accordion-item--with-media .media {
+}
+.np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
   align-items: center;
-}.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
-}.np-theme-personal .np-accordion-item--with-icon .media {
+}
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
-}.np-theme-personal .np-accordion-item .decision__title {
+}
+.np-theme-personal .np-accordion-item .decision__title {
   font-size: 1.125rem;
   font-size: var(--font-size-18);
-}.np-theme-personal .np-accordion-item .np-option .np-option__title {
+}
+.np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-bottom: 0;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
@@ -47,14 +56,16 @@
   letter-spacing: var(--letter-spacing-negative-xs);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
-}.np-theme-personal .np-accordion-item .np-option .circle-sm {
+}
+.np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
   width: 24px;
   width: var(--size-24);
   height: 24px;
   height: var(--size-24);
   border-radius: 0;
-}.np-theme-personal .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item__content {
   padding: 0 56px 16px 16px;
   padding: 0 var(--size-56) var(--size-16) var(--size-16);
   border-bottom: none;

package/src/accordion/Accordion.story.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
 import { Scroll, Size } from '../common';

package/src/actionButton/ActionButton.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Settings } from '@transferwise/icons';
 
 import { storyConfig } from '../test-utils/story-config';
@@ -12,7 +12,8 @@ import ActionButton from './ActionButton';
  */
 export default {
   component: ActionButton,
-  title: 'Actions/ActionButton (Deprecated)',
+  title: 'Actions/ActionButton',
+  tags: ['deprecated'],
 } satisfies Meta<typeof ActionButton>;
 
 type Story = StoryObj<typeof ActionButton>;

package/src/actionOption/ActionOption.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
 import { Nudge, Title, Typography } from '..';

package/src/alert/Alert.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { lorem40 } from '../test-utils';

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '..';
 import Alert, { type AlertProps } from './Alert';
 

package/src/avatar/Avatar.css

@@ -1,13 +1,12 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.tw-avatar {
+.tw-avatar {
   position: relative;
   border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
-}.tw-avatar .tw-avatar__content {
+}
+.tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
@@ -22,58 +21,73 @@
   max-width: 100%;
   overflow: hidden;
   width: 100%;
-}.tw-avatar--outlined {
+}
+.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
-}.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
-}.tw-avatar--thumbnail * {
+}
+.tw-avatar--thumbnail * {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-}.tw-avatar--icon * {
+}
+.tw-avatar--icon * {
   max-height: 100%;
   max-width: 100%;
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
   color: #37517e;
   color: var(--color-content-primary);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-}.tw-avatar.tw-avatar--branded .tw-avatar__content {
+}
+.tw-avatar.tw-avatar--branded .tw-avatar__content {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
+}
+.tw-avatar--24 {
   min-width: 24px;
   width: 24px;
   height: 24px;
-}.tw-avatar--24.tw-avatar--emoji,
+}
+.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
-}.tw-avatar--24.tw-avatar--initials {
+}
+.tw-avatar--24.tw-avatar--initials {
   font-size: 8.4px;
-}.tw-avatar--24.tw-avatar--branded {
+}
+.tw-avatar--24.tw-avatar--branded {
   font-size: 10.8px;
-}.tw-avatar--24.tw-avatar--outlined {
+}
+.tw-avatar--24.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--24.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,25 +97,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
+}
+.tw-avatar--40 {
   min-width: 40px;
   width: 40px;
   height: 40px;
-}.tw-avatar--40.tw-avatar--emoji,
+}
+.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
-}.tw-avatar--40.tw-avatar--initials {
+}
+.tw-avatar--40.tw-avatar--initials {
   font-size: 14px;
-}.tw-avatar--40.tw-avatar--branded {
+}
+.tw-avatar--40.tw-avatar--branded {
   font-size: 18px;
-}.tw-avatar--40.tw-avatar--outlined {
+}
+.tw-avatar--40.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--40.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,25 +132,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
+}
+.tw-avatar--48 {
   min-width: 48px;
   width: 48px;
   height: 48px;
-}.tw-avatar--48.tw-avatar--emoji,
+}
+.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
-}.tw-avatar--48.tw-avatar--initials {
+}
+.tw-avatar--48.tw-avatar--initials {
   font-size: 16.8px;
-}.tw-avatar--48.tw-avatar--branded {
+}
+.tw-avatar--48.tw-avatar--branded {
   font-size: 21.6px;
-}.tw-avatar--48.tw-avatar--outlined {
+}
+.tw-avatar--48.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--48.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -139,25 +167,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
+}
+.tw-avatar--56 {
   min-width: 56px;
   width: 56px;
   height: 56px;
-}.tw-avatar--56.tw-avatar--emoji,
+}
+.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
-}.tw-avatar--56.tw-avatar--initials {
+}
+.tw-avatar--56.tw-avatar--initials {
   font-size: 19.6px;
-}.tw-avatar--56.tw-avatar--branded {
+}
+.tw-avatar--56.tw-avatar--branded {
   font-size: 25.2px;
-}.tw-avatar--56.tw-avatar--outlined {
+}
+.tw-avatar--56.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--56.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -167,25 +202,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
+}
+.tw-avatar--72 {
   min-width: 72px;
   width: 72px;
   height: 72px;
-}.tw-avatar--72.tw-avatar--emoji,
+}
+.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
-}.tw-avatar--72.tw-avatar--initials {
+}
+.tw-avatar--72.tw-avatar--initials {
   font-size: 25.2px;
-}.tw-avatar--72.tw-avatar--branded {
+}
+.tw-avatar--72.tw-avatar--branded {
   font-size: 32.4px;
-}.tw-avatar--72.tw-avatar--outlined {
+}
+.tw-avatar--72.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--72.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -195,11 +237,14 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar img {
+}
+.tw-avatar img {
   width: 100%;
   height: 100%;
-}.np-theme-personal .tw-avatar--outlined {
+}
+.np-theme-personal .tw-avatar--outlined {
   border-color: var(--color-interactive-primary);
-}.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }

package/src/avatar/Avatar.spec.tsx

@@ -37,7 +37,7 @@ describe('Avatar', () => {
   describe('branded avatar colors', () => {
     it.each(avatarColorTestCases)(
       'for seed of $key return background color of `$color.token`',
-      (item) => {
+      (item: { key: string | number; color: { hex: string; token: string } }) => {
         render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
 
         expect(screen.getByText('JS')).toHaveStyle(`background-color: var(${item.color.token})`);

package/src/avatar/Avatar.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import * as wiseIcons from '@transferwise/icons';
 import { Flag } from '@wise/art';
 
@@ -12,7 +12,8 @@ import Avatar, { AvatarType } from '.';
  */
 export default {
   component: Avatar,
-  title: 'Content/Avatar (Deprecated)',
+  title: 'Content/Avatar',
+  tags: ['deprecated'],
 } satisfies Meta<typeof Avatar>;
 
 type Story = StoryObj<typeof Avatar>;

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';

package/src/avatarLayout/AvatarLayout.tsx

@@ -84,7 +84,7 @@ export default function AvatarLayout({
 const DIAGONAL_LAYOUT_STYLE_CONFIG = {
   // Diagonal layout doesn't support 16 size
   16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },
-  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },
+  24: { avatarSize: 16, offset: 2.5, fontSize: 8, iconSize: 11.25 },
   32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },
   40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },
   48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },

package/src/avatarView/AvatarView.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   Camera,
   Convert,

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { ProfileType, Sentiment, Status } from '../common';
 
@@ -9,7 +9,8 @@ import AvatarWrapper from './AvatarWrapper';
  */
 export default {
   component: AvatarWrapper,
-  title: 'Content/AvatarWrapper (Deprecated)',
+  title: 'Content/AvatarWrapper',
+  tags: ['deprecated'],
 } satisfies Meta<typeof AvatarWrapper>;
 
 type Story = StoryObj<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -1,20 +1,42 @@
-import { text, select } from '@storybook/addon-knobs';
-
+import { Meta } from '@storybook/react-webpack5';
 import { default as AvatarComponent, AvatarType } from '../avatar';
 import { Size, Theme } from '../common';
-
-import Badge from './Badge';
+import Badge, { type BadgeProps } from './Badge';
 
 /**
  * @deprecated use **`<AvatarView badge={..} />`** components instead
  */
-export default {
+const meta: Meta<typeof Badge> = {
   component: Badge,
-  title: 'Content/Badge (Deprecated)',
-  excludeStories: ['ExampleBadgeCss'],
+  title: 'Content/Badge',
+  tags: ['deprecated'],
 };
 
-export const ExampleBadgeCss = {
+export default meta;
+
+/**
+ * Used for showing multiple components within a Canvas.
+ * @decorator
+ */
+const withComponentGrid =
+  (maxWidth = 'auto') =>
+  (Story: any) => (
+    <div
+      style={{
+        width: '100%',
+        placeItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '2rem',
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+const ExampleBadgeStyle = {
   background: 'var(--color-content-positive)',
   width: '100%',
   height: '100%',
@@ -25,47 +47,46 @@ export const ExampleBadgeCss = {
   alignItems: 'center',
 };
 
-export const Avatar = () => {
-  const BadgeText = text('BadgeText', 'B');
-  const border = select('Border', [undefined, Theme.LIGHT, Theme.DARK], Theme.LIGHT);
-
-  return (
-    <div>
-      <div style={{ display: 'inline', margin: 8 }}>
+export const LegacyAvatarWithBadge = {
+  decorators: [withComponentGrid()],
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
+  render: () => {
+    return (
+      <>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.LARGE}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.MEDIUM}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.SMALL}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
-    </div>
-  );
+      </>
+    );
+  },
 };

package/src/button/Button.accessibility.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
 import * as stories from './Button.story';

package/src/button/Button.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';

package/src/button/Button.tests.story.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
 
 const meta: Meta<typeof Button> = {

package/src/button/LegacyButton.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn, expect } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, fn, expect } from 'storybook/test';
 import { useState } from 'react';
 
 import Button from '.';
@@ -25,6 +25,7 @@ const withContainer = (Story: any) => (
 const meta: Meta<typeof LegacyButton> = {
   component: LegacyButton,
   title: 'Actions/Button/Legacy Button',
+  tags: ['deprecated'],
   args: {
     size: undefined,
     priority: undefined,

package/src/card/Card.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import Card from '.';
 

package/src/carousel/Carousel.story.tsx

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
 import React from 'react';