@transferwise/components 0.0.0-experimental-69786e7 → 0.0.0-experimental-b6153fb

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1 @@
+{"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/build/types/test-utils/fake-data.d.ts

@@ -1,4 +1,5 @@
 export declare const lorem10 = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?";
+export declare const lorem20 = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.";
 export declare const lorem40 = "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?";
 export declare const lorem100 = "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum quisquam fuga dolore veritatis assumenda rerum, non, sint aliquam, excepturi architecto temporibus quis? Quo, deleniti nobis, illo necessitatibus accusamus commodi error fuga culpa sequi, incidunt voluptatum tempore quisquam quos eos modi impedit sit! Eveniet libero optio assumenda rem accusantium quod quas, recusandae, incidunt mollitia harum dolorum. Dolor porro hic mollitia accusantium vel commodi, ipsam a suscipit iusto placeat numquam excepturi amet nostrum aliquid aperiam sequi deleniti asperiores fugit cumque ipsa voluptatem culpa non libero iste. Placeat rem dolore quisquam aperiam, eligendi facere quos minima totam a ut corporis culpa! Veniam, illo!";
 export declare const lorem500 = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi commodi eos placeat aut quidem et error ex qui. Reprehenderit animi officiis magnam dicta, alias eligendi facilis sit fuga suscipit qui voluptatibus, quam harum beatae omnis sint sapiente dolorum cum officia dignissimos ab ipsa, deleniti voluptates exercitationem tempore! Fugit consequuntur ullam, similique tenetur corporis laborum sed sint, necessitatibus natus voluptatem, eius eveniet placeat quos quaerat officia officiis magni reprehenderit eaque! Dolorum odio iste vitae magnam, voluptatum pariatur unde, quod at adipisci reprehenderit dignissimos id modi quaerat rerum et dolorem. Rerum ratione beatae, repudiandae temporibus ipsam accusamus deserunt! Maiores, eos nisi laboriosam soluta rem minus expedita repudiandae accusamus aperiam rerum facere ducimus voluptas! Rerum fugit eum quasi. At sapiente quaerat, similique inventore quia magni cupiditate molestias odio voluptate quasi culpa ullam sit unde veritatis ut dicta ad nihil veniam accusamus eveniet vel placeat minus numquam nostrum! Delectus quas adipisci debitis cumque doloremque, nobis, obcaecati dolorem commodi possimus nesciunt vero? Excepturi saepe explicabo dolorem facere itaque optio, totam tempore earum culpa fugit ullam officia maiores dolores facilis voluptate consequuntur a voluptas, asperiores obcaecati voluptatem. Rerum suscipit quod nulla harum illum sequi praesentium tenetur neque architecto, molestias earum! Necessitatibus, ullam molestiae voluptas, esse dolorem officiis aut, inventore dolore provident beatae error nesciunt incidunt neque quam molestias iusto minus rem nam. Eum, provident id. Molestias vitae ex sequi veritatis totam minima labore quasi eligendi nemo, ipsa accusamus eaque quae maiores eum ipsam inventore illo voluptatem sapiente velit, quos aspernatur commodi quibusdam. A expedita, adipisci aut voluptatum repellat fugit saepe accusamus debitis, quis dolorem, incidunt corrupti magni? Inventore nulla fugit quisquam dolorum temporibus corporis error voluptates? Impedit possimus provident a vero exercitationem doloribus est voluptatibus distinctio, ipsum iste sit repellat sapiente tenetur deleniti ullam dolorem soluta accusantium! Ab, placeat rerum explicabo corporis impedit quam quos veritatis expedita hic veniam harum qui dolor neque! Laboriosam officiis, dignissimos corporis, ducimus iure nemo quisquam pariatur molestias repellat aliquam tempore impedit dolore tempora eaque accusamus fugiat facilis dolor sint laborum molestiae sapiente deserunt quasi obcaecati! Veniam, doloribus! Unde, fugiat odit sunt facere maiores nobis tempora, natus quam consectetur deleniti nesciunt perferendis aut praesentium. Libero, neque cumque beatae recusandae qui repudiandae sunt quod dolorum nemo voluptates et culpa temporibus perferendis est expedita vel laboriosam! Accusamus incidunt consectetur delectus voluptate sunt repudiandae deleniti ut consequuntur, facilis assumenda nostrum soluta unde repellat reiciendis ipsum quidem quam numquam optio voluptates eius. Molestias quibusdam assumenda earum atque ullam delectus explicabo recusandae quasi aperiam, est placeat? Officia molestiae accusamus rem placeat adipisci officiis harum vel. Neque sit qui alias magni illum! Ipsam, necessitatibus unde sit possimus ipsum quis neque voluptate reprehenderit tempore nobis quo sunt molestiae atque rerum similique natus minus eum? Maiores aspernatur ut ullam eos vitae aperiam odit deleniti eveniet delectus totam harum iste, blanditiis ab laboriosam mollitia. Esse incidunt odit voluptate minus cum molestiae reprehenderit minima voluptatibus id. Molestias aliquid repellendus dolores cupiditate, nemo reiciendis ad facilis quo est, a error culpa similique libero dolor labore! Facere laborum cupiditate iste laboriosam culpa consectetur.";

package/build/types/test-utils/fake-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fake-data.d.ts","sourceRoot":"","sources":["../../../src/test-utils/fake-data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,gFAC2D,CAAC;AAEhF,eAAO,MAAM,OAAO,sUACiT,CAAC;AAEtU,eAAO,MAAM,QAAQ,+tBACysB,CAAC;AAE/tB,eAAO,MAAM,QAAQ,2uHACqtH,CAAC;AAE3uH,eAAO,MAAM,SAAS,28OACo7O,CAAC"}
+{"version":3,"file":"fake-data.d.ts","sourceRoot":"","sources":["../../../src/test-utils/fake-data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,gFAC2D,CAAC;AAEhF,eAAO,MAAM,OAAO,4IACuH,CAAC;AAE5I,eAAO,MAAM,OAAO,sUACiT,CAAC;AAEtU,eAAO,MAAM,QAAQ,+tBACysB,CAAC;AAE/tB,eAAO,MAAM,QAAQ,2uHACqtH,CAAC;AAE3uH,eAAO,MAAM,SAAS,28OACo7O,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-69786e7",
+  "version": "0.0.0-experimental-b6153fb",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -68,7 +68,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@transferwise/icons": "^3.20.0",
+    "@transferwise/icons": "^3.21.0",
     "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
@@ -95,13 +95,13 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-69786e7",
+    "@wise/wds-configs": "0.0.0",
     "@wise/components-theming": "1.6.2",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "14.24.3"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.20.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-69786e7",
+    "@transferwise/icons": "^3.21.0",
+    "@transferwise/neptune-css": "^14.24",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/index.ts

@@ -109,6 +109,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ItemProps, ItemAdditionalInfoProps, ItemCheckboxProps } from './item';
 
 /**
  * Components
@@ -211,6 +212,7 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
+export { default as Item } from './table';
 
 /**
  * Hooks

package/src/inputs/Input.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -81,34 +83,6 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/inputs/TextArea.css

@@ -71,6 +71,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -81,34 +83,6 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
-}@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/item/Item.css

@@ -0,0 +1,64 @@
+.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-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.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

@@ -0,0 +1,64 @@
+.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);
+    }
+
+    &-additional-info {
+        color: var(--color-content-tertiary);
+    }
+
+    &-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

@@ -0,0 +1,80 @@
+import Item, { Props as ItemProps } from './Item';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { lorem10, lorem20, lorem40 } from '../test-utils';
+
+export default {
+  component: Item,
+  title: 'Content/Item',
+} satisfies Meta<ItemProps>;
+
+type Story = StoryObj<ItemProps>;
+
+// TODO: delete this story later when we have more peace of the List Item puzzle
+export const TempPlayground: Story = {
+  render: () => (
+    <div>
+      <Item
+        title="Test title"
+        subtitle="Test subtitle"
+        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
+      />
+      <Item
+        title="Test title"
+        subtitle={lorem10}
+        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+      />
+      <Item
+        title="Test title"
+        subtitle={lorem10}
+        valueTitle="100 GBP"
+        valueSubtitle="100 USD"
+        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+      />
+      <Item
+        title="Test title"
+        subtitle="Test subtitle"
+        additionalInfo={
+          <Item.AdditionalInfo
+            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
+          >
+            {lorem10}
+          </Item.AdditionalInfo>
+        }
+      />
+      <Item
+        title="Test title"
+        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
+      />
+    </div>
+  ),
+};
+
+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

@@ -0,0 +1,163 @@
+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();
+
+  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,
+        })}
+        aria-describedby={[ids.additionalInfo].join(' ')}
+      >
+        {media && <div className="np-item-media">{media}</div>}
+
+        {/* Title + Subtitle + Values + Additional Info - Group */}
+        <div>
+          {/* Title + Subtitle + Values - Group */}
+          <div className="d-flex justify-content-between">
+            <span>
+              {/* @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>
+            </span>
+            {(valueTitle || valueSubtitle) && (
+              <span 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>
+              </span>
+            )}
+          </div>
+
+          {/* Additional Info and Prompt here */}
+          {Boolean(subtitle) && additionalInfo}
+        </div>
+        <Body className="np-item-control">{control}</Body>
+        {prompt}
+      </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

@@ -0,0 +1,31 @@
+import { PropsWithChildren, useContext } from 'react';
+import { ItemContext, ItemContextData } from './Item';
+import Body from '../body';
+import Link, { LinkProps } from '../link';
+import { Typography } from '../common';
+
+export type ItemAdditionalInfoProps = PropsWithChildren<{
+  action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
+}>;
+
+export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
+  const { ids } = useContext<ItemContextData>(ItemContext);
+
+  return (
+    <Body
+      type={Typography.BODY_DEFAULT}
+      id={ids.additionalInfo}
+      className="np-item-additional-info"
+    >
+      {children}
+      {action ? (
+        <>
+          {' '}
+          <Link href={action.href} target={action.target} onClick={action.onClick}>
+            {action.label}
+          </Link>
+        </>
+      ) : null}
+    </Body>
+  );
+};

package/src/item/ItemCheckbox.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,16 @@
+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

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