@transferwise/components 0.0.0-experimental-11565f2 → 0.0.0-experimental-4add690

package/build/styles/listItem/ListItem.css

@@ -654,7 +654,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: start;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -665,13 +665,6 @@
   gap: var(--size-16);
   word-break: break-word;
 }
-@container (min-width: 375px) {
-  .wds-list-item-titles,
-  .wds-list-item-value {
-    min-height: 100%;
-    min-height: var(--wds-list-item-value-min-height, 100%);
-  }
-}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -679,9 +672,6 @@
 }
 .wds-list-item-value {
   text-align: right;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;

package/build/styles/main.css

@@ -3298,7 +3298,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: start;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,13 +3309,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
-@container (min-width: 375px) {
-  .wds-list-item-titles,
-  .wds-list-item-value {
-    min-height: 100%;
-    min-height: var(--wds-list-item-value-min-height, 100%);
-  }
-}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -3323,9 +3316,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-value {
   text-align: right;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,GAAI,qPAmBhB,cAAc,gCAqShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,GAAI,qPAmBhB,cAAc,gCAmShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuOf,CAAC;AAiGF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOf,CAAC;AAiGF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/_stories/helpers.d.ts

@@ -13,6 +13,7 @@ export declare const storySourceWithoutNoise: (config: Story) => Story;
  * by swapping the `key`. This is a workaround for the Storybook's limitation.
  */
 export declare const withoutKey: Decorator;
+export declare const withSizedContainer: (width: number) => Decorator;
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.
  */

package/build/types/listItem/_stories/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC5B,OAAO,MAAM,KAAG,SAKhB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}

package/build/types/listItem/_stories/subcomponents.d.ts

@@ -1,5 +1,11 @@
 import { ReactNode } from 'react';
 export type SB_ListItem_ControlType = 'non-interactive' | 'button' | 'buttonAsLink' | 'partialButton' | 'partialButtonAsLink' | 'iconButton' | 'iconButtonAsLink' | 'iconButtonWithLabel' | 'iconButtonAsLinkWithLabel' | 'partialIconButton' | 'partialIconButtonAsLink' | 'partialIconButtonWithLabel' | 'partialIconButtonAsLinkWithLabel' | 'navigation' | 'navigationAsButton' | 'checkbox' | 'radio' | 'switch';
+export declare const SB_LIST_ITEM_TEXT: {
+    title: string;
+    subtitle: string;
+    valueTitle: string;
+    valueSubtitle: string;
+};
 export declare const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode>;
 export declare const SB_LIST_ITEM_ADDITIONAL_INFO: {
     readonly interactive: import("react").JSX.Element;

package/build/types/listItem/_stories/subcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,MAAM,uBAAuB,GAC/B,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA2DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAoBrB,CAAC"}
+{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,MAAM,uBAAuB,GAC/B,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA2DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAoBrB,CAAC"}

package/build/types/listItem/_stories/variants/helpers.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { StoryConfig } from '../../../test-utils';
+import { type ListItemProps } from '../../ListItem';
+import { SB_ListItem_ControlType as ControlType } from '../subcomponents';
+type Story = StoryObj<ListItemProps>;
+export declare const generateVariantsForControl: (controlType: ControlType, variant?: NonNullable<StoryConfig["variants"]>[number]) => Story;
+export {};
+//# sourceMappingURL=helpers.d.ts.map

package/build/types/listItem/_stories/variants/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/listItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,WAAW,EAAe,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAE1B,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAOrC,eAAO,MAAM,0BAA0B,GACrC,aAAa,WAAW,EACxB,UAAS,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAa,KAChE,KAuGF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-11565f2",
+  "version": "0.0.0-experimental-4add690",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
+    "@transferwise/neptune-css": "14.24.5",
     "@transferwise/less-config": "3.1.2",
     "@wise/components-theming": "1.6.4",
-    "@wise/wds-configs": "0.0.0",
-    "@transferwise/neptune-css": "14.24.5"
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.4",

package/src/dateInput/DateInput.tsx

@@ -317,9 +317,7 @@ const DateInput = ({
       onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
       }
-      onBlur={(event) =>
-        shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation()
-      }
+      onBlur={(event) => (shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation())}
     >
       <div className="row">
         {(() => {

package/src/listItem/ListItem.css

@@ -654,7 +654,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: start;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -665,13 +665,6 @@
   gap: var(--size-16);
   word-break: break-word;
 }
-@container (min-width: 375px) {
-  .wds-list-item-titles,
-  .wds-list-item-value {
-    min-height: 100%;
-    min-height: var(--wds-list-item-value-min-height, 100%);
-  }
-}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -679,9 +672,6 @@
 }
 .wds-list-item-value {
   text-align: right;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;

package/src/listItem/ListItem.grid.less

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

package/src/listItem/ListItem.less

@@ -1,7 +1,6 @@
 @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;
@@ -165,7 +164,7 @@
 
   &-body {
     grid-area: body;
-    align-items: start;
+    align-items: center;
     width: 100%;
     display: grid;
     grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
@@ -173,22 +172,12 @@
     word-break: break-word;
   }
 
-  &-titles,
-  &-value{
-    @container (min-width: @wds-list-item-cq-max) {
-      min-height: var(--wds-list-item-value-min-height, 100%);
-    }
-  }
-
   &-title, &-title-value {
       color: var(--color-content-primary);
   }
 
   &-value {
     text-align: right;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
   }
 
   &-body-center {
@@ -263,7 +252,7 @@
           }
       }
 
-
+      
   }
 
   .wds-list-item-spotlight__border{

package/src/listItem/ListItem.spec.tsx

@@ -1484,7 +1484,6 @@ 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', () => {
@@ -1498,17 +1497,15 @@ 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 cannot have spotlight', () => {
+    it('non interactive variant can 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,13 +229,8 @@ export const ListItem = ({
         )}
         id={id}
         aria-disabled={disabled}
-        style={
-          {
-            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,
-          } as React.CSSProperties
-        }
       >
-        {isFullyInteractive && spotlight === 'inactive' && (
+        {spotlight === 'inactive' && (
           <svg aria-hidden="true" className="wds-list-item-spotlight__border">
             <rect />
           </svg>
@@ -262,7 +257,7 @@ export const ListItem = ({
           >
             {/* Title + Subtitle + Values - Group */}
             <span
-              className={clsx('wds-list-item-titles', {
+              className={clsx({
                 'wds-list-item-body-center': title && !subtitle,
               })}
             >

package/src/listItem/_stories/helpers.tsx

@@ -48,6 +48,14 @@ export const withoutKey: Decorator = (Story, { args }) => {
   return <Story key={key} />;
 };
 
+export const withSizedContainer =
+  (width: number): Decorator =>
+  (Story, { args }) => (
+    <div style={{ width, border: '1px dashed #ccc', padding: '8px' }}>
+      <Story />
+    </div>
+  );
+
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.
  */

package/src/listItem/_stories/subcomponents.tsx

@@ -25,6 +25,13 @@ export type SB_ListItem_ControlType =
   | 'radio'
   | 'switch';
 
+export const SB_LIST_ITEM_TEXT = {
+  title: 'This is a title',
+  subtitle: 'And it also has a subtitle',
+  valueTitle: '100 GBP',
+  valueSubtitle: '200 USD',
+};
+
 export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
   'non-interactive': null,
   button: <ListItem.Button onClick={() => {}}>Click me</ListItem.Button>,

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: bright-green',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+export const Button = generateVariantsForControl('button', 'bright-green');
+export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'bright-green');
+export const ButtonPartiallyInteractive = generateVariantsForControl(
+  'partialButton',
+  'bright-green',
+);
+export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialButtonAsLink',
+  'bright-green',
+);
+export const IconButton = generateVariantsForControl('iconButton', 'bright-green');
+export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'bright-green');
+export const IconButtonWithLabel = generateVariantsForControl(
+  'iconButtonWithLabel',
+  'bright-green',
+);
+export const IconButtonAsLinkWithLabel = generateVariantsForControl(
+  'iconButtonAsLinkWithLabel',
+  'bright-green',
+);
+export const IconButtonPartiallyInteractive = generateVariantsForControl(
+  'partialIconButton',
+  'bright-green',
+);
+export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialIconButtonAsLink',
+  'bright-green',
+);
+export const Navigation = generateVariantsForControl('navigation', 'bright-green');
+export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'bright-green');
+export const Checkbox = generateVariantsForControl('checkbox', 'bright-green');
+export const Radio = generateVariantsForControl('radio', 'bright-green');
+export const Switch = generateVariantsForControl('switch', 'bright-green');
+export const NonInteractive = generateVariantsForControl('non-interactive', 'bright-green');

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: dark',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+export const Button = generateVariantsForControl('button', 'dark');
+export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'dark');
+export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton', 'dark');
+export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialButtonAsLink',
+  'dark',
+);
+export const IconButton = generateVariantsForControl('iconButton', 'dark');
+export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'dark');
+export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel', 'dark');
+export const IconButtonAsLinkWithLabel = generateVariantsForControl(
+  'iconButtonAsLinkWithLabel',
+  'dark',
+);
+export const IconButtonPartiallyInteractive = generateVariantsForControl(
+  'partialIconButton',
+  'dark',
+);
+export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialIconButtonAsLink',
+  'dark',
+);
+export const Navigation = generateVariantsForControl('navigation', 'dark');
+export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'dark');
+export const Checkbox = generateVariantsForControl('checkbox', 'dark');
+export const Radio = generateVariantsForControl('radio', 'dark');
+export const Switch = generateVariantsForControl('switch', 'dark');
+export const NonInteractive = generateVariantsForControl('non-interactive', 'dark');

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: forest-green',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+export const Button = generateVariantsForControl('button', 'forest-green');
+export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'forest-green');
+export const ButtonPartiallyInteractive = generateVariantsForControl(
+  'partialButton',
+  'forest-green',
+);
+export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialButtonAsLink',
+  'forest-green',
+);
+export const IconButton = generateVariantsForControl('iconButton', 'forest-green');
+export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'forest-green');
+export const IconButtonWithLabel = generateVariantsForControl(
+  'iconButtonWithLabel',
+  'forest-green',
+);
+export const IconButtonAsLinkWithLabel = generateVariantsForControl(
+  'iconButtonAsLinkWithLabel',
+  'forest-green',
+);
+export const IconButtonPartiallyInteractive = generateVariantsForControl(
+  'partialIconButton',
+  'forest-green',
+);
+export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
+  'partialIconButtonAsLink',
+  'forest-green',
+);
+export const Navigation = generateVariantsForControl('navigation', 'forest-green');
+export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'forest-green');
+export const Checkbox = generateVariantsForControl('checkbox', 'forest-green');
+export const Radio = generateVariantsForControl('radio', 'forest-green');
+export const Switch = generateVariantsForControl('switch', 'forest-green');
+export const NonInteractive = generateVariantsForControl('non-interactive', 'forest-green');

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+import { withSizedContainer } from '../helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/cq: medium',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+  decorators: [withSizedContainer(350)],
+} satisfies Meta<ListItemProps>;
+
+export const Button = generateVariantsForControl('button');
+export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
+export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
+export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
+export const IconButton = generateVariantsForControl('iconButton');
+export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
+export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
+export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
+export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
+export const IconButtonAsLinkPartiallyInteractive =
+  generateVariantsForControl('partialIconButtonAsLink');
+export const Navigation = generateVariantsForControl('navigation');
+export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
+export const Checkbox = generateVariantsForControl('checkbox');
+export const Radio = generateVariantsForControl('radio');
+export const Switch = generateVariantsForControl('switch');
+export const NonInteractive = generateVariantsForControl('non-interactive');