@transferwise/components 0.0.0-experimental-4f2af7f → 0.0.0-experimental-8bbf3ee

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 (263) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  4. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  5. package/build/index.js +0 -2
  6. package/build/index.js.map +1 -1
  7. package/build/index.mjs +0 -1
  8. package/build/index.mjs.map +1 -1
  9. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  11. package/build/main.css +1 -771
  12. package/build/navigationOption/NavigationOption.js.map +1 -1
  13. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  14. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  15. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  16. package/build/radioOption/RadioOption.js.map +1 -1
  17. package/build/radioOption/RadioOption.mjs.map +1 -1
  18. package/build/styles/button/Button.css +1 -1
  19. package/build/styles/main.css +1 -771
  20. package/build/summary/Summary.js +0 -8
  21. package/build/summary/Summary.js.map +1 -1
  22. package/build/summary/Summary.mjs +0 -8
  23. package/build/summary/Summary.mjs.map +1 -1
  24. package/build/switchOption/SwitchOption.js +0 -8
  25. package/build/switchOption/SwitchOption.js.map +1 -1
  26. package/build/switchOption/SwitchOption.mjs +0 -8
  27. package/build/switchOption/SwitchOption.mjs.map +1 -1
  28. package/build/types/actionOption/ActionOption.d.ts +0 -8
  29. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  30. package/build/types/checkboxOption/CheckboxOption.d.ts +0 -8
  31. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  32. package/build/types/index.d.ts +0 -2
  33. package/build/types/index.d.ts.map +1 -1
  34. package/build/types/legacylistItem/LegacyListItem.d.ts +0 -8
  35. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
  36. package/build/types/navigationOption/NavigationOption.d.ts +0 -8
  37. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  38. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +0 -9
  39. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  40. package/build/types/radioOption/RadioOption.d.ts +0 -8
  41. package/build/types/radioOption/RadioOption.d.ts.map +1 -1
  42. package/build/types/summary/Summary.d.ts +0 -8
  43. package/build/types/summary/Summary.d.ts.map +1 -1
  44. package/build/types/switchOption/SwitchOption.d.ts +0 -8
  45. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  46. package/package.json +1 -1
  47. package/src/actionButton/ActionButton.story.tsx +1 -1
  48. package/src/actionOption/ActionOption.story.tsx +0 -4
  49. package/src/actionOption/ActionOption.tsx +0 -8
  50. package/src/avatar/Avatar.story.tsx +1 -1
  51. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
  52. package/src/badge/Badge.story.tsx +1 -1
  53. package/src/button/Button.css +1 -1
  54. package/src/button/Button.less +1 -1
  55. package/src/button/Button.story.tsx +46 -10
  56. package/src/button/LegacyButton.story.tsx +1 -1
  57. package/src/checkboxOption/CheckboxOption.story.tsx +0 -4
  58. package/src/checkboxOption/CheckboxOption.tsx +0 -8
  59. package/src/index.ts +0 -15
  60. package/src/legacylistItem/LegacyListItem.story.tsx +1 -5
  61. package/src/legacylistItem/LegacyListItem.tests.story.tsx +1 -2
  62. package/src/legacylistItem/LegacyListItem.tsx +0 -8
  63. package/src/list/List.story.tsx +3 -13
  64. package/src/main.css +1 -771
  65. package/src/main.less +0 -1
  66. package/src/navigationOption/NavigationOption.story.tsx +1 -4
  67. package/src/navigationOption/NavigationOption.tsx +0 -8
  68. package/src/navigationOptionsList/NavigationOptionsList.story.tsx +0 -4
  69. package/src/navigationOptionsList/NavigationOptionsList.tsx +0 -9
  70. package/src/radioOption/RadioOption.story.tsx +0 -4
  71. package/src/radioOption/RadioOption.tsx +0 -8
  72. package/src/select/Select.story.tsx +1 -1
  73. package/src/summary/Summary.story.tsx +0 -4
  74. package/src/summary/Summary.tsx +0 -8
  75. package/src/switchOption/SwitchOption.story.tsx +1 -4
  76. package/src/switchOption/SwitchOption.tsx +0 -8
  77. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +0 -56
  78. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +0 -1
  79. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +0 -54
  80. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +0 -1
  81. package/build/listItem/AvatarLayout/ListItemAvatarLayout.js +0 -23
  82. package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +0 -1
  83. package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs +0 -21
  84. package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +0 -1
  85. package/build/listItem/AvatarView/ListItemAvatarView.js +0 -23
  86. package/build/listItem/AvatarView/ListItemAvatarView.js.map +0 -1
  87. package/build/listItem/AvatarView/ListItemAvatarView.mjs +0 -21
  88. package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +0 -1
  89. package/build/listItem/Button/ListItemButton.js +0 -43
  90. package/build/listItem/Button/ListItemButton.js.map +0 -1
  91. package/build/listItem/Button/ListItemButton.mjs +0 -41
  92. package/build/listItem/Button/ListItemButton.mjs.map +0 -1
  93. package/build/listItem/Checkbox/ListItemCheckbox.js +0 -30
  94. package/build/listItem/Checkbox/ListItemCheckbox.js.map +0 -1
  95. package/build/listItem/Checkbox/ListItemCheckbox.mjs +0 -28
  96. package/build/listItem/Checkbox/ListItemCheckbox.mjs.map +0 -1
  97. package/build/listItem/IconButton/ListItemIconButton.js +0 -56
  98. package/build/listItem/IconButton/ListItemIconButton.js.map +0 -1
  99. package/build/listItem/IconButton/ListItemIconButton.mjs +0 -54
  100. package/build/listItem/IconButton/ListItemIconButton.mjs.map +0 -1
  101. package/build/listItem/Image/ListItemImage.js +0 -31
  102. package/build/listItem/Image/ListItemImage.js.map +0 -1
  103. package/build/listItem/Image/ListItemImage.mjs +0 -29
  104. package/build/listItem/Image/ListItemImage.mjs.map +0 -1
  105. package/build/listItem/ListItem.js +0 -309
  106. package/build/listItem/ListItem.js.map +0 -1
  107. package/build/listItem/ListItem.mjs +0 -304
  108. package/build/listItem/ListItem.mjs.map +0 -1
  109. package/build/listItem/ListItemContext.js +0 -8
  110. package/build/listItem/ListItemContext.js.map +0 -1
  111. package/build/listItem/ListItemContext.mjs +0 -6
  112. package/build/listItem/ListItemContext.mjs.map +0 -1
  113. package/build/listItem/Navigation/ListItemNavigation.js +0 -44
  114. package/build/listItem/Navigation/ListItemNavigation.js.map +0 -1
  115. package/build/listItem/Navigation/ListItemNavigation.mjs +0 -42
  116. package/build/listItem/Navigation/ListItemNavigation.mjs.map +0 -1
  117. package/build/listItem/Prompt/ListItemPrompt.js +0 -59
  118. package/build/listItem/Prompt/ListItemPrompt.js.map +0 -1
  119. package/build/listItem/Prompt/ListItemPrompt.mjs +0 -54
  120. package/build/listItem/Prompt/ListItemPrompt.mjs.map +0 -1
  121. package/build/listItem/Radio/ListItemRadio.js +0 -30
  122. package/build/listItem/Radio/ListItemRadio.js.map +0 -1
  123. package/build/listItem/Radio/ListItemRadio.mjs +0 -28
  124. package/build/listItem/Radio/ListItemRadio.mjs.map +0 -1
  125. package/build/listItem/Switch/ListItemSwitch.js +0 -30
  126. package/build/listItem/Switch/ListItemSwitch.js.map +0 -1
  127. package/build/listItem/Switch/ListItemSwitch.mjs +0 -28
  128. package/build/listItem/Switch/ListItemSwitch.mjs.map +0 -1
  129. package/build/listItem/useListItemControl.js +0 -22
  130. package/build/listItem/useListItemControl.js.map +0 -1
  131. package/build/listItem/useListItemControl.mjs +0 -20
  132. package/build/listItem/useListItemControl.mjs.map +0 -1
  133. package/build/listItem/useListItemMedia.js +0 -21
  134. package/build/listItem/useListItemMedia.js.map +0 -1
  135. package/build/listItem/useListItemMedia.mjs +0 -19
  136. package/build/listItem/useListItemMedia.mjs.map +0 -1
  137. package/build/styles/listItem/ListItem.css +0 -770
  138. package/build/styles/listItem/ListItem.grid.css +0 -370
  139. package/build/styles/listItem/Prompt/ListItemPrompt.css +0 -157
  140. package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts +0 -15
  141. package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts.map +0 -1
  142. package/build/types/listItem/AdditionalInfo/index.d.ts +0 -3
  143. package/build/types/listItem/AdditionalInfo/index.d.ts.map +0 -1
  144. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +0 -18
  145. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +0 -1
  146. package/build/types/listItem/AvatarLayout/index.d.ts +0 -3
  147. package/build/types/listItem/AvatarLayout/index.d.ts.map +0 -1
  148. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +0 -16
  149. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +0 -1
  150. package/build/types/listItem/AvatarView/index.d.ts +0 -3
  151. package/build/types/listItem/AvatarView/index.d.ts.map +0 -1
  152. package/build/types/listItem/Button/ListItemButton.d.ts +0 -20
  153. package/build/types/listItem/Button/ListItemButton.d.ts.map +0 -1
  154. package/build/types/listItem/Button/index.d.ts +0 -3
  155. package/build/types/listItem/Button/index.d.ts.map +0 -1
  156. package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts +0 -14
  157. package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts.map +0 -1
  158. package/build/types/listItem/Checkbox/index.d.ts +0 -3
  159. package/build/types/listItem/Checkbox/index.d.ts.map +0 -1
  160. package/build/types/listItem/IconButton/ListItemIconButton.d.ts +0 -18
  161. package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +0 -1
  162. package/build/types/listItem/IconButton/index.d.ts +0 -3
  163. package/build/types/listItem/IconButton/index.d.ts.map +0 -1
  164. package/build/types/listItem/Image/ListItemImage.d.ts +0 -25
  165. package/build/types/listItem/Image/ListItemImage.d.ts.map +0 -1
  166. package/build/types/listItem/Image/index.d.ts +0 -3
  167. package/build/types/listItem/Image/index.d.ts.map +0 -1
  168. package/build/types/listItem/ListItem.d.ts +0 -111
  169. package/build/types/listItem/ListItem.d.ts.map +0 -1
  170. package/build/types/listItem/ListItemContext.d.ts +0 -21
  171. package/build/types/listItem/ListItemContext.d.ts.map +0 -1
  172. package/build/types/listItem/Navigation/ListItemNavigation.d.ts +0 -15
  173. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +0 -1
  174. package/build/types/listItem/Navigation/index.d.ts +0 -3
  175. package/build/types/listItem/Navigation/index.d.ts.map +0 -1
  176. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +0 -16
  177. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +0 -1
  178. package/build/types/listItem/Prompt/index.d.ts +0 -3
  179. package/build/types/listItem/Prompt/index.d.ts.map +0 -1
  180. package/build/types/listItem/Radio/ListItemRadio.d.ts +0 -14
  181. package/build/types/listItem/Radio/ListItemRadio.d.ts.map +0 -1
  182. package/build/types/listItem/Radio/index.d.ts +0 -3
  183. package/build/types/listItem/Radio/index.d.ts.map +0 -1
  184. package/build/types/listItem/Switch/ListItemSwitch.d.ts +0 -14
  185. package/build/types/listItem/Switch/ListItemSwitch.d.ts.map +0 -1
  186. package/build/types/listItem/Switch/index.d.ts +0 -3
  187. package/build/types/listItem/Switch/index.d.ts.map +0 -1
  188. package/build/types/listItem/_stories/helpers.d.ts +0 -27
  189. package/build/types/listItem/_stories/helpers.d.ts.map +0 -1
  190. package/build/types/listItem/_stories/subcomponents.d.ts +0 -18
  191. package/build/types/listItem/_stories/subcomponents.d.ts.map +0 -1
  192. package/build/types/listItem/index.d.ts +0 -14
  193. package/build/types/listItem/index.d.ts.map +0 -1
  194. package/build/types/listItem/test-utils.d.ts +0 -7
  195. package/build/types/listItem/test-utils.d.ts.map +0 -1
  196. package/build/types/listItem/useListItemControl.d.ts +0 -5
  197. package/build/types/listItem/useListItemControl.d.ts.map +0 -1
  198. package/build/types/listItem/useListItemMedia.d.ts +0 -6
  199. package/build/types/listItem/useListItemMedia.d.ts.map +0 -1
  200. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx +0 -56
  201. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx +0 -198
  202. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx +0 -36
  203. package/src/listItem/AdditionalInfo/index.ts +0 -2
  204. package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx +0 -59
  205. package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +0 -124
  206. package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +0 -27
  207. package/src/listItem/AvatarLayout/index.ts +0 -2
  208. package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx +0 -75
  209. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +0 -339
  210. package/src/listItem/AvatarView/ListItemAvatarView.tsx +0 -27
  211. package/src/listItem/AvatarView/index.ts +0 -2
  212. package/src/listItem/Button/ListItemButton.spec.tsx +0 -68
  213. package/src/listItem/Button/ListItemButton.story.tsx +0 -473
  214. package/src/listItem/Button/ListItemButton.tsx +0 -56
  215. package/src/listItem/Button/index.ts +0 -2
  216. package/src/listItem/Checkbox/ListItemCheckbox.spec.tsx +0 -82
  217. package/src/listItem/Checkbox/ListItemCheckbox.story.tsx +0 -128
  218. package/src/listItem/Checkbox/ListItemCheckbox.tsx +0 -33
  219. package/src/listItem/Checkbox/index.ts +0 -2
  220. package/src/listItem/IconButton/ListItemIconButton.spec.tsx +0 -119
  221. package/src/listItem/IconButton/ListItemIconButton.story.tsx +0 -284
  222. package/src/listItem/IconButton/ListItemIconButton.tsx +0 -73
  223. package/src/listItem/IconButton/index.ts +0 -2
  224. package/src/listItem/Image/ListItemImage.spec.tsx +0 -30
  225. package/src/listItem/Image/ListItemImage.story.tsx +0 -80
  226. package/src/listItem/Image/ListItemImage.tsx +0 -46
  227. package/src/listItem/Image/index.ts +0 -2
  228. package/src/listItem/ListItem.css +0 -770
  229. package/src/listItem/ListItem.grid.css +0 -370
  230. package/src/listItem/ListItem.grid.less +0 -622
  231. package/src/listItem/ListItem.less +0 -287
  232. package/src/listItem/ListItem.spec.tsx +0 -1511
  233. package/src/listItem/ListItem.tsx +0 -438
  234. package/src/listItem/ListItemContext.tsx +0 -26
  235. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +0 -59
  236. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -112
  237. package/src/listItem/Navigation/ListItemNavigation.tsx +0 -39
  238. package/src/listItem/Navigation/index.ts +0 -2
  239. package/src/listItem/Prompt/ListItemPrompt.css +0 -157
  240. package/src/listItem/Prompt/ListItemPrompt.less +0 -134
  241. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +0 -36
  242. package/src/listItem/Prompt/ListItemPrompt.story.tsx +0 -204
  243. package/src/listItem/Prompt/ListItemPrompt.tsx +0 -32
  244. package/src/listItem/Prompt/index.ts +0 -2
  245. package/src/listItem/Radio/ListItemRadio.spec.tsx +0 -66
  246. package/src/listItem/Radio/ListItemRadio.story.tsx +0 -111
  247. package/src/listItem/Radio/ListItemRadio.tsx +0 -33
  248. package/src/listItem/Radio/index.ts +0 -2
  249. package/src/listItem/Switch/ListItemSwitch.spec.tsx +0 -47
  250. package/src/listItem/Switch/ListItemSwitch.story.tsx +0 -79
  251. package/src/listItem/Switch/ListItemSwitch.tsx +0 -33
  252. package/src/listItem/Switch/index.ts +0 -2
  253. package/src/listItem/_stories/ListItem.focus.test.story.tsx +0 -265
  254. package/src/listItem/_stories/ListItem.layout.test.story.tsx +0 -354
  255. package/src/listItem/_stories/ListItem.scenarios.story.tsx +0 -228
  256. package/src/listItem/_stories/ListItem.story.tsx +0 -774
  257. package/src/listItem/_stories/ListItem.variants.test.story.tsx +0 -271
  258. package/src/listItem/_stories/helpers.tsx +0 -53
  259. package/src/listItem/_stories/subcomponents.tsx +0 -139
  260. package/src/listItem/index.ts +0 -14
  261. package/src/listItem/test-utils.tsx +0 -33
  262. package/src/listItem/useListItemControl.tsx +0 -18
  263. package/src/listItem/useListItemMedia.tsx +0 -16
@@ -741,7 +741,7 @@
741
741
  justify-content: center;
742
742
  vertical-align: middle;
743
743
  text-align: center;
744
- white-space: normal;
744
+ white-space: nowrap;
745
745
  word-wrap: break-word;
746
746
  -webkit-appearance: none;
747
747
  -moz-appearance: none;
@@ -2635,776 +2635,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2635
2635
  border-radius: 9999px !important;
2636
2636
  border-radius: var(--radius-full) !important;
2637
2637
  }
2638
- .wds-list-item-gridWrapper {
2639
- display: grid;
2640
- grid-gap: 4px 16px;
2641
- grid-gap: var(--size-4) var(--size-16);
2642
- gap: 4px 16px;
2643
- gap: var(--size-4) var(--size-16);
2644
- }
2645
- @container (min-width: 375px) {
2646
- .wds-list-item-gridWrapper .wds-list-item-media-image {
2647
- -o-object-position: center;
2648
- object-position: center;
2649
- }
2650
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2651
- grid-template-columns: auto 1fr auto;
2652
- grid-template-rows: auto auto auto;
2653
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
2654
- }
2655
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2656
- grid-template-columns: auto 1fr auto;
2657
- grid-template-rows: auto auto;
2658
- grid-template-areas: "media body control" ". info .";
2659
- }
2660
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2661
- grid-template-columns: auto 1fr auto;
2662
- grid-template-rows: auto auto;
2663
- grid-template-areas: "media body control" ". prompt prompt";
2664
- }
2665
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2666
- grid-template-columns: auto 1fr auto;
2667
- grid-template-rows: auto;
2668
- grid-template-areas: "media body control";
2669
- }
2670
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2671
- grid-template-columns: auto 1fr;
2672
- grid-template-rows: auto auto;
2673
- grid-template-areas: "media body" ". info" ". prompt";
2674
- }
2675
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2676
- grid-template-columns: auto 1fr;
2677
- grid-template-rows: auto auto auto;
2678
- grid-template-areas: "media body" ". info";
2679
- }
2680
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2681
- grid-template-columns: auto 1fr;
2682
- grid-template-rows: auto auto;
2683
- grid-template-areas: "media body" ". prompt";
2684
- }
2685
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
2686
- grid-template-columns: auto 1fr;
2687
- grid-template-rows: auto;
2688
- grid-template-areas: "media body";
2689
- }
2690
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
2691
- grid-column: 1 / -1;
2692
- }
2693
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2694
- grid-template-columns: 1fr auto;
2695
- grid-template-rows: auto auto auto;
2696
- grid-template-areas: "body control" "info ." "prompt prompt";
2697
- }
2698
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2699
- grid-template-columns: 1fr auto;
2700
- grid-template-rows: auto auto;
2701
- grid-template-areas: "body control" "info .";
2702
- }
2703
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2704
- grid-template-columns: 1fr auto;
2705
- grid-template-rows: auto auto;
2706
- grid-template-areas: "body control" "prompt prompt";
2707
- }
2708
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2709
- grid-template-columns: 1fr auto;
2710
- grid-template-rows: auto;
2711
- grid-template-areas: "body control";
2712
- }
2713
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
2714
- grid-column: 1 / -1;
2715
- }
2716
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2717
- grid-template-columns: 1fr;
2718
- grid-template-rows: auto auto auto;
2719
- grid-template-areas: "body" "info" "prompt";
2720
- }
2721
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
2722
- grid-template-columns: 1fr;
2723
- grid-template-rows: auto auto;
2724
- grid-template-areas: "body" "info";
2725
- }
2726
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
2727
- grid-template-columns: 1fr;
2728
- grid-template-rows: auto auto;
2729
- grid-template-areas: "body" "prompt";
2730
- }
2731
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
2732
- grid-template-columns: 1fr;
2733
- grid-template-rows: auto;
2734
- grid-template-areas: "body";
2735
- }
2736
- }
2737
- @container (min-width: 297px) and (max-width: 375px) {
2738
- .wds-list-item-gridWrapper .wds-list-item-media-image {
2739
- -o-object-position: bottom left;
2740
- object-position: bottom left;
2741
- }
2742
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2743
- margin-bottom: 12px;
2744
- margin-bottom: var(--size-12);
2745
- }
2746
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2747
- grid-template-columns: 1fr auto;
2748
- grid-template-rows: auto auto auto auto;
2749
- grid-template-areas: "media media" "body control" "info control" "prompt prompt";
2750
- }
2751
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
2752
- grid-template-columns: 1fr;
2753
- grid-template-areas: "media" "body" "info" "prompt" "control";
2754
- }
2755
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2756
- grid-template-columns: 1fr auto;
2757
- grid-template-rows: auto auto auto;
2758
- grid-template-areas: "media media" "body control" "info control";
2759
- }
2760
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
2761
- grid-template-columns: 1fr;
2762
- grid-template-areas: "media" "body" "info" "control";
2763
- }
2764
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2765
- grid-template-columns: 1fr auto;
2766
- grid-template-rows: auto auto auto;
2767
- grid-template-areas: "media media" "body control" "prompt prompt";
2768
- }
2769
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
2770
- grid-template-columns: 1fr;
2771
- grid-template-areas: "media" "body" "prompt" "control";
2772
- }
2773
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2774
- grid-template-columns: 1fr auto;
2775
- grid-template-rows: auto auto;
2776
- grid-template-areas: "media media" "body control";
2777
- }
2778
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
2779
- grid-template-columns: 1fr;
2780
- grid-template-areas: "media" "body" "control";
2781
- }
2782
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
2783
- margin-bottom: 12px;
2784
- margin-bottom: var(--size-12);
2785
- }
2786
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2787
- grid-template-columns: auto auto;
2788
- grid-template-rows: auto auto auto auto;
2789
- grid-template-areas: "media media" "body body" "info info" "prompt prompt";
2790
- }
2791
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2792
- grid-template-columns: auto 1fr;
2793
- grid-template-rows: auto auto auto;
2794
- grid-template-areas: "media media" "body body" "info info";
2795
- }
2796
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2797
- grid-template-columns: auto 1fr;
2798
- grid-template-rows: auto auto auto;
2799
- grid-template-areas: "media media" "body body" "prompt prompt";
2800
- }
2801
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
2802
- grid-template-columns: 1fr;
2803
- grid-template-rows: auto auto;
2804
- grid-template-areas: "media" "body";
2805
- }
2806
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
2807
- grid-column: 1 / -1;
2808
- }
2809
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2810
- grid-template-columns: 1fr auto;
2811
- grid-template-rows: auto auto auto;
2812
- grid-template-areas: "body control" "info control" "prompt prompt";
2813
- }
2814
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
2815
- grid-template-columns: 1fr;
2816
- grid-template-areas: "body" "info" "prompt" "control";
2817
- }
2818
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2819
- grid-template-columns: 1fr auto;
2820
- grid-template-rows: auto auto;
2821
- grid-template-areas: "body control" "info control";
2822
- }
2823
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
2824
- grid-template-columns: 1fr;
2825
- grid-template-areas: "body" "info" "control";
2826
- }
2827
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2828
- grid-template-columns: 1fr auto;
2829
- grid-template-rows: auto auto;
2830
- grid-template-areas: "body control" "prompt prompt";
2831
- }
2832
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
2833
- grid-template-columns: 1fr;
2834
- grid-template-areas: "body" "prompt" "control";
2835
- }
2836
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2837
- grid-template-columns: 1fr auto;
2838
- grid-template-rows: auto;
2839
- grid-template-areas: "body control";
2840
- }
2841
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
2842
- grid-template-columns: 1fr;
2843
- grid-template-areas: "body" "control";
2844
- }
2845
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
2846
- grid-column: 1 / -1;
2847
- }
2848
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2849
- grid-template-columns: 1fr;
2850
- grid-template-rows: auto auto auto;
2851
- grid-template-areas: "body" "info" "prompt";
2852
- }
2853
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
2854
- grid-template-columns: 1fr;
2855
- grid-template-rows: auto auto;
2856
- grid-template-areas: "body" "info";
2857
- }
2858
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
2859
- grid-template-columns: 1fr;
2860
- grid-template-rows: auto auto;
2861
- grid-template-areas: "body" "prompt";
2862
- }
2863
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
2864
- grid-template-columns: 1fr;
2865
- grid-template-rows: auto;
2866
- grid-template-areas: "body";
2867
- }
2868
- }
2869
- @container (max-width: 297px) {
2870
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2871
- grid-template-columns: auto 1fr;
2872
- grid-template-rows: auto auto auto;
2873
- grid-template-areas: "body control" "info control" "prompt prompt";
2874
- }
2875
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
2876
- grid-template-columns: 1fr;
2877
- grid-template-rows: auto;
2878
- grid-template-areas: "body" "info" "prompt" "control";
2879
- }
2880
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2881
- grid-template-columns: auto 1fr;
2882
- grid-template-rows: auto auto;
2883
- grid-template-areas: "body control" "info control";
2884
- }
2885
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
2886
- grid-template-columns: 1fr;
2887
- grid-template-areas: "body" "info" "control";
2888
- }
2889
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2890
- grid-template-columns: auto 1fr;
2891
- grid-template-rows: auto auto;
2892
- grid-template-areas: "body control" "prompt prompt";
2893
- }
2894
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
2895
- grid-template-columns: 1fr;
2896
- grid-template-areas: "body" "prompt" "control";
2897
- }
2898
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2899
- grid-template-columns: auto 1fr;
2900
- grid-template-rows: auto;
2901
- grid-template-areas: "body control";
2902
- }
2903
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
2904
- grid-template-columns: 1fr;
2905
- grid-template-areas: "body" "control";
2906
- }
2907
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2908
- grid-template-columns: auto;
2909
- grid-template-rows: auto auto;
2910
- grid-template-areas: "body" "info" "prompt";
2911
- }
2912
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2913
- grid-template-columns: auto;
2914
- grid-template-rows: auto auto auto;
2915
- grid-template-areas: "body" "info";
2916
- }
2917
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
2918
- grid-template-columns: auto;
2919
- grid-template-rows: auto auto;
2920
- grid-template-areas: "body" "prompt";
2921
- }
2922
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
2923
- grid-template-columns: 1fr;
2924
- grid-template-rows: auto;
2925
- grid-template-areas: "body";
2926
- }
2927
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
2928
- grid-column: 1 / -1;
2929
- }
2930
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2931
- grid-template-columns: 1fr auto;
2932
- grid-template-rows: auto auto auto;
2933
- grid-template-areas: "body control" "info control" "prompt prompt";
2934
- }
2935
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
2936
- grid-template-columns: 1fr;
2937
- grid-template-rows: auto;
2938
- grid-template-areas: "body" "info" "prompt" "control";
2939
- }
2940
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2941
- grid-template-columns: 1fr auto;
2942
- grid-template-rows: auto auto;
2943
- grid-template-areas: "body control" "info control";
2944
- }
2945
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
2946
- grid-template-columns: 1fr;
2947
- grid-template-rows: auto;
2948
- grid-template-areas: "body" "info" "control";
2949
- }
2950
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2951
- grid-template-columns: 1fr auto;
2952
- grid-template-rows: auto auto;
2953
- grid-template-areas: "body control" "prompt prompt";
2954
- }
2955
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
2956
- grid-template-columns: 1fr;
2957
- grid-template-rows: auto;
2958
- grid-template-areas: "body" "prompt" "control";
2959
- }
2960
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
2961
- grid-template-columns: 1fr auto;
2962
- grid-template-rows: auto;
2963
- grid-template-areas: "body control";
2964
- }
2965
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
2966
- grid-template-columns: 1fr;
2967
- grid-template-rows: auto;
2968
- grid-template-areas: "body" "control";
2969
- }
2970
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
2971
- grid-column: 1 / -1;
2972
- }
2973
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2974
- grid-template-columns: 1fr;
2975
- grid-template-rows: auto auto auto;
2976
- grid-template-areas: "body" "info" "prompt";
2977
- }
2978
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
2979
- grid-template-columns: 1fr;
2980
- grid-template-rows: auto auto;
2981
- grid-template-areas: "body" "info";
2982
- }
2983
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
2984
- grid-template-columns: 1fr;
2985
- grid-template-rows: auto auto;
2986
- grid-template-areas: "body" "prompt";
2987
- }
2988
- .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
2989
- grid-template-columns: 1fr;
2990
- grid-template-rows: auto;
2991
- grid-template-areas: "body";
2992
- }
2993
- .wds-list-item-gridWrapper .wds-list-item-media {
2994
- display: none;
2995
- }
2996
- .wds-list-item-gridWrapper .wds-list-item-body {
2997
- grid-area: body;
2998
- display: grid;
2999
- grid-template-columns: 1fr;
3000
- justify-items: start;
3001
- grid-gap: 0;
3002
- gap: 0;
3003
- }
3004
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
3005
- text-align: left;
3006
- }
3007
- }
3008
- .wds-list-item-prompt {
3009
- grid-area: prompt;
3010
- display: inline-flex;
3011
- justify-self: start;
3012
- text-align: left;
3013
- padding-top: calc(8px / 2);
3014
- padding-top: calc(var(--padding-x-small) / 2);
3015
- padding-bottom: calc(8px / 2);
3016
- padding-bottom: calc(var(--padding-x-small) / 2);
3017
- padding-left: calc(8px - 1px);
3018
- padding-left: calc(var(--padding-x-small) - 1px);
3019
- padding-right: 8px;
3020
- padding-right: var(--padding-x-small);
3021
- border-radius: 10px;
3022
- border-radius: var(--radius-small);
3023
- word-break: break-word;
3024
- word-wrap: break-word;
3025
- }
3026
- .wds-list-item-prompt:has(a),
3027
- .wds-list-item-prompt:has(button) {
3028
- position: relative;
3029
- z-index: 1;
3030
- }
3031
- .wds-list-item-prompt a,
3032
- .wds-list-item-prompt button {
3033
- text-underline-offset: calc(4px / 2);
3034
- text-underline-offset: calc(var(--size-4) / 2);
3035
- }
3036
- .wds-list-item-prompt a:first-of-type:before,
3037
- .wds-list-item-prompt button:first-of-type:before {
3038
- content: '';
3039
- position: absolute;
3040
- inset: 0;
3041
- }
3042
- .wds-list-item-prompt.np-prompt-icon {
3043
- padding-left: calc(8px - 1px);
3044
- padding-left: calc(var(--padding-x-small) - 1px);
3045
- padding-right: 8px;
3046
- padding-right: var(--padding-x-small);
3047
- display: inline-flex;
3048
- align-items: center;
3049
- gap: 4px;
3050
- gap: var(--size-4);
3051
- }
3052
- .wds-list-item-prompt .np-prompt-icon {
3053
- padding-right: calc(12px / 2);
3054
- padding-right: calc(var(--size-12) / 2);
3055
- padding-top: calc(4px - 1px);
3056
- padding-top: calc(var(--size-4) - 1px);
3057
- padding-bottom: calc(4px - 1px);
3058
- padding-bottom: calc(var(--size-4) - 1px);
3059
- }
3060
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
3061
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
3062
- color: var(--color-sentiment-positive-primary);
3063
- }
3064
- .wds-list-item-prompt.negative {
3065
- background-color: var(--color-sentiment-negative-secondary);
3066
- color: var(--color-sentiment-negative-primary);
3067
- }
3068
- .wds-list-item-prompt.negative a,
3069
- .wds-list-item-prompt.negative button {
3070
- color: var(--color-sentiment-negative-primary);
3071
- }
3072
- .wds-list-item-prompt.negative a:hover,
3073
- .wds-list-item-prompt.negative button:hover {
3074
- color: var(--color-sentiment-negative-primary-hover);
3075
- }
3076
- .wds-list-item-prompt.negative a:active,
3077
- .wds-list-item-prompt.negative button:active {
3078
- color: var(--color-sentiment-negative-primary-active);
3079
- }
3080
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
3081
- background-color: var(--color-sentiment-negative-secondary-hover);
3082
- }
3083
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
3084
- background-color: var(--color-sentiment-negative-secondary-active);
3085
- }
3086
- .wds-list-item-prompt.positive,
3087
- .wds-list-item-prompt.discount,
3088
- .wds-list-item-prompt.savings {
3089
- background-color: var(--color-sentiment-positive-secondary);
3090
- color: var(--color-sentiment-positive-primary);
3091
- }
3092
- .wds-list-item-prompt.positive a,
3093
- .wds-list-item-prompt.discount a,
3094
- .wds-list-item-prompt.savings a,
3095
- .wds-list-item-prompt.positive button,
3096
- .wds-list-item-prompt.discount button,
3097
- .wds-list-item-prompt.savings button {
3098
- color: var(--color-sentiment-positive-primary);
3099
- }
3100
- .wds-list-item-prompt.positive a:hover,
3101
- .wds-list-item-prompt.discount a:hover,
3102
- .wds-list-item-prompt.savings a:hover,
3103
- .wds-list-item-prompt.positive button:hover,
3104
- .wds-list-item-prompt.discount button:hover,
3105
- .wds-list-item-prompt.savings button:hover {
3106
- color: var(--color-sentiment-positive-primary-hover);
3107
- }
3108
- .wds-list-item-prompt.positive a:active,
3109
- .wds-list-item-prompt.discount a:active,
3110
- .wds-list-item-prompt.savings a:active,
3111
- .wds-list-item-prompt.positive button:active,
3112
- .wds-list-item-prompt.discount button:active,
3113
- .wds-list-item-prompt.savings button:active {
3114
- color: var(--color-sentiment-positive-primary-active);
3115
- }
3116
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
3117
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
3118
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
3119
- background-color: var(--color-sentiment-positive-secondary-hover);
3120
- }
3121
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
3122
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
3123
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
3124
- background-color: var(--color-sentiment-positive-secondary-active);
3125
- }
3126
- .wds-list-item-prompt.neutral {
3127
- background-color: rgba(134,167,189,0.10196);
3128
- background-color: var(--color-background-neutral);
3129
- color: #37517e;
3130
- color: var(--color-content-primary);
3131
- }
3132
- .wds-list-item-prompt.neutral a,
3133
- .wds-list-item-prompt.neutral button {
3134
- color: #37517e;
3135
- color: var(--color-content-primary);
3136
- }
3137
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
3138
- background-color: var(--color-background-neutral-hover);
3139
- }
3140
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
3141
- background-color: var(--color-background-neutral-active);
3142
- }
3143
- .wds-list-item-prompt.warning {
3144
- background-color: var(--color-sentiment-warning-secondary);
3145
- color: var(--color-sentiment-warning-content);
3146
- }
3147
- .wds-list-item-prompt.warning a,
3148
- .wds-list-item-prompt.warning button {
3149
- color: var(--color-sentiment-warning-content);
3150
- }
3151
- .wds-list-item-prompt.warning a:hover,
3152
- .wds-list-item-prompt.warning button:hover {
3153
- color: var(--color-sentiment-warning-content-hover);
3154
- }
3155
- .wds-list-item-prompt.warning a:active,
3156
- .wds-list-item-prompt.warning button:active {
3157
- color: var(--color-sentiment-warning-content-active);
3158
- }
3159
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
3160
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
3161
- }
3162
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
3163
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
3164
- }
3165
- .wds-list-item {
3166
- list-style: none;
3167
- width: 100%;
3168
- border-radius: 16px;
3169
- border-radius: var(--radius-medium);
3170
- background-color: #ffffff;
3171
- background-color: var(--color-background-screen);
3172
- position: relative;
3173
- padding: 12px 0;
3174
- padding: var(--size-12) 0;
3175
- container-type: inline-size;
3176
- }
3177
- .wds-list-item + .wds-list-item-spotlight,
3178
- .wds-list-item-spotlight + .wds-list-item {
3179
- margin-top: 16px;
3180
- margin-top: var(--size-16);
3181
- }
3182
- .wds-list-item:focus-within {
3183
- z-index: 1;
3184
- }
3185
- .wds-list-item-view {
3186
- display: grid;
3187
- grid-column: 1 / -1;
3188
- grid-row: 1 / -1;
3189
- grid-template-columns: subgrid;
3190
- grid-template-rows: subgrid;
3191
- }
3192
- .wds-list-item-view.fullyInteractive {
3193
- margin-bottom: 0;
3194
- }
3195
- .wds-list-item-view.fullyInteractive:before {
3196
- content: '';
3197
- position: absolute;
3198
- inset: 0;
3199
- }
3200
- .wds-list-item a {
3201
- text-underline-offset: calc(4px / 2);
3202
- text-underline-offset: calc(var(--size-4) / 2);
3203
- }
3204
- .wds-list-item-interactive .wds-list-item-control:focus-visible,
3205
- .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3206
- outline: none;
3207
- }
3208
- .wds-list-item-interactive .wds-list-item-additional-info {
3209
- --ring-outline-offset: 0;
3210
- }
3211
- .wds-list-item-interactive a.wds-list-item-control,
3212
- .wds-list-item-interactive a.wds-list-item-control:hover,
3213
- .wds-list-item-interactive a.wds-list-item-control:focus {
3214
- -webkit-text-decoration: none;
3215
- text-decoration: none;
3216
- }
3217
- .wds-list-item-interactive a.wds-list-item-control:has(.wds-list-item-control_pseudo-element) {
3218
- position: relative;
3219
- z-index: 1;
3220
- }
3221
- .wds-list-item-interactive a.wds-list-item-control.wds-list-item-control_pseudo-element:before {
3222
- content: '';
3223
- position: absolute;
3224
- inset: 0;
3225
- }
3226
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
3227
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
3228
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3229
- outline-offset: var(--ring-outline-offset);
3230
- outline-offset: -1px;
3231
- }
3232
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
3233
- background-color: var(--color-background-screen-hover);
3234
- }
3235
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
3236
- background-color: var(--color-background-screen-active);
3237
- }
3238
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3239
- background-color: transparent;
3240
- background-color: initial;
3241
- }
3242
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
3243
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
3244
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3245
- outline-offset: var(--ring-outline-offset);
3246
- content: '';
3247
- position: absolute;
3248
- inset: 0 -8px;
3249
- border-radius: 16px;
3250
- border-radius: var(--radius-medium);
3251
- outline-offset: -1px;
3252
- }
3253
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
3254
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3255
- content: '';
3256
- position: absolute;
3257
- inset: 0 -8px;
3258
- border-radius: 16px;
3259
- border-radius: var(--radius-medium);
3260
- }
3261
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3262
- background-color: var(--color-background-screen-hover);
3263
- }
3264
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3265
- background-color: var(--color-background-screen-active);
3266
- }
3267
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3268
- background-color: transparent;
3269
- background-color: initial;
3270
- }
3271
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3272
- background-color: var(--Button-background-hover);
3273
- color: var(--Button-color-hover);
3274
- transition: none;
3275
- }
3276
- .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3277
- transition: none;
3278
- }
3279
- .wds-list-item-media {
3280
- grid-area: media;
3281
- display: flex;
3282
- align-items: start;
3283
- }
3284
- .wds-list-item-media-image-wrapper {
3285
- width: var(--wds-list-item-media-size);
3286
- height: var(--wds-list-item-media-size);
3287
- }
3288
- .wds-list-item-media-image {
3289
- width: 100%;
3290
- height: 100%;
3291
- -o-object-fit: contain;
3292
- object-fit: contain;
3293
- }
3294
- .wds-list-item-body {
3295
- grid-area: body;
3296
- align-items: center;
3297
- width: 100%;
3298
- display: grid;
3299
- grid-template-columns: 1fr max-content;
3300
- grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
3301
- grid-gap: 16px;
3302
- grid-gap: var(--size-16);
3303
- gap: 16px;
3304
- gap: var(--size-16);
3305
- word-break: break-word;
3306
- }
3307
- .wds-list-item-title,
3308
- .wds-list-item-title-value {
3309
- color: #37517e;
3310
- color: var(--color-content-primary);
3311
- }
3312
- .wds-list-item-value {
3313
- text-align: right;
3314
- }
3315
- .wds-list-item-body-center {
3316
- display: flex;
3317
- flex-direction: row;
3318
- align-items: center;
3319
- }
3320
- .wds-list-item-additional-info {
3321
- grid-area: info;
3322
- color: #768e9c;
3323
- color: var(--color-content-tertiary);
3324
- margin-top: calc(4px * -1);
3325
- margin-top: calc(var(--size-4) * -1);
3326
- }
3327
- .wds-list-item-control-wrapper {
3328
- grid-area: control;
3329
- align-content: center;
3330
- height: var(--wds-list-item-control-wrapper-height);
3331
- }
3332
- .wds-list-item-navigation .tw-icon-chevron-right {
3333
- color: #c9cbce;
3334
- color: var(--color-interactive-secondary);
3335
- }
3336
- .wds-list-item-control {
3337
- flex: 0 0 auto;
3338
- }
3339
- .wds-list-item.disabled {
3340
- filter: none;
3341
- opacity: 1;
3342
- }
3343
- .wds-list-item.disabled label {
3344
- cursor: not-allowed;
3345
- }
3346
- .wds-list-item.disabled .tw-icon-backslash-circle {
3347
- color: #768e9c;
3348
- color: var(--color-content-tertiary);
3349
- }
3350
- .wds-list-item-spotlight {
3351
- padding-left: 12px;
3352
- padding-left: var(--size-12);
3353
- padding-right: 12px;
3354
- padding-right: var(--size-12);
3355
- }
3356
- .wds-list-item-spotlight-active {
3357
- background-color: rgba(134,167,189,0.10196);
3358
- background-color: var(--color-background-neutral);
3359
- }
3360
- .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
3361
- background-color: var(--color-background-neutral-hover);
3362
- }
3363
- .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
3364
- background-color: var(--color-background-neutral-active);
3365
- }
3366
- .wds-list-item-spotlight-inactive {
3367
- background-color: rgba(134, 167, 189, 0.025);
3368
- }
3369
- @supports (color: color-mix(in lch, red, blue)) {
3370
- .wds-list-item-spotlight-inactive {
3371
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
3372
- }
3373
- }
3374
- .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
3375
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
3376
- }
3377
- .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
3378
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
3379
- }
3380
- .wds-list-item .wds-list-item-spotlight__border {
3381
- position: absolute;
3382
- inset: 0;
3383
- width: 100%;
3384
- height: 100%;
3385
- }
3386
- .wds-list-item .wds-list-item-spotlight__border rect {
3387
- --wds-list-item-spotlight-borderWidth: 1px;
3388
- --wds-list-item-spotlight-borderWidthOffset: 0.5px;
3389
- --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
3390
- fill: none;
3391
- stroke: rgba(0,0,0,0.10196);
3392
- stroke: var(--color-border-neutral);
3393
- width: calc(100% - 1px);
3394
- width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
3395
- height: calc(100% - 1px);
3396
- height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
3397
- x: 0.5px;
3398
- x: var(--wds-list-item-spotlight-borderWidthOffset);
3399
- y: 0.5px;
3400
- y: var(--wds-list-item-spotlight-borderWidthOffset);
3401
- rx: calc(16px - 0.5px);
3402
- rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
3403
- ry: calc(16px - 0.5px);
3404
- ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
3405
- stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
3406
- stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
3407
- }
3408
2638
  .np-field-control {
3409
2639
  margin-top: 4px;
3410
2640
  margin-top: var(--size-4);