@transferwise/components 46.105.4 → 46.106.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/build/dateInput/DateInput.js.map +1 -1
  2. package/build/dateInput/DateInput.mjs.map +1 -1
  3. package/build/header/Header.js.map +1 -1
  4. package/build/header/Header.mjs.map +1 -1
  5. package/build/inputs/SelectInput.js.map +1 -1
  6. package/build/inputs/SelectInput.mjs.map +1 -1
  7. package/build/main.css +23 -11
  8. package/build/styles/listItem/ListItem.css +23 -11
  9. package/build/styles/listItem/ListItem.grid.css +23 -9
  10. package/build/styles/main.css +23 -11
  11. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  12. package/build/types/header/Header.d.ts +2 -2
  13. package/build/types/header/Header.d.ts.map +1 -1
  14. package/build/types/inputs/SelectInput.d.ts +2 -1
  15. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  16. package/build/types/listItem/_stories/helpers.d.ts +1 -0
  17. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  18. package/build/types/listItem/_stories/subcomponents.d.ts +6 -0
  19. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  20. package/build/types/listItem/_stories/variants/helpers.d.ts +8 -0
  21. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -0
  22. package/package.json +1 -1
  23. package/src/dateInput/DateInput.tsx +1 -3
  24. package/src/header/Header.tsx +2 -2
  25. package/src/inputs/SelectInput.tsx +2 -1
  26. package/src/listItem/ListItem.css +23 -11
  27. package/src/listItem/ListItem.grid.css +23 -9
  28. package/src/listItem/ListItem.grid.less +31 -9
  29. package/src/listItem/ListItem.less +0 -2
  30. package/src/listItem/_stories/helpers.tsx +8 -0
  31. package/src/listItem/_stories/subcomponents.tsx +7 -0
  32. package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +49 -0
  33. package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +43 -0
  34. package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +49 -0
  35. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +34 -0
  36. package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +130 -0
  37. package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +43 -0
  38. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +34 -0
  39. package/src/listItem/_stories/variants/helpers.tsx +127 -0
  40. package/src/main.css +23 -11
  41. package/src/listItem/_stories/ListItem.variants.test.story.tsx +0 -274
package/build/main.css CHANGED
@@ -2649,7 +2649,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2649
2649
  gap: 4px 16px;
2650
2650
  gap: var(--size-4) var(--size-16);
2651
2651
  }
2652
+ .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,
2653
+ .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 {
2654
+ margin-top: -2px;
2655
+ }
2652
2656
  @container (min-width: 375px) {
2657
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
+ height: var(--wds-list-item-control-wrapper-height);
2659
+ align-content: center;
2660
+ }
2653
2661
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2654
2662
  -o-object-position: center;
2655
2663
  object-position: center;
@@ -2746,6 +2754,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2754
  -o-object-position: bottom left;
2747
2755
  object-position: bottom left;
2748
2756
  }
2757
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2758
+ align-content: start;
2759
+ }
2749
2760
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2750
2761
  grid-template-columns: 1fr auto;
2751
2762
  grid-template-rows: auto auto auto auto;
@@ -2866,8 +2877,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2866
2877
  }
2867
2878
  }
2868
2879
  @container (max-width: 297px) {
2880
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2881
+ align-content: start;
2882
+ }
2869
2883
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2870
- grid-template-columns: auto 1fr;
2884
+ grid-template-columns: 1fr auto;
2871
2885
  grid-template-rows: auto auto auto;
2872
2886
  grid-template-areas: "body control" "info control" "prompt prompt";
2873
2887
  }
@@ -2877,7 +2891,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2877
2891
  grid-template-areas: "body" "info" "prompt" "control";
2878
2892
  }
2879
2893
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2880
- grid-template-columns: auto 1fr;
2894
+ grid-template-columns: 1fr auto;
2881
2895
  grid-template-rows: auto auto;
2882
2896
  grid-template-areas: "body control" "info control";
2883
2897
  }
@@ -2886,7 +2900,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2886
2900
  grid-template-areas: "body" "info" "control";
2887
2901
  }
2888
2902
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2889
- grid-template-columns: auto 1fr;
2903
+ grid-template-columns: 1fr auto;
2890
2904
  grid-template-rows: auto auto;
2891
2905
  grid-template-areas: "body control" "prompt prompt";
2892
2906
  }
@@ -2895,7 +2909,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2895
2909
  grid-template-areas: "body" "prompt" "control";
2896
2910
  }
2897
2911
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2898
- grid-template-columns: auto 1fr;
2912
+ grid-template-columns: 1fr auto;
2899
2913
  grid-template-rows: auto;
2900
2914
  grid-template-areas: "body control";
2901
2915
  }
@@ -2904,17 +2918,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2904
2918
  grid-template-areas: "body" "control";
2905
2919
  }
2906
2920
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2907
- grid-template-columns: auto;
2908
- grid-template-rows: auto auto;
2921
+ grid-template-columns: 1fr;
2922
+ grid-template-rows: auto auto auto;
2909
2923
  grid-template-areas: "body" "info" "prompt";
2910
2924
  }
2911
2925
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2912
- grid-template-columns: auto;
2913
- grid-template-rows: auto auto auto;
2926
+ grid-template-columns: 1fr;
2927
+ grid-template-rows: auto auto;
2914
2928
  grid-template-areas: "body" "info";
2915
2929
  }
2916
2930
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2917
- grid-template-columns: auto;
2931
+ grid-template-columns: 1fr;
2918
2932
  grid-template-rows: auto auto;
2919
2933
  grid-template-areas: "body" "prompt";
2920
2934
  }
@@ -3320,8 +3334,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3320
3334
  }
3321
3335
  .wds-list-item-control-wrapper {
3322
3336
  grid-area: control;
3323
- align-content: center;
3324
- height: var(--wds-list-item-control-wrapper-height);
3325
3337
  }
3326
3338
  .wds-list-item-navigation .tw-icon-chevron-right {
3327
3339
  color: #c9cbce;
package/build/styles/listItem/ListItem.css CHANGED
@@ -5,7 +5,15 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
+ .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,
9
+ .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 {
10
+ margin-top: -2px;
11
+ }
8
12
  @container (min-width: 375px) {
13
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
+ height: var(--wds-list-item-control-wrapper-height);
15
+ align-content: center;
16
+ }
9
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
10
18
  -o-object-position: center;
11
19
  object-position: center;
@@ -102,6 +110,9 @@
102
110
  -o-object-position: bottom left;
103
111
  object-position: bottom left;
104
112
  }
113
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
+ align-content: start;
115
+ }
105
116
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
106
117
  grid-template-columns: 1fr auto;
107
118
  grid-template-rows: auto auto auto auto;
@@ -222,8 +233,11 @@
222
233
  }
223
234
  }
224
235
  @container (max-width: 297px) {
236
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
237
+ align-content: start;
238
+ }
225
239
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
- grid-template-columns: auto 1fr;
240
+ grid-template-columns: 1fr auto;
227
241
  grid-template-rows: auto auto auto;
228
242
  grid-template-areas: "body control" "info control" "prompt prompt";
229
243
  }
@@ -233,7 +247,7 @@
233
247
  grid-template-areas: "body" "info" "prompt" "control";
234
248
  }
235
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
236
- grid-template-columns: auto 1fr;
250
+ grid-template-columns: 1fr auto;
237
251
  grid-template-rows: auto auto;
238
252
  grid-template-areas: "body control" "info control";
239
253
  }
@@ -242,7 +256,7 @@
242
256
  grid-template-areas: "body" "info" "control";
243
257
  }
244
258
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
245
- grid-template-columns: auto 1fr;
259
+ grid-template-columns: 1fr auto;
246
260
  grid-template-rows: auto auto;
247
261
  grid-template-areas: "body control" "prompt prompt";
248
262
  }
@@ -251,7 +265,7 @@
251
265
  grid-template-areas: "body" "prompt" "control";
252
266
  }
253
267
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
254
- grid-template-columns: auto 1fr;
268
+ grid-template-columns: 1fr auto;
255
269
  grid-template-rows: auto;
256
270
  grid-template-areas: "body control";
257
271
  }
@@ -260,17 +274,17 @@
260
274
  grid-template-areas: "body" "control";
261
275
  }
262
276
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
263
- grid-template-columns: auto;
264
- grid-template-rows: auto auto;
277
+ grid-template-columns: 1fr;
278
+ grid-template-rows: auto auto auto;
265
279
  grid-template-areas: "body" "info" "prompt";
266
280
  }
267
281
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
268
- grid-template-columns: auto;
269
- grid-template-rows: auto auto auto;
282
+ grid-template-columns: 1fr;
283
+ grid-template-rows: auto auto;
270
284
  grid-template-areas: "body" "info";
271
285
  }
272
286
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
273
- grid-template-columns: auto;
287
+ grid-template-columns: 1fr;
274
288
  grid-template-rows: auto auto;
275
289
  grid-template-areas: "body" "prompt";
276
290
  }
@@ -676,8 +690,6 @@
676
690
  }
677
691
  .wds-list-item-control-wrapper {
678
692
  grid-area: control;
679
- align-content: center;
680
- height: var(--wds-list-item-control-wrapper-height);
681
693
  }
682
694
  .wds-list-item-navigation .tw-icon-chevron-right {
683
695
  color: #c9cbce;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -5,7 +5,15 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
+ .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,
9
+ .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 {
10
+ margin-top: -2px;
11
+ }
8
12
  @container (min-width: 375px) {
13
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
+ height: var(--wds-list-item-control-wrapper-height);
15
+ align-content: center;
16
+ }
9
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
10
18
  -o-object-position: center;
11
19
  object-position: center;
@@ -102,6 +110,9 @@
102
110
  -o-object-position: bottom left;
103
111
  object-position: bottom left;
104
112
  }
113
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
+ align-content: start;
115
+ }
105
116
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
106
117
  grid-template-columns: 1fr auto;
107
118
  grid-template-rows: auto auto auto auto;
@@ -222,8 +233,11 @@
222
233
  }
223
234
  }
224
235
  @container (max-width: 297px) {
236
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
237
+ align-content: start;
238
+ }
225
239
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
- grid-template-columns: auto 1fr;
240
+ grid-template-columns: 1fr auto;
227
241
  grid-template-rows: auto auto auto;
228
242
  grid-template-areas: "body control" "info control" "prompt prompt";
229
243
  }
@@ -233,7 +247,7 @@
233
247
  grid-template-areas: "body" "info" "prompt" "control";
234
248
  }
235
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
236
- grid-template-columns: auto 1fr;
250
+ grid-template-columns: 1fr auto;
237
251
  grid-template-rows: auto auto;
238
252
  grid-template-areas: "body control" "info control";
239
253
  }
@@ -242,7 +256,7 @@
242
256
  grid-template-areas: "body" "info" "control";
243
257
  }
244
258
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
245
- grid-template-columns: auto 1fr;
259
+ grid-template-columns: 1fr auto;
246
260
  grid-template-rows: auto auto;
247
261
  grid-template-areas: "body control" "prompt prompt";
248
262
  }
@@ -251,7 +265,7 @@
251
265
  grid-template-areas: "body" "prompt" "control";
252
266
  }
253
267
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
254
- grid-template-columns: auto 1fr;
268
+ grid-template-columns: 1fr auto;
255
269
  grid-template-rows: auto;
256
270
  grid-template-areas: "body control";
257
271
  }
@@ -260,17 +274,17 @@
260
274
  grid-template-areas: "body" "control";
261
275
  }
262
276
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
263
- grid-template-columns: auto;
264
- grid-template-rows: auto auto;
277
+ grid-template-columns: 1fr;
278
+ grid-template-rows: auto auto auto;
265
279
  grid-template-areas: "body" "info" "prompt";
266
280
  }
267
281
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
268
- grid-template-columns: auto;
269
- grid-template-rows: auto auto auto;
282
+ grid-template-columns: 1fr;
283
+ grid-template-rows: auto auto;
270
284
  grid-template-areas: "body" "info";
271
285
  }
272
286
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
273
- grid-template-columns: auto;
287
+ grid-template-columns: 1fr;
274
288
  grid-template-rows: auto auto;
275
289
  grid-template-areas: "body" "prompt";
276
290
  }
package/build/styles/main.css CHANGED
@@ -2649,7 +2649,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2649
2649
  gap: 4px 16px;
2650
2650
  gap: var(--size-4) var(--size-16);
2651
2651
  }
2652
+ .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,
2653
+ .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 {
2654
+ margin-top: -2px;
2655
+ }
2652
2656
  @container (min-width: 375px) {
2657
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
+ height: var(--wds-list-item-control-wrapper-height);
2659
+ align-content: center;
2660
+ }
2653
2661
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2654
2662
  -o-object-position: center;
2655
2663
  object-position: center;
@@ -2746,6 +2754,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2754
  -o-object-position: bottom left;
2747
2755
  object-position: bottom left;
2748
2756
  }
2757
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2758
+ align-content: start;
2759
+ }
2749
2760
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2750
2761
  grid-template-columns: 1fr auto;
2751
2762
  grid-template-rows: auto auto auto auto;
@@ -2866,8 +2877,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2866
2877
  }
2867
2878
  }
2868
2879
  @container (max-width: 297px) {
2880
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2881
+ align-content: start;
2882
+ }
2869
2883
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2870
- grid-template-columns: auto 1fr;
2884
+ grid-template-columns: 1fr auto;
2871
2885
  grid-template-rows: auto auto auto;
2872
2886
  grid-template-areas: "body control" "info control" "prompt prompt";
2873
2887
  }
@@ -2877,7 +2891,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2877
2891
  grid-template-areas: "body" "info" "prompt" "control";
2878
2892
  }
2879
2893
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2880
- grid-template-columns: auto 1fr;
2894
+ grid-template-columns: 1fr auto;
2881
2895
  grid-template-rows: auto auto;
2882
2896
  grid-template-areas: "body control" "info control";
2883
2897
  }
@@ -2886,7 +2900,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2886
2900
  grid-template-areas: "body" "info" "control";
2887
2901
  }
2888
2902
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2889
- grid-template-columns: auto 1fr;
2903
+ grid-template-columns: 1fr auto;
2890
2904
  grid-template-rows: auto auto;
2891
2905
  grid-template-areas: "body control" "prompt prompt";
2892
2906
  }
@@ -2895,7 +2909,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2895
2909
  grid-template-areas: "body" "prompt" "control";
2896
2910
  }
2897
2911
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2898
- grid-template-columns: auto 1fr;
2912
+ grid-template-columns: 1fr auto;
2899
2913
  grid-template-rows: auto;
2900
2914
  grid-template-areas: "body control";
2901
2915
  }
@@ -2904,17 +2918,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2904
2918
  grid-template-areas: "body" "control";
2905
2919
  }
2906
2920
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2907
- grid-template-columns: auto;
2908
- grid-template-rows: auto auto;
2921
+ grid-template-columns: 1fr;
2922
+ grid-template-rows: auto auto auto;
2909
2923
  grid-template-areas: "body" "info" "prompt";
2910
2924
  }
2911
2925
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2912
- grid-template-columns: auto;
2913
- grid-template-rows: auto auto auto;
2926
+ grid-template-columns: 1fr;
2927
+ grid-template-rows: auto auto;
2914
2928
  grid-template-areas: "body" "info";
2915
2929
  }
2916
2930
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2917
- grid-template-columns: auto;
2931
+ grid-template-columns: 1fr;
2918
2932
  grid-template-rows: auto auto;
2919
2933
  grid-template-areas: "body" "prompt";
2920
2934
  }
@@ -3320,8 +3334,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3320
3334
  }
3321
3335
  .wds-list-item-control-wrapper {
3322
3336
  grid-area: control;
3323
- align-content: center;
3324
- height: var(--wds-list-item-control-wrapper-height);
3325
3337
  }
3326
3338
  .wds-list-item-navigation .tw-icon-chevron-right {
3327
3339
  color: #c9cbce;
package/build/types/dateInput/DateInput.d.ts.map CHANGED
@@ -1 +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"}
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,gCAmShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
package/build/types/header/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AriaLabelProperty, CommonProps, Heading, LinkProps } from '../common';
2
- import React, { FunctionComponent } from 'react';
2
+ import React, { FunctionComponent, ReactNode } from 'react';
3
3
  type ActionProps = AriaLabelProperty & {
4
4
  text: string;
5
5
  onClick?: (event: React.MouseEvent) => void;
@@ -23,7 +23,7 @@ export interface HeaderProps extends CommonProps {
23
23
  */
24
24
  as?: Heading | 'legend' | 'header';
25
25
  /** Required prop to set the title of the Header. */
26
- title: string;
26
+ title: ReactNode;
27
27
  /** Optional prop to specify the level of the Header */
28
28
  level?: 'section' | 'group';
29
29
  className?: string;
package/build/types/header/Header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAG3F,OAAO,KAAK,EAAE,EAAqB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AACrC,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEnC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IAEd,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA6C1C,CAAC;AAIF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAG3F,OAAO,KAAK,EAAE,EAAqB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/E,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AACrC,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEnC,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IAEjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA6C1C,CAAC;AAIF,eAAe,MAAM,CAAC"}
package/build/types/inputs/SelectInput.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  import { Merge } from '../utils';
2
3
  import { WithInputAttributesProps } from './contexts';
3
4
  import { ButtonProps } from '../button/Button.types';
@@ -9,7 +10,7 @@ export interface SelectInputOptionItem<T = string> {
9
10
  }
10
11
  export interface SelectInputGroupItem<T = string> {
11
12
  type: 'group';
12
- label: string;
13
+ label: ReactNode;
13
14
  options: readonly SelectInputOptionItem<T>[];
14
15
  action?: {
15
16
  label: string;
package/build/types/inputs/SelectInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
package/build/types/listItem/_stories/helpers.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare const storySourceWithoutNoise: (config: Story) => Story;
13
13
  * by swapping the `key`. This is a workaround for the Storybook's limitation.
14
14
  */
15
15
  export declare const withoutKey: Decorator;
16
+ export declare const withSizedContainer: (width: number) => Decorator;
16
17
  /**
17
18
  * Not all stories need access to all controls as it causes unnecessary UI noise.
18
19
  */
package/build/types/listItem/_stories/helpers.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1,5 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
2
  export type SB_ListItem_ControlType = 'non-interactive' | 'button' | 'buttonAsLink' | 'partialButton' | 'partialButtonAsLink' | 'iconButton' | 'iconButtonAsLink' | 'iconButtonWithLabel' | 'iconButtonAsLinkWithLabel' | 'partialIconButton' | 'partialIconButtonAsLink' | 'partialIconButtonWithLabel' | 'partialIconButtonAsLinkWithLabel' | 'navigation' | 'navigationAsButton' | 'checkbox' | 'radio' | 'switch';
3
+ export declare const SB_LIST_ITEM_TEXT: {
4
+ title: string;
5
+ subtitle: string;
6
+ valueTitle: string;
7
+ valueSubtitle: string;
8
+ };
3
9
  export declare const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode>;
4
10
  export declare const SB_LIST_ITEM_ADDITIONAL_INFO: {
5
11
  readonly interactive: import("react").JSX.Element;
package/build/types/listItem/_stories/subcomponents.d.ts.map CHANGED
@@ -1 +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"}
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,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 ADDED
@@ -0,0 +1,8 @@
1
+ import { StoryObj } from '@storybook/react-webpack5';
2
+ import { StoryConfig } from '../../../test-utils';
3
+ import { type ListItemProps } from '../../ListItem';
4
+ import { SB_ListItem_ControlType as ControlType } from '../subcomponents';
5
+ type Story = StoryObj<ListItemProps>;
6
+ export declare const generateVariantsForControl: (controlType: ControlType, variant?: NonNullable<StoryConfig["variants"]>[number]) => Story;
7
+ export {};
8
+ //# sourceMappingURL=helpers.d.ts.map
package/build/types/listItem/_stories/variants/helpers.d.ts.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.105.4",
3
+ "version": "46.106.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/dateInput/DateInput.tsx CHANGED
@@ -317,9 +317,7 @@ const DateInput = ({
317
317
  onFocus={(event) =>
318
318
  shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
319
319
  }
320
- onBlur={(event) =>
321
- shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation()
322
- }
320
+ onBlur={(event) => (shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation())}
323
321
  >
324
322
  <div className="row">
325
323
  {(() => {
package/src/header/Header.tsx CHANGED
@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
3
3
  import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
4
4
  import Link from '../link';
5
5
  import Title from '../title';
6
- import React, { useEffect, useRef, FunctionComponent } from 'react';
6
+ import React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';
7
7
 
8
8
  type ActionProps = AriaLabelProperty & {
9
9
  text: string;
@@ -32,7 +32,7 @@ export interface HeaderProps extends CommonProps {
32
32
  as?: Heading | 'legend' | 'header';
33
33
 
34
34
  /** Required prop to set the title of the Header. */
35
- title: string;
35
+ title: ReactNode;
36
36
 
37
37
  /** Optional prop to specify the level of the Header */
38
38
  level?: 'section' | 'group';
package/src/inputs/SelectInput.tsx CHANGED
@@ -5,6 +5,7 @@ import mergeProps from 'merge-props';
5
5
  import {
6
6
  createContext,
7
7
  forwardRef,
8
+ ReactNode,
8
9
  useContext,
9
10
  useDeferredValue,
10
11
  useEffect,
@@ -63,7 +64,7 @@ export interface SelectInputOptionItem<T = string> {
63
64
 
64
65
  export interface SelectInputGroupItem<T = string> {
65
66
  type: 'group';
66
- label: string;
67
+ label: ReactNode;
67
68
  options: readonly SelectInputOptionItem<T>[];
68
69
  action?: {
69
70
  label: string;
package/src/listItem/ListItem.css CHANGED
@@ -5,7 +5,15 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
+ .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,
9
+ .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 {
10
+ margin-top: -2px;
11
+ }
8
12
  @container (min-width: 375px) {
13
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
+ height: var(--wds-list-item-control-wrapper-height);
15
+ align-content: center;
16
+ }
9
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
10
18
  -o-object-position: center;
11
19
  object-position: center;
@@ -102,6 +110,9 @@
102
110
  -o-object-position: bottom left;
103
111
  object-position: bottom left;
104
112
  }
113
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
+ align-content: start;
115
+ }
105
116
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
106
117
  grid-template-columns: 1fr auto;
107
118
  grid-template-rows: auto auto auto auto;
@@ -222,8 +233,11 @@
222
233
  }
223
234
  }
224
235
  @container (max-width: 297px) {
236
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
237
+ align-content: start;
238
+ }
225
239
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
- grid-template-columns: auto 1fr;
240
+ grid-template-columns: 1fr auto;
227
241
  grid-template-rows: auto auto auto;
228
242
  grid-template-areas: "body control" "info control" "prompt prompt";
229
243
  }
@@ -233,7 +247,7 @@
233
247
  grid-template-areas: "body" "info" "prompt" "control";
234
248
  }
235
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
236
- grid-template-columns: auto 1fr;
250
+ grid-template-columns: 1fr auto;
237
251
  grid-template-rows: auto auto;
238
252
  grid-template-areas: "body control" "info control";
239
253
  }
@@ -242,7 +256,7 @@
242
256
  grid-template-areas: "body" "info" "control";
243
257
  }
244
258
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
245
- grid-template-columns: auto 1fr;
259
+ grid-template-columns: 1fr auto;
246
260
  grid-template-rows: auto auto;
247
261
  grid-template-areas: "body control" "prompt prompt";
248
262
  }
@@ -251,7 +265,7 @@
251
265
  grid-template-areas: "body" "prompt" "control";
252
266
  }
253
267
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
254
- grid-template-columns: auto 1fr;
268
+ grid-template-columns: 1fr auto;
255
269
  grid-template-rows: auto;
256
270
  grid-template-areas: "body control";
257
271
  }
@@ -260,17 +274,17 @@
260
274
  grid-template-areas: "body" "control";
261
275
  }
262
276
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
263
- grid-template-columns: auto;
264
- grid-template-rows: auto auto;
277
+ grid-template-columns: 1fr;
278
+ grid-template-rows: auto auto auto;
265
279
  grid-template-areas: "body" "info" "prompt";
266
280
  }
267
281
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
268
- grid-template-columns: auto;
269
- grid-template-rows: auto auto auto;
282
+ grid-template-columns: 1fr;
283
+ grid-template-rows: auto auto;
270
284
  grid-template-areas: "body" "info";
271
285
  }
272
286
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
273
- grid-template-columns: auto;
287
+ grid-template-columns: 1fr;
274
288
  grid-template-rows: auto auto;
275
289
  grid-template-areas: "body" "prompt";
276
290
  }
@@ -676,8 +690,6 @@
676
690
  }
677
691
  .wds-list-item-control-wrapper {
678
692
  grid-area: control;
679
- align-content: center;
680
- height: var(--wds-list-item-control-wrapper-height);
681
693
  }
682
694
  .wds-list-item-navigation .tw-icon-chevron-right {
683
695
  color: #c9cbce;