@transferwise/components 46.106.0 → 46.107.0

package/build/types/navigationOption/NavigationOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOption.d.ts","sourceRoot":"","sources":["../../../src/navigationOption/NavigationOption.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC;AAEhD,QAAA,MAAM,gBAAgB,uGA2BrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NavigationOption.d.ts","sourceRoot":"","sources":["../../../src/navigationOption/NavigationOption.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC;AAEhD;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,uGA2BrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/navigationOptionsList/NavigationOptionsList.d.ts

@@ -2,6 +2,15 @@ import * as React from 'react';
 export interface NavigationOptionListProps {
     children: React.ReactNode;
 }
+/**
+ * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [List source](../list/List.tsx)
+ * @see [ListItem source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 declare const NavigationOptionList: ({ children }: NavigationOptionListProps) => React.JSX.Element;
 export default NavigationOptionList;
 //# sourceMappingURL=NavigationOptionsList.d.ts.map

package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationOptionsList.d.ts","sourceRoot":"","sources":["../../../src/navigationOptionsList/NavigationOptionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,oBAAoB,GAAI,cAAc,yBAAyB,sBAUpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"NavigationOptionsList.d.ts","sourceRoot":"","sources":["../../../src/navigationOptionsList/NavigationOptionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,oBAAoB,GAAI,cAAc,yBAAyB,sBAUpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/build/types/radioOption/RadioOption.d.ts

@@ -9,6 +9,14 @@ export interface RadioOptionProps<T extends string | number = string> extends Re
     showMediaAtAllSizes?: boolean;
     isContainerAligned?: boolean;
 }
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 declare function RadioOption<T extends string | number = ''>({ 'aria-label': ariaLabel, media, title, content, id, name, checked, onChange, complex, disabled, value, showMediaCircle, showMediaAtAllSizes, isContainerAligned, }: RadioOptionProps<T>): import("react").JSX.Element;
 export default RadioOption;
 //# sourceMappingURL=RadioOption.d.ts.map

package/build/types/radioOption/RadioOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.d.ts","sourceRoot":"","sources":["../../../src/radioOption/RadioOption.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAClE,SAAQ,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC,EACrE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,iBAAS,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EACnD,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,KAAK,EACL,OAAO,EACP,EAAE,EACF,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAe,EACf,eAAe,EACf,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAyBrB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioOption.d.ts","sourceRoot":"","sources":["../../../src/radioOption/RadioOption.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAClE,SAAQ,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC,EACrE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EACnD,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,KAAK,EACL,OAAO,EACP,EAAE,EACF,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAe,EACf,eAAe,EACf,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAyBrB;AAED,eAAe,WAAW,CAAC"}

package/build/types/summary/Summary.d.ts

@@ -51,6 +51,14 @@ export interface Props {
      */
     title: ReactNode;
 }
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 declare const Summary: ({ action, as: Element, className, content, description, help, icon, illustration, info, status, title, }: Props) => import("react").JSX.Element;
 export default Summary;
 //# sourceMappingURL=Summary.d.ts.map

package/build/types/summary/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAkB5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,GAAI,0GAYd,KAAK,gCA4FP,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAkB5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,OAAO,GAAI,0GAYd,KAAK,gCA4FP,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/switchOption/SwitchOption.d.ts

@@ -12,6 +12,14 @@ export type SwitchOptionProps = {
     title: React.ReactNode;
     'aria-label': string;
 };
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 declare const SwitchOption: ({ checked, complex, content, disabled, id, media, onChange, title, showMediaCircle, showMediaAtAllSizes, isContainerAligned, "aria-label": ariaLabel, }: SwitchOptionProps) => import("react").JSX.Element;
 export default SwitchOption;
 //# sourceMappingURL=SwitchOption.d.ts.map

package/build/types/switchOption/SwitchOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.d.ts","sourceRoot":"","sources":["../../../src/switchOption/SwitchOption.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,QAAA,MAAM,YAAY,GAAI,yJAanB,iBAAiB,gCAoCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SwitchOption.d.ts","sourceRoot":"","sources":["../../../src/switchOption/SwitchOption.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,GAAI,yJAanB,iBAAiB,gCAoCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.106.0",
+  "version": "46.107.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -84,9 +84,9 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.24.5",
     "@wise/components-theming": "1.6.4",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/neptune-css": "14.24.5"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.4",

package/src/actionOption/ActionOption.story.tsx

@@ -6,6 +6,9 @@ import { Nudge, Title, Typography } from '..';
 
 import ActionOption from './ActionOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Button control](?path=/docs/content-listitem-listitem-button--docs).
+ */
 export default {
   component: ActionOption,
   title: 'Option/ActionOption',
@@ -18,6 +21,7 @@ export default {
     additionalContent:
       'Additional content goes here, this content does not align with the logo and button',
   },
+  tags: ['deprecated'],
 } satisfies Meta<typeof ActionOption>;
 
 type Story = StoryObj<typeof ActionOption>;

package/src/actionOption/ActionOption.tsx

@@ -35,6 +35,14 @@ export type ActionOptionProps = {
 } & CommonProps &
   AriaLabelProperty;
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const ActionOption = ({
   action,
   priority = Priority.PRIMARY,

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -5,6 +5,9 @@ import { FastFlag } from '@transferwise/icons';
 import { Nudge, Title, Typography } from '..';
 import CheckboxOption, { type CheckboxOptionProps } from './CheckboxOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Checkbox control](?path=/docs/content-listitem-listitem-checkbox--docs).
+ */
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
@@ -13,6 +16,7 @@ const meta: Meta<typeof CheckboxOption> = {
       source: { type: 'dynamic' },
     },
   },
+  tags: ['deprecated'],
 };
 
 export default meta;

package/src/checkboxOption/CheckboxOption.tsx

@@ -15,6 +15,14 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
   onChange?: (value: boolean) => void;
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(
   ({ checked, disabled, onChange, ...rest }, reference) => {
     return (

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -8,9 +8,13 @@ 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).
+ */
 export default {
   component: LegacyListItem,
   title: 'Content/LegacyListItem',
+  tags: ['deprecated'],
 };
 
 const Template = ({

package/src/legacylistItem/LegacyListItem.tsx

@@ -13,6 +13,14 @@ export type LegacyListItemProps = {
   as?: ElementType;
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const LegacyListItem: FC<LegacyListItemProps> = ({
   media,
   action,

package/src/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -231,8 +231,12 @@
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -373,6 +377,10 @@
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
 .wds-list-item-prompt {
   grid-area: prompt;
@@ -654,7 +662,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -665,14 +673,27 @@
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;

package/src/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -231,8 +231,12 @@
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -373,4 +377,8 @@
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }

package/src/listItem/ListItem.grid.less

@@ -1,3 +1,5 @@
+@import (reference) "./ListItem.vars.less";
+
 .wds-list-item {
   &-gridWrapper {
     display: grid;
@@ -10,9 +12,9 @@
           margin-top: -2px;
         }
       }
-  }
+    }
 
-    @container (min-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -167,7 +169,7 @@
       }
     }
 
-    @container (min-width: 297px) and (max-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -396,9 +398,13 @@
               "body"
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
 
-    @container (max-width: 297px) {
+    @container (max-width: unit(@wds-list-item-cq-min, px)) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }
@@ -631,6 +637,10 @@
           text-align: left;
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
   }
 }

package/src/listItem/ListItem.less

@@ -1,6 +1,7 @@
 @import "./ListItem.grid.less";
 @import "./Prompt/ListItemPrompt.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./ListItem.vars.less";
 
 .wds-list-item {
   list-style: none;
@@ -164,7 +165,7 @@
 
   &-body {
     grid-area: body;
-    align-items: center;
+    align-items: start;
     width: 100%;
     display: grid;
     grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
@@ -172,14 +173,25 @@
     word-break: break-word;
   }
 
-  &-title, &-title-value {
-      color: var(--color-content-primary);
+  &-titles,
+  &-value{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+      min-height: var(--wds-list-item-value-min-height, 100%);
+    }
   }
 
   &-value {
     text-align: right;
   }
 
+  &-title, &-title-value {
+      color: var(--color-content-primary);
+  }
+
   &-body-center {
     display: flex;
     flex-direction: row;
@@ -252,7 +264,7 @@
           }
       }
 
-      
+
   }
 
   .wds-list-item-spotlight__border{

package/src/listItem/ListItem.spec.tsx

@@ -1484,6 +1484,7 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
 
     it('only fully interactive variant can have spotlight:inactive', () => {
@@ -1497,15 +1498,17 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).toBeInTheDocument();
     });
 
-    it('non interactive variant can have spotlight', () => {
+    it('non interactive variant cannot have spotlight', () => {
       render(<ListItem title="Test Title" spotlight="inactive" />);
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-non-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
   });
 });

package/src/listItem/ListItem.tsx

@@ -229,8 +229,13 @@ export const ListItem = ({
         )}
         id={id}
         aria-disabled={disabled}
+        style={
+          {
+            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,
+          } as React.CSSProperties
+        }
       >
-        {spotlight === 'inactive' && (
+        {isFullyInteractive && spotlight === 'inactive' && (
           <svg aria-hidden="true" className="wds-list-item-spotlight__border">
             <rect />
           </svg>
@@ -256,11 +261,7 @@ export const ListItem = ({
             style={valueColumnWidth ? gridColumnsStyle : undefined}
           >
             {/* Title + Subtitle + Values - Group */}
-            <span
-              className={clsx({
-                'wds-list-item-body-center': title && !subtitle,
-              })}
-            >
+            <span className="wds-list-item-titles">
               {(() => {
                 const titles = [
                   <Body
@@ -287,8 +288,6 @@ export const ListItem = ({
               <span
                 className={clsx('wds-list-item-value', {
                   'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
-                  'wds-list-item-body-center':
-                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
                 })}
               >
                 {(() => {
@@ -326,6 +325,8 @@ export const ListItem = ({
             <Body
               className={clsx('wds-list-item-control-wrapper', {
                 'wds-list-item-button-control': controlType === 'button',
+                'wds-list-item-button-control--hasPrompt':
+                  controlType === 'button' && Boolean(prompt),
               })}
               style={
                 {
@@ -351,7 +352,6 @@ type ViewProps = PropsWithChildren<{
 
 function View({
   children,
-  subtitle,
   additionalInfo,
   prompt,
   disabled,

package/src/listItem/ListItem.vars.less

@@ -0,0 +1,11 @@
+// List item has 3 unique layouts managed through container queries:
+// * width <= cq-min
+// * cq-min < width <= cq-max
+// * width > cq-max
+//
+// ⚠️ These values must be kept in sync with:
+// `packages/components/src/listItem/constants.ts`
+//
+// @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
+@wds-list-item-cq-min: 240;
+@wds-list-item-cq-max: 308;