@transferwise/components 0.0.0-experimental-307db45 → 0.0.0-experimental-b6f2358

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 (10) hide show
  1. package/build/main.css +64 -33
  2. package/build/styles/listItem/ListItem.css +64 -33
  3. package/build/styles/listItem/ListItem.grid.css +63 -29
  4. package/build/styles/main.css +64 -33
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +64 -33
  7. package/src/listItem/ListItem.grid.css +63 -29
  8. package/src/listItem/ListItem.grid.less +63 -26
  9. package/src/listItem/ListItem.less +1 -3
  10. package/src/main.css +64 -33
package/build/main.css CHANGED
@@ -2644,12 +2644,16 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2644
2644
  }
2645
2645
  .wds-list-item-gridWrapper {
2646
2646
  display: grid;
2647
- grid-gap: 4px 16px;
2648
- grid-gap: var(--size-4) var(--size-16);
2649
- gap: 4px 16px;
2650
- gap: var(--size-4) var(--size-16);
2647
+ grid-gap: 2px 16px;
2648
+ grid-gap: 2px var(--size-16);
2649
+ gap: 2px 16px;
2650
+ gap: 2px var(--size-16);
2651
2651
  }
2652
2652
  @container (min-width: 375px) {
2653
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2654
+ height: var(--wds-list-item-control-wrapper-height);
2655
+ align-content: center;
2656
+ }
2653
2657
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2654
2658
  -o-object-position: center;
2655
2659
  object-position: center;
@@ -2698,22 +2702,22 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2698
2702
  grid-column: 1 / -1;
2699
2703
  }
2700
2704
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2701
- grid-template-columns: 1fr auto;
2705
+ grid-template-columns: 1fr min-content;
2702
2706
  grid-template-rows: auto auto auto;
2703
2707
  grid-template-areas: "body control" "info ." "prompt prompt";
2704
2708
  }
2705
2709
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2706
- grid-template-columns: 1fr auto;
2710
+ grid-template-columns: 1fr min-content;
2707
2711
  grid-template-rows: auto auto;
2708
2712
  grid-template-areas: "body control" "info .";
2709
2713
  }
2710
2714
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2711
- grid-template-columns: 1fr auto;
2715
+ grid-template-columns: 1fr min-content;
2712
2716
  grid-template-rows: auto auto;
2713
2717
  grid-template-areas: "body control" "prompt prompt";
2714
2718
  }
2715
2719
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2716
- grid-template-columns: 1fr auto;
2720
+ grid-template-columns: 1fr min-content;
2717
2721
  grid-template-rows: auto;
2718
2722
  grid-template-areas: "body control";
2719
2723
  }
@@ -2746,8 +2750,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2746
2750
  -o-object-position: bottom left;
2747
2751
  object-position: bottom left;
2748
2752
  }
2753
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2754
+ align-content: start;
2755
+ }
2749
2756
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2750
- grid-template-columns: 1fr auto;
2757
+ grid-template-columns: 1fr min-content;
2751
2758
  grid-template-rows: auto auto auto auto;
2752
2759
  grid-template-areas: "media media" "body control" "info control" "prompt prompt";
2753
2760
  }
@@ -2755,8 +2762,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2755
2762
  grid-template-columns: 1fr;
2756
2763
  grid-template-areas: "media" "body" "info" "prompt" "control";
2757
2764
  }
2765
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2766
+ margin-top: 2px;
2767
+ }
2758
2768
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2759
- grid-template-columns: 1fr auto;
2769
+ grid-template-columns: 1fr min-content;
2760
2770
  grid-template-rows: auto auto auto;
2761
2771
  grid-template-areas: "media media" "body control" "info control";
2762
2772
  }
@@ -2765,7 +2775,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2765
2775
  grid-template-areas: "media" "body" "info" "control";
2766
2776
  }
2767
2777
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2768
- grid-template-columns: 1fr auto;
2778
+ grid-template-columns: 1fr min-content;
2769
2779
  grid-template-rows: auto auto auto;
2770
2780
  grid-template-areas: "media media" "body control" "prompt prompt";
2771
2781
  }
@@ -2773,8 +2783,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2773
2783
  grid-template-columns: 1fr;
2774
2784
  grid-template-areas: "media" "body" "prompt" "control";
2775
2785
  }
2786
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2787
+ margin-top: 2px;
2788
+ }
2776
2789
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2777
- grid-template-columns: 1fr auto;
2790
+ grid-template-columns: 1fr min-content;
2778
2791
  grid-template-rows: auto auto;
2779
2792
  grid-template-areas: "media media" "body control";
2780
2793
  }
@@ -2806,7 +2819,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2806
2819
  grid-column: 1 / -1;
2807
2820
  }
2808
2821
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2809
- grid-template-columns: 1fr auto;
2822
+ grid-template-columns: 1fr min-content;
2810
2823
  grid-template-rows: auto auto auto;
2811
2824
  grid-template-areas: "body control" "info control" "prompt prompt";
2812
2825
  }
@@ -2814,8 +2827,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2814
2827
  grid-template-columns: 1fr;
2815
2828
  grid-template-areas: "body" "info" "prompt" "control";
2816
2829
  }
2830
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2831
+ margin-top: 2px;
2832
+ }
2817
2833
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2818
- grid-template-columns: 1fr auto;
2834
+ grid-template-columns: 1fr min-content;
2819
2835
  grid-template-rows: auto auto;
2820
2836
  grid-template-areas: "body control" "info control";
2821
2837
  }
@@ -2824,7 +2840,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2824
2840
  grid-template-areas: "body" "info" "control";
2825
2841
  }
2826
2842
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2827
- grid-template-columns: 1fr auto;
2843
+ grid-template-columns: 1fr min-content;
2828
2844
  grid-template-rows: auto auto;
2829
2845
  grid-template-areas: "body control" "prompt prompt";
2830
2846
  }
@@ -2832,8 +2848,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2832
2848
  grid-template-columns: 1fr;
2833
2849
  grid-template-areas: "body" "prompt" "control";
2834
2850
  }
2851
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2852
+ margin-top: 2px;
2853
+ }
2835
2854
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2836
- grid-template-columns: 1fr auto;
2855
+ grid-template-columns: 1fr min-content;
2837
2856
  grid-template-rows: auto;
2838
2857
  grid-template-areas: "body control";
2839
2858
  }
@@ -2866,8 +2885,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2866
2885
  }
2867
2886
  }
2868
2887
  @container (max-width: 297px) {
2888
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2889
+ align-content: start;
2890
+ }
2869
2891
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2870
- grid-template-columns: auto 1fr;
2892
+ grid-template-columns: 1fr min-content;
2871
2893
  grid-template-rows: auto auto auto;
2872
2894
  grid-template-areas: "body control" "info control" "prompt prompt";
2873
2895
  }
@@ -2876,8 +2898,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2876
2898
  grid-template-rows: auto;
2877
2899
  grid-template-areas: "body" "info" "prompt" "control";
2878
2900
  }
2901
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2902
+ margin-top: 2px;
2903
+ }
2879
2904
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2880
- grid-template-columns: auto 1fr;
2905
+ grid-template-columns: 1fr min-content;
2881
2906
  grid-template-rows: auto auto;
2882
2907
  grid-template-areas: "body control" "info control";
2883
2908
  }
@@ -2886,7 +2911,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2886
2911
  grid-template-areas: "body" "info" "control";
2887
2912
  }
2888
2913
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2889
- grid-template-columns: auto 1fr;
2914
+ grid-template-columns: 1fr min-content;
2890
2915
  grid-template-rows: auto auto;
2891
2916
  grid-template-areas: "body control" "prompt prompt";
2892
2917
  }
@@ -2894,8 +2919,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2894
2919
  grid-template-columns: 1fr;
2895
2920
  grid-template-areas: "body" "prompt" "control";
2896
2921
  }
2922
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2923
+ margin-top: 2px;
2924
+ }
2897
2925
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2898
- grid-template-columns: auto 1fr;
2926
+ grid-template-columns: 1fr min-content;
2899
2927
  grid-template-rows: auto;
2900
2928
  grid-template-areas: "body control";
2901
2929
  }
@@ -2904,17 +2932,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2904
2932
  grid-template-areas: "body" "control";
2905
2933
  }
2906
2934
  .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;
2935
+ grid-template-columns: 1fr;
2936
+ grid-template-rows: auto auto auto;
2909
2937
  grid-template-areas: "body" "info" "prompt";
2910
2938
  }
2911
2939
  .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;
2940
+ grid-template-columns: 1fr;
2941
+ grid-template-rows: auto auto;
2914
2942
  grid-template-areas: "body" "info";
2915
2943
  }
2916
2944
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2917
- grid-template-columns: auto;
2945
+ grid-template-columns: 1fr;
2918
2946
  grid-template-rows: auto auto;
2919
2947
  grid-template-areas: "body" "prompt";
2920
2948
  }
@@ -2927,7 +2955,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2927
2955
  grid-column: 1 / -1;
2928
2956
  }
2929
2957
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2930
- grid-template-columns: 1fr auto;
2958
+ grid-template-columns: 1fr min-content;
2931
2959
  grid-template-rows: auto auto auto;
2932
2960
  grid-template-areas: "body control" "info control" "prompt prompt";
2933
2961
  }
@@ -2936,8 +2964,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2936
2964
  grid-template-rows: auto;
2937
2965
  grid-template-areas: "body" "info" "prompt" "control";
2938
2966
  }
2967
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2968
+ margin-top: 2px;
2969
+ }
2939
2970
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2940
- grid-template-columns: 1fr auto;
2971
+ grid-template-columns: 1fr min-content;
2941
2972
  grid-template-rows: auto auto;
2942
2973
  grid-template-areas: "body control" "info control";
2943
2974
  }
@@ -2947,7 +2978,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2947
2978
  grid-template-areas: "body" "info" "control";
2948
2979
  }
2949
2980
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2950
- grid-template-columns: 1fr auto;
2981
+ grid-template-columns: 1fr min-content;
2951
2982
  grid-template-rows: auto auto;
2952
2983
  grid-template-areas: "body control" "prompt prompt";
2953
2984
  }
@@ -2956,8 +2987,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2956
2987
  grid-template-rows: auto;
2957
2988
  grid-template-areas: "body" "prompt" "control";
2958
2989
  }
2990
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
2991
+ margin-top: 2px;
2992
+ }
2959
2993
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2960
- grid-template-columns: 1fr auto;
2994
+ grid-template-columns: 1fr min-content;
2961
2995
  grid-template-rows: auto;
2962
2996
  grid-template-areas: "body control";
2963
2997
  }
@@ -3312,16 +3346,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3312
3346
  grid-area: info;
3313
3347
  color: #768e9c;
3314
3348
  color: var(--color-content-tertiary);
3315
- margin-top: calc(4px * -1);
3316
- margin-top: calc(var(--size-4) * -1);
3349
+ margin-top: -2px;
3317
3350
  }
3318
3351
  .wds-list-item-additional-info button.np-link {
3319
3352
  text-align: start;
3320
3353
  }
3321
3354
  .wds-list-item-control-wrapper {
3322
3355
  grid-area: control;
3323
- align-content: center;
3324
- height: var(--wds-list-item-control-wrapper-height);
3325
3356
  }
3326
3357
  .wds-list-item-navigation .tw-icon-chevron-right {
3327
3358
  color: #c9cbce;
package/build/styles/listItem/ListItem.css CHANGED
@@ -1,11 +1,15 @@
1
1
  .wds-list-item-gridWrapper {
2
2
  display: grid;
3
- grid-gap: 4px 16px;
4
- grid-gap: var(--size-4) var(--size-16);
5
- gap: 4px 16px;
6
- gap: var(--size-4) var(--size-16);
3
+ grid-gap: 2px 16px;
4
+ grid-gap: 2px var(--size-16);
5
+ gap: 2px 16px;
6
+ gap: 2px var(--size-16);
7
7
  }
8
8
  @container (min-width: 375px) {
9
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
10
+ height: var(--wds-list-item-control-wrapper-height);
11
+ align-content: center;
12
+ }
9
13
  .wds-list-item-gridWrapper .wds-list-item-media-image {
10
14
  -o-object-position: center;
11
15
  object-position: center;
@@ -54,22 +58,22 @@
54
58
  grid-column: 1 / -1;
55
59
  }
56
60
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
57
- grid-template-columns: 1fr auto;
61
+ grid-template-columns: 1fr min-content;
58
62
  grid-template-rows: auto auto auto;
59
63
  grid-template-areas: "body control" "info ." "prompt prompt";
60
64
  }
61
65
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
62
- grid-template-columns: 1fr auto;
66
+ grid-template-columns: 1fr min-content;
63
67
  grid-template-rows: auto auto;
64
68
  grid-template-areas: "body control" "info .";
65
69
  }
66
70
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
67
- grid-template-columns: 1fr auto;
71
+ grid-template-columns: 1fr min-content;
68
72
  grid-template-rows: auto auto;
69
73
  grid-template-areas: "body control" "prompt prompt";
70
74
  }
71
75
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
72
- grid-template-columns: 1fr auto;
76
+ grid-template-columns: 1fr min-content;
73
77
  grid-template-rows: auto;
74
78
  grid-template-areas: "body control";
75
79
  }
@@ -102,8 +106,11 @@
102
106
  -o-object-position: bottom left;
103
107
  object-position: bottom left;
104
108
  }
109
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
110
+ align-content: start;
111
+ }
105
112
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
106
- grid-template-columns: 1fr auto;
113
+ grid-template-columns: 1fr min-content;
107
114
  grid-template-rows: auto auto auto auto;
108
115
  grid-template-areas: "media media" "body control" "info control" "prompt prompt";
109
116
  }
@@ -111,8 +118,11 @@
111
118
  grid-template-columns: 1fr;
112
119
  grid-template-areas: "media" "body" "info" "prompt" "control";
113
120
  }
121
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
122
+ margin-top: 2px;
123
+ }
114
124
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
115
- grid-template-columns: 1fr auto;
125
+ grid-template-columns: 1fr min-content;
116
126
  grid-template-rows: auto auto auto;
117
127
  grid-template-areas: "media media" "body control" "info control";
118
128
  }
@@ -121,7 +131,7 @@
121
131
  grid-template-areas: "media" "body" "info" "control";
122
132
  }
123
133
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
124
- grid-template-columns: 1fr auto;
134
+ grid-template-columns: 1fr min-content;
125
135
  grid-template-rows: auto auto auto;
126
136
  grid-template-areas: "media media" "body control" "prompt prompt";
127
137
  }
@@ -129,8 +139,11 @@
129
139
  grid-template-columns: 1fr;
130
140
  grid-template-areas: "media" "body" "prompt" "control";
131
141
  }
142
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
143
+ margin-top: 2px;
144
+ }
132
145
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
133
- grid-template-columns: 1fr auto;
146
+ grid-template-columns: 1fr min-content;
134
147
  grid-template-rows: auto auto;
135
148
  grid-template-areas: "media media" "body control";
136
149
  }
@@ -162,7 +175,7 @@
162
175
  grid-column: 1 / -1;
163
176
  }
164
177
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
165
- grid-template-columns: 1fr auto;
178
+ grid-template-columns: 1fr min-content;
166
179
  grid-template-rows: auto auto auto;
167
180
  grid-template-areas: "body control" "info control" "prompt prompt";
168
181
  }
@@ -170,8 +183,11 @@
170
183
  grid-template-columns: 1fr;
171
184
  grid-template-areas: "body" "info" "prompt" "control";
172
185
  }
186
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
187
+ margin-top: 2px;
188
+ }
173
189
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
174
- grid-template-columns: 1fr auto;
190
+ grid-template-columns: 1fr min-content;
175
191
  grid-template-rows: auto auto;
176
192
  grid-template-areas: "body control" "info control";
177
193
  }
@@ -180,7 +196,7 @@
180
196
  grid-template-areas: "body" "info" "control";
181
197
  }
182
198
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
183
- grid-template-columns: 1fr auto;
199
+ grid-template-columns: 1fr min-content;
184
200
  grid-template-rows: auto auto;
185
201
  grid-template-areas: "body control" "prompt prompt";
186
202
  }
@@ -188,8 +204,11 @@
188
204
  grid-template-columns: 1fr;
189
205
  grid-template-areas: "body" "prompt" "control";
190
206
  }
207
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
208
+ margin-top: 2px;
209
+ }
191
210
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
192
- grid-template-columns: 1fr auto;
211
+ grid-template-columns: 1fr min-content;
193
212
  grid-template-rows: auto;
194
213
  grid-template-areas: "body control";
195
214
  }
@@ -222,8 +241,11 @@
222
241
  }
223
242
  }
224
243
  @container (max-width: 297px) {
244
+ .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
245
+ align-content: start;
246
+ }
225
247
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
- grid-template-columns: auto 1fr;
248
+ grid-template-columns: 1fr min-content;
227
249
  grid-template-rows: auto auto auto;
228
250
  grid-template-areas: "body control" "info control" "prompt prompt";
229
251
  }
@@ -232,8 +254,11 @@
232
254
  grid-template-rows: auto;
233
255
  grid-template-areas: "body" "info" "prompt" "control";
234
256
  }
257
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
258
+ margin-top: 2px;
259
+ }
235
260
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
236
- grid-template-columns: auto 1fr;
261
+ grid-template-columns: 1fr min-content;
237
262
  grid-template-rows: auto auto;
238
263
  grid-template-areas: "body control" "info control";
239
264
  }
@@ -242,7 +267,7 @@
242
267
  grid-template-areas: "body" "info" "control";
243
268
  }
244
269
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
245
- grid-template-columns: auto 1fr;
270
+ grid-template-columns: 1fr min-content;
246
271
  grid-template-rows: auto auto;
247
272
  grid-template-areas: "body control" "prompt prompt";
248
273
  }
@@ -250,8 +275,11 @@
250
275
  grid-template-columns: 1fr;
251
276
  grid-template-areas: "body" "prompt" "control";
252
277
  }
278
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
279
+ margin-top: 2px;
280
+ }
253
281
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
254
- grid-template-columns: auto 1fr;
282
+ grid-template-columns: 1fr min-content;
255
283
  grid-template-rows: auto;
256
284
  grid-template-areas: "body control";
257
285
  }
@@ -260,17 +288,17 @@
260
288
  grid-template-areas: "body" "control";
261
289
  }
262
290
  .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;
291
+ grid-template-columns: 1fr;
292
+ grid-template-rows: auto auto auto;
265
293
  grid-template-areas: "body" "info" "prompt";
266
294
  }
267
295
  .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;
296
+ grid-template-columns: 1fr;
297
+ grid-template-rows: auto auto;
270
298
  grid-template-areas: "body" "info";
271
299
  }
272
300
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
273
- grid-template-columns: auto;
301
+ grid-template-columns: 1fr;
274
302
  grid-template-rows: auto auto;
275
303
  grid-template-areas: "body" "prompt";
276
304
  }
@@ -283,7 +311,7 @@
283
311
  grid-column: 1 / -1;
284
312
  }
285
313
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
286
- grid-template-columns: 1fr auto;
314
+ grid-template-columns: 1fr min-content;
287
315
  grid-template-rows: auto auto auto;
288
316
  grid-template-areas: "body control" "info control" "prompt prompt";
289
317
  }
@@ -292,8 +320,11 @@
292
320
  grid-template-rows: auto;
293
321
  grid-template-areas: "body" "info" "prompt" "control";
294
322
  }
323
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
324
+ margin-top: 2px;
325
+ }
295
326
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
296
- grid-template-columns: 1fr auto;
327
+ grid-template-columns: 1fr min-content;
297
328
  grid-template-rows: auto auto;
298
329
  grid-template-areas: "body control" "info control";
299
330
  }
@@ -303,7 +334,7 @@
303
334
  grid-template-areas: "body" "info" "control";
304
335
  }
305
336
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
306
- grid-template-columns: 1fr auto;
337
+ grid-template-columns: 1fr min-content;
307
338
  grid-template-rows: auto auto;
308
339
  grid-template-areas: "body control" "prompt prompt";
309
340
  }
@@ -312,8 +343,11 @@
312
343
  grid-template-rows: auto;
313
344
  grid-template-areas: "body" "prompt" "control";
314
345
  }
346
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) .wds-list-item-button-control {
347
+ margin-top: 2px;
348
+ }
315
349
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
316
- grid-template-columns: 1fr auto;
350
+ grid-template-columns: 1fr min-content;
317
351
  grid-template-rows: auto;
318
352
  grid-template-areas: "body control";
319
353
  }
@@ -668,16 +702,13 @@
668
702
  grid-area: info;
669
703
  color: #768e9c;
670
704
  color: var(--color-content-tertiary);
671
- margin-top: calc(4px * -1);
672
- margin-top: calc(var(--size-4) * -1);
705
+ margin-top: -2px;
673
706
  }
674
707
  .wds-list-item-additional-info button.np-link {
675
708
  text-align: start;
676
709
  }
677
710
  .wds-list-item-control-wrapper {
678
711
  grid-area: control;
679
- align-content: center;
680
- height: var(--wds-list-item-control-wrapper-height);
681
712
  }
682
713
  .wds-list-item-navigation .tw-icon-chevron-right {
683
714
  color: #c9cbce;