@transferwise/components 46.105.4 → 46.105.5

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/_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": "46.105.4",
+  "version": "46.105.5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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

@@ -5,7 +5,15 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.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) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    height: var(--wds-list-item-control-wrapper-height);
+    align-content: center;
+  }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;
        object-position: center;
@@ -102,6 +110,9 @@
     -o-object-position: bottom left;
        object-position: bottom left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -222,8 +233,11 @@
   }
 }
 @container (max-width: 297px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
     grid-template-areas: "body control" "info control" "prompt prompt";
   }
@@ -233,7 +247,7 @@
     grid-template-areas: "body" "info" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "info control";
   }
@@ -242,7 +256,7 @@
     grid-template-areas: "body" "info" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "prompt prompt";
   }
@@ -251,7 +265,7 @@
     grid-template-areas: "body" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto;
     grid-template-areas: "body control";
   }
@@ -260,17 +274,17 @@
     grid-template-areas: "body" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
     grid-template-areas: "body" "info" "prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
     grid-template-areas: "body" "info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
     grid-template-rows: auto auto;
     grid-template-areas: "body" "prompt";
   }
@@ -676,8 +690,6 @@
 }
 .wds-list-item-control-wrapper {
   grid-area: control;
-  align-content: center;
-  height: var(--wds-list-item-control-wrapper-height);
 }
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;

package/src/listItem/ListItem.grid.css

@@ -5,7 +5,15 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.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) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    height: var(--wds-list-item-control-wrapper-height);
+    align-content: center;
+  }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;
        object-position: center;
@@ -102,6 +110,9 @@
     -o-object-position: bottom left;
        object-position: bottom left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -222,8 +233,11 @@
   }
 }
 @container (max-width: 297px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
     grid-template-areas: "body control" "info control" "prompt prompt";
   }
@@ -233,7 +247,7 @@
     grid-template-areas: "body" "info" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "info control";
   }
@@ -242,7 +256,7 @@
     grid-template-areas: "body" "info" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "prompt prompt";
   }
@@ -251,7 +265,7 @@
     grid-template-areas: "body" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto;
     grid-template-areas: "body control";
   }
@@ -260,17 +274,17 @@
     grid-template-areas: "body" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
     grid-template-areas: "body" "info" "prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
     grid-template-areas: "body" "info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
     grid-template-rows: auto auto;
     grid-template-areas: "body" "prompt";
   }

package/src/listItem/ListItem.grid.less

@@ -3,7 +3,21 @@
     display: grid;
     gap: var(--size-4) var(--size-16);
 
+    &.wds-list-item-hasMedia-hasControl,
+    &.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) {
+      .wds-list-item-control-wrapper {
+        height: var(--wds-list-item-control-wrapper-height);
+        align-content: center;
+      }
+
       .wds-list-item-media-image{
         object-position: center;
       }
@@ -158,6 +172,10 @@
         object-position: bottom left;
       }
 
+      .wds-list-item-control-wrapper {
+        align-content: start;
+      }
+
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: 1fr auto;
@@ -381,9 +399,12 @@
     }
 
     @container (max-width: 297px) {
+      .wds-list-item-control-wrapper {
+        align-content: start;
+      }
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body control"
@@ -402,7 +423,7 @@
         }
 
         &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
@@ -418,7 +439,7 @@
         }
 
         &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
@@ -434,7 +455,7 @@
         }
 
         &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto;
           grid-template-areas:
               "body control";
@@ -450,8 +471,8 @@
 
       &.wds-list-item-hasMedia-noControl {
         &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto auto;
           grid-template-areas:
               "body"
               "info"
@@ -459,15 +480,15 @@
         }
 
         &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto auto;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
           grid-template-areas:
               "body"
               "info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto;
+          grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body"
@@ -495,6 +516,7 @@
               "info control"
               "prompt prompt";
 
+
               &:has(.wds-list-item-button-control) {
                 grid-template-columns: 1fr;
                 grid-template-rows: auto;

package/src/listItem/ListItem.less

@@ -198,8 +198,6 @@
 
   &-control-wrapper {
       grid-area: control;
-      align-content: center;
-      height: var(--wds-list-item-control-wrapper-height);
   }
 
   &-navigation {

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');