@transferwise/components 0.0.0-experimental-4a6914a → 0.0.0-experimental-23ee071

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 (26) hide show
  1. package/build/main.css +105 -105
  2. package/build/moneyInput/MoneyInput.js +28 -12
  3. package/build/moneyInput/MoneyInput.js.map +1 -1
  4. package/build/moneyInput/MoneyInput.mjs +29 -13
  5. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  6. package/build/moneyInput/currencyFormatting.js +6 -2
  7. package/build/moneyInput/currencyFormatting.js.map +1 -1
  8. package/build/moneyInput/currencyFormatting.mjs +3 -3
  9. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  10. package/build/styles/listItem/ListItem.css +105 -105
  11. package/build/styles/listItem/ListItem.grid.css +105 -105
  12. package/build/styles/main.css +105 -105
  13. package/build/types/moneyInput/MoneyInput.d.ts +5 -0
  14. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  15. package/build/types/moneyInput/currencyFormatting.d.ts +3 -3
  16. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  17. package/package.json +2 -2
  18. package/src/listItem/ListItem.css +105 -105
  19. package/src/listItem/ListItem.grid.css +105 -105
  20. package/src/listItem/ListItem.grid.less +159 -162
  21. package/src/main.css +105 -105
  22. package/src/moneyInput/MoneyInput.story.tsx +18 -1
  23. package/src/moneyInput/MoneyInput.test.tsx +24 -0
  24. package/src/moneyInput/MoneyInput.tsx +26 -3
  25. package/src/moneyInput/currencyFormatting.ts +9 -4
  26. package/src/listItem/_stories/ListItemTest.story.tsx +0 -67
package/build/styles/listItem/ListItem.css CHANGED
@@ -9,66 +9,54 @@
9
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
10
  margin-top: -2px;
11
11
  }
12
- @container (max-width: 240px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
- align-content: start;
14
+ height: var(--wds-list-item-control-wrapper-height);
15
+ align-content: center;
16
+ }
17
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
18
+ -o-object-position: center;
19
+ object-position: center;
15
20
  }
16
21
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
17
- grid-template-columns: 1fr auto;
22
+ grid-template-columns: auto 1fr auto;
18
23
  grid-template-rows: auto auto auto;
19
- grid-template-areas: "body control" "info control" "prompt prompt";
20
- }
21
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
22
- grid-template-columns: 1fr;
23
- grid-template-rows: auto;
24
- grid-template-areas: "body" "info" "prompt" "control";
24
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
25
25
  }
26
26
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
27
- grid-template-columns: 1fr auto;
27
+ grid-template-columns: auto 1fr auto;
28
28
  grid-template-rows: auto auto;
29
- grid-template-areas: "body control" "info control";
30
- }
31
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
32
- grid-template-columns: 1fr;
33
- grid-template-areas: "body" "info" "control";
29
+ grid-template-areas: "media body control" ". info .";
34
30
  }
35
31
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
36
- grid-template-columns: 1fr auto;
32
+ grid-template-columns: auto 1fr auto;
37
33
  grid-template-rows: auto auto;
38
- grid-template-areas: "body control" "prompt prompt";
39
- }
40
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
41
- grid-template-columns: 1fr;
42
- grid-template-areas: "body" "prompt" "control";
34
+ grid-template-areas: "media body control" ". prompt prompt";
43
35
  }
44
36
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
45
- grid-template-columns: 1fr auto;
37
+ grid-template-columns: auto 1fr auto;
46
38
  grid-template-rows: auto;
47
- grid-template-areas: "body control";
48
- }
49
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
50
- grid-template-columns: 1fr;
51
- grid-template-areas: "body" "control";
39
+ grid-template-areas: "media body control";
52
40
  }
53
41
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
54
- grid-template-columns: 1fr;
55
- grid-template-rows: auto auto auto;
56
- grid-template-areas: "body" "info" "prompt";
42
+ grid-template-columns: auto 1fr;
43
+ grid-template-rows: auto auto;
44
+ grid-template-areas: "media body" ". info" ". prompt";
57
45
  }
58
46
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
59
- grid-template-columns: 1fr;
60
- grid-template-rows: auto auto;
61
- grid-template-areas: "body" "info";
47
+ grid-template-columns: auto 1fr;
48
+ grid-template-rows: auto auto auto;
49
+ grid-template-areas: "media body" ". info";
62
50
  }
63
51
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
64
- grid-template-columns: 1fr;
52
+ grid-template-columns: auto 1fr;
65
53
  grid-template-rows: auto auto;
66
- grid-template-areas: "body" "prompt";
54
+ grid-template-areas: "media body" ". prompt";
67
55
  }
68
56
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
69
- grid-template-columns: 1fr;
57
+ grid-template-columns: auto 1fr;
70
58
  grid-template-rows: auto;
71
- grid-template-areas: "body";
59
+ grid-template-areas: "media body";
72
60
  }
73
61
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
74
62
  grid-column: 1 / -1;
@@ -76,43 +64,23 @@
76
64
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
77
65
  grid-template-columns: 1fr auto;
78
66
  grid-template-rows: auto auto auto;
79
- grid-template-areas: "body control" "info control" "prompt prompt";
80
- }
81
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
82
- grid-template-columns: 1fr;
83
- grid-template-rows: auto;
84
- grid-template-areas: "body" "info" "prompt" "control";
67
+ grid-template-areas: "body control" "info ." "prompt prompt";
85
68
  }
86
69
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
87
70
  grid-template-columns: 1fr auto;
88
71
  grid-template-rows: auto auto;
89
- grid-template-areas: "body control" "info control";
90
- }
91
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
92
- grid-template-columns: 1fr;
93
- grid-template-rows: auto;
94
- grid-template-areas: "body" "info" "control";
72
+ grid-template-areas: "body control" "info .";
95
73
  }
96
74
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
97
75
  grid-template-columns: 1fr auto;
98
76
  grid-template-rows: auto auto;
99
77
  grid-template-areas: "body control" "prompt prompt";
100
78
  }
101
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
102
- grid-template-columns: 1fr;
103
- grid-template-rows: auto;
104
- grid-template-areas: "body" "prompt" "control";
105
- }
106
79
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
107
80
  grid-template-columns: 1fr auto;
108
81
  grid-template-rows: auto;
109
82
  grid-template-areas: "body control";
110
83
  }
111
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
112
- grid-template-columns: 1fr;
113
- grid-template-rows: auto;
114
- grid-template-areas: "body" "control";
115
- }
116
84
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
117
85
  grid-column: 1 / -1;
118
86
  }
@@ -136,26 +104,8 @@
136
104
  grid-template-rows: auto;
137
105
  grid-template-areas: "body";
138
106
  }
139
- .wds-list-item-gridWrapper .wds-list-item-media {
140
- display: none;
141
- }
142
- .wds-list-item-gridWrapper .wds-list-item-body {
143
- grid-area: body;
144
- display: grid;
145
- grid-template-columns: 1fr;
146
- justify-items: start;
147
- grid-gap: 0;
148
- gap: 0;
149
- }
150
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
151
- text-align: left;
152
- }
153
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
154
- margin-top: 4px;
155
- margin-top: var(--size-4);
156
- }
157
107
  }
158
- @container (min-width: 240.1px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
159
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
160
110
  -o-object-position: bottom left;
161
111
  object-position: bottom left;
@@ -286,54 +236,66 @@
286
236
  margin-top: var(--size-4);
287
237
  }
288
238
  }
289
- @container (min-width: 308.1px) {
239
+ @container (max-width: 240px) {
290
240
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
291
- height: var(--wds-list-item-control-wrapper-height);
292
- align-content: center;
293
- }
294
- .wds-list-item-gridWrapper .wds-list-item-media-image {
295
- -o-object-position: center;
296
- object-position: center;
241
+ align-content: start;
297
242
  }
298
243
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
299
- grid-template-columns: auto 1fr auto;
244
+ grid-template-columns: 1fr auto;
300
245
  grid-template-rows: auto auto auto;
301
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
246
+ grid-template-areas: "body control" "info control" "prompt prompt";
247
+ }
248
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
249
+ grid-template-columns: 1fr;
250
+ grid-template-rows: auto;
251
+ grid-template-areas: "body" "info" "prompt" "control";
302
252
  }
303
253
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
304
- grid-template-columns: auto 1fr auto;
254
+ grid-template-columns: 1fr auto;
305
255
  grid-template-rows: auto auto;
306
- grid-template-areas: "media body control" ". info .";
256
+ grid-template-areas: "body control" "info control";
257
+ }
258
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
259
+ grid-template-columns: 1fr;
260
+ grid-template-areas: "body" "info" "control";
307
261
  }
308
262
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
309
- grid-template-columns: auto 1fr auto;
263
+ grid-template-columns: 1fr auto;
310
264
  grid-template-rows: auto auto;
311
- grid-template-areas: "media body control" ". prompt prompt";
265
+ grid-template-areas: "body control" "prompt prompt";
266
+ }
267
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
268
+ grid-template-columns: 1fr;
269
+ grid-template-areas: "body" "prompt" "control";
312
270
  }
313
271
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
314
- grid-template-columns: auto 1fr auto;
272
+ grid-template-columns: 1fr auto;
315
273
  grid-template-rows: auto;
316
- grid-template-areas: "media body control";
274
+ grid-template-areas: "body control";
275
+ }
276
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
277
+ grid-template-columns: 1fr;
278
+ grid-template-areas: "body" "control";
317
279
  }
318
280
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
319
- grid-template-columns: auto 1fr;
320
- grid-template-rows: auto auto;
321
- grid-template-areas: "media body" ". info" ". prompt";
281
+ grid-template-columns: 1fr;
282
+ grid-template-rows: auto auto auto;
283
+ grid-template-areas: "body" "info" "prompt";
322
284
  }
323
285
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
324
- grid-template-columns: auto 1fr;
325
- grid-template-rows: auto auto auto;
326
- grid-template-areas: "media body" ". info";
286
+ grid-template-columns: 1fr;
287
+ grid-template-rows: auto auto;
288
+ grid-template-areas: "body" "info";
327
289
  }
328
290
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
329
- grid-template-columns: auto 1fr;
291
+ grid-template-columns: 1fr;
330
292
  grid-template-rows: auto auto;
331
- grid-template-areas: "media body" ". prompt";
293
+ grid-template-areas: "body" "prompt";
332
294
  }
333
295
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
334
- grid-template-columns: auto 1fr;
296
+ grid-template-columns: 1fr;
335
297
  grid-template-rows: auto;
336
- grid-template-areas: "media body";
298
+ grid-template-areas: "body";
337
299
  }
338
300
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
339
301
  grid-column: 1 / -1;
@@ -341,23 +303,43 @@
341
303
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
342
304
  grid-template-columns: 1fr auto;
343
305
  grid-template-rows: auto auto auto;
344
- grid-template-areas: "body control" "info ." "prompt prompt";
306
+ grid-template-areas: "body control" "info control" "prompt prompt";
307
+ }
308
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
309
+ grid-template-columns: 1fr;
310
+ grid-template-rows: auto;
311
+ grid-template-areas: "body" "info" "prompt" "control";
345
312
  }
346
313
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
347
314
  grid-template-columns: 1fr auto;
348
315
  grid-template-rows: auto auto;
349
- grid-template-areas: "body control" "info .";
316
+ grid-template-areas: "body control" "info control";
317
+ }
318
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
319
+ grid-template-columns: 1fr;
320
+ grid-template-rows: auto;
321
+ grid-template-areas: "body" "info" "control";
350
322
  }
351
323
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
352
324
  grid-template-columns: 1fr auto;
353
325
  grid-template-rows: auto auto;
354
326
  grid-template-areas: "body control" "prompt prompt";
355
327
  }
328
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
329
+ grid-template-columns: 1fr;
330
+ grid-template-rows: auto;
331
+ grid-template-areas: "body" "prompt" "control";
332
+ }
356
333
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
357
334
  grid-template-columns: 1fr auto;
358
335
  grid-template-rows: auto;
359
336
  grid-template-areas: "body control";
360
337
  }
338
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
339
+ grid-template-columns: 1fr;
340
+ grid-template-rows: auto;
341
+ grid-template-areas: "body" "control";
342
+ }
361
343
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
362
344
  grid-column: 1 / -1;
363
345
  }
@@ -381,6 +363,24 @@
381
363
  grid-template-rows: auto;
382
364
  grid-template-areas: "body";
383
365
  }
366
+ .wds-list-item-gridWrapper .wds-list-item-media {
367
+ display: none;
368
+ }
369
+ .wds-list-item-gridWrapper .wds-list-item-body {
370
+ grid-area: body;
371
+ display: grid;
372
+ grid-template-columns: 1fr;
373
+ justify-items: start;
374
+ grid-gap: 0;
375
+ gap: 0;
376
+ }
377
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
378
+ text-align: left;
379
+ }
380
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
+ margin-top: 4px;
382
+ margin-top: var(--size-4);
383
+ }
384
384
  }
385
385
  .wds-list-item-prompt {
386
386
  grid-area: prompt;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -9,66 +9,54 @@
9
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
10
  margin-top: -2px;
11
11
  }
12
- @container (max-width: 240px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
- align-content: start;
14
+ height: var(--wds-list-item-control-wrapper-height);
15
+ align-content: center;
16
+ }
17
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
18
+ -o-object-position: center;
19
+ object-position: center;
15
20
  }
16
21
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
17
- grid-template-columns: 1fr auto;
22
+ grid-template-columns: auto 1fr auto;
18
23
  grid-template-rows: auto auto auto;
19
- grid-template-areas: "body control" "info control" "prompt prompt";
20
- }
21
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
22
- grid-template-columns: 1fr;
23
- grid-template-rows: auto;
24
- grid-template-areas: "body" "info" "prompt" "control";
24
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
25
25
  }
26
26
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
27
- grid-template-columns: 1fr auto;
27
+ grid-template-columns: auto 1fr auto;
28
28
  grid-template-rows: auto auto;
29
- grid-template-areas: "body control" "info control";
30
- }
31
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
32
- grid-template-columns: 1fr;
33
- grid-template-areas: "body" "info" "control";
29
+ grid-template-areas: "media body control" ". info .";
34
30
  }
35
31
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
36
- grid-template-columns: 1fr auto;
32
+ grid-template-columns: auto 1fr auto;
37
33
  grid-template-rows: auto auto;
38
- grid-template-areas: "body control" "prompt prompt";
39
- }
40
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
41
- grid-template-columns: 1fr;
42
- grid-template-areas: "body" "prompt" "control";
34
+ grid-template-areas: "media body control" ". prompt prompt";
43
35
  }
44
36
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
45
- grid-template-columns: 1fr auto;
37
+ grid-template-columns: auto 1fr auto;
46
38
  grid-template-rows: auto;
47
- grid-template-areas: "body control";
48
- }
49
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
50
- grid-template-columns: 1fr;
51
- grid-template-areas: "body" "control";
39
+ grid-template-areas: "media body control";
52
40
  }
53
41
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
54
- grid-template-columns: 1fr;
55
- grid-template-rows: auto auto auto;
56
- grid-template-areas: "body" "info" "prompt";
42
+ grid-template-columns: auto 1fr;
43
+ grid-template-rows: auto auto;
44
+ grid-template-areas: "media body" ". info" ". prompt";
57
45
  }
58
46
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
59
- grid-template-columns: 1fr;
60
- grid-template-rows: auto auto;
61
- grid-template-areas: "body" "info";
47
+ grid-template-columns: auto 1fr;
48
+ grid-template-rows: auto auto auto;
49
+ grid-template-areas: "media body" ". info";
62
50
  }
63
51
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
64
- grid-template-columns: 1fr;
52
+ grid-template-columns: auto 1fr;
65
53
  grid-template-rows: auto auto;
66
- grid-template-areas: "body" "prompt";
54
+ grid-template-areas: "media body" ". prompt";
67
55
  }
68
56
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
69
- grid-template-columns: 1fr;
57
+ grid-template-columns: auto 1fr;
70
58
  grid-template-rows: auto;
71
- grid-template-areas: "body";
59
+ grid-template-areas: "media body";
72
60
  }
73
61
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
74
62
  grid-column: 1 / -1;
@@ -76,43 +64,23 @@
76
64
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
77
65
  grid-template-columns: 1fr auto;
78
66
  grid-template-rows: auto auto auto;
79
- grid-template-areas: "body control" "info control" "prompt prompt";
80
- }
81
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
82
- grid-template-columns: 1fr;
83
- grid-template-rows: auto;
84
- grid-template-areas: "body" "info" "prompt" "control";
67
+ grid-template-areas: "body control" "info ." "prompt prompt";
85
68
  }
86
69
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
87
70
  grid-template-columns: 1fr auto;
88
71
  grid-template-rows: auto auto;
89
- grid-template-areas: "body control" "info control";
90
- }
91
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
92
- grid-template-columns: 1fr;
93
- grid-template-rows: auto;
94
- grid-template-areas: "body" "info" "control";
72
+ grid-template-areas: "body control" "info .";
95
73
  }
96
74
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
97
75
  grid-template-columns: 1fr auto;
98
76
  grid-template-rows: auto auto;
99
77
  grid-template-areas: "body control" "prompt prompt";
100
78
  }
101
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
102
- grid-template-columns: 1fr;
103
- grid-template-rows: auto;
104
- grid-template-areas: "body" "prompt" "control";
105
- }
106
79
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
107
80
  grid-template-columns: 1fr auto;
108
81
  grid-template-rows: auto;
109
82
  grid-template-areas: "body control";
110
83
  }
111
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
112
- grid-template-columns: 1fr;
113
- grid-template-rows: auto;
114
- grid-template-areas: "body" "control";
115
- }
116
84
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
117
85
  grid-column: 1 / -1;
118
86
  }
@@ -136,26 +104,8 @@
136
104
  grid-template-rows: auto;
137
105
  grid-template-areas: "body";
138
106
  }
139
- .wds-list-item-gridWrapper .wds-list-item-media {
140
- display: none;
141
- }
142
- .wds-list-item-gridWrapper .wds-list-item-body {
143
- grid-area: body;
144
- display: grid;
145
- grid-template-columns: 1fr;
146
- justify-items: start;
147
- grid-gap: 0;
148
- gap: 0;
149
- }
150
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
151
- text-align: left;
152
- }
153
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
154
- margin-top: 4px;
155
- margin-top: var(--size-4);
156
- }
157
107
  }
158
- @container (min-width: 240.1px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
159
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
160
110
  -o-object-position: bottom left;
161
111
  object-position: bottom left;
@@ -286,54 +236,66 @@
286
236
  margin-top: var(--size-4);
287
237
  }
288
238
  }
289
- @container (min-width: 308.1px) {
239
+ @container (max-width: 240px) {
290
240
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
291
- height: var(--wds-list-item-control-wrapper-height);
292
- align-content: center;
293
- }
294
- .wds-list-item-gridWrapper .wds-list-item-media-image {
295
- -o-object-position: center;
296
- object-position: center;
241
+ align-content: start;
297
242
  }
298
243
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
299
- grid-template-columns: auto 1fr auto;
244
+ grid-template-columns: 1fr auto;
300
245
  grid-template-rows: auto auto auto;
301
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
246
+ grid-template-areas: "body control" "info control" "prompt prompt";
247
+ }
248
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
249
+ grid-template-columns: 1fr;
250
+ grid-template-rows: auto;
251
+ grid-template-areas: "body" "info" "prompt" "control";
302
252
  }
303
253
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
304
- grid-template-columns: auto 1fr auto;
254
+ grid-template-columns: 1fr auto;
305
255
  grid-template-rows: auto auto;
306
- grid-template-areas: "media body control" ". info .";
256
+ grid-template-areas: "body control" "info control";
257
+ }
258
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
259
+ grid-template-columns: 1fr;
260
+ grid-template-areas: "body" "info" "control";
307
261
  }
308
262
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
309
- grid-template-columns: auto 1fr auto;
263
+ grid-template-columns: 1fr auto;
310
264
  grid-template-rows: auto auto;
311
- grid-template-areas: "media body control" ". prompt prompt";
265
+ grid-template-areas: "body control" "prompt prompt";
266
+ }
267
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
268
+ grid-template-columns: 1fr;
269
+ grid-template-areas: "body" "prompt" "control";
312
270
  }
313
271
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
314
- grid-template-columns: auto 1fr auto;
272
+ grid-template-columns: 1fr auto;
315
273
  grid-template-rows: auto;
316
- grid-template-areas: "media body control";
274
+ grid-template-areas: "body control";
275
+ }
276
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
277
+ grid-template-columns: 1fr;
278
+ grid-template-areas: "body" "control";
317
279
  }
318
280
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
319
- grid-template-columns: auto 1fr;
320
- grid-template-rows: auto auto;
321
- grid-template-areas: "media body" ". info" ". prompt";
281
+ grid-template-columns: 1fr;
282
+ grid-template-rows: auto auto auto;
283
+ grid-template-areas: "body" "info" "prompt";
322
284
  }
323
285
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
324
- grid-template-columns: auto 1fr;
325
- grid-template-rows: auto auto auto;
326
- grid-template-areas: "media body" ". info";
286
+ grid-template-columns: 1fr;
287
+ grid-template-rows: auto auto;
288
+ grid-template-areas: "body" "info";
327
289
  }
328
290
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
329
- grid-template-columns: auto 1fr;
291
+ grid-template-columns: 1fr;
330
292
  grid-template-rows: auto auto;
331
- grid-template-areas: "media body" ". prompt";
293
+ grid-template-areas: "body" "prompt";
332
294
  }
333
295
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
334
- grid-template-columns: auto 1fr;
296
+ grid-template-columns: 1fr;
335
297
  grid-template-rows: auto;
336
- grid-template-areas: "media body";
298
+ grid-template-areas: "body";
337
299
  }
338
300
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
339
301
  grid-column: 1 / -1;
@@ -341,23 +303,43 @@
341
303
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
342
304
  grid-template-columns: 1fr auto;
343
305
  grid-template-rows: auto auto auto;
344
- grid-template-areas: "body control" "info ." "prompt prompt";
306
+ grid-template-areas: "body control" "info control" "prompt prompt";
307
+ }
308
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
309
+ grid-template-columns: 1fr;
310
+ grid-template-rows: auto;
311
+ grid-template-areas: "body" "info" "prompt" "control";
345
312
  }
346
313
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
347
314
  grid-template-columns: 1fr auto;
348
315
  grid-template-rows: auto auto;
349
- grid-template-areas: "body control" "info .";
316
+ grid-template-areas: "body control" "info control";
317
+ }
318
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
319
+ grid-template-columns: 1fr;
320
+ grid-template-rows: auto;
321
+ grid-template-areas: "body" "info" "control";
350
322
  }
351
323
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
352
324
  grid-template-columns: 1fr auto;
353
325
  grid-template-rows: auto auto;
354
326
  grid-template-areas: "body control" "prompt prompt";
355
327
  }
328
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
329
+ grid-template-columns: 1fr;
330
+ grid-template-rows: auto;
331
+ grid-template-areas: "body" "prompt" "control";
332
+ }
356
333
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
357
334
  grid-template-columns: 1fr auto;
358
335
  grid-template-rows: auto;
359
336
  grid-template-areas: "body control";
360
337
  }
338
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
339
+ grid-template-columns: 1fr;
340
+ grid-template-rows: auto;
341
+ grid-template-areas: "body" "control";
342
+ }
361
343
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
362
344
  grid-column: 1 / -1;
363
345
  }
@@ -381,4 +363,22 @@
381
363
  grid-template-rows: auto;
382
364
  grid-template-areas: "body";
383
365
  }
366
+ .wds-list-item-gridWrapper .wds-list-item-media {
367
+ display: none;
368
+ }
369
+ .wds-list-item-gridWrapper .wds-list-item-body {
370
+ grid-area: body;
371
+ display: grid;
372
+ grid-template-columns: 1fr;
373
+ justify-items: start;
374
+ grid-gap: 0;
375
+ gap: 0;
376
+ }
377
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
378
+ text-align: left;
379
+ }
380
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
+ margin-top: 4px;
382
+ margin-top: var(--size-4);
383
+ }
384
384
  }