@transferwise/components 46.105.3 → 46.105.5

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 (38) hide show
  1. package/build/dateInput/DateInput.js +2 -2
  2. package/build/dateInput/DateInput.js.map +1 -1
  3. package/build/dateInput/DateInput.mjs +2 -2
  4. package/build/dateInput/DateInput.mjs.map +1 -1
  5. package/build/main.css +23 -11
  6. package/build/nudge/Nudge.js.map +1 -1
  7. package/build/nudge/Nudge.mjs.map +1 -1
  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/listItem/_stories/helpers.d.ts +1 -0
  13. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  14. package/build/types/listItem/_stories/subcomponents.d.ts +6 -0
  15. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  16. package/build/types/listItem/_stories/variants/helpers.d.ts +8 -0
  17. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -0
  18. package/build/types/nudge/Nudge.d.ts.map +1 -1
  19. package/package.json +21 -21
  20. package/src/button/Button.spec.tsx +1 -4
  21. package/src/dateInput/DateInput.tsx +2 -4
  22. package/src/listItem/ListItem.css +23 -11
  23. package/src/listItem/ListItem.grid.css +23 -9
  24. package/src/listItem/ListItem.grid.less +31 -9
  25. package/src/listItem/ListItem.less +0 -2
  26. package/src/listItem/_stories/helpers.tsx +8 -0
  27. package/src/listItem/_stories/subcomponents.tsx +7 -0
  28. package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +49 -0
  29. package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +43 -0
  30. package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +49 -0
  31. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +34 -0
  32. package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +130 -0
  33. package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +43 -0
  34. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +34 -0
  35. package/src/listItem/_stories/variants/helpers.tsx +127 -0
  36. package/src/main.css +23 -11
  37. package/src/nudge/Nudge.tsx +1 -1
  38. package/src/listItem/_stories/ListItem.variants.test.story.tsx +0 -274
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/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/build/types/nudge/Nudge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;AAEvB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,GAAI,8HAaZ,KAAK,uCA2FP,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAA0B,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;AAEvB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,GAAI,8HAaZ,KAAK,uCA2FP,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.105.3",
3
+ "version": "46.105.5",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -38,26 +38,26 @@
38
38
  "!**/*.tsbuildinfo"
39
39
  ],
40
40
  "devDependencies": {
41
- "@babel/core": "^7.28.0",
42
- "@babel/plugin-transform-runtime": "^7.28.0",
43
- "@babel/preset-env": "^7.28.0",
41
+ "@babel/core": "^7.28.3",
42
+ "@babel/plugin-transform-runtime": "^7.28.3",
43
+ "@babel/preset-env": "^7.28.3",
44
44
  "@babel/preset-react": "^7.27.1",
45
45
  "@babel/preset-typescript": "^7.27.1",
46
46
  "@formatjs/cli": "^6.7.2",
47
47
  "@rollup/plugin-babel": "^6.0.4",
48
48
  "@rollup/plugin-json": "^6.1.0",
49
- "@rollup/plugin-node-resolve": "^15.3.1",
49
+ "@rollup/plugin-node-resolve": "^16.0.1",
50
50
  "@rollup/plugin-typescript": "^12.1.4",
51
51
  "@rollup/plugin-url": "^8.0.2",
52
- "@storybook/addon-a11y": "^9.0.18",
53
- "@storybook/addon-docs": "^9.0.18",
52
+ "@storybook/addon-a11y": "^9.1.3",
53
+ "@storybook/addon-docs": "^9.1.3",
54
54
  "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
55
- "@storybook/react-webpack5": "^9.0.18",
55
+ "@storybook/react-webpack5": "^9.1.3",
56
56
  "@testing-library/dom": "^10.4.1",
57
- "@testing-library/jest-dom": "^6.6.4",
57
+ "@testing-library/jest-dom": "^6.8.0",
58
58
  "@testing-library/react": "^16.3.0",
59
59
  "@testing-library/user-event": "^14.6.1",
60
- "@transferwise/icons": "^3.22.3",
60
+ "@transferwise/icons": "^3.22.4",
61
61
  "@tsconfig/recommended": "^1.0.10",
62
62
  "@types/babel__core": "^7.20.5",
63
63
  "@types/commonmark": "^0.27.10",
@@ -68,20 +68,20 @@
68
68
  "@types/react": "^18.3.23",
69
69
  "@types/react-dom": "^18.3.7",
70
70
  "@types/react-transition-group": "4.4.12",
71
- "@wise/art": "^2.23.0",
72
- "@wise/eslint-config": "^13.0.0",
71
+ "@wise/art": "^2.24.4",
72
+ "@wise/eslint-config": "^13.1.0",
73
73
  "babel-plugin-formatjs": "^10.5.39",
74
- "eslint": "^9.32.0",
74
+ "eslint": "^9.33.0",
75
75
  "gulp": "^5.0.1",
76
76
  "jest": "^30.0.5",
77
77
  "jest-environment-jsdom": "^29.7.0",
78
78
  "jest-fetch-mock": "^3.0.3",
79
79
  "lodash.times": "^4.3.2",
80
80
  "react-intl": "^7.1.11",
81
- "rollup": "^4.46.1",
81
+ "rollup": "^4.47.1",
82
82
  "rollup-preserve-directives": "^1.1.3",
83
- "storybook": "^9.0.18",
84
- "storybook-addon-tag-badges": "^2.0.1",
83
+ "storybook": "^9.1.3",
84
+ "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "@transferwise/less-config": "3.1.2",
87
87
  "@transferwise/neptune-css": "14.24.5",
@@ -89,17 +89,17 @@
89
89
  "@wise/wds-configs": "0.0.0"
90
90
  },
91
91
  "peerDependencies": {
92
- "@transferwise/icons": "^3.22.3",
92
+ "@transferwise/icons": "^3.22.4",
93
93
  "@transferwise/neptune-css": "^14.24",
94
- "@wise/art": "^2.23.0",
94
+ "@wise/art": "^2.24.4",
95
95
  "@wise/components-theming": "^1.6.2",
96
96
  "react": ">=18",
97
97
  "react-dom": ">=18",
98
98
  "react-intl": "^5.10.0 || ^6"
99
99
  },
100
100
  "dependencies": {
101
- "@babel/runtime": "^7.28.2",
102
- "@floating-ui/react": "^0.27.14",
101
+ "@babel/runtime": "^7.28.3",
102
+ "@floating-ui/react": "^0.27.16",
103
103
  "@headlessui/react": "^1.7.19",
104
104
  "@popperjs/core": "^2.11.8",
105
105
  "@react-aria/focus": "^3.21.0",
@@ -109,7 +109,7 @@
109
109
  "@transferwise/neptune-validation": "^3.3.1",
110
110
  "clsx": "^2.1.1",
111
111
  "commonmark": "^0.31.2",
112
- "core-js": "^3.44.0",
112
+ "core-js": "^3.45.1",
113
113
  "lodash.clamp": "^4.0.3",
114
114
  "lodash.debounce": "^4.0.8",
115
115
  "merge-props": "^6.0.0",
package/src/button/Button.spec.tsx CHANGED
@@ -226,10 +226,7 @@ describe('Button', () => {
226
226
 
227
227
  it('does not set type when type is in LegacyButtonType', () => {
228
228
  // @ts-expect-error here we intentionally set wrong value to test `type` attr in DOM
229
- const legacyTypeProps: ButtonProps = {
230
- ...newProps,
231
- type: 'accent',
232
- };
229
+ const legacyTypeProps: ButtonProps = { ...newProps, type: 'accent' };
233
230
  render(
234
231
  <Button data-testid={testId} {...legacyTypeProps}>
235
232
  Button Type
package/src/dateInput/DateInput.tsx CHANGED
@@ -315,11 +315,9 @@ const DateInput = ({
315
315
  aria-label={ariaLabel}
316
316
  role="group" // Add role attribute to indicate container for interactive elements
317
317
  onFocus={(event) =>
318
- shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
319
- }
320
- onBlur={(event) =>
321
- shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
318
+ shouldPropagateOnFocus(event) ? onFocus?.(event) : event.stopPropagation()
322
319
  }
320
+ onBlur={(event) => (shouldPropagateOnBlur(event) ? onBlur?.(event) : event.stopPropagation())}
323
321
  >
324
322
  <div className="row">
325
323
  {(() => {
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;
package/src/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
  }