@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-da1781d

package/src/{item/ItemIconButton.tsx → listItem/ListItemIconButton.tsx}

@@ -2,11 +2,11 @@ import { default as IconButtonComp, IconButtonProps } from '../iconButton';
 import { useItemControl } from './useItemControl';
 import { ReactNode } from 'react';
 
-export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
+export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
   children: ReactNode;
 };
 
-export const IconButton = function (props: ItemIconButtonProps) {
+export const IconButton = function (props: ListItemIconButtonProps) {
   const { baseItemProps } = useItemControl('icon-button');
 
   return <IconButtonComp {...props} size={32} disabled={baseItemProps.disabled} />;

package/src/{item/ItemMedia.tsx → listItem/ListItemMedia.tsx}

@@ -5,31 +5,31 @@ import { clsx } from 'clsx';
 
 type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
 
-export type ItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
 
-export const AvatarView = ({ className, size = 48, ...props }: ItemAvatarViewProps) => {
+export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
   return (
     <AvatarViewComp
       {...props}
       size={size}
-      className={clsx('np-item-media-avatar-view', className)}
+      className={clsx('wds-list-item-media-avatar-view', className)}
     />
   );
 };
 
-export type ItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
 
-export const AvatarLayout = ({ className, size = 48, ...props }: ItemAvatarLayoutProps) => {
+export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
   return (
     <AvatarLayoutComp
       {...props}
       size={size}
-      className={clsx('np-item-media-avatar-layout', className)}
+      className={clsx('wds-list-item-media-avatar-layout', className)}
     />
   );
 };
 
-export type ItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
+export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
   SizeProp & {
     alt?: string;
   };
@@ -37,10 +37,10 @@ export type ItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt
 /**
  * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
  */
-export const Image = ({ alt = '', size = 48, ...props }: ItemImageProps) => {
+export const Image = ({ alt = '', size = 48, ...props }: ListItemImageProps) => {
   return (
     <div
-      className={clsx('np-item-media-image')}
+      className={clsx('wds-list-item-media-image')}
       style={{
         // @ts-expect-error CSS custom props allowed
         '--item-media-image-size': `${size}px`,

package/src/{item/ItemNavigation.tsx → listItem/ListItemNavigation.tsx}

@@ -2,9 +2,9 @@ import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
 import { ButtonProps } from '../button/Button.types';
 import { useItemControl } from './useItemControl';
 
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
 
-export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
+export const Navigation = function Navigation({ onClick }: ListItemNavigationProps) {
   const { baseItemProps } = useItemControl('navigation');
 
   return baseItemProps.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;

package/src/listItem/index.ts

@@ -1,4 +1,10 @@
-export { List } from './List';
-export type { ListProps } from './List';
+export type { Props as ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+export type { ListItemCheckboxProps } from './ListItemCheckbox';
+export type {
+  ListItemImageProps,
+  ListItemAvatarViewProps,
+  ListItemAvatarLayoutProps,
+} from './ListItemMedia';
+
 export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';

package/src/{item → listItem}/prompt/Prompt.spec.tsx

@@ -1,19 +1,19 @@
 import { render, screen, mockMatchMedia } from '../../test-utils';
-import { ItemPrompt } from './Prompt';
+import { Prompt } from './Prompt';
 import { Sentiment } from '../../common';
 
 mockMatchMedia();
 
-describe('ItemPrompt', () => {
+describe('ListItem.Prompt', () => {
   it('renders the aria-label when provided', () => {
     const ariaLabel = 'Test aria-label';
     render(
-      <ItemPrompt
+      <Prompt
         type={Sentiment.POSITIVE}
         action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
       >
         Positive prompt
-      </ItemPrompt>,
+      </Prompt>,
     );
 
     expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
@@ -21,12 +21,12 @@ describe('ItemPrompt', () => {
 
   it('applies the interactive class when href is provided', () => {
     render(
-      <ItemPrompt
+      <Prompt
         type={Sentiment.POSITIVE}
         action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
       >
         Interactive link
-      </ItemPrompt>,
+      </Prompt>,
     );
 
     expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
@@ -34,32 +34,32 @@ describe('ItemPrompt', () => {
 
   it('applies the interactive class when onClick is provided', () => {
     render(
-      <ItemPrompt
+      <Prompt
         type={Sentiment.POSITIVE}
         action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
       >
         Interactive button
-      </ItemPrompt>,
+      </Prompt>,
     );
 
     expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
   });
 
   it('does not apply the interactive class when no action is provided', () => {
-    render(<ItemPrompt type={Sentiment.POSITIVE}>Non-interactive prompt</ItemPrompt>);
+    render(<Prompt type={Sentiment.POSITIVE}>Non-interactive prompt</Prompt>);
 
     expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
   });
 
   it('renders the children content', () => {
-    render(<ItemPrompt type={Sentiment.POSITIVE}>This is a child prompt</ItemPrompt>);
+    render(<Prompt type={Sentiment.POSITIVE}>This is a child prompt</Prompt>);
 
     expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
   });
 
   it('spreads additional props to the wrapper element', () => {
     render(
-      <ItemPrompt
+      <Prompt
         type={Sentiment.POSITIVE}
         action={{
           href: 'https://example.com',
@@ -68,7 +68,7 @@ describe('ItemPrompt', () => {
         }}
       >
         Custom props prompt
-      </ItemPrompt>,
+      </Prompt>,
     );
 
     const link = screen.getByRole('link');

package/src/{item → listItem}/prompt/Prompt.story.tsx

@@ -1,12 +1,12 @@
 import Link from '../../link';
 import { Sentiment } from '../../common';
-import { ItemPrompt, ItemPromptProps } from './Prompt';
+import { Prompt, ListItemPromptProps } from './Prompt';
 import { lorem40 } from '../../test-utils';
 import { StoryObj } from '@storybook/react';
 
 export default {
-  component: ItemPrompt,
-  title: 'Content/Item/Prompt',
+  component: Prompt,
+  title: 'Content/ListItem/Prompt',
   args: {
     type: Sentiment.NEGATIVE,
     children: 'You have done a terrible thing',
@@ -40,7 +40,7 @@ export default {
 };
 
 type CustomStory = StoryObj<
-  ItemPromptProps & {
+  ListItemPromptProps & {
     interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
   }
 >;
@@ -59,7 +59,7 @@ export const Basic: CustomStory = {
   render: ({ interactivity, ...args }) => {
     return (
       <div>
-        <ItemPrompt
+        <Prompt
           type={args.type}
           action={
             interactivity === 'full-anchor'
@@ -74,7 +74,7 @@ export const Basic: CustomStory = {
           }
         >
           {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
-        </ItemPrompt>
+        </Prompt>
       </div>
     );
   },
@@ -84,37 +84,37 @@ export const Variants = () => {
   return (
     <>
       <div className="m-b-2">
-        <ItemPrompt type={Sentiment.POSITIVE}>
+        <Prompt type={Sentiment.POSITIVE}>
           Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt type={Sentiment.NEGATIVE}>
+        <Prompt type={Sentiment.NEGATIVE}>
           Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt type={Sentiment.NEUTRAL}>
+        <Prompt type={Sentiment.NEUTRAL}>
           Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt type={Sentiment.WARNING}>
+        <Prompt type={Sentiment.WARNING}>
           Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt type="discount">
+        <Prompt type="discount">
           Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt type="savings">
+        <Prompt type="savings">
           Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt
+        <Prompt
           type="discount"
           action={{
             href: 'www.wise.com',
@@ -123,10 +123,10 @@ export const Variants = () => {
           }}
         >
           The whole prompt is secretly clickable
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt
+        <Prompt
           type="negative"
           action={{
             href: 'www.wise.com',
@@ -135,10 +135,10 @@ export const Variants = () => {
           }}
         >
           The whole prompt is secretly clickable as an anchor tag
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt
+        <Prompt
           type="warning"
           action={{
             onClick: () => {
@@ -148,10 +148,10 @@ export const Variants = () => {
           }}
         >
           The whole prompt is secretly clickable as a button
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2">
-        <ItemPrompt
+        <Prompt
           type="neutral"
           action={{
             href: 'www.wise.com',
@@ -160,10 +160,10 @@ export const Variants = () => {
           }}
         >
           The whole prompt is secretly clickable
-        </ItemPrompt>
+        </Prompt>
       </div>
       <div className="m-b-2" style={{ maxWidth: '300px' }}>
-        <ItemPrompt type="warning">The prompt has very long text that wraps {lorem40}</ItemPrompt>
+        <Prompt type="warning">The prompt has very long text that wraps {lorem40}</Prompt>
       </div>
     </>
   );

package/src/{item → listItem}/prompt/Prompt.tsx

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { LinkProps } from '../../link';
 import Body from '../../body';
 
-export type ItemPromptProps = {
+export type ListItemPromptProps = {
   type:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
     | 'discount'
@@ -14,7 +14,7 @@ export type ItemPromptProps = {
   action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
 };
 
-export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
+export const Prompt = ({ type, children, action }: ListItemPromptProps) => {
   const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
 
   const icon =
@@ -29,7 +29,7 @@ export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
   return (
     <Wrapper
       className={clsx(
-        'np-item-prompt',
+        'wds-list-item-prompt',
         type,
         (action?.href || action?.onClick) && 'np-prompt-interactive',
       )}
@@ -41,4 +41,4 @@ export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
   );
 };
 
-export default ItemPrompt;
+export default Prompt;

package/src/listItem/useItemControl.tsx

@@ -0,0 +1,12 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, ListItemContextData, ListItemTypes } from './ListItem';
+
+export function useItemControl(controlType: ListItemTypes) {
+  const { setControlType, props: baseItemProps } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setControlType(controlType);
+  }, [controlType, setControlType]);
+
+  return { baseItemProps };
+}

package/src/main.css

@@ -2648,7 +2648,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-item {
+.wds-list-item {
   padding: 16px;
   padding: var(--size-16);
   border-radius: 24px;
@@ -2658,63 +2658,63 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 16px;
   gap: var(--size-16);
 }
-.np-item-interactive {
+.wds-list-item-interactive {
   cursor: pointer;
 }
-.np-item-interactive:hover {
+.wds-list-item-interactive:hover {
   background-color: var(--color-background-screen-hover);
 }
-.np-item-interactive:active {
+.wds-list-item-interactive:active {
   background-color: var(--color-background-screen-active);
 }
-.np-item-media-image {
+.wds-list-item-media-image {
   width: var(--item-media-image-size);
   height: var(--item-media-image-size);
 }
-.np-item-body {
+.wds-list-item-body {
   width: 100%;
 }
-.np-item-title {
+.wds-list-item-title {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-item-additional-info {
+.wds-list-item-additional-info {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-item-value {
+.wds-list-item-value {
   flex: 0 0 auto;
 }
-.np-item-control {
+.wds-list-item-control {
   flex: 0 0 auto;
 }
-.np-item-spotlight-active {
+.wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-item-spotlight-active:hover {
+.wds-list-item-spotlight-active:hover {
   background-color: var(--color-background-neutral-hover);
 }
-.np-item-spotlight-active:active {
+.wds-list-item-spotlight-active:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-item-spotlight-inactive {
+.wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
   border: 1px dashed rgba(0,0,0,0.10196);
   border: 1px dashed var(--color-border-neutral);
 }
 @supports (color: color-mix(in lch, red, blue)) {
-.np-item-spotlight-inactive {
+.wds-list-item-spotlight-inactive {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 }
 }
-.np-item-spotlight-inactive:hover {
+.wds-list-item-spotlight-inactive:hover {
   background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
 }
-.np-item-spotlight-inactive:active {
+.wds-list-item-spotlight-inactive:active {
   background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
 }
-.np-item-prompt {
+.wds-list-item-prompt {
   display: inline-flex;
   padding-top: calc(8px / 2);
   padding-top: calc(var(--padding-x-small) / 2);
@@ -2729,7 +2729,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   word-break: break-word;
   word-wrap: break-word;
 }
-.np-item-prompt .np-prompt-icon {
+.wds-list-item-prompt .np-prompt-icon {
   padding-right: calc(12px / 2);
   padding-right: calc(var(--size-12) / 2);
   padding-top: calc(4px - 1px);
@@ -2737,103 +2737,103 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-bottom: calc(4px - 1px);
   padding-bottom: calc(var(--size-4) - 1px);
 }
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt a {
+.wds-list-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
-.np-item-prompt.np-prompt-interactive {
+.wds-list-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.negative {
+.wds-list-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
 }
-.np-item-prompt.negative a {
+.wds-list-item-prompt.negative a {
   color: var(--color-sentiment-negative-primary);
 }
-.np-item-prompt.negative a:hover {
+.wds-list-item-prompt.negative a:hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.np-item-prompt.negative a:active {
+.wds-list-item-prompt.negative a:active {
   color: var(--color-sentiment-negative-primary-active);
 }
-.np-prompt-interactive.np-item-prompt.negative:hover {
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
 }
-.np-prompt-interactive.np-item-prompt.negative:active {
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
-.np-item-prompt.neutral {
+.wds-list-item-prompt.neutral {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-item-prompt.neutral a {
+.wds-list-item-prompt.neutral a {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.np-prompt-interactive.np-item-prompt.neutral:hover {
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
   background-color: var(--color-background-neutral-hover);
 }
-.np-prompt-interactive.np-item-prompt.neutral:active {
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-item-prompt.warning {
+.wds-list-item-prompt.warning {
   background-color: var(--color-sentiment-warning-secondary);
   color: var(--color-sentiment-warning-content);
 }
-.np-item-prompt.warning a {
+.wds-list-item-prompt.warning a {
   color: var(--color-sentiment-warning-content);
 }
-.np-item-prompt.warning a:hover {
+.wds-list-item-prompt.warning a:hover {
   color: var(--color-sentiment-warning-content-hover);
 }
-.np-item-prompt.warning a:active {
+.wds-list-item-prompt.warning a:active {
   color: var(--color-sentiment-warning-content-active);
 }
-.np-prompt-interactive.np-item-prompt.warning:hover {
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
 }
-.np-prompt-interactive.np-item-prompt.warning:active {
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
 }
 .np-field-control {
@@ -5353,6 +5353,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 50px;
   padding: 2px;
   border-radius: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .np-switch:focus {
   outline: none;

package/src/main.less

@@ -39,7 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./item/Item.less";
+@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";
@@ -78,7 +78,7 @@
 @import "./uploadInput/uploadItem/UploadItem.less";
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
-@import "./listItem/ListItem.less";
+@import "./legacylistItem/LegacyListItem.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -159,11 +159,11 @@ describe('PhoneNumberInput', () => {
       });
     });
 
-    describe('when an invalid model is supplied', () => {
-      it('should not re-explode model', () => {
+    describe('when an partial model is supplied (with a matching prefix)', () => {
+      it('should set the select to the matching prefix and put the rest of the number in the suffix', () => {
         customRender({ initialValue: '+123' });
-        expect(getPrefixEl()).toHaveTextContent('+44');
-        expect(getInputEl()).toHaveValue('');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+        expect(getInputEl()).toHaveValue('23');
       });
     });
   });