@transferwise/components 0.0.0-experimental-d1cefe3 → 0.0.0-experimental-548b806

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 (195) hide show
  1. package/build/dateInput/DateInput.js +4 -4
  2. package/build/dateInput/DateInput.js.map +1 -1
  3. package/build/dateInput/DateInput.mjs +4 -4
  4. package/build/dateInput/DateInput.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +4 -4
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +4 -4
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
  10. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
  11. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs +3 -3
  12. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +1 -1
  13. package/build/i18n/cs.json +2 -0
  14. package/build/i18n/cs.json.js +2 -0
  15. package/build/i18n/cs.json.js.map +1 -1
  16. package/build/i18n/cs.json.mjs +2 -0
  17. package/build/i18n/cs.json.mjs.map +1 -1
  18. package/build/i18n/de.json +2 -0
  19. package/build/i18n/de.json.js +2 -0
  20. package/build/i18n/de.json.js.map +1 -1
  21. package/build/i18n/de.json.mjs +2 -0
  22. package/build/i18n/de.json.mjs.map +1 -1
  23. package/build/i18n/es.json +2 -0
  24. package/build/i18n/es.json.js +2 -0
  25. package/build/i18n/es.json.js.map +1 -1
  26. package/build/i18n/es.json.mjs +2 -0
  27. package/build/i18n/es.json.mjs.map +1 -1
  28. package/build/i18n/fr.json +2 -0
  29. package/build/i18n/fr.json.js +2 -0
  30. package/build/i18n/fr.json.js.map +1 -1
  31. package/build/i18n/fr.json.mjs +2 -0
  32. package/build/i18n/fr.json.mjs.map +1 -1
  33. package/build/i18n/hu.json +2 -0
  34. package/build/i18n/hu.json.js +2 -0
  35. package/build/i18n/hu.json.js.map +1 -1
  36. package/build/i18n/hu.json.mjs +2 -0
  37. package/build/i18n/hu.json.mjs.map +1 -1
  38. package/build/i18n/id.json +2 -0
  39. package/build/i18n/id.json.js +2 -0
  40. package/build/i18n/id.json.js.map +1 -1
  41. package/build/i18n/id.json.mjs +2 -0
  42. package/build/i18n/id.json.mjs.map +1 -1
  43. package/build/i18n/it.json +2 -0
  44. package/build/i18n/it.json.js +2 -0
  45. package/build/i18n/it.json.js.map +1 -1
  46. package/build/i18n/it.json.mjs +2 -0
  47. package/build/i18n/it.json.mjs.map +1 -1
  48. package/build/i18n/ja.json +2 -0
  49. package/build/i18n/ja.json.js +2 -0
  50. package/build/i18n/ja.json.js.map +1 -1
  51. package/build/i18n/ja.json.mjs +2 -0
  52. package/build/i18n/ja.json.mjs.map +1 -1
  53. package/build/i18n/nl.json +2 -0
  54. package/build/i18n/pl.json +2 -0
  55. package/build/i18n/pl.json.js +2 -0
  56. package/build/i18n/pl.json.js.map +1 -1
  57. package/build/i18n/pl.json.mjs +2 -0
  58. package/build/i18n/pl.json.mjs.map +1 -1
  59. package/build/i18n/pt.json +2 -0
  60. package/build/i18n/pt.json.js +2 -0
  61. package/build/i18n/pt.json.js.map +1 -1
  62. package/build/i18n/pt.json.mjs +2 -0
  63. package/build/i18n/pt.json.mjs.map +1 -1
  64. package/build/i18n/ro.json +2 -0
  65. package/build/i18n/ro.json.js +2 -0
  66. package/build/i18n/ro.json.js.map +1 -1
  67. package/build/i18n/ro.json.mjs +2 -0
  68. package/build/i18n/ro.json.mjs.map +1 -1
  69. package/build/i18n/ru.json +2 -0
  70. package/build/i18n/ru.json.js +2 -0
  71. package/build/i18n/ru.json.js.map +1 -1
  72. package/build/i18n/ru.json.mjs +2 -0
  73. package/build/i18n/ru.json.mjs.map +1 -1
  74. package/build/i18n/th.json +2 -0
  75. package/build/i18n/th.json.js +2 -0
  76. package/build/i18n/th.json.js.map +1 -1
  77. package/build/i18n/th.json.mjs +2 -0
  78. package/build/i18n/th.json.mjs.map +1 -1
  79. package/build/i18n/tr.json +2 -0
  80. package/build/i18n/tr.json.js +2 -0
  81. package/build/i18n/tr.json.js.map +1 -1
  82. package/build/i18n/tr.json.mjs +2 -0
  83. package/build/i18n/tr.json.mjs.map +1 -1
  84. package/build/i18n/zh-CN.json +2 -0
  85. package/build/i18n/zh-CN.json.js +2 -0
  86. package/build/i18n/zh-CN.json.js.map +1 -1
  87. package/build/i18n/zh-CN.json.mjs +2 -0
  88. package/build/i18n/zh-CN.json.mjs.map +1 -1
  89. package/build/i18n/zh-HK.json +2 -0
  90. package/build/i18n/zh-HK.json.js +2 -0
  91. package/build/i18n/zh-HK.json.js.map +1 -1
  92. package/build/i18n/zh-HK.json.mjs +2 -0
  93. package/build/i18n/zh-HK.json.mjs.map +1 -1
  94. package/build/index.js +1 -0
  95. package/build/index.js.map +1 -1
  96. package/build/index.mjs +1 -1
  97. package/build/main.css +224 -13
  98. package/build/moneyInput/MoneyInput.js +2 -2
  99. package/build/moneyInput/MoneyInput.js.map +1 -1
  100. package/build/moneyInput/MoneyInput.mjs +2 -2
  101. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  102. package/build/snackbar/Snackbar.js +1 -1
  103. package/build/snackbar/Snackbar.js.map +1 -1
  104. package/build/snackbar/Snackbar.mjs +1 -1
  105. package/build/snackbar/Snackbar.mjs.map +1 -1
  106. package/build/styles/dateInput/DateInput.css +1 -13
  107. package/build/styles/listItem/ListItem.css +223 -0
  108. package/build/styles/main.css +224 -13
  109. package/build/tabs/Tabs.js +3 -3
  110. package/build/tabs/Tabs.js.map +1 -1
  111. package/build/tabs/Tabs.mjs +3 -3
  112. package/build/tabs/Tabs.mjs.map +1 -1
  113. package/build/typeahead/Typeahead.js +2 -2
  114. package/build/typeahead/Typeahead.js.map +1 -1
  115. package/build/typeahead/Typeahead.mjs +2 -2
  116. package/build/typeahead/Typeahead.mjs.map +1 -1
  117. package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -2
  118. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  119. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
  120. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  121. package/build/types/index.d.ts +2 -0
  122. package/build/types/index.d.ts.map +1 -1
  123. package/build/types/listItem/ListItem.d.ts +50 -0
  124. package/build/types/listItem/ListItem.d.ts.map +1 -0
  125. package/build/types/listItem/ListItemAdditionalInfo.d.ts +9 -0
  126. package/build/types/listItem/ListItemAdditionalInfo.d.ts.map +1 -0
  127. package/build/types/listItem/ListItemButton.d.ts +6 -0
  128. package/build/types/listItem/ListItemButton.d.ts.map +1 -0
  129. package/build/types/listItem/ListItemCheckbox.d.ts +4 -0
  130. package/build/types/listItem/ListItemCheckbox.d.ts.map +1 -0
  131. package/build/types/listItem/ListItemIconButton.d.ts +8 -0
  132. package/build/types/listItem/ListItemIconButton.d.ts.map +1 -0
  133. package/build/types/listItem/ListItemMedia.d.ts +19 -0
  134. package/build/types/listItem/ListItemMedia.d.ts.map +1 -0
  135. package/build/types/listItem/ListItemNavigation.d.ts +4 -0
  136. package/build/types/listItem/ListItemNavigation.d.ts.map +1 -0
  137. package/build/types/listItem/ListItemSwitch.d.ts +3 -0
  138. package/build/types/listItem/ListItemSwitch.d.ts.map +1 -0
  139. package/build/types/listItem/index.d.ts +6 -0
  140. package/build/types/listItem/index.d.ts.map +1 -0
  141. package/build/types/listItem/prompt/Prompt.d.ts +12 -0
  142. package/build/types/listItem/prompt/Prompt.d.ts.map +1 -0
  143. package/build/types/listItem/useItemControl.d.ts +5 -0
  144. package/build/types/listItem/useItemControl.d.ts.map +1 -0
  145. package/build/upload/Upload.js +2 -2
  146. package/build/upload/Upload.js.map +1 -1
  147. package/build/upload/Upload.mjs +2 -2
  148. package/build/upload/Upload.mjs.map +1 -1
  149. package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
  150. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  151. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
  152. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  153. package/package.json +12 -12
  154. package/src/dateInput/DateInput.css +1 -13
  155. package/src/dateInput/DateInput.less +3 -20
  156. package/src/dateInput/DateInput.tests.story.tsx +3 -14
  157. package/src/dateInput/DateInput.tsx +4 -4
  158. package/src/i18n/cs.json +2 -0
  159. package/src/i18n/de.json +2 -0
  160. package/src/i18n/es.json +2 -0
  161. package/src/i18n/fr.json +2 -0
  162. package/src/i18n/hu.json +2 -0
  163. package/src/i18n/id.json +2 -0
  164. package/src/i18n/it.json +2 -0
  165. package/src/i18n/ja.json +2 -0
  166. package/src/i18n/nl.json +2 -0
  167. package/src/i18n/pl.json +2 -0
  168. package/src/i18n/pt.json +2 -0
  169. package/src/i18n/ro.json +2 -0
  170. package/src/i18n/ru.json +2 -0
  171. package/src/i18n/th.json +2 -0
  172. package/src/i18n/tr.json +2 -0
  173. package/src/i18n/zh-CN.json +2 -0
  174. package/src/i18n/zh-HK.json +2 -0
  175. package/src/index.ts +2 -0
  176. package/src/listItem/ListItem.css +223 -0
  177. package/src/listItem/ListItem.less +223 -0
  178. package/src/listItem/ListItem.spec.tsx +35 -0
  179. package/src/listItem/ListItem.story.tsx +582 -0
  180. package/src/listItem/ListItem.tsx +283 -0
  181. package/src/listItem/ListItemAdditionalInfo.tsx +31 -0
  182. package/src/listItem/ListItemButton.spec.tsx +92 -0
  183. package/src/listItem/ListItemButton.tsx +24 -0
  184. package/src/listItem/ListItemCheckbox.tsx +14 -0
  185. package/src/listItem/ListItemIconButton.tsx +16 -0
  186. package/src/listItem/ListItemMedia.tsx +52 -0
  187. package/src/listItem/ListItemNavigation.tsx +26 -0
  188. package/src/listItem/ListItemSwitch.tsx +8 -0
  189. package/src/listItem/index.ts +10 -0
  190. package/src/listItem/prompt/Prompt.spec.tsx +77 -0
  191. package/src/listItem/prompt/Prompt.story.tsx +170 -0
  192. package/src/listItem/prompt/Prompt.tsx +44 -0
  193. package/src/listItem/useItemControl.tsx +23 -0
  194. package/src/main.css +224 -13
  195. package/src/main.less +1 -0
package/build/styles/listItem/ListItem.css ADDED
@@ -0,0 +1,223 @@
1
+ .wds-list-item {
2
+ list-style: none;
3
+ width: 100%;
4
+ padding: 0;
5
+ border-radius: 16px;
6
+ border-radius: var(--radius-medium);
7
+ background-color: #ffffff;
8
+ background-color: var(--color-background-screen);
9
+ gap: 16px;
10
+ gap: var(--size-16);
11
+ }
12
+ .wds-list-item .partially-interactive {
13
+ padding: 16px;
14
+ padding: var(--size-16);
15
+ }
16
+ .wds-list-item label,
17
+ .wds-list-item a {
18
+ padding: 16px;
19
+ padding: var(--size-16);
20
+ }
21
+ .wds-list-item-interactive label {
22
+ cursor: pointer;
23
+ }
24
+ .wds-list-item-interactive:hover {
25
+ background-color: var(--color-background-screen-hover);
26
+ }
27
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
28
+ background-color: var(--Button-background-hover);
29
+ color: var(--Button-color-hover);
30
+ transition: none;
31
+ }
32
+ .wds-list-item-interactive:active {
33
+ background-color: var(--color-background-screen-active);
34
+ }
35
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
36
+ transition: none;
37
+ }
38
+ .wds-list-item-media-image {
39
+ width: var(--item-media-image-size);
40
+ height: var(--item-media-image-size);
41
+ }
42
+ .wds-list-item-body {
43
+ width: 100%;
44
+ }
45
+ .wds-list-item-title {
46
+ color: #37517e;
47
+ color: var(--color-content-primary);
48
+ }
49
+ .wds-list-item-additional-info {
50
+ color: #768e9c;
51
+ color: var(--color-content-tertiary);
52
+ }
53
+ .wds-list-item-value {
54
+ flex: 0 0 auto;
55
+ }
56
+ .wds-list-item-control {
57
+ flex: 0 0 auto;
58
+ }
59
+ .wds-list-item-navigation,
60
+ .wds-list-item-navigation:hover,
61
+ .wds-list-item-navigation:focus {
62
+ -webkit-text-decoration: none;
63
+ text-decoration: none;
64
+ }
65
+ .wds-list-item.disabled {
66
+ filter: none;
67
+ opacity: 1;
68
+ }
69
+ .wds-list-item.disabled label {
70
+ cursor: not-allowed;
71
+ }
72
+ .wds-list-item.disabled .tw-icon-backslash-circle {
73
+ color: #768e9c;
74
+ color: var(--color-content-tertiary);
75
+ }
76
+ .wds-list-item-spotlight-active {
77
+ background-color: rgba(134,167,189,0.10196);
78
+ background-color: var(--color-background-neutral);
79
+ }
80
+ .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
81
+ background-color: var(--color-background-neutral-hover);
82
+ }
83
+ .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
84
+ background-color: var(--color-background-neutral-active);
85
+ }
86
+ .wds-list-item-spotlight-inactive {
87
+ background-color: rgba(134, 167, 189, 0.025);
88
+ border: 1px dashed rgba(0,0,0,0.10196);
89
+ border: 1px dashed var(--color-border-neutral);
90
+ }
91
+ @supports (color: color-mix(in lch, red, blue)) {
92
+ .wds-list-item-spotlight-inactive {
93
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
94
+ }
95
+ }
96
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
97
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
98
+ }
99
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
100
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
101
+ }
102
+ .wds-list-item-prompt {
103
+ display: inline-flex;
104
+ padding-top: calc(8px / 2);
105
+ padding-top: calc(var(--padding-x-small) / 2);
106
+ padding-bottom: calc(8px / 2);
107
+ padding-bottom: calc(var(--padding-x-small) / 2);
108
+ padding-left: calc(8px - 1px);
109
+ padding-left: calc(var(--padding-x-small) - 1px);
110
+ padding-right: 8px;
111
+ padding-right: var(--padding-x-small);
112
+ border-radius: 10px;
113
+ border-radius: var(--radius-small);
114
+ word-break: break-word;
115
+ word-wrap: break-word;
116
+ }
117
+ .wds-list-item-prompt .np-prompt-icon {
118
+ padding-right: calc(12px / 2);
119
+ padding-right: calc(var(--size-12) / 2);
120
+ padding-top: calc(4px - 1px);
121
+ padding-top: calc(var(--size-4) - 1px);
122
+ padding-bottom: calc(4px - 1px);
123
+ padding-bottom: calc(var(--size-4) - 1px);
124
+ }
125
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
126
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
127
+ color: var(--color-sentiment-positive-primary);
128
+ }
129
+ .wds-list-item-prompt a {
130
+ text-underline-offset: calc(4px / 2);
131
+ text-underline-offset: calc(var(--size-4) / 2);
132
+ }
133
+ .wds-list-item-prompt.np-prompt-interactive {
134
+ -webkit-text-decoration: none;
135
+ text-decoration: none;
136
+ cursor: pointer;
137
+ border: none;
138
+ }
139
+ .wds-list-item-prompt.negative {
140
+ background-color: var(--color-sentiment-negative-secondary);
141
+ color: var(--color-sentiment-negative-primary);
142
+ }
143
+ .wds-list-item-prompt.negative a {
144
+ color: var(--color-sentiment-negative-primary);
145
+ }
146
+ .wds-list-item-prompt.negative a:hover {
147
+ color: var(--color-sentiment-negative-primary-hover);
148
+ }
149
+ .wds-list-item-prompt.negative a:active {
150
+ color: var(--color-sentiment-negative-primary-active);
151
+ }
152
+ .np-prompt-interactive.wds-list-item-prompt.negative:hover {
153
+ background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
154
+ }
155
+ .np-prompt-interactive.wds-list-item-prompt.negative:active {
156
+ background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
157
+ }
158
+ .wds-list-item-prompt.positive,
159
+ .wds-list-item-prompt.discount,
160
+ .wds-list-item-prompt.savings {
161
+ background-color: var(--color-sentiment-positive-secondary);
162
+ color: var(--color-sentiment-positive-primary);
163
+ }
164
+ .wds-list-item-prompt.positive a,
165
+ .wds-list-item-prompt.discount a,
166
+ .wds-list-item-prompt.savings a {
167
+ color: var(--color-sentiment-positive-primary);
168
+ }
169
+ .wds-list-item-prompt.positive a:hover,
170
+ .wds-list-item-prompt.discount a:hover,
171
+ .wds-list-item-prompt.savings a:hover {
172
+ color: var(--color-sentiment-positive-primary-hover);
173
+ }
174
+ .wds-list-item-prompt.positive a:active,
175
+ .wds-list-item-prompt.discount a:active,
176
+ .wds-list-item-prompt.savings a:active {
177
+ color: var(--color-sentiment-positive-primary-active);
178
+ }
179
+ .np-prompt-interactive.wds-list-item-prompt.positive:hover,
180
+ .np-prompt-interactive.wds-list-item-prompt.discount:hover,
181
+ .np-prompt-interactive.wds-list-item-prompt.savings:hover {
182
+ background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
183
+ }
184
+ .np-prompt-interactive.wds-list-item-prompt.positive:active,
185
+ .np-prompt-interactive.wds-list-item-prompt.discount:active,
186
+ .np-prompt-interactive.wds-list-item-prompt.savings:active {
187
+ background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
188
+ }
189
+ .wds-list-item-prompt.neutral {
190
+ background-color: rgba(134,167,189,0.10196);
191
+ background-color: var(--color-background-neutral);
192
+ color: #37517e;
193
+ color: var(--color-content-primary);
194
+ }
195
+ .wds-list-item-prompt.neutral a {
196
+ color: #37517e;
197
+ color: var(--color-content-primary);
198
+ }
199
+ .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
200
+ background-color: var(--color-background-neutral-hover);
201
+ }
202
+ .np-prompt-interactive.wds-list-item-prompt.neutral:active {
203
+ background-color: var(--color-background-neutral-active);
204
+ }
205
+ .wds-list-item-prompt.warning {
206
+ background-color: var(--color-sentiment-warning-secondary);
207
+ color: var(--color-sentiment-warning-content);
208
+ }
209
+ .wds-list-item-prompt.warning a {
210
+ color: var(--color-sentiment-warning-content);
211
+ }
212
+ .wds-list-item-prompt.warning a:hover {
213
+ color: var(--color-sentiment-warning-content-hover);
214
+ }
215
+ .wds-list-item-prompt.warning a:active {
216
+ color: var(--color-sentiment-warning-content-active);
217
+ }
218
+ .np-prompt-interactive.wds-list-item-prompt.warning:hover {
219
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
220
+ }
221
+ .np-prompt-interactive.wds-list-item-prompt.warning:active {
222
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
223
+ }
package/build/styles/main.css CHANGED
@@ -1866,22 +1866,10 @@ button.np-option {
1866
1866
  border-color: rgba(0,0,0,0.10196);
1867
1867
  border-color: var(--color-border-neutral);
1868
1868
  }
1869
- .tw-date label {
1869
+ .np-theme-personal .tw-date label {
1870
1870
  width: 100%;
1871
- }
1872
- .tw-date .tw-date--year label {
1873
- margin-bottom: 0;
1874
- }
1875
- .tw-date .tw-date--year,
1876
- .tw-date .tw-date--month,
1877
- .tw-date .tw-date--day {
1878
1871
  margin-bottom: 0;
1879
1872
  }
1880
- @media (min-width: 576px) {
1881
- .np-theme-personal .tw-date label {
1882
- margin-bottom: 0;
1883
- }
1884
- }
1885
1873
  .tw-date-lookup-menu {
1886
1874
  width: 400px;
1887
1875
  }
@@ -2630,6 +2618,229 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2630
2618
  border-radius: 9999px !important;
2631
2619
  border-radius: var(--radius-full) !important;
2632
2620
  }
2621
+ .wds-list-item {
2622
+ list-style: none;
2623
+ width: 100%;
2624
+ padding: 0;
2625
+ border-radius: 16px;
2626
+ border-radius: var(--radius-medium);
2627
+ background-color: #ffffff;
2628
+ background-color: var(--color-background-screen);
2629
+ gap: 16px;
2630
+ gap: var(--size-16);
2631
+ }
2632
+ .wds-list-item .partially-interactive {
2633
+ padding: 16px;
2634
+ padding: var(--size-16);
2635
+ }
2636
+ .wds-list-item label,
2637
+ .wds-list-item a {
2638
+ padding: 16px;
2639
+ padding: var(--size-16);
2640
+ }
2641
+ .wds-list-item-interactive label {
2642
+ cursor: pointer;
2643
+ }
2644
+ .wds-list-item-interactive:hover {
2645
+ background-color: var(--color-background-screen-hover);
2646
+ }
2647
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
2648
+ background-color: var(--Button-background-hover);
2649
+ color: var(--Button-color-hover);
2650
+ transition: none;
2651
+ }
2652
+ .wds-list-item-interactive:active {
2653
+ background-color: var(--color-background-screen-active);
2654
+ }
2655
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
2656
+ transition: none;
2657
+ }
2658
+ .wds-list-item-media-image {
2659
+ width: var(--item-media-image-size);
2660
+ height: var(--item-media-image-size);
2661
+ }
2662
+ .wds-list-item-body {
2663
+ width: 100%;
2664
+ }
2665
+ .wds-list-item-title {
2666
+ color: #37517e;
2667
+ color: var(--color-content-primary);
2668
+ }
2669
+ .wds-list-item-additional-info {
2670
+ color: #768e9c;
2671
+ color: var(--color-content-tertiary);
2672
+ }
2673
+ .wds-list-item-value {
2674
+ flex: 0 0 auto;
2675
+ }
2676
+ .wds-list-item-control {
2677
+ flex: 0 0 auto;
2678
+ }
2679
+ .wds-list-item-navigation,
2680
+ .wds-list-item-navigation:hover,
2681
+ .wds-list-item-navigation:focus {
2682
+ -webkit-text-decoration: none;
2683
+ text-decoration: none;
2684
+ }
2685
+ .wds-list-item.disabled {
2686
+ filter: none;
2687
+ opacity: 1;
2688
+ }
2689
+ .wds-list-item.disabled label {
2690
+ cursor: not-allowed;
2691
+ }
2692
+ .wds-list-item.disabled .tw-icon-backslash-circle {
2693
+ color: #768e9c;
2694
+ color: var(--color-content-tertiary);
2695
+ }
2696
+ .wds-list-item-spotlight-active {
2697
+ background-color: rgba(134,167,189,0.10196);
2698
+ background-color: var(--color-background-neutral);
2699
+ }
2700
+ .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
2701
+ background-color: var(--color-background-neutral-hover);
2702
+ }
2703
+ .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
2704
+ background-color: var(--color-background-neutral-active);
2705
+ }
2706
+ .wds-list-item-spotlight-inactive {
2707
+ background-color: rgba(134, 167, 189, 0.025);
2708
+ border: 1px dashed rgba(0,0,0,0.10196);
2709
+ border: 1px dashed var(--color-border-neutral);
2710
+ }
2711
+ @supports (color: color-mix(in lch, red, blue)) {
2712
+ .wds-list-item-spotlight-inactive {
2713
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2714
+ }
2715
+ }
2716
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
2717
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2718
+ }
2719
+ .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
2720
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2721
+ }
2722
+ .wds-list-item-prompt {
2723
+ display: inline-flex;
2724
+ padding-top: calc(8px / 2);
2725
+ padding-top: calc(var(--padding-x-small) / 2);
2726
+ padding-bottom: calc(8px / 2);
2727
+ padding-bottom: calc(var(--padding-x-small) / 2);
2728
+ padding-left: calc(8px - 1px);
2729
+ padding-left: calc(var(--padding-x-small) - 1px);
2730
+ padding-right: 8px;
2731
+ padding-right: var(--padding-x-small);
2732
+ border-radius: 10px;
2733
+ border-radius: var(--radius-small);
2734
+ word-break: break-word;
2735
+ word-wrap: break-word;
2736
+ }
2737
+ .wds-list-item-prompt .np-prompt-icon {
2738
+ padding-right: calc(12px / 2);
2739
+ padding-right: calc(var(--size-12) / 2);
2740
+ padding-top: calc(4px - 1px);
2741
+ padding-top: calc(var(--size-4) - 1px);
2742
+ padding-bottom: calc(4px - 1px);
2743
+ padding-bottom: calc(var(--size-4) - 1px);
2744
+ }
2745
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
2746
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
2747
+ color: var(--color-sentiment-positive-primary);
2748
+ }
2749
+ .wds-list-item-prompt a {
2750
+ text-underline-offset: calc(4px / 2);
2751
+ text-underline-offset: calc(var(--size-4) / 2);
2752
+ }
2753
+ .wds-list-item-prompt.np-prompt-interactive {
2754
+ -webkit-text-decoration: none;
2755
+ text-decoration: none;
2756
+ cursor: pointer;
2757
+ border: none;
2758
+ }
2759
+ .wds-list-item-prompt.negative {
2760
+ background-color: var(--color-sentiment-negative-secondary);
2761
+ color: var(--color-sentiment-negative-primary);
2762
+ }
2763
+ .wds-list-item-prompt.negative a {
2764
+ color: var(--color-sentiment-negative-primary);
2765
+ }
2766
+ .wds-list-item-prompt.negative a:hover {
2767
+ color: var(--color-sentiment-negative-primary-hover);
2768
+ }
2769
+ .wds-list-item-prompt.negative a:active {
2770
+ color: var(--color-sentiment-negative-primary-active);
2771
+ }
2772
+ .np-prompt-interactive.wds-list-item-prompt.negative:hover {
2773
+ background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
2774
+ }
2775
+ .np-prompt-interactive.wds-list-item-prompt.negative:active {
2776
+ background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
2777
+ }
2778
+ .wds-list-item-prompt.positive,
2779
+ .wds-list-item-prompt.discount,
2780
+ .wds-list-item-prompt.savings {
2781
+ background-color: var(--color-sentiment-positive-secondary);
2782
+ color: var(--color-sentiment-positive-primary);
2783
+ }
2784
+ .wds-list-item-prompt.positive a,
2785
+ .wds-list-item-prompt.discount a,
2786
+ .wds-list-item-prompt.savings a {
2787
+ color: var(--color-sentiment-positive-primary);
2788
+ }
2789
+ .wds-list-item-prompt.positive a:hover,
2790
+ .wds-list-item-prompt.discount a:hover,
2791
+ .wds-list-item-prompt.savings a:hover {
2792
+ color: var(--color-sentiment-positive-primary-hover);
2793
+ }
2794
+ .wds-list-item-prompt.positive a:active,
2795
+ .wds-list-item-prompt.discount a:active,
2796
+ .wds-list-item-prompt.savings a:active {
2797
+ color: var(--color-sentiment-positive-primary-active);
2798
+ }
2799
+ .np-prompt-interactive.wds-list-item-prompt.positive:hover,
2800
+ .np-prompt-interactive.wds-list-item-prompt.discount:hover,
2801
+ .np-prompt-interactive.wds-list-item-prompt.savings:hover {
2802
+ background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
2803
+ }
2804
+ .np-prompt-interactive.wds-list-item-prompt.positive:active,
2805
+ .np-prompt-interactive.wds-list-item-prompt.discount:active,
2806
+ .np-prompt-interactive.wds-list-item-prompt.savings:active {
2807
+ background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
2808
+ }
2809
+ .wds-list-item-prompt.neutral {
2810
+ background-color: rgba(134,167,189,0.10196);
2811
+ background-color: var(--color-background-neutral);
2812
+ color: #37517e;
2813
+ color: var(--color-content-primary);
2814
+ }
2815
+ .wds-list-item-prompt.neutral a {
2816
+ color: #37517e;
2817
+ color: var(--color-content-primary);
2818
+ }
2819
+ .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
2820
+ background-color: var(--color-background-neutral-hover);
2821
+ }
2822
+ .np-prompt-interactive.wds-list-item-prompt.neutral:active {
2823
+ background-color: var(--color-background-neutral-active);
2824
+ }
2825
+ .wds-list-item-prompt.warning {
2826
+ background-color: var(--color-sentiment-warning-secondary);
2827
+ color: var(--color-sentiment-warning-content);
2828
+ }
2829
+ .wds-list-item-prompt.warning a {
2830
+ color: var(--color-sentiment-warning-content);
2831
+ }
2832
+ .wds-list-item-prompt.warning a:hover {
2833
+ color: var(--color-sentiment-warning-content-hover);
2834
+ }
2835
+ .wds-list-item-prompt.warning a:active {
2836
+ color: var(--color-sentiment-warning-content-active);
2837
+ }
2838
+ .np-prompt-interactive.wds-list-item-prompt.warning:hover {
2839
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
2840
+ }
2841
+ .np-prompt-interactive.wds-list-item-prompt.warning:active {
2842
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
2843
+ }
2633
2844
  .np-field-control {
2634
2845
  margin-top: 4px;
2635
2846
  margin-top: var(--size-4);
package/build/tabs/Tabs.js CHANGED
@@ -48,12 +48,12 @@ const SpacerWidth = {
48
48
  lg: 32
49
49
  };
50
50
  class Tabs extends React.Component {
51
- static defaultProps = {
51
+ static defaultProps = (() => ({
52
52
  changeTabOnSwipe: true,
53
53
  transitionSpacing: 'default',
54
54
  headerWidth: width.Width.BLOCK
55
- };
56
- containerReference = /*#__PURE__*/React.createRef();
55
+ }))();
56
+ containerReference = (() => /*#__PURE__*/React.createRef())();
57
57
  constructor(props) {
58
58
  super(props);
59
59
  this.state = {