@transferwise/components 46.100.1 → 46.101.0

package/src/image/Image.story.tsx

@@ -1,62 +1,35 @@
-import { action } from '@storybook/addon-actions';
-import { text, select, boolean } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
+import Image, { type ImageProps } from './Image';
 
-import Image from './Image';
-
-export default {
+const meta = {
   component: Image,
   title: 'Content/Image',
-};
-
-export const Basic = () => {
-  const source = text('src', 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp');
-  const shrink = boolean('shrink', true);
-  const stretch = boolean('stretch', true);
-  const loading = select(
-    'loading',
-
-    {
-      lazy: 'lazy',
-      eager: 'eager',
+  argTypes: {
+    src: { control: 'text' },
+    shrink: { control: 'boolean' },
+    stretch: { control: 'boolean' },
+    loading: {
+      control: 'select',
+      options: ['lazy', 'eager'],
     },
-    'lazy',
-  );
+  },
+};
+export default meta;
 
-  return (
+export const Basic = {
+  render: (args: ImageProps) => (
     <>
-      <Image
-        alt="test"
-        src={source}
-        id="id1"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 1')}
-        onError={action('error')}
-      />
-      <Image
-        alt="test"
-        src={source}
-        id="id2"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 2')}
-        onError={action('error')}
-      />
-      <Image
-        alt="test"
-        src={source}
-        id="id3"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 3')}
-        onError={action('error')}
-      />
+      <Image id="id1" onLoad={action('load 1')} onError={action('error')} {...args} />
+      <Image id="id2" onLoad={action('load 2')} onError={action('error')} {...args} />
+      <Image id="id3" onLoad={action('load 3')} onError={action('error')} {...args} />
     </>
-  );
+  ),
+  args: {
+    alt: 'test',
+    src: 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp',
+    shrink: true,
+    stretch: true,
+    loading: 'lazy',
+    className: 'm-t-5',
+  },
 };

package/src/info/Info.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
 
 import { lorem10, storyConfig } from '../test-utils';
 

package/src/inlineAlert/InlineAlert.story.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
 import { lorem10, lorem40 } from '../test-utils';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,8 +1,8 @@
-import { userEvent, within, fn } from '@storybook/test';
+import { userEvent, within, fn } from 'storybook/test';
 
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
 import { Field, FieldProps } from '../field/Field';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react-webpack5';
 
 type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
 

package/src/inputs/Input.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,21 +130,26 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-input::-moz-placeholder {
+}
+.np-input::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input::placeholder {
+}
+.np-input::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-input--shape-rectangle {
+}
+.np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-input--shape-pill {
+}
+.np-input--shape-pill {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }

package/src/inputs/InputGroup.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 

package/src/inputs/SearchInput.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Size } from '../common';

package/src/inputs/SelectInput.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { MoneyInput } from '..';
 
 <Meta title="Forms/SelectInput/Accessibility" />

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, type Mock, screen, userEvent, within, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, type Mock, screen, userEvent, within, waitFor } from 'storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { clsx } from 'clsx';

package/src/inputs/TextArea.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-form-control {
+.np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
   border: none;
@@ -19,18 +17,23 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
-}.np-form-control:focus-visible {
+}
+.np-form-control:focus-visible {
   outline: none;
-}.np-form-control[aria-invalid="true"] {
+}
+.np-form-control[aria-invalid="true"] {
   --ring-width: 2px;
   --ring-color: var(--color-sentiment-negative) !important;
-}.np-form-control:hover:enabled {
+}
+.np-form-control:hover:enabled {
   --ring-width: 2px;
   --ring-color: var(--color-interactive-secondary-hover);
-}.np-form-control:focus:enabled {
+}
+.np-form-control:focus:enabled {
   --ring-width: 3px;
   --ring-color: var(--color-interactive-primary);
-}.np-form-control--size-auto {
+}
+.np-form-control--size-auto {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -41,12 +44,14 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-}.np-form-control--size-sm,
+}
+.np-form-control--size-sm,
 .np-form-control--size-md,
 .np-form-control--size-lg {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-}.np-form-control--size-sm {
+}
+.np-form-control--size-sm {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -55,12 +60,14 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-sm {
     height: 64px !important;
     height: var(--size-64) !important;
   }
-}.np-form-control--size-md {
+}
+.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
   font-size: 1rem;
@@ -69,12 +76,14 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
-}@media (max-width: 320px) {
+}
+@media (max-width: 320px) {
   .np-form-control--size-md {
     height: 72px !important;
     height: var(--size-72) !important;
   }
-}.np-form-control--size-lg {
+}
+.np-form-control--size-lg {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -91,7 +100,8 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -107,7 +117,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -119,12 +130,14 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-form-control--size-lg + p,
+}
+.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-text-area {
+}
+.np-text-area {
   min-height: 72px;
   min-height: var(--size-72);
   scroll-padding-top: 8px;
@@ -134,10 +147,12 @@
   overscroll-behavior: none;
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;
-}.np-text-area::-moz-placeholder {
+}
+.np-text-area::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
-}.np-text-area::placeholder {
+}
+.np-text-area::placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/instructionsList/InstructionsList.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 { storyConfig } from '../test-utils';
 
 import Link from '../link';

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 

package/src/loader/Loader.css

@@ -49,101 +49,15 @@
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 .tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
 }
 @media (prefers-reduced-motion) {
   .tw-loader::before {

package/src/loader/Loader.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Loader from './Loader';
 

package/src/logo/Logo.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo from '.';