@transferwise/components 0.0.0-experimental-aa84e4b → 0.0.0-experimental-f64dd5e

package/src/Drawer/{Drawer.story.tsx → _stories/Drawer.story.tsx}

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { Position, Priority } from '../common';
-import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
-import Drawer from './Drawer';
-import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import { Position, Priority } from '../../common';
+import { Section, Button, Input, Modal, type DrawerProps, Body } from '../..';
+import Drawer from '..';
+import { lorem10, lorem20, lorem40, lorem5 } from '../../test-utils';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Drawer,

package/src/DropFade/{DropFade.story.tsx → _stories/DropFade.story.tsx}

@@ -1,10 +1,10 @@
 import { action } from 'storybook/actions';
 import { useState } from 'react';
 
-import { Button, Nudge } from '..';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import { Button, Nudge } from '../..';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
 
-import DropFade from './DropFade';
+import DropFade from '../DropFade';
 
 export default {
   title: 'Dialogs/DropFade',

package/src/Emphasis/{Emphasis.story.tsx → _stories/Emphasis.story.tsx}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Emphasis from './Emphasis';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import Emphasis from '../Emphasis';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Emphasis,

package/src/ExpressiveMoneyInput/{ExpressiveMoneyInput.story.tsx → _stories/ExpressiveMoneyInput.story.tsx}

@@ -3,19 +3,22 @@ import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
 import { Rewards, Tags } from '@transferwise/icons';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { storySourceWithoutNoise } from '../../.storybook/helpers';
-import { lorem10, lorem5 } from '../test-utils';
-import { Sentiment } from '../common';
-import Link from '../Link';
-import Money from '../Money';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import { storySourceWithoutNoise } from '../../../.storybook/helpers';
+import { lorem10, lorem5 } from '../../test-utils';
+import { Sentiment } from '../../common';
+import Link from '../../Link';
+import Money from '../../Money';
 import React from 'react';
-import Button from '../Button';
-import Modal from '../Modal';
-import ListItem from '../ListItem';
-import List from '../List';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
-import type { Props as CurrencySelectorProps } from './CurrencySelector/CurrencySelector';
+import Button from '../../Button';
+import Modal from '../../Modal';
+import ListItem from '../../ListItem';
+import List from '../../List';
+import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '..';
+import type { Props as CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
 
 const getCurrencySelectorProps = ({
   logEvents = false,

package/src/ExpressiveMoneyInput/{ExpressiveMoneyInput.test.story.tsx → _stories/ExpressiveMoneyInput.test.story.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
   component: ExpressiveMoneyInput,

package/src/Field/{Field.story.tsx → _stories/Field.story.tsx}

@@ -1,15 +1,18 @@
 import { useState } from 'react';
 import { action } from 'storybook/actions';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { Input } from '../Inputs/Input';
-import { Field, FieldProps } from './Field';
-import { Sentiment } from '../common';
-import DateInput from '../DateInput';
-import { lorem10, lorem40 } from '../test-utils';
-import { TextArea } from '../Inputs/TextArea';
-import { SearchInput } from '../Inputs/SearchInput';
-import Info from '../Info';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import { Input } from '../../Inputs/Input';
+import { Field, FieldProps } from '../..';
+import { Sentiment } from '../../common';
+import DateInput from '../../DateInput';
+import { lorem10, lorem40 } from '../../test-utils';
+import { TextArea } from '../../Inputs/TextArea';
+import { SearchInput } from '../../Inputs/SearchInput';
+import Info from '../../Info';
 
 export default {
   component: Field,

package/src/Field/{Field.test.story.tsx → _stories/Field.test.story.tsx}

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Input } from '../Inputs/Input';
-import { Field, FieldProps } from './Field';
-import { Sentiment } from '../common';
+import { Input } from '../../Inputs/Input';
+import { Field, FieldProps } from '../Field';
+import { Sentiment } from '../../common';
 
 const meta: Meta<typeof Field> = {
   component: Field,

package/src/FlowNavigation/{FlowNavigation.story.tsx → _stories/FlowNavigation.story.tsx}

@@ -1,19 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useState } from 'react';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import AvatarView from '../AvatarView';
-import Body from '../Body';
-import Button from '../Button';
-import { ProfileType, Typography } from '../common';
-import Logo from '../Logo';
-import OverlayHeader from '../OverlayHeader';
-import { lorem10 } from '../test-utils';
-import Display from '../Display';
-import Sticky from '../Sticky';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import AvatarView from '../../AvatarView';
+import Body from '../../Body';
+import Button from '../../Button';
+import { ProfileType, Typography } from '../../common';
+import Logo from '../../Logo';
+import OverlayHeader from '../../OverlayHeader';
+import { lorem10 } from '../../test-utils';
+import Display from '../../Display';
+import Sticky from '../../Sticky';
 
-import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';
-import Container from '../Container';
+import FlowNavigation, { FlowNavigationProps } from '..';
+import Container from '../../Container';
 
 interface CustomControls {
   showCloseButton: boolean;

package/src/FlowNavigation/{FlowNavigation.test.story.tsx → _stories/FlowNavigation.test.story.tsx}

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import AvatarView from '../AvatarView';
-import { ProfileType } from '../common';
-import Logo from '../Logo';
-import { allModes } from '../../.storybook/modes';
+import AvatarView from '../../AvatarView';
+import { ProfileType } from '../../common';
+import Logo from '../../Logo';
+import { allModes } from '../../../.storybook/modes';
 
-import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';
+import FlowNavigation, { FlowNavigationProps } from '../FlowNavigation';
 
 const noop = () => {};
 

package/src/Header/{Header.story.tsx → _stories/Header.story.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Header, { HeaderProps } from './Header';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import Header, { HeaderProps } from '../';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>

package/src/Header/{Header.test.story.tsx → _stories/Header.test.story.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Header, { type HeaderProps } from './Header';
-import { withVariantConfig } from '../../.storybook/helpers';
+import Header, { type HeaderProps } from '../Header';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Header> = {
   component: Header,

package/src/IconButton/{IconButton.story.tsx → _stories/IconButton.story.tsx}

@@ -13,9 +13,9 @@ import {
   Freeze,
 } from '@transferwise/icons';
 import { fn } from 'storybook/test';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import IconButton, { Props } from './IconButton';
-import SentimentSurface from '../SentimentSurface';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import IconButton, { Props } from '../IconButton';
+import SentimentSurface from '../../SentimentSurface';
 
 /**
  * **Design guidance**: <a href="https://docs.wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>

package/src/IconButton/{IconButton.test.story.tsx → _stories/IconButton.test.story.tsx}

@@ -12,9 +12,9 @@ import {
   Freeze,
 } from '@transferwise/icons';
 import { expect, fn, userEvent, within } from 'storybook/test';
-import IconButton from './IconButton';
-import { withVariantConfig } from '../../.storybook/helpers';
-import SentimentSurface from '../SentimentSurface';
+import IconButton from '../IconButton';
+import { withVariantConfig } from '../../../.storybook/helpers';
+import SentimentSurface from '../../SentimentSurface';
 
 const wait = async (ms: number) =>
   new Promise<void>((resolve) => {

package/src/Icons/{Icons.story.tsx → _stories/Icons.story.tsx}

@@ -4,10 +4,10 @@ import * as AllIcons from '@transferwise/icons';
 import iconsPkg from '@transferwise/icons/package.json';
 import { ThemeProvider } from '@wise/components-theming';
 
-import Chips, { type ChipValue } from '../Chips/Chips';
-import { SearchInput } from '../Inputs/SearchInput';
-import SnackbarProvider from '../Snackbar/SnackbarProvider';
-import useSnackbar from '../Snackbar/useSnackbar';
+import Chips, { type ChipValue } from '../../Chips/Chips';
+import { SearchInput } from '../../Inputs/SearchInput';
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import useSnackbar from '../../Snackbar/useSnackbar';
 
 const ICONS_VERSION: string = iconsPkg.version;
 

package/src/Image/{Image.story.tsx → _stories/Image.story.tsx}

@@ -1,6 +1,6 @@
 import { action } from 'storybook/actions';
-import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
-import Image, { type ImageProps } from './Image';
+import { createSandboxStory } from '../../../.storybook/components/sandbox/SandboxEditor';
+import Image, { type ImageProps } from '../Image';
 
 const meta = {
   component: Image,

package/src/Info/{Info.story.tsx → _stories/Info.story.tsx}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { lorem10 } from '../test-utils';
-import Info from '.';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import { lorem10 } from '../../test-utils';
+import Info from '..';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta = {
   component: Info,

package/src/Info/{Info.test.story.tsx → _stories/Info.test.story.tsx}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
-import { lorem10 } from '../test-utils';
-import Info, { InfoPresentation } from '.';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem10 } from '../../test-utils';
+import Info, { InfoPresentation } from '..';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Info> = {
   component: Info,

package/src/InlineAlert/{InlineAlert.story.tsx → _stories/InlineAlert.story.tsx}

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react-webpack5';
 
-import InlineAlert, { InlineAlertProps } from './InlineAlert';
-import { lorem10, lorem40 } from '../test-utils';
-import Link from '../Link';
+import InlineAlert, { InlineAlertProps } from '../';
+import { lorem10, lorem40 } from '../../test-utils';
+import Link from '../../Link';
 
 /**
  * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.

package/src/InputWithDisplayFormat/{InputWithDisplayFormat.story.tsx → _stories/InputWithDisplayFormat.story.tsx}

@@ -1,9 +1,11 @@
-import { userEvent, within, fn } from 'storybook/test';
-
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
-import { Field, FieldProps } from '../Field/Field';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '..';
+import { Field, FieldProps } from '../../Field/Field';
 import { Meta, type StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
 

package/src/InputWithDisplayFormat/{InputWithDisplayFormat.test.story.tsx → _stories/InputWithDisplayFormat.test.story.tsx}

@@ -1,8 +1,8 @@
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
-import { Field, FieldProps } from '../Field/Field';
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '..';
+import { Field, FieldProps } from '../../Field/Field';
 
 const meta: Meta<typeof InputWithDisplayFormat> = {
   title: 'Forms/InputWithDisplayFormat/Tests',

package/src/Inputs/{InputGroup.story.tsx → _stories/InputGroup.story.tsx}

@@ -2,15 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { Button } from '..';
-import { Field } from '../Field/Field';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import { Field } from '../../Field/Field';
 
-import { Input } from './Input';
+import { Input } from '../Input';
 import { Flag } from '@wise/art';
-import { InputGroup } from './InputGroup';
-import AvatarView from '../AvatarView';
-import PhoneNumberInput from '../PhoneNumberInput';
+import { InputGroup } from '../InputGroup';
+import AvatarView from '../../AvatarView';
+import PhoneNumberInput from '../../PhoneNumberInput';
+import Button from '../../Button';
 
 export default {
   component: InputGroup,

package/src/Inputs/{SearchInput.story.tsx → _stories/SearchInput.story.tsx}

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { Size } from '../common';
-import { Field } from '../Field/Field';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import { Size } from '../../common';
+import { Field } from '../../Field/Field';
 
-import { SearchInput } from './SearchInput';
+import { SearchInput } from '../SearchInput';
 
 export default {
   component: SearchInput,

package/src/Inputs/{TextArea.story.tsx → _stories/TextArea.story.tsx}

@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import { Field } from '../Field/Field';
-import { Sentiment } from '../common';
-import { TextArea } from './TextArea';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import { Field } from '../../Field/Field';
+import { Sentiment } from '../../common';
+import { TextArea } from '../..';
 
 /**
  * TextArea must be the only input with `maxLength` inside a given Field.

package/src/Inputs/{TextArea.test.story.tsx → _stories/TextArea.test.story.tsx}

@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { Field } from '../Field/Field';
-import { TextArea } from './TextArea';
+import { Field } from '../../Field/Field';
+import { TextArea } from '../TextArea';
 
 const meta: Meta<typeof TextArea> = {
   title: 'Forms/TextArea/Tests',

package/src/InstructionsList/{InstructionsList.story.tsx → _stories/InstructionsList.story.tsx}

@@ -1,10 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
+import Link from '../../Link';
 
-import Link from '../Link';
-
-import InstructionsList, { InstructionsListProps } from './InstructionsList';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import InstructionsList from '../InstructionsList';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: InstructionsList,

package/src/Label/{Label.story.tsx → _stories/Label.story.tsx}

@@ -1,6 +1,6 @@
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import Info from '../Info';
-import { Label } from './Label';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import Info from '../../Info';
+import { Label } from '..';
 
 export default {
   component: Label,

package/src/LegacyListItem/{LegacyListItem.story.tsx → _stories/LegacyListItem.story.tsx}

@@ -2,11 +2,11 @@ import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button, IconButton, List } from '..';
-import AvatarView from '../AvatarView';
-import Info from '../Info';
-import Title from '../Title/Title';
-import LegacyListItem from '.';
+import { Button, IconButton, List } from '../..';
+import AvatarView from '../../AvatarView';
+import Info from '../../Info';
+import Title from '../../Title/Title';
+import LegacyListItem from '..';
 
 /**
  * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs)

package/src/LegacyListItem/{LegacyListItem.test.story.tsx → _stories/LegacyListItem.test.story.tsx}

@@ -1,8 +1,8 @@
 import { FastFlag } from '@transferwise/icons';
-import Button from '../Button';
-import AvatarView from '../AvatarView';
-import LegacyListItem, { type LegacyListItemProps } from '.';
-import List from '../List';
+import Button from '../../Button';
+import AvatarView from '../../AvatarView';
+import LegacyListItem, { type LegacyListItemProps } from '..';
+import List from '../../List';
 
 export default {
   component: LegacyListItem,

package/src/Link/{Link.story.tsx → _stories/Link.story.tsx}

@@ -1,10 +1,10 @@
-import Body from '../Body/Body';
-import { Typography } from '../common';
-import Title from '../Title/Title';
+import Body from '../../Body/Body';
+import { Typography } from '../../common';
+import Title from '../../Title/Title';
 
-import SentimentSurface from '../SentimentSurface';
-import Link from '.';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
+import SentimentSurface from '../../SentimentSurface';
+import Link from '..';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Link,

package/src/List/{List.story.tsx → _stories/List.story.tsx}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
-import ListItem from '../ListItem';
-import List from './List';
+import { createSandboxStory, globalScope } from '../../../.storybook/components/sandbox/SandboxEditor';
+import ListItem from '../../ListItem';
+import List from '../';
 
 export default {
   component: List,

package/src/ListItem/AdditionalInfo/{ListItemAdditionalInfo.story.tsx → _stories/ListItemAdditionalInfo.story.tsx}

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { action } from 'storybook/actions';
-import { lorem20 } from '../../test-utils';
-import List from '../../List';
-import { ListItem } from '../ListItem';
+import { lorem20 } from '../../../test-utils';
+import List from '../../../List';
+import { ListItem } from '../../..';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+} from '../../_stories/subcomponents';
+import { disableControls } from '../../_stories/helpers';
+import type { ListItemAdditionalInfoProps } from '..';
+import { action } from 'storybook/actions';
 
 /**
  * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.

package/src/ListItem/AvatarLayout/{ListItemAvatarLayout.story.tsx → _stories/ListItemAvatarLayout.story.tsx}

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Flag } from '@wise/art';
-import { lorem10 } from '../../test-utils';
-import { ListItem } from '../ListItem';
-import List from '../../List';
+import { lorem10 } from '../../../test-utils';
+import { ListItem } from '../../..';
+import List from '../../../List';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
+} from '../../_stories/subcomponents';
+import { disableControls } from '../../_stories/helpers';
+import type { ListItemAvatarLayoutProps } from '..';
 
 export default {
   component: ListItem.AvatarLayout,

package/src/ListItem/AvatarView/{ListItemAvatarView.story.tsx → _stories/ListItemAvatarView.story.tsx}

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Leaf, Taxi } from '@transferwise/icons';
-import { lorem10 } from '../../test-utils';
-import { ProfileType } from '../../common';
-import List from '../../List';
-import { ListItem } from '../ListItem';
+import { lorem10 } from '../../../test-utils';
+import { ProfileType } from '../../../common';
+import List from '../../../List';
+import { ListItem } from '../../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { ListItemAvatarViewProps } from './ListItemAvatarView';
+} from '../../_stories/subcomponents';
+import { disableControls } from '../../_stories/helpers';
+import type { ListItemAvatarViewProps } from '../ListItemAvatarView';
 
 const hideControls = disableControls(['badge', 'children']);
 

package/src/ListItem/Button/{ListItemButton.story.tsx → _stories/ListItemButton.story.tsx}

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight } from '@transferwise/icons';
-import List from '../../List';
-import { ListItem } from '../ListItem';
+import List from '../../../List';
+import { ListItem } from '../../..';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
-import type { ListItemButtonProps } from './ListItemButton';
+} from '../../_stories/subcomponents';
+import { disableControls } from '../../_stories/helpers';
+import type { ListItemButtonProps } from '..';
 
 const hideControls = disableControls([
   'onClick',

package/src/ListItem/Checkbox/{ListItemCheckbox.story.tsx → _stories/ListItemCheckbox.story.tsx}

@@ -1,12 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-import List from '../../List';
-import { ListItem } from '../ListItem';
+import List from '../../../List';
+import { ListItem } from '../../..';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_MEDIA as MEDIA,
-} from '../_stories/subcomponents';
-import type { ListItemCheckboxProps } from './ListItemCheckbox';
+} from '../../_stories/subcomponents';
+import type { ListItemCheckboxProps } from '..';
 import { fn } from 'storybook/test';
 
 const meta: Meta<ListItemCheckboxProps> = {