@transferwise/components 46.111.0 → 46.112.0

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 (170) hide show
  1. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  2. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  3. package/build/avatarView/AvatarView.js +27 -29
  4. package/build/avatarView/AvatarView.js.map +1 -1
  5. package/build/avatarView/AvatarView.mjs +27 -29
  6. package/build/avatarView/AvatarView.mjs.map +1 -1
  7. package/build/avatarView/{NotificationDot.js → Dot.js} +14 -12
  8. package/build/avatarView/Dot.js.map +1 -0
  9. package/build/avatarView/{NotificationDot.mjs → Dot.mjs} +14 -12
  10. package/build/avatarView/Dot.mjs.map +1 -0
  11. package/build/badge/BadgeAssets.js.map +1 -1
  12. package/build/badge/BadgeAssets.mjs.map +1 -1
  13. package/build/common/panel/Panel.js +1 -0
  14. package/build/common/panel/Panel.js.map +1 -1
  15. package/build/common/panel/Panel.mjs +1 -0
  16. package/build/common/panel/Panel.mjs.map +1 -1
  17. package/build/common/responsivePanel/ResponsivePanel.js +6 -1
  18. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  19. package/build/common/responsivePanel/ResponsivePanel.mjs +6 -1
  20. package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
  21. package/build/dateInput/DateInput.js +46 -24
  22. package/build/dateInput/DateInput.js.map +1 -1
  23. package/build/dateInput/DateInput.mjs +48 -26
  24. package/build/dateInput/DateInput.mjs.map +1 -1
  25. package/build/dateLookup/DateLookup.js +5 -2
  26. package/build/dateLookup/DateLookup.js.map +1 -1
  27. package/build/dateLookup/DateLookup.mjs +5 -2
  28. package/build/dateLookup/DateLookup.mjs.map +1 -1
  29. package/build/dateLookup/dateTrigger/DateTrigger.js +2 -0
  30. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  31. package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -0
  32. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  33. package/build/field/Field.js +7 -2
  34. package/build/field/Field.js.map +1 -1
  35. package/build/field/Field.mjs +13 -8
  36. package/build/field/Field.mjs.map +1 -1
  37. package/build/inputs/InputGroup.js +1 -1
  38. package/build/inputs/InputGroup.js.map +1 -1
  39. package/build/inputs/InputGroup.mjs +2 -2
  40. package/build/inputs/InputGroup.mjs.map +1 -1
  41. package/build/inputs/SelectInput.js +54 -5
  42. package/build/inputs/SelectInput.js.map +1 -1
  43. package/build/inputs/SelectInput.mjs +54 -5
  44. package/build/inputs/SelectInput.mjs.map +1 -1
  45. package/build/inputs/contexts.js +8 -4
  46. package/build/inputs/contexts.js.map +1 -1
  47. package/build/inputs/contexts.mjs +7 -4
  48. package/build/inputs/contexts.mjs.map +1 -1
  49. package/build/label/Label.js +14 -8
  50. package/build/label/Label.js.map +1 -1
  51. package/build/label/Label.mjs +14 -8
  52. package/build/label/Label.mjs.map +1 -1
  53. package/build/listItem/Prompt/ListItemPrompt.js +1 -1
  54. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  55. package/build/listItem/Prompt/ListItemPrompt.mjs +1 -1
  56. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  57. package/build/main.css +180 -164
  58. package/build/moneyInput/MoneyInput.js +6 -5
  59. package/build/moneyInput/MoneyInput.js.map +1 -1
  60. package/build/moneyInput/MoneyInput.mjs +6 -5
  61. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  62. package/build/phoneNumberInput/PhoneNumberInput.js +25 -3
  63. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  64. package/build/phoneNumberInput/PhoneNumberInput.mjs +27 -5
  65. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  66. package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.js +23 -23
  67. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  68. package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.mjs +23 -23
  69. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  70. package/build/styles/avatarView/AvatarView.css +17 -11
  71. package/build/styles/avatarView/Dot.css +26 -0
  72. package/build/styles/inputs/Input.css +5 -0
  73. package/build/styles/inputs/TextArea.css +5 -0
  74. package/build/styles/listItem/ListItem.css +5 -153
  75. package/build/styles/listItem/Prompt/ListItemPrompt.css +0 -153
  76. package/build/styles/main.css +180 -164
  77. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -1
  78. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  79. package/build/types/avatarView/AvatarView.d.ts +1 -2
  80. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  81. package/build/types/avatarView/Dot.d.ts +8 -0
  82. package/build/types/avatarView/Dot.d.ts.map +1 -0
  83. package/build/types/badge/BadgeAssets.d.ts +1 -1
  84. package/build/types/badge/BadgeAssets.d.ts.map +1 -1
  85. package/build/types/common/panel/Panel.d.ts +2 -0
  86. package/build/types/common/panel/Panel.d.ts.map +1 -1
  87. package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -0
  88. package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
  89. package/build/types/dateInput/DateInput.d.ts +2 -2
  90. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  91. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  92. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts +1 -0
  93. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  94. package/build/types/field/Field.d.ts.map +1 -1
  95. package/build/types/inputs/InputGroup.d.ts.map +1 -1
  96. package/build/types/inputs/SelectInput.d.ts +27 -1
  97. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  98. package/build/types/inputs/contexts.d.ts +6 -1
  99. package/build/types/inputs/contexts.d.ts.map +1 -1
  100. package/build/types/label/Label.d.ts +5 -15
  101. package/build/types/label/Label.d.ts.map +1 -1
  102. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +1 -1
  103. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  104. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  105. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  106. package/build/types/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.d.ts +1 -1
  107. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  108. package/build/types/prompt/InlinePrompt/index.d.ts.map +1 -0
  109. package/build/types/prompt/index.d.ts +3 -0
  110. package/build/types/prompt/index.d.ts.map +1 -0
  111. package/package.json +1 -1
  112. package/src/DisabledComponents.story.tsx +156 -0
  113. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  114. package/src/avatarView/AvatarView.css +17 -11
  115. package/src/avatarView/AvatarView.less +1 -1
  116. package/src/avatarView/AvatarView.story.tsx +92 -36
  117. package/src/avatarView/AvatarView.tsx +35 -30
  118. package/src/avatarView/Dot.css +26 -0
  119. package/src/avatarView/Dot.less +31 -0
  120. package/src/avatarView/Dot.tsx +42 -0
  121. package/src/badge/BadgeAssets.tsx +1 -1
  122. package/src/common/panel/Panel.tsx +2 -0
  123. package/src/common/responsivePanel/ResponsivePanel.tsx +7 -1
  124. package/src/dateInput/DateInput.spec.tsx +45 -7
  125. package/src/dateInput/DateInput.story.tsx +2 -0
  126. package/src/dateInput/DateInput.tsx +65 -30
  127. package/src/dateLookup/DateLookup.spec.tsx +16 -0
  128. package/src/dateLookup/DateLookup.tsx +6 -3
  129. package/src/dateLookup/dateTrigger/DateTrigger.tsx +3 -0
  130. package/src/field/Field.tsx +6 -5
  131. package/src/inputs/Input.css +5 -0
  132. package/src/inputs/InputGroup.tsx +3 -4
  133. package/src/inputs/SelectInput.story.tsx +101 -0
  134. package/src/inputs/SelectInput.tsx +113 -5
  135. package/src/inputs/TextArea.css +5 -0
  136. package/src/inputs/_common.less +5 -0
  137. package/src/inputs/contexts.tsx +12 -3
  138. package/src/label/Label.tsx +26 -20
  139. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +89 -25
  140. package/src/listItem/ListItem.css +5 -153
  141. package/src/listItem/ListItem.less +5 -0
  142. package/src/listItem/Prompt/ListItemPrompt.css +0 -153
  143. package/src/listItem/Prompt/ListItemPrompt.less +0 -2
  144. package/src/listItem/Prompt/ListItemPrompt.tsx +1 -1
  145. package/src/main.css +180 -164
  146. package/src/main.less +1 -0
  147. package/src/moneyInput/MoneyInput.spec.tsx +16 -1
  148. package/src/moneyInput/MoneyInput.tsx +7 -6
  149. package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +32 -0
  150. package/src/phoneNumberInput/PhoneNumberInput.tsx +32 -11
  151. package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.spec.tsx +2 -2
  152. package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.tsx +4 -4
  153. package/src/prompt/index.ts +6 -0
  154. package/build/avatarView/NotificationDot.js.map +0 -1
  155. package/build/avatarView/NotificationDot.mjs.map +0 -1
  156. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +0 -1
  157. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +0 -1
  158. package/build/styles/avatarView/NotificationDot.css +0 -20
  159. package/build/types/avatarView/NotificationDot.d.ts +0 -8
  160. package/build/types/avatarView/NotificationDot.d.ts.map +0 -1
  161. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +0 -1
  162. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +0 -1
  163. package/src/avatarView/NotificationDot.css +0 -20
  164. package/src/avatarView/NotificationDot.less +0 -24
  165. package/src/avatarView/NotificationDot.tsx +0 -35
  166. /package/build/styles/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
  167. /package/build/types/{listItem/Prompt → prompt}/InlinePrompt/index.d.ts +0 -0
  168. /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
  169. /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.less +0 -0
  170. /package/src/{listItem/Prompt → prompt}/InlinePrompt/index.ts +0 -0
package/build/prompt/InlinePrompt/InlinePrompt.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n loading?: boolean;\n /**\n * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n */\n muted?: boolean;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n ...rest\n}: InlinePromptProps) => {\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n }\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <div\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </div>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,GAAA,CAACG,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,GAAA,CAACI,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,IAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,GAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACO,IAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
package/build/styles/avatarView/AvatarView.css CHANGED
@@ -1,23 +1,29 @@
1
- .np-notification-dot {
2
- --np-notification-dot-size: 14px;
1
+ .np-dot {
2
+ --np-dot-size: 14px;
3
3
  position: relative;
4
4
  display: inline-block;
5
5
  }
6
- .np-notification-dot-mask {
7
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
8
- mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
9
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
10
- mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
6
+ .np-dot-mask {
7
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
8
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
9
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
10
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
11
11
  }
12
- .np-notification-dot-badge {
12
+ .np-dot-badge {
13
13
  position: absolute;
14
- width: var(--np-notification-dot-size);
15
- height: var(--np-notification-dot-size);
16
- background-color: var(--color-sentiment-negative);
14
+ width: var(--np-dot-size);
15
+ height: var(--np-dot-size);
17
16
  border-radius: 9999px;
18
17
  border-radius: var(--radius-full);
19
18
  right: 0;
20
19
  }
20
+ .np-dot-badge-notification {
21
+ background-color: var(--color-sentiment-negative);
22
+ }
23
+ .np-dot-badge-online {
24
+ background-color: #00a2dd;
25
+ background-color: var(--color-interactive-accent);
26
+ }
21
27
  .np-avatar-view .np-avatar-view-content {
22
28
  color: #37517e;
23
29
  color: var(--color-content-primary);
package/build/styles/avatarView/Dot.css ADDED
@@ -0,0 +1,26 @@
1
+ .np-dot {
2
+ --np-dot-size: 14px;
3
+ position: relative;
4
+ display: inline-block;
5
+ }
6
+ .np-dot-mask {
7
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
8
+ mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
9
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
10
+ mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
11
+ }
12
+ .np-dot-badge {
13
+ position: absolute;
14
+ width: var(--np-dot-size);
15
+ height: var(--np-dot-size);
16
+ border-radius: 9999px;
17
+ border-radius: var(--radius-full);
18
+ right: 0;
19
+ }
20
+ .np-dot-badge-notification {
21
+ background-color: var(--color-sentiment-negative);
22
+ }
23
+ .np-dot-badge-online {
24
+ background-color: #00a2dd;
25
+ background-color: var(--color-interactive-accent);
26
+ }
package/build/styles/inputs/Input.css CHANGED
@@ -18,6 +18,11 @@
18
18
  transition-duration: 300ms;
19
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
20
20
  }
21
+ .disabled .np-form-control,
22
+ :disabled .np-form-control {
23
+ opacity: 1;
24
+ opacity: initial;
25
+ }
21
26
  .np-form-control:focus-visible {
22
27
  outline: none;
23
28
  }
package/build/styles/inputs/TextArea.css CHANGED
@@ -18,6 +18,11 @@
18
18
  transition-duration: 300ms;
19
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
20
20
  }
21
+ .disabled .np-form-control,
22
+ :disabled .np-form-control {
23
+ opacity: 1;
24
+ opacity: initial;
25
+ }
21
26
  .np-form-control:focus-visible {
22
27
  outline: none;
23
28
  }
package/build/styles/listItem/ListItem.css CHANGED
@@ -382,159 +382,6 @@
382
382
  margin-top: var(--size-4);
383
383
  }
384
384
  }
385
- .wds-inline-prompt {
386
- display: inline-flex;
387
- text-align: left;
388
- padding-top: calc(8px / 2);
389
- padding-top: calc(var(--padding-x-small) / 2);
390
- padding-bottom: calc(8px / 2);
391
- padding-bottom: calc(var(--padding-x-small) / 2);
392
- padding-left: calc(8px - 1px);
393
- padding-left: calc(var(--padding-x-small) - 1px);
394
- padding-right: 8px;
395
- padding-right: var(--padding-x-small);
396
- border-radius: 10px;
397
- border-radius: var(--radius-small);
398
- word-break: break-word;
399
- word-wrap: break-word;
400
- }
401
- .wds-inline-prompt:has(a),
402
- .wds-inline-prompt:has(button) {
403
- position: relative;
404
- z-index: 1;
405
- }
406
- .wds-inline-prompt--muted {
407
- opacity: 0.93;
408
- filter: grayscale(1);
409
- }
410
- .wds-inline-prompt a,
411
- .wds-inline-prompt button {
412
- text-underline-offset: calc(4px / 2);
413
- text-underline-offset: calc(var(--size-4) / 2);
414
- }
415
- .wds-inline-prompt a:first-of-type:before,
416
- .wds-inline-prompt button:first-of-type:before {
417
- content: '';
418
- position: absolute;
419
- inset: 0;
420
- }
421
- .wds-inline-prompt__media-wrapper {
422
- padding-right: calc(12px / 2);
423
- padding-right: calc(var(--size-12) / 2);
424
- padding-top: calc(4px - 1px);
425
- padding-top: calc(var(--size-4) - 1px);
426
- padding-bottom: calc(4px - 1px);
427
- padding-bottom: calc(var(--size-4) - 1px);
428
- }
429
- .wds-inline-prompt__media-wrapper .tw-icon-tags,
430
- .wds-inline-prompt__media-wrapper .tw-icon-confetti {
431
- color: var(--color-sentiment-positive-primary);
432
- }
433
- .wds-inline-prompt--negative {
434
- background-color: var(--color-sentiment-negative-secondary);
435
- color: var(--color-sentiment-negative-primary);
436
- }
437
- .wds-inline-prompt--negative a,
438
- .wds-inline-prompt--negative button {
439
- color: var(--color-sentiment-negative-primary);
440
- }
441
- .wds-inline-prompt--negative a:hover,
442
- .wds-inline-prompt--negative button:hover {
443
- color: var(--color-sentiment-negative-primary-hover);
444
- }
445
- .wds-inline-prompt--negative a:active,
446
- .wds-inline-prompt--negative button:active {
447
- color: var(--color-sentiment-negative-primary-active);
448
- }
449
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
450
- background-color: var(--color-sentiment-negative-secondary-hover);
451
- }
452
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
453
- background-color: var(--color-sentiment-negative-secondary-active);
454
- }
455
- .wds-inline-prompt--positive {
456
- background-color: var(--color-sentiment-positive-secondary);
457
- color: var(--color-sentiment-positive-primary);
458
- }
459
- .wds-inline-prompt--positive a,
460
- .wds-inline-prompt--positive button {
461
- color: var(--color-sentiment-positive-primary);
462
- }
463
- .wds-inline-prompt--positive a:hover,
464
- .wds-inline-prompt--positive button:hover {
465
- color: var(--color-sentiment-positive-primary-hover);
466
- }
467
- .wds-inline-prompt--positive a:active,
468
- .wds-inline-prompt--positive button:active {
469
- color: var(--color-sentiment-positive-primary-active);
470
- }
471
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
472
- background-color: var(--color-sentiment-positive-secondary-hover);
473
- }
474
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
475
- background-color: var(--color-sentiment-positive-secondary-active);
476
- }
477
- .wds-inline-prompt--proposition {
478
- background-color: var(--color-sentiment-positive-secondary);
479
- color: var(--color-sentiment-positive-primary);
480
- }
481
- .wds-inline-prompt--proposition a,
482
- .wds-inline-prompt--proposition button {
483
- color: var(--color-sentiment-positive-primary);
484
- }
485
- .wds-inline-prompt--proposition a:hover,
486
- .wds-inline-prompt--proposition button:hover {
487
- color: var(--color-sentiment-positive-primary-hover);
488
- }
489
- .wds-inline-prompt--proposition a:active,
490
- .wds-inline-prompt--proposition button:active {
491
- color: var(--color-sentiment-positive-primary-active);
492
- }
493
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
494
- background-color: var(--color-sentiment-positive-secondary-hover);
495
- }
496
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
497
- background-color: var(--color-sentiment-positive-secondary-active);
498
- }
499
- .wds-inline-prompt--neutral {
500
- background-color: rgba(134,167,189,0.10196);
501
- background-color: var(--color-background-neutral);
502
- color: #37517e;
503
- color: var(--color-content-primary);
504
- }
505
- .wds-inline-prompt--neutral a,
506
- .wds-inline-prompt--neutral button {
507
- color: #37517e;
508
- color: var(--color-content-primary);
509
- }
510
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
511
- background-color: var(--color-background-neutral-hover);
512
- }
513
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
514
- background-color: var(--color-background-neutral-active);
515
- }
516
- .wds-inline-prompt--warning {
517
- background-color: var(--color-sentiment-warning-secondary);
518
- color: var(--color-sentiment-warning-content);
519
- }
520
- .wds-inline-prompt--warning a,
521
- .wds-inline-prompt--warning button {
522
- color: var(--color-sentiment-warning-content);
523
- }
524
- .wds-inline-prompt--warning a:hover,
525
- .wds-inline-prompt--warning button:hover {
526
- color: var(--color-sentiment-warning-content-hover);
527
- }
528
- .wds-inline-prompt--warning a:active,
529
- .wds-inline-prompt--warning button:active {
530
- color: var(--color-sentiment-warning-content-active);
531
- }
532
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
533
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
534
- }
535
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
536
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
537
- }
538
385
  .wds-list-item-prompt {
539
386
  grid-area: prompt;
540
387
  justify-self: start;
@@ -576,6 +423,11 @@
576
423
  text-underline-offset: calc(4px / 2);
577
424
  text-underline-offset: calc(var(--size-4) / 2);
578
425
  }
426
+ .wds-list-item a .wds-list-item-subtitle,
427
+ .wds-list-item a .wds-list-item-subtitle-value {
428
+ color: #5d7079;
429
+ color: var(--color-content-secondary);
430
+ }
579
431
  .wds-list-item-interactive .wds-list-item-control:focus-visible,
580
432
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
581
433
  outline: none;
package/build/styles/listItem/Prompt/ListItemPrompt.css CHANGED
@@ -1,156 +1,3 @@
1
- .wds-inline-prompt {
2
- display: inline-flex;
3
- text-align: left;
4
- padding-top: calc(8px / 2);
5
- padding-top: calc(var(--padding-x-small) / 2);
6
- padding-bottom: calc(8px / 2);
7
- padding-bottom: calc(var(--padding-x-small) / 2);
8
- padding-left: calc(8px - 1px);
9
- padding-left: calc(var(--padding-x-small) - 1px);
10
- padding-right: 8px;
11
- padding-right: var(--padding-x-small);
12
- border-radius: 10px;
13
- border-radius: var(--radius-small);
14
- word-break: break-word;
15
- word-wrap: break-word;
16
- }
17
- .wds-inline-prompt:has(a),
18
- .wds-inline-prompt:has(button) {
19
- position: relative;
20
- z-index: 1;
21
- }
22
- .wds-inline-prompt--muted {
23
- opacity: 0.93;
24
- filter: grayscale(1);
25
- }
26
- .wds-inline-prompt a,
27
- .wds-inline-prompt button {
28
- text-underline-offset: calc(4px / 2);
29
- text-underline-offset: calc(var(--size-4) / 2);
30
- }
31
- .wds-inline-prompt a:first-of-type:before,
32
- .wds-inline-prompt button:first-of-type:before {
33
- content: '';
34
- position: absolute;
35
- inset: 0;
36
- }
37
- .wds-inline-prompt__media-wrapper {
38
- padding-right: calc(12px / 2);
39
- padding-right: calc(var(--size-12) / 2);
40
- padding-top: calc(4px - 1px);
41
- padding-top: calc(var(--size-4) - 1px);
42
- padding-bottom: calc(4px - 1px);
43
- padding-bottom: calc(var(--size-4) - 1px);
44
- }
45
- .wds-inline-prompt__media-wrapper .tw-icon-tags,
46
- .wds-inline-prompt__media-wrapper .tw-icon-confetti {
47
- color: var(--color-sentiment-positive-primary);
48
- }
49
- .wds-inline-prompt--negative {
50
- background-color: var(--color-sentiment-negative-secondary);
51
- color: var(--color-sentiment-negative-primary);
52
- }
53
- .wds-inline-prompt--negative a,
54
- .wds-inline-prompt--negative button {
55
- color: var(--color-sentiment-negative-primary);
56
- }
57
- .wds-inline-prompt--negative a:hover,
58
- .wds-inline-prompt--negative button:hover {
59
- color: var(--color-sentiment-negative-primary-hover);
60
- }
61
- .wds-inline-prompt--negative a:active,
62
- .wds-inline-prompt--negative button:active {
63
- color: var(--color-sentiment-negative-primary-active);
64
- }
65
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
66
- background-color: var(--color-sentiment-negative-secondary-hover);
67
- }
68
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
69
- background-color: var(--color-sentiment-negative-secondary-active);
70
- }
71
- .wds-inline-prompt--positive {
72
- background-color: var(--color-sentiment-positive-secondary);
73
- color: var(--color-sentiment-positive-primary);
74
- }
75
- .wds-inline-prompt--positive a,
76
- .wds-inline-prompt--positive button {
77
- color: var(--color-sentiment-positive-primary);
78
- }
79
- .wds-inline-prompt--positive a:hover,
80
- .wds-inline-prompt--positive button:hover {
81
- color: var(--color-sentiment-positive-primary-hover);
82
- }
83
- .wds-inline-prompt--positive a:active,
84
- .wds-inline-prompt--positive button:active {
85
- color: var(--color-sentiment-positive-primary-active);
86
- }
87
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
88
- background-color: var(--color-sentiment-positive-secondary-hover);
89
- }
90
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
91
- background-color: var(--color-sentiment-positive-secondary-active);
92
- }
93
- .wds-inline-prompt--proposition {
94
- background-color: var(--color-sentiment-positive-secondary);
95
- color: var(--color-sentiment-positive-primary);
96
- }
97
- .wds-inline-prompt--proposition a,
98
- .wds-inline-prompt--proposition button {
99
- color: var(--color-sentiment-positive-primary);
100
- }
101
- .wds-inline-prompt--proposition a:hover,
102
- .wds-inline-prompt--proposition button:hover {
103
- color: var(--color-sentiment-positive-primary-hover);
104
- }
105
- .wds-inline-prompt--proposition a:active,
106
- .wds-inline-prompt--proposition button:active {
107
- color: var(--color-sentiment-positive-primary-active);
108
- }
109
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
110
- background-color: var(--color-sentiment-positive-secondary-hover);
111
- }
112
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
113
- background-color: var(--color-sentiment-positive-secondary-active);
114
- }
115
- .wds-inline-prompt--neutral {
116
- background-color: rgba(134,167,189,0.10196);
117
- background-color: var(--color-background-neutral);
118
- color: #37517e;
119
- color: var(--color-content-primary);
120
- }
121
- .wds-inline-prompt--neutral a,
122
- .wds-inline-prompt--neutral button {
123
- color: #37517e;
124
- color: var(--color-content-primary);
125
- }
126
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
127
- background-color: var(--color-background-neutral-hover);
128
- }
129
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
130
- background-color: var(--color-background-neutral-active);
131
- }
132
- .wds-inline-prompt--warning {
133
- background-color: var(--color-sentiment-warning-secondary);
134
- color: var(--color-sentiment-warning-content);
135
- }
136
- .wds-inline-prompt--warning a,
137
- .wds-inline-prompt--warning button {
138
- color: var(--color-sentiment-warning-content);
139
- }
140
- .wds-inline-prompt--warning a:hover,
141
- .wds-inline-prompt--warning button:hover {
142
- color: var(--color-sentiment-warning-content-hover);
143
- }
144
- .wds-inline-prompt--warning a:active,
145
- .wds-inline-prompt--warning button:active {
146
- color: var(--color-sentiment-warning-content-active);
147
- }
148
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
149
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
150
- }
151
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
152
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
153
- }
154
1
  .wds-list-item-prompt {
155
2
  grid-area: prompt;
156
3
  justify-self: start;