@transferwise/components 46.117.0 → 46.118.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 (50) hide show
  1. package/build/index.js +4 -0
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +2 -0
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +85 -25
  6. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  7. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  8. package/build/styles/button/Button.css +5 -5
  9. package/build/styles/button/Button.vars.css +5 -5
  10. package/build/styles/main.css +85 -25
  11. package/build/styles/sentimentSurface/SentimentSurface.css +80 -20
  12. package/build/types/button/_stories/helpers.d.ts +11 -0
  13. package/build/types/button/_stories/helpers.d.ts.map +1 -0
  14. package/build/types/index.d.ts +4 -0
  15. package/build/types/index.d.ts.map +1 -1
  16. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +3 -1
  17. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  18. package/build/types/test-utils/story-config.d.ts +1 -1
  19. package/build/types/test-utils/story-config.d.ts.map +1 -1
  20. package/package.json +1 -1
  21. package/src/alert/Alert.story.tsx +1 -1
  22. package/src/alert/Alert.tests.story.tsx +1 -1
  23. package/src/button/Button.css +5 -5
  24. package/src/button/Button.vars.css +5 -5
  25. package/src/button/Button.vars.less +28 -7
  26. package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} +1 -1
  27. package/src/button/_stories/Button.brightGreen.tests.story.tsx +31 -0
  28. package/src/button/_stories/Button.dark.tests.story.tsx +25 -0
  29. package/src/button/_stories/Button.default.tests.story.tsx +25 -0
  30. package/src/button/_stories/Button.forestGreen.tests.story.tsx +28 -0
  31. package/src/button/{Button.story.tsx → _stories/Button.story.tsx} +6 -6
  32. package/src/button/{Button.tests.story.tsx → _stories/Button.tests.story.tsx} +5 -82
  33. package/src/button/_stories/helpers.tsx +118 -0
  34. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  35. package/src/iconButton/IconButton.story.tsx +2 -2
  36. package/src/index.ts +4 -0
  37. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  38. package/src/link/Link.story.tsx +2 -2
  39. package/src/main.css +85 -25
  40. package/src/nudge/Nudge.story.tsx +1 -1
  41. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +41 -2
  42. package/src/prompt/InlinePrompt/InlinePrompt.tsx +3 -1
  43. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  44. package/src/sentimentSurface/SentimentSurface.css +80 -20
  45. package/src/sentimentSurface/SentimentSurface.less +40 -10
  46. package/src/sentimentSurface/SentimentSurface.story.tsx +163 -102
  47. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +6 -2
  48. package/src/test-utils/story-config.ts +5 -0
  49. package/src/{neptune-css/NeptuneCSS.story.tsx → tokens/tokens.story.tsx} +2 -2
  50. package/src/withId/withId.story.tsx +1 -0
package/build/index.js CHANGED
@@ -51,6 +51,7 @@ var Header = require('./header/Header.js');
51
51
  var infoPresentations = require('./info/infoPresentations.js');
52
52
  var Info = require('./info/Info.js');
53
53
  var InlineAlert = require('./inlineAlert/InlineAlert.js');
54
+ var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
54
55
  var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
55
56
  var Input = require('./inputs/Input.js');
56
57
  var InputGroup = require('./inputs/InputGroup.js');
@@ -90,6 +91,7 @@ var ResponsivePanel = require('./common/responsivePanel/ResponsivePanel.js');
90
91
  var Section = require('./section/Section.js');
91
92
  var SegmentedControl = require('./segmentedControl/SegmentedControl.js');
92
93
  var Select = require('./select/Select.js');
94
+ var SentimentSurface = require('./sentimentSurface/SentimentSurface.js');
93
95
  var SlidingPanel = require('./slidingPanel/SlidingPanel.js');
94
96
  var Snackbar = require('./snackbar/Snackbar.js');
95
97
  var SnackbarContext = require('./snackbar/SnackbarContext.js');
@@ -208,6 +210,7 @@ Object.defineProperty(exports, "InfoPresentation", {
208
210
  });
209
211
  exports.Info = Info.default;
210
212
  exports.InlineAlert = InlineAlert.default;
213
+ exports.InlinePrompt = InlinePrompt.InlinePrompt;
211
214
  exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
212
215
  exports.Input = Input.Input;
213
216
  exports.InputGroup = InputGroup.InputGroup;
@@ -253,6 +256,7 @@ exports.ResponsivePanel = ResponsivePanel.default;
253
256
  exports.Section = Section.default;
254
257
  exports.SegmentedControl = SegmentedControl.default;
255
258
  exports.Select = Select.default;
259
+ exports.SentimentSurface = SentimentSurface.default;
256
260
  exports.SlidingPanel = SlidingPanel.default;
257
261
  exports.SnackbarPortal = Snackbar.default;
258
262
  exports.SnackbarConsumer = SnackbarContext.SnackbarConsumer;
package/build/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.mjs CHANGED
@@ -49,6 +49,7 @@ export { default as Header } from './header/Header.mjs';
49
49
  export { InfoPresentation } from './info/infoPresentations.mjs';
50
50
  export { default as Info } from './info/Info.mjs';
51
51
  export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
52
+ export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
52
53
  export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
53
54
  export { Input } from './inputs/Input.mjs';
54
55
  export { InputGroup } from './inputs/InputGroup.mjs';
@@ -88,6 +89,7 @@ export { default as ResponsivePanel } from './common/responsivePanel/ResponsiveP
88
89
  export { default as Section } from './section/Section.mjs';
89
90
  export { default as SegmentedControl } from './segmentedControl/SegmentedControl.mjs';
90
91
  export { default as Select } from './select/Select.mjs';
92
+ export { default as SentimentSurface } from './sentimentSurface/SentimentSurface.mjs';
91
93
  export { default as SlidingPanel } from './slidingPanel/SlidingPanel.mjs';
92
94
  export { default as SnackbarPortal } from './snackbar/Snackbar.mjs';
93
95
  export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext.mjs';
package/build/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/main.css CHANGED
@@ -6,7 +6,10 @@
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
8
  .np-theme-personal .wds-sentiment-surface-negative-base,
9
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
9
+ .np-theme-business .wds-sentiment-surface-negative-base,
10
+ .np-theme-platform .wds-sentiment-surface-negative-base,
11
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
12
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-base {
10
13
  --color-sentiment-content-primary: #CB272F;
11
14
  --color-sentiment-content-primary-hover: #B8232B;
12
15
  --color-sentiment-content-primary-active: #A72027;
@@ -27,7 +30,10 @@
27
30
  --color-sentiment-background-surface-active: #F8D8D8;
28
31
  }
29
32
  .np-theme-personal .wds-sentiment-surface-negative-elevated,
30
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
33
+ .np-theme-business .wds-sentiment-surface-negative-elevated,
34
+ .np-theme-platform .wds-sentiment-surface-negative-elevated,
35
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
36
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
31
37
  --color-sentiment-content-primary: #FFFFFF;
32
38
  --color-sentiment-content-primary-hover: #F5CCCC;
33
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -48,7 +54,10 @@
48
54
  --color-sentiment-background-surface-active: #A72027;
49
55
  }
50
56
  .np-theme-personal--dark .wds-sentiment-surface-negative-base,
51
- .np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
57
+ .np-theme-business--dark .wds-sentiment-surface-negative-base,
58
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
59
+ .np-theme-business--forest-green .wds-sentiment-surface-negative-base,
60
+ .np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
52
61
  --color-sentiment-content-primary: #FFA8AD;
53
62
  --color-sentiment-content-primary-hover: #FFBDC0;
54
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -69,7 +78,10 @@
69
78
  --color-sentiment-background-surface-active: #761418;
70
79
  }
71
80
  .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
72
- .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
81
+ .np-theme-business--dark .wds-sentiment-surface-negative-elevated,
82
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
83
+ .np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
84
+ .np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
73
85
  --color-sentiment-content-primary: #410B0D;
74
86
  --color-sentiment-content-primary-hover: #641115;
75
87
  --color-sentiment-content-primary-active: #761418;
@@ -90,7 +102,10 @@
90
102
  --color-sentiment-background-surface-active: #FFD1D3;
91
103
  }
92
104
  .np-theme-personal .wds-sentiment-surface-warning-base,
93
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
105
+ .np-theme-business .wds-sentiment-surface-warning-base,
106
+ .np-theme-platform .wds-sentiment-surface-warning-base,
107
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
108
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-base {
94
109
  --color-sentiment-content-primary: #4A3B1C;
95
110
  --color-sentiment-content-primary-hover: #302612;
96
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -111,7 +126,10 @@
111
126
  --color-sentiment-background-surface-active: #FFE98F;
112
127
  }
113
128
  .np-theme-personal .wds-sentiment-surface-warning-elevated,
114
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
129
+ .np-theme-business .wds-sentiment-surface-warning-elevated,
130
+ .np-theme-platform .wds-sentiment-surface-warning-elevated,
131
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
132
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
115
133
  --color-sentiment-content-primary: #4A3B1C;
116
134
  --color-sentiment-content-primary-hover: #302612;
117
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -132,7 +150,10 @@
132
150
  --color-sentiment-background-surface-active: #FFBB00;
133
151
  }
134
152
  .np-theme-personal--dark .wds-sentiment-surface-warning-base,
135
- .np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
153
+ .np-theme-business--dark .wds-sentiment-surface-warning-base,
154
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
155
+ .np-theme-business--forest-green .wds-sentiment-surface-warning-base,
156
+ .np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
136
157
  --color-sentiment-content-primary: #FADC65;
137
158
  --color-sentiment-content-primary-hover: #F9D648;
138
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -153,7 +174,10 @@
153
174
  --color-sentiment-background-surface-active: #665D3D;
154
175
  }
155
176
  .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
156
- .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
177
+ .np-theme-business--dark .wds-sentiment-surface-warning-elevated,
178
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
179
+ .np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
180
+ .np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
157
181
  --color-sentiment-content-primary: #3A3523;
158
182
  --color-sentiment-content-primary-hover: #504930;
159
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -174,7 +198,10 @@
174
198
  --color-sentiment-background-surface-active: #F8CD20;
175
199
  }
176
200
  .np-theme-personal .wds-sentiment-surface-success-base,
177
- .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
201
+ .np-theme-business .wds-sentiment-surface-success-base,
202
+ .np-theme-platform .wds-sentiment-surface-success-base,
203
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base,
204
+ .np-theme-business--bright-green .wds-sentiment-surface-success-base {
178
205
  --color-sentiment-content-primary: #054D28;
179
206
  --color-sentiment-content-primary-hover: #043A1E;
180
207
  --color-sentiment-content-primary-active: #022614;
@@ -195,7 +222,10 @@
195
222
  --color-sentiment-background-surface-active: #C5EDAB;
196
223
  }
197
224
  .np-theme-personal .wds-sentiment-surface-success-elevated,
198
- .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
225
+ .np-theme-business .wds-sentiment-surface-success-elevated,
226
+ .np-theme-platform .wds-sentiment-surface-success-elevated,
227
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
228
+ .np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
199
229
  --color-sentiment-content-primary: #E2F6D5;
200
230
  --color-sentiment-content-primary-hover: #D3F2C0;
201
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -216,7 +246,10 @@
216
246
  --color-sentiment-background-surface-active: #022614;
217
247
  }
218
248
  .np-theme-personal--dark .wds-sentiment-surface-success-base,
219
- .np-theme-personal--forest-green .wds-sentiment-surface-success-base {
249
+ .np-theme-business--dark .wds-sentiment-surface-success-base,
250
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-base,
251
+ .np-theme-business--forest-green .wds-sentiment-surface-success-base,
252
+ .np-theme-platform--forest-green .wds-sentiment-surface-success-base {
220
253
  --color-sentiment-content-primary: #BAE5A0;
221
254
  --color-sentiment-content-primary-hover: #C8EAB3;
222
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -237,7 +270,10 @@
237
270
  --color-sentiment-background-surface-active: #3E4A36;
238
271
  }
239
272
  .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
240
- .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
273
+ .np-theme-business--dark .wds-sentiment-surface-success-elevated,
274
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
275
+ .np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
276
+ .np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
241
277
  --color-sentiment-content-primary: #252C20;
242
278
  --color-sentiment-content-primary-hover: #323B2B;
243
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -258,7 +294,10 @@
258
294
  --color-sentiment-background-surface-active: #D6F0C7;
259
295
  }
260
296
  .np-theme-personal .wds-sentiment-surface-neutral-base,
261
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
297
+ .np-theme-business .wds-sentiment-surface-neutral-base,
298
+ .np-theme-platform .wds-sentiment-surface-neutral-base,
299
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
300
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
262
301
  --color-sentiment-content-primary: #454745;
263
302
  --color-sentiment-content-primary-hover: #353635;
264
303
  --color-sentiment-content-primary-active: #232423;
@@ -279,7 +318,10 @@
279
318
  --color-sentiment-background-surface-active: #DFDED5;
280
319
  }
281
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
282
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
321
+ .np-theme-business .wds-sentiment-surface-neutral-elevated,
322
+ .np-theme-platform .wds-sentiment-surface-neutral-elevated,
323
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
324
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
283
325
  --color-sentiment-content-primary: #F1F1ED;
284
326
  --color-sentiment-content-primary-hover: #E7E7E1;
285
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -300,7 +342,10 @@
300
342
  --color-sentiment-background-surface-active: #232423;
301
343
  }
302
344
  .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
303
- .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
345
+ .np-theme-business--dark .wds-sentiment-surface-neutral-base,
346
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
347
+ .np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
348
+ .np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
304
349
  --color-sentiment-content-primary: #F1F1ED;
305
350
  --color-sentiment-content-primary-hover: #E7E7E1;
306
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -321,7 +366,10 @@
321
366
  --color-sentiment-background-surface-active: #595B58;
322
367
  }
323
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
324
- .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
369
+ .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
370
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
371
+ .np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
372
+ .np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
325
373
  --color-sentiment-content-primary: #2A2C29;
326
374
  --color-sentiment-content-primary-hover: #414441;
327
375
  --color-sentiment-content-primary-active: #595B58;
@@ -342,7 +390,10 @@
342
390
  --color-sentiment-background-surface-active: #DFDED5;
343
391
  }
344
392
  .np-theme-personal .wds-sentiment-surface-proposition-base,
345
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
393
+ .np-theme-business .wds-sentiment-surface-proposition-base,
394
+ .np-theme-platform .wds-sentiment-surface-proposition-base,
395
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
396
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
346
397
  --color-sentiment-content-primary: #0E0F0C;
347
398
  --color-sentiment-content-primary-hover: #0A2826;
348
399
  --color-sentiment-content-primary-active: #074140;
@@ -363,7 +414,10 @@
363
414
  --color-sentiment-background-surface-active: #B6ECEC;
364
415
  }
365
416
  .np-theme-personal .wds-sentiment-surface-proposition-elevated,
366
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
417
+ .np-theme-business .wds-sentiment-surface-proposition-elevated,
418
+ .np-theme-platform .wds-sentiment-surface-proposition-elevated,
419
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
420
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
367
421
  --color-sentiment-content-primary: #FFFFFF;
368
422
  --color-sentiment-content-primary-hover: #EAF9F9;
369
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -384,7 +438,10 @@
384
438
  --color-sentiment-background-surface-active: #022626;
385
439
  }
386
440
  .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
387
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
441
+ .np-theme-business--dark .wds-sentiment-surface-proposition-base,
442
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
443
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
444
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
388
445
  --color-sentiment-content-primary: #FFFFFF;
389
446
  --color-sentiment-content-primary-hover: #EAF9F9;
390
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -405,7 +462,10 @@
405
462
  --color-sentiment-background-surface-active: #176460;
406
463
  }
407
464
  .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
408
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
465
+ .np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
466
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
467
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
468
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
409
469
  --color-sentiment-content-primary: #0E0F0C;
410
470
  --color-sentiment-content-primary-hover: #0A2826;
411
471
  --color-sentiment-content-primary-active: #074140;
@@ -1219,11 +1279,11 @@
1219
1279
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1220
1280
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1221
1281
  --Button-tertiary-background: transparent;
1222
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
1223
- --Button-tertiary-background-active: var(--color-background-screen-active);
1224
- --Button-tertiary-color: var(--color-interactive-primary);
1225
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
1226
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
1282
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
1283
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
1284
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1285
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1286
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1227
1287
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
1228
1288
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
1229
1289
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/prompt/InlinePrompt/InlinePrompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\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 </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\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 </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
package/build/prompt/InlinePrompt/InlinePrompt.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\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 </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,GAAA,CAACG,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,GAAA,CAACI,OAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,GAAA,CAACK,UAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,IAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,GAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACS,IAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\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 </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,GAAA,CAACG,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,GAAA,CAACI,OAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,GAAA,CAACK,UAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,IAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,GAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACS,IAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
package/build/styles/button/Button.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/styles/button/Button.vars.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);