@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '../../../test-utils';
+
+import UploadImageStep from '.';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+describe('uploadImageStep', () => {
+  const UPLOADIMAGE_STEP_PROPS = {
+    fileDropped: jest.fn(),
+    isComplete: false,
+    usAccept: 'image/*',
+    usButtonText: 'Upload Image',
+    usDisabled: false,
+    usLabel: 'Upload your image',
+    usHelpImage: 'https://example.com/help-image.png',
+    usPlaceholder: 'Drag and drop an image or click to upload',
+    errorMessage: '',
+    errorIconLabel: '',
+  };
+
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const view = render(<UploadImageStep {...UPLOADIMAGE_STEP_PROPS} />);
+    container = view.container;
+  });
+
+  test('renders container', () => {
+    const processing = container.querySelector('.droppable-default-card');
+    expect(processing).toBeInTheDocument();
+  });
+
+  test('renders helpImage or Upload icon', () => {
+    const uploadIcons = screen.getAllByAltText('Upload your image');
+    expect(uploadIcons.length).toBeGreaterThan(0);
+    expect(uploadIcons[0]).toBeInTheDocument();
+  });
+
+  test('renders label', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usLabel)).toBeInTheDocument();
+  });
+
+  test('renders placeholder', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usPlaceholder)).toBeInTheDocument();
+  });
+
+  test('renders buttonText', () => {
+    expect(screen.getByText(UPLOADIMAGE_STEP_PROPS.usButtonText)).toBeInTheDocument();
+  });
+
+  test('should render with `errorIconLabel` and `errorMessage` override', () => {
+    const errorIconLabel = 'Error icon label';
+    const errorMessage = 'Maximum filesize is 2MB.';
+    const { container } = render(
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
+        errorMessage={errorMessage}
+        errorIconLabel={errorIconLabel}
+      />,
+    );
+
+    expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+});

package/build/styles/item/Item.css

@@ -1,60 +0,0 @@
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-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 {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}

package/build/types/item/Item.d.ts

@@ -1,39 +0,0 @@
-import { ReactNode } from 'react';
-export type ItemTypes = 'none' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
-export type Props = {
-    as?: 'li' | 'div' | 'span';
-    inverted?: boolean;
-    disabled?: boolean;
-    partialInteractivity?: boolean;
-    spotlight?: 'active' | 'inactive';
-    title: ReactNode;
-    subtitle?: ReactNode;
-    additionalInfo?: ReactNode;
-    valueTitle?: ReactNode;
-    valueSubtitle?: ReactNode;
-    media?: ReactNode;
-    control?: ReactNode;
-    prompt?: ReactNode;
-};
-export type ItemContextData = {
-    setControlType: (type: ItemTypes) => void;
-    ids?: {
-        label: string;
-        additionalInfo: string;
-        value: string;
-        control: string;
-        prompt: string;
-    };
-    props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-export declare const ItemContext: import("react").Context<ItemContextData>;
-export declare const Item: {
-    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
-    Image: (props: import("./ItemImage").ItemImageProps) => import("react").JSX.Element;
-    AdditionalInfo: ({ children, action }: import("./ItemAdditionalInfo").ItemAdditionalInfoProps) => import("react").JSX.Element;
-    Checkbox: (props: import("./ItemCheckbox").ItemCheckboxProps) => import("react").JSX.Element;
-    IconButton: (props: import("./ItemIconButton").ItemIconButtonProps) => import("react").JSX.Element;
-    Navigation: ({ onClick }: import("./ItemNavigation").ItemNavigationProps) => import("react").JSX.Element;
-};
-export default Item;
-//# sourceMappingURL=Item.d.ts.map

package/build/types/item/Item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAU3E,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,WAAW,0CAAuC,CAAC;AAEhE,eAAO,MAAM,IAAI;uIAad,KAAK;;;;;;CA8EP,CAAC;AAUF,eAAe,IAAI,CAAC"}

package/build/types/item/ItemAdditionalInfo.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { LinkProps } from '../link';
-export type ItemAdditionalInfoProps = PropsWithChildren<{
-    action: Pick<LinkProps, 'href' | 'onClick' | 'target'>;
-}>;
-export declare const AdditionalInfo: ({ children, action }: ItemAdditionalInfoProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemAdditionalInfo.d.ts.map

package/build/types/item/ItemAdditionalInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/item/ItemAdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,yBAAmC,uBAAuB,gCAIpF,CAAC"}

package/build/types/item/ItemCheckbox.d.ts

@@ -1,4 +0,0 @@
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
-export declare const Checkbox: (props: ItemCheckboxProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemCheckbox.d.ts.map

package/build/types/item/ItemCheckbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/item/ItemCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;AAEpG,eAAO,MAAM,QAAQ,UAAoB,iBAAiB,gCAQzD,CAAC"}

package/build/types/item/ItemIconButton.d.ts

@@ -1,4 +0,0 @@
-import { IconButtonProps } from '../iconButton';
-export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
-export declare const IconButton: (props: ItemIconButtonProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemIconButton.d.ts.map

package/build/types/item/ItemIconButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/item/ItemIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,UAAoB,mBAAmB,gCAQ7D,CAAC"}

package/build/types/item/ItemImage.d.ts

@@ -1,4 +0,0 @@
-import { ImageProps } from '../image/Image';
-export type ItemImageProps = Pick<ImageProps, 'src' | 'alt'>;
-export declare const Image: (props: ItemImageProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemImage.d.ts.map

package/build/types/item/ItemImage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemImage.d.ts","sourceRoot":"","sources":["../../../src/item/ItemImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;AAE7D,eAAO,MAAM,KAAK,UAAoB,cAAc,gCAInD,CAAC"}

package/build/types/item/ItemNavigation.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps } from '../button/Button.types';
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-export declare const Navigation: ({ onClick }: ItemNavigationProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemNavigation.d.ts.map

package/build/types/item/ItemNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/item/ItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAQ7E,CAAC"}

package/build/types/item/index.d.ts

@@ -1,5 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';
-//# sourceMappingURL=index.d.ts.map

package/build/types/item/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/src/item/Item.css

@@ -1,60 +0,0 @@
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-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 {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}

package/src/item/Item.less

@@ -1,60 +0,0 @@
-.np-item {
-    padding: var(--size-16);
-    border-radius: var(--radius-large);
-    background-color: var(--color-background-screen);
-    display: flex;
-    gap: var(--size-16);
-    align-items: center;
-    flex-direction: row;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--color-background-screen-hover);
-    }
-
-    &:active {
-        background-color: var(--color-background-screen-active);
-    }
-
-    &-media {
-        flex: 0 0 auto;
-        align-items: flex-start;
-    }
-
-    &-title {
-        color: var(--color-content-primary);
-    }
-
-    &-value {
-        flex: 0 0 auto;
-    }
-    
-    &-control {
-        flex: 0 0 auto;
-    }
-
-    &-spotlight {
-        &-active {
-            background-color: var(--color-background-neutral);
-
-            &:hover {
-                background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-                background-color: var(--color-background-neutral-active);
-            }
-        }
-
-        &-inactive {
-            background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-            border: 1px dashed var(--color-border-neutral);
-        
-            &:hover {
-                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-            }
-            &:active {
-                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-            }
-        }
-    }
-}

package/src/item/Item.story.tsx

@@ -1,39 +0,0 @@
-import Item, { Props as ItemProps } from './Item';
-import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-export default {
-  component: Item,
-  title: 'Content/Item',
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-export const ItemRadio: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-export const ItemButton: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* partially interactive */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-// add intaces with dark mode

package/src/item/Item.tsx

@@ -1,153 +0,0 @@
-import { createContext, ReactNode, useId, useMemo, useState } from 'react';
-import { Typography } from '../common';
-import Body from '../body';
-import { Image } from './ItemImage';
-import { AdditionalInfo } from './ItemAdditionalInfo';
-import { IconButton } from './ItemIconButton';
-import { Checkbox } from './ItemCheckbox';
-import { Navigation } from './ItemNavigation';
-import { clsx } from 'clsx';
-
-export type ItemTypes =
-  | 'none'
-  | 'navigation'
-  | 'radio'
-  | 'checkbox'
-  | 'switch'
-  | 'button'
-  | 'icon-button';
-
-export type Props = {
-  as?: 'li' | 'div' | 'span';
-  inverted?: boolean;
-  disabled?: boolean;
-  partialInteractivity?: boolean;
-  spotlight?: 'active' | 'inactive';
-  title: ReactNode;
-  subtitle?: ReactNode;
-  additionalInfo?: ReactNode;
-  valueTitle?: ReactNode;
-  valueSubtitle?: ReactNode;
-  media?: ReactNode;
-  control?: ReactNode;
-  prompt?: ReactNode;
-};
-
-export type ItemContextData = {
-  setControlType: (type: ItemTypes) => void;
-  ids?: {
-    label: string;
-    additionalInfo: string;
-    value: string;
-    control: string;
-    prompt: string;
-  };
-  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-
-// @ts-expect-error for now let's mock it with `null` value
-// but actually by default we should specify `setControlType('none')`
-export const ItemContext = createContext<ItemContextData>(null);
-
-export const Item = ({
-  as: View = 'li',
-  title,
-  subtitle,
-  additionalInfo,
-  prompt,
-  inverted,
-  media,
-  spotlight = undefined,
-  valueTitle,
-  valueSubtitle,
-  control,
-  disabled,
-}: Props) => {
-  /*
-  const returnType = (): ReactNode => {
-    switch (type) {
-      case 'Navigation':
-        return <Chevron orientation={Position.RIGHT} disabled />;
-      case 'Radio':
-        return <RadioButton name="Hello" checked />;
-      case 'Checkbox':
-        return <CheckboxButton name="Hello" checked />;
-      case 'Switch':
-        return <Switch onClick={() => console.log('clicked')} />;
-      case 'Button':
-        return <Button v2>Hello</Button>;
-      case 'IconButton':
-        return (
-          <IconButton size={40} priority="minimal">
-            <InfoCircle />
-          </IconButton>
-        );
-      case 'NonInteractive':
-      default:
-        return <></>;
-    }
-  };
-  */
-  const idPrefix = useId();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [controlType, setControlType] = useState<ItemTypes>();
-  const ids = {
-    label: `${idPrefix}_label`,
-    value: `${idPrefix}_value`,
-    control: `${idPrefix}_control`,
-    prompt: `${idPrefix}_prompt`,
-    additionalInfo: `${idPrefix}_additional-info`,
-  };
-
-  const itemCtx = useMemo(
-    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
-    [],
-  );
-
-  return (
-    <ItemContext.Provider value={itemCtx}>
-      <View
-        className={clsx('np-item', `np-item-${controlType}`, {
-          [`np-item-spotlight-${spotlight}`]: !!spotlight,
-        })}
-      >
-        {media && <div className="np-item-media">{media}</div>}
-        <Body>
-          {/* @ts-expect-error div can have role and aria-lavel props */}
-          <Body
-            type={Typography.BODY_LARGE_BOLD}
-            className="np-item-title"
-            // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-            // so we enable header semantics via `role` and `aria-level` attrs
-            role="heading"
-            aria-level="4"
-          >
-            {title}
-          </Body>
-          <Body className="np-item-subtitle">{subtitle}</Body>
-          {additionalInfo}
-          {prompt}
-        </Body>
-        {(valueTitle || valueSubtitle) && (
-          <Body id={ids.value} className="np-item-value">
-            <Body type={Typography.BODY_LARGE_BOLD} className="np-item-title-value">
-              {valueTitle}
-            </Body>
-            <Body className="np-item-subtitle-value">{valueSubtitle}</Body>
-          </Body>
-        )}
-        <Body className="np-item-control">{control}</Body>
-      </View>
-    </ItemContext.Provider>
-  );
-};
-
-/* eslint-disable functional/immutable-data */
-Item.Image = Image;
-Item.AdditionalInfo = AdditionalInfo;
-Item.Checkbox = Checkbox;
-Item.IconButton = IconButton;
-Item.Navigation = Navigation;
-/* eslint-enable functional/immutable-data */
-
-export default Item;

package/src/item/ItemAdditionalInfo.tsx

@@ -1,14 +0,0 @@
-import { PropsWithChildren, ReactNode, useContext, useEffect } from 'react';
-import Item, { ItemContext, ItemContextData } from './Item';
-import Body from '../body';
-import { LinkProps } from '../link';
-
-export type ItemAdditionalInfoProps = PropsWithChildren<{
-  action: Pick<LinkProps, 'href' | 'onClick' | 'target'>;
-}>;
-
-export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
-  const { ids, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  return <Body id={ids?.additionalInfo}>{children}</Body>;
-};

package/src/item/ItemCheckbox.tsx

@@ -1,16 +0,0 @@
-import { useContext, useEffect } from 'react';
-import CheckboxButton from '../checkboxButton';
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-import { ItemContext, ItemContextData } from './Item';
-
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
-
-export const Checkbox = function (props: ItemCheckboxProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('checkbox');
-  }, []);
-
-  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
-};

package/src/item/ItemIconButton.tsx

@@ -1,15 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { default as IconButtonComp, IconButtonProps } from '../iconButton';
-import { ItemContext, ItemContextData } from './Item';
-
-export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
-
-export const IconButton = function (props: ItemIconButtonProps) {
-  const { setControlType } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('icon-button');
-  }, []);
-
-  return <IconButtonComp {...props} size={32} />;
-};

package/src/item/ItemImage.tsx

@@ -1,11 +0,0 @@
-import { useContext, useEffect } from 'react';
-import Item, { ItemContext, ItemContextData } from './Item';
-import { default as Img, ImageProps } from '../image/Image';
-
-export type ItemImageProps = Pick<ImageProps, 'src' | 'alt'>;
-
-export const Image = function (props: ItemImageProps) {
-  const { ids, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  return <Img {...props} />;
-};

package/src/item/ItemNavigation.tsx

@@ -1,16 +0,0 @@
-import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
-import { ButtonProps } from '../button/Button.types';
-import Item, { ItemContext, ItemContextData } from './Item';
-import { useContext, useEffect } from 'react';
-
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-
-export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('navigation');
-  }, []);
-
-  return baseItemProps?.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
-};

package/src/item/index.ts

@@ -1,4 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';