@transferwise/components 0.0.0-experimental-fb351fb → 0.0.0-experimental-a559366

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 (9) hide show
  1. package/build/main.css +105 -105
  2. package/build/styles/listItem/ListItem.css +105 -105
  3. package/build/styles/listItem/ListItem.grid.css +105 -105
  4. package/build/styles/main.css +105 -105
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +105 -105
  7. package/src/listItem/ListItem.grid.css +105 -105
  8. package/src/listItem/ListItem.grid.less +162 -159
  9. package/src/main.css +105 -105
package/build/main.css CHANGED
@@ -29430,54 +29430,66 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29430
29430
  margin-top: -2px;
29431
29431
  }
29432
29432
 
29433
- @container (min-width: 308px) {
29433
+ @container (max-width: 240px) {
29434
29434
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29435
- height: var(--wds-list-item-control-wrapper-height);
29436
- align-content: center;
29437
- }
29438
- .wds-list-item-gridWrapper .wds-list-item-media-image {
29439
- -o-object-position: center;
29440
- object-position: center;
29435
+ align-content: start;
29441
29436
  }
29442
29437
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29443
- grid-template-columns: auto 1fr auto;
29438
+ grid-template-columns: 1fr auto;
29444
29439
  grid-template-rows: auto auto auto;
29445
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
29440
+ grid-template-areas: "body control" "info control" "prompt prompt";
29441
+ }
29442
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29443
+ grid-template-columns: 1fr;
29444
+ grid-template-rows: auto;
29445
+ grid-template-areas: "body" "info" "prompt" "control";
29446
29446
  }
29447
29447
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29448
- grid-template-columns: auto 1fr auto;
29448
+ grid-template-columns: 1fr auto;
29449
29449
  grid-template-rows: auto auto;
29450
- grid-template-areas: "media body control" ". info .";
29450
+ grid-template-areas: "body control" "info control";
29451
+ }
29452
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29453
+ grid-template-columns: 1fr;
29454
+ grid-template-areas: "body" "info" "control";
29451
29455
  }
29452
29456
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29453
- grid-template-columns: auto 1fr auto;
29457
+ grid-template-columns: 1fr auto;
29454
29458
  grid-template-rows: auto auto;
29455
- grid-template-areas: "media body control" ". prompt prompt";
29459
+ grid-template-areas: "body control" "prompt prompt";
29460
+ }
29461
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29462
+ grid-template-columns: 1fr;
29463
+ grid-template-areas: "body" "prompt" "control";
29456
29464
  }
29457
29465
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
29458
- grid-template-columns: auto 1fr auto;
29466
+ grid-template-columns: 1fr auto;
29459
29467
  grid-template-rows: auto;
29460
- grid-template-areas: "media body control";
29468
+ grid-template-areas: "body control";
29469
+ }
29470
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29471
+ grid-template-columns: 1fr;
29472
+ grid-template-areas: "body" "control";
29461
29473
  }
29462
29474
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
29463
- grid-template-columns: auto 1fr;
29464
- grid-template-rows: auto auto;
29465
- grid-template-areas: "media body" ". info" ". prompt";
29475
+ grid-template-columns: 1fr;
29476
+ grid-template-rows: auto auto auto;
29477
+ grid-template-areas: "body" "info" "prompt";
29466
29478
  }
29467
29479
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
29468
- grid-template-columns: auto 1fr;
29469
- grid-template-rows: auto auto auto;
29470
- grid-template-areas: "media body" ". info";
29480
+ grid-template-columns: 1fr;
29481
+ grid-template-rows: auto auto;
29482
+ grid-template-areas: "body" "info";
29471
29483
  }
29472
29484
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
29473
- grid-template-columns: auto 1fr;
29485
+ grid-template-columns: 1fr;
29474
29486
  grid-template-rows: auto auto;
29475
- grid-template-areas: "media body" ". prompt";
29487
+ grid-template-areas: "body" "prompt";
29476
29488
  }
29477
29489
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
29478
- grid-template-columns: auto 1fr;
29490
+ grid-template-columns: 1fr;
29479
29491
  grid-template-rows: auto;
29480
- grid-template-areas: "media body";
29492
+ grid-template-areas: "body";
29481
29493
  }
29482
29494
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
29483
29495
  grid-column: 1 / -1;
@@ -29485,23 +29497,43 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29485
29497
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29486
29498
  grid-template-columns: 1fr auto;
29487
29499
  grid-template-rows: auto auto auto;
29488
- grid-template-areas: "body control" "info ." "prompt prompt";
29500
+ grid-template-areas: "body control" "info control" "prompt prompt";
29501
+ }
29502
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29503
+ grid-template-columns: 1fr;
29504
+ grid-template-rows: auto;
29505
+ grid-template-areas: "body" "info" "prompt" "control";
29489
29506
  }
29490
29507
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29491
29508
  grid-template-columns: 1fr auto;
29492
29509
  grid-template-rows: auto auto;
29493
- grid-template-areas: "body control" "info .";
29510
+ grid-template-areas: "body control" "info control";
29511
+ }
29512
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29513
+ grid-template-columns: 1fr;
29514
+ grid-template-rows: auto;
29515
+ grid-template-areas: "body" "info" "control";
29494
29516
  }
29495
29517
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29496
29518
  grid-template-columns: 1fr auto;
29497
29519
  grid-template-rows: auto auto;
29498
29520
  grid-template-areas: "body control" "prompt prompt";
29499
29521
  }
29522
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29523
+ grid-template-columns: 1fr;
29524
+ grid-template-rows: auto;
29525
+ grid-template-areas: "body" "prompt" "control";
29526
+ }
29500
29527
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
29501
29528
  grid-template-columns: 1fr auto;
29502
29529
  grid-template-rows: auto;
29503
29530
  grid-template-areas: "body control";
29504
29531
  }
29532
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29533
+ grid-template-columns: 1fr;
29534
+ grid-template-rows: auto;
29535
+ grid-template-areas: "body" "control";
29536
+ }
29505
29537
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
29506
29538
  grid-column: 1 / -1;
29507
29539
  }
@@ -29525,9 +29557,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29525
29557
  grid-template-rows: auto;
29526
29558
  grid-template-areas: "body";
29527
29559
  }
29560
+ .wds-list-item-gridWrapper .wds-list-item-media {
29561
+ display: none;
29562
+ }
29563
+ .wds-list-item-gridWrapper .wds-list-item-body {
29564
+ grid-area: body;
29565
+ display: grid;
29566
+ grid-template-columns: 1fr;
29567
+ justify-items: start;
29568
+ grid-gap: 0;
29569
+ gap: 0;
29570
+ }
29571
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
29572
+ text-align: left;
29573
+ }
29574
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
29575
+ margin-top: 4px;
29576
+ margin-top: var(--size-4);
29577
+ }
29528
29578
  }
29529
29579
 
29530
- @container (min-width: 241px) and (max-width: 308px) {
29580
+ @container (min-width: 240.01px) and (max-width: 308px) {
29531
29581
  .wds-list-item-gridWrapper .wds-list-item-media-image {
29532
29582
  -o-object-position: bottom left;
29533
29583
  object-position: bottom left;
@@ -29659,66 +29709,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29659
29709
  }
29660
29710
  }
29661
29711
 
29662
- @container (max-width: 240px) {
29712
+ @container (min-width: 308.01px) {
29663
29713
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29664
- align-content: start;
29714
+ height: var(--wds-list-item-control-wrapper-height);
29715
+ align-content: center;
29716
+ }
29717
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
29718
+ -o-object-position: center;
29719
+ object-position: center;
29665
29720
  }
29666
29721
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29667
- grid-template-columns: 1fr auto;
29722
+ grid-template-columns: auto 1fr auto;
29668
29723
  grid-template-rows: auto auto auto;
29669
- grid-template-areas: "body control" "info control" "prompt prompt";
29670
- }
29671
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29672
- grid-template-columns: 1fr;
29673
- grid-template-rows: auto;
29674
- grid-template-areas: "body" "info" "prompt" "control";
29724
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
29675
29725
  }
29676
29726
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29677
- grid-template-columns: 1fr auto;
29727
+ grid-template-columns: auto 1fr auto;
29678
29728
  grid-template-rows: auto auto;
29679
- grid-template-areas: "body control" "info control";
29680
- }
29681
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29682
- grid-template-columns: 1fr;
29683
- grid-template-areas: "body" "info" "control";
29729
+ grid-template-areas: "media body control" ". info .";
29684
29730
  }
29685
29731
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29686
- grid-template-columns: 1fr auto;
29732
+ grid-template-columns: auto 1fr auto;
29687
29733
  grid-template-rows: auto auto;
29688
- grid-template-areas: "body control" "prompt prompt";
29689
- }
29690
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29691
- grid-template-columns: 1fr;
29692
- grid-template-areas: "body" "prompt" "control";
29734
+ grid-template-areas: "media body control" ". prompt prompt";
29693
29735
  }
29694
29736
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
29695
- grid-template-columns: 1fr auto;
29737
+ grid-template-columns: auto 1fr auto;
29696
29738
  grid-template-rows: auto;
29697
- grid-template-areas: "body control";
29698
- }
29699
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29700
- grid-template-columns: 1fr;
29701
- grid-template-areas: "body" "control";
29739
+ grid-template-areas: "media body control";
29702
29740
  }
29703
29741
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
29704
- grid-template-columns: 1fr;
29705
- grid-template-rows: auto auto auto;
29706
- grid-template-areas: "body" "info" "prompt";
29742
+ grid-template-columns: auto 1fr;
29743
+ grid-template-rows: auto auto;
29744
+ grid-template-areas: "media body" ". info" ". prompt";
29707
29745
  }
29708
29746
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
29709
- grid-template-columns: 1fr;
29710
- grid-template-rows: auto auto;
29711
- grid-template-areas: "body" "info";
29747
+ grid-template-columns: auto 1fr;
29748
+ grid-template-rows: auto auto auto;
29749
+ grid-template-areas: "media body" ". info";
29712
29750
  }
29713
29751
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
29714
- grid-template-columns: 1fr;
29752
+ grid-template-columns: auto 1fr;
29715
29753
  grid-template-rows: auto auto;
29716
- grid-template-areas: "body" "prompt";
29754
+ grid-template-areas: "media body" ". prompt";
29717
29755
  }
29718
29756
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
29719
- grid-template-columns: 1fr;
29757
+ grid-template-columns: auto 1fr;
29720
29758
  grid-template-rows: auto;
29721
- grid-template-areas: "body";
29759
+ grid-template-areas: "media body";
29722
29760
  }
29723
29761
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
29724
29762
  grid-column: 1 / -1;
@@ -29726,43 +29764,23 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29726
29764
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29727
29765
  grid-template-columns: 1fr auto;
29728
29766
  grid-template-rows: auto auto auto;
29729
- grid-template-areas: "body control" "info control" "prompt prompt";
29730
- }
29731
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29732
- grid-template-columns: 1fr;
29733
- grid-template-rows: auto;
29734
- grid-template-areas: "body" "info" "prompt" "control";
29767
+ grid-template-areas: "body control" "info ." "prompt prompt";
29735
29768
  }
29736
29769
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29737
29770
  grid-template-columns: 1fr auto;
29738
29771
  grid-template-rows: auto auto;
29739
- grid-template-areas: "body control" "info control";
29740
- }
29741
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29742
- grid-template-columns: 1fr;
29743
- grid-template-rows: auto;
29744
- grid-template-areas: "body" "info" "control";
29772
+ grid-template-areas: "body control" "info .";
29745
29773
  }
29746
29774
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29747
29775
  grid-template-columns: 1fr auto;
29748
29776
  grid-template-rows: auto auto;
29749
29777
  grid-template-areas: "body control" "prompt prompt";
29750
29778
  }
29751
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29752
- grid-template-columns: 1fr;
29753
- grid-template-rows: auto;
29754
- grid-template-areas: "body" "prompt" "control";
29755
- }
29756
29779
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
29757
29780
  grid-template-columns: 1fr auto;
29758
29781
  grid-template-rows: auto;
29759
29782
  grid-template-areas: "body control";
29760
29783
  }
29761
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29762
- grid-template-columns: 1fr;
29763
- grid-template-rows: auto;
29764
- grid-template-areas: "body" "control";
29765
- }
29766
29784
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
29767
29785
  grid-column: 1 / -1;
29768
29786
  }
@@ -29786,24 +29804,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29786
29804
  grid-template-rows: auto;
29787
29805
  grid-template-areas: "body";
29788
29806
  }
29789
- .wds-list-item-gridWrapper .wds-list-item-media {
29790
- display: none;
29791
- }
29792
- .wds-list-item-gridWrapper .wds-list-item-body {
29793
- grid-area: body;
29794
- display: grid;
29795
- grid-template-columns: 1fr;
29796
- justify-items: start;
29797
- grid-gap: 0;
29798
- gap: 0;
29799
- }
29800
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
29801
- text-align: left;
29802
- }
29803
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
29804
- margin-top: 4px;
29805
- margin-top: var(--size-4);
29806
- }
29807
29807
  }
29808
29808
 
29809
29809
  .wds-list-item-prompt {
package/build/styles/listItem/ListItem.css CHANGED
@@ -9,54 +9,66 @@
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 (min-width: 308px) {
12
+ @container (max-width: 240px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
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;
14
+ align-content: start;
20
15
  }
21
16
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
22
- grid-template-columns: auto 1fr auto;
17
+ grid-template-columns: 1fr auto;
23
18
  grid-template-rows: auto auto auto;
24
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
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";
25
25
  }
26
26
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
27
- grid-template-columns: auto 1fr auto;
27
+ grid-template-columns: 1fr auto;
28
28
  grid-template-rows: auto auto;
29
- grid-template-areas: "media body control" ". info .";
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";
30
34
  }
31
35
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
32
- grid-template-columns: auto 1fr auto;
36
+ grid-template-columns: 1fr auto;
33
37
  grid-template-rows: auto auto;
34
- grid-template-areas: "media body control" ". prompt prompt";
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";
35
43
  }
36
44
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
37
- grid-template-columns: auto 1fr auto;
45
+ grid-template-columns: 1fr auto;
38
46
  grid-template-rows: auto;
39
- grid-template-areas: "media body control";
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";
40
52
  }
41
53
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
42
- grid-template-columns: auto 1fr;
43
- grid-template-rows: auto auto;
44
- grid-template-areas: "media body" ". info" ". prompt";
54
+ grid-template-columns: 1fr;
55
+ grid-template-rows: auto auto auto;
56
+ grid-template-areas: "body" "info" "prompt";
45
57
  }
46
58
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
47
- grid-template-columns: auto 1fr;
48
- grid-template-rows: auto auto auto;
49
- grid-template-areas: "media body" ". info";
59
+ grid-template-columns: 1fr;
60
+ grid-template-rows: auto auto;
61
+ grid-template-areas: "body" "info";
50
62
  }
51
63
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
52
- grid-template-columns: auto 1fr;
64
+ grid-template-columns: 1fr;
53
65
  grid-template-rows: auto auto;
54
- grid-template-areas: "media body" ". prompt";
66
+ grid-template-areas: "body" "prompt";
55
67
  }
56
68
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
57
- grid-template-columns: auto 1fr;
69
+ grid-template-columns: 1fr;
58
70
  grid-template-rows: auto;
59
- grid-template-areas: "media body";
71
+ grid-template-areas: "body";
60
72
  }
61
73
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
62
74
  grid-column: 1 / -1;
@@ -64,23 +76,43 @@
64
76
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
65
77
  grid-template-columns: 1fr auto;
66
78
  grid-template-rows: auto auto auto;
67
- grid-template-areas: "body control" "info ." "prompt prompt";
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";
68
85
  }
69
86
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
70
87
  grid-template-columns: 1fr auto;
71
88
  grid-template-rows: auto auto;
72
- grid-template-areas: "body control" "info .";
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";
73
95
  }
74
96
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
75
97
  grid-template-columns: 1fr auto;
76
98
  grid-template-rows: auto auto;
77
99
  grid-template-areas: "body control" "prompt prompt";
78
100
  }
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
+ }
79
106
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
80
107
  grid-template-columns: 1fr auto;
81
108
  grid-template-rows: auto;
82
109
  grid-template-areas: "body control";
83
110
  }
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
+ }
84
116
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
85
117
  grid-column: 1 / -1;
86
118
  }
@@ -104,8 +136,26 @@
104
136
  grid-template-rows: auto;
105
137
  grid-template-areas: "body";
106
138
  }
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
+ }
107
157
  }
108
- @container (min-width: 241px) and (max-width: 308px) {
158
+ @container (min-width: 240.01px) and (max-width: 308px) {
109
159
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
160
  -o-object-position: bottom left;
111
161
  object-position: bottom left;
@@ -236,66 +286,54 @@
236
286
  margin-top: var(--size-4);
237
287
  }
238
288
  }
239
- @container (max-width: 240px) {
289
+ @container (min-width: 308.01px) {
240
290
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
- align-content: start;
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;
242
297
  }
243
298
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
- grid-template-columns: 1fr auto;
299
+ grid-template-columns: auto 1fr auto;
245
300
  grid-template-rows: auto auto auto;
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";
301
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
252
302
  }
253
303
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
254
- grid-template-columns: 1fr auto;
304
+ grid-template-columns: auto 1fr auto;
255
305
  grid-template-rows: auto auto;
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";
306
+ grid-template-areas: "media body control" ". info .";
261
307
  }
262
308
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
263
- grid-template-columns: 1fr auto;
309
+ grid-template-columns: auto 1fr auto;
264
310
  grid-template-rows: auto auto;
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";
311
+ grid-template-areas: "media body control" ". prompt prompt";
270
312
  }
271
313
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
272
- grid-template-columns: 1fr auto;
314
+ grid-template-columns: auto 1fr auto;
273
315
  grid-template-rows: auto;
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";
316
+ grid-template-areas: "media body control";
279
317
  }
280
318
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
281
- grid-template-columns: 1fr;
282
- grid-template-rows: auto auto auto;
283
- grid-template-areas: "body" "info" "prompt";
319
+ grid-template-columns: auto 1fr;
320
+ grid-template-rows: auto auto;
321
+ grid-template-areas: "media body" ". info" ". prompt";
284
322
  }
285
323
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
286
- grid-template-columns: 1fr;
287
- grid-template-rows: auto auto;
288
- grid-template-areas: "body" "info";
324
+ grid-template-columns: auto 1fr;
325
+ grid-template-rows: auto auto auto;
326
+ grid-template-areas: "media body" ". info";
289
327
  }
290
328
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
291
- grid-template-columns: 1fr;
329
+ grid-template-columns: auto 1fr;
292
330
  grid-template-rows: auto auto;
293
- grid-template-areas: "body" "prompt";
331
+ grid-template-areas: "media body" ". prompt";
294
332
  }
295
333
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
296
- grid-template-columns: 1fr;
334
+ grid-template-columns: auto 1fr;
297
335
  grid-template-rows: auto;
298
- grid-template-areas: "body";
336
+ grid-template-areas: "media body";
299
337
  }
300
338
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
301
339
  grid-column: 1 / -1;
@@ -303,43 +341,23 @@
303
341
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
304
342
  grid-template-columns: 1fr auto;
305
343
  grid-template-rows: auto auto auto;
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";
344
+ grid-template-areas: "body control" "info ." "prompt prompt";
312
345
  }
313
346
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
314
347
  grid-template-columns: 1fr auto;
315
348
  grid-template-rows: auto auto;
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";
349
+ grid-template-areas: "body control" "info .";
322
350
  }
323
351
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
324
352
  grid-template-columns: 1fr auto;
325
353
  grid-template-rows: auto auto;
326
354
  grid-template-areas: "body control" "prompt prompt";
327
355
  }
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
- }
333
356
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
334
357
  grid-template-columns: 1fr auto;
335
358
  grid-template-rows: auto;
336
359
  grid-template-areas: "body control";
337
360
  }
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
- }
343
361
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
344
362
  grid-column: 1 / -1;
345
363
  }
@@ -363,24 +381,6 @@
363
381
  grid-template-rows: auto;
364
382
  grid-template-areas: "body";
365
383
  }
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;