@transferwise/components 46.128.2 → 46.129.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 (65) hide show
  1. package/build/alert/Alert.js +1 -1
  2. package/build/alert/Alert.mjs +1 -1
  3. package/build/common/liveRegion/LiveRegion.js +42 -0
  4. package/build/common/liveRegion/LiveRegion.js.map +1 -0
  5. package/build/common/liveRegion/LiveRegion.mjs +40 -0
  6. package/build/common/liveRegion/LiveRegion.mjs.map +1 -0
  7. package/build/flowNavigation/FlowNavigation.js +1 -1
  8. package/build/flowNavigation/FlowNavigation.mjs +1 -1
  9. package/build/index.js +4 -4
  10. package/build/inputs/SelectInput.js +1 -1
  11. package/build/inputs/SelectInput.js.map +1 -1
  12. package/build/inputs/SelectInput.mjs +2 -2
  13. package/build/inputs/SelectInput.mjs.map +1 -1
  14. package/build/inputs/_ButtonInput.js +2 -2
  15. package/build/inputs/_ButtonInput.js.map +1 -1
  16. package/build/inputs/_ButtonInput.mjs +2 -2
  17. package/build/inputs/_ButtonInput.mjs.map +1 -1
  18. package/build/main.css +108 -100
  19. package/build/overlayHeader/OverlayHeader.js +1 -1
  20. package/build/overlayHeader/OverlayHeader.mjs +1 -1
  21. package/build/popover/Popover.mjs +1 -1
  22. package/build/promoCard/PromoCardContext.mjs +1 -1
  23. package/build/prompt/ActionPrompt/ActionPrompt.js +0 -3
  24. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  25. package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -1
  26. package/build/prompt/InfoPrompt/InfoPrompt.js +35 -29
  27. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  28. package/build/prompt/InfoPrompt/InfoPrompt.mjs +35 -29
  29. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  30. package/build/sentimentSurface/SentimentSurface.js +5 -1
  31. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  32. package/build/sentimentSurface/SentimentSurface.mjs +5 -1
  33. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  34. package/build/styles/inputs/SelectInput.css +8 -0
  35. package/build/styles/main.css +108 -100
  36. package/build/styles/sentimentSurface/SentimentSurface.css +100 -100
  37. package/build/types/common/index.d.ts +2 -0
  38. package/build/types/common/index.d.ts.map +1 -1
  39. package/build/types/common/liveRegion/LiveRegion.d.ts +23 -0
  40. package/build/types/common/liveRegion/LiveRegion.d.ts.map +1 -0
  41. package/build/types/common/liveRegion/index.d.ts +3 -0
  42. package/build/types/common/liveRegion/index.d.ts.map +1 -0
  43. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  44. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +11 -2
  45. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  46. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  47. package/package.json +26 -26
  48. package/src/common/index.ts +2 -0
  49. package/src/common/liveRegion/LiveRegion.test.tsx +56 -0
  50. package/src/common/liveRegion/LiveRegion.tsx +49 -0
  51. package/src/common/liveRegion/index.ts +2 -0
  52. package/src/inputs/SelectInput.css +8 -0
  53. package/src/inputs/SelectInput.story.tsx +2 -2
  54. package/src/inputs/SelectInput.test.story.tsx +57 -1
  55. package/src/inputs/SelectInput.test.tsx +33 -1
  56. package/src/inputs/SelectInput.tsx +2 -1
  57. package/src/inputs/_ButtonInput.less +8 -0
  58. package/src/inputs/_ButtonInput.tsx +1 -1
  59. package/src/main.css +108 -100
  60. package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +119 -0
  61. package/src/prompt/InfoPrompt/InfoPrompt.tsx +47 -34
  62. package/src/sentimentSurface/SentimentSurface.css +100 -100
  63. package/src/sentimentSurface/SentimentSurface.less +50 -50
  64. package/src/sentimentSurface/SentimentSurface.test.story.tsx +19 -0
  65. package/src/sentimentSurface/SentimentSurface.tsx +3 -0
package/build/main.css CHANGED
@@ -5,11 +5,11 @@
5
5
  background-color: var(--color-sentiment-background-surface);
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
- .np-theme-personal .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 {
8
+ .np-theme-personal.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 {
13
13
  --color-sentiment-content-primary: #CB272F;
14
14
  --color-sentiment-content-primary-hover: #B8232B;
15
15
  --color-sentiment-content-primary-active: #A72027;
@@ -29,11 +29,11 @@
29
29
  --color-sentiment-background-surface-hover: #F9E1E1;
30
30
  --color-sentiment-background-surface-active: #F8D8D8;
31
31
  }
32
- .np-theme-personal .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 {
32
+ .np-theme-personal.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 {
37
37
  --color-sentiment-content-primary: #FFFFFF;
38
38
  --color-sentiment-content-primary-hover: #F5CCCC;
39
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -53,11 +53,11 @@
53
53
  --color-sentiment-background-surface-hover: #B8232B;
54
54
  --color-sentiment-background-surface-active: #A72027;
55
55
  }
56
- .np-theme-personal--dark .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 {
56
+ .np-theme-personal--dark.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 {
61
61
  --color-sentiment-content-primary: #FFA8AD;
62
62
  --color-sentiment-content-primary-hover: #FFBDC0;
63
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -77,11 +77,11 @@
77
77
  --color-sentiment-background-surface-hover: #641115;
78
78
  --color-sentiment-background-surface-active: #761418;
79
79
  }
80
- .np-theme-personal--dark .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 {
80
+ .np-theme-personal--dark.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 {
85
85
  --color-sentiment-content-primary: #410B0D;
86
86
  --color-sentiment-content-primary-hover: #641115;
87
87
  --color-sentiment-content-primary-active: #761418;
@@ -101,11 +101,11 @@
101
101
  --color-sentiment-background-surface-hover: #FFBDC0;
102
102
  --color-sentiment-background-surface-active: #FFD1D3;
103
103
  }
104
- .np-theme-personal .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 {
104
+ .np-theme-personal.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 {
109
109
  --color-sentiment-content-primary: #4A3B1C;
110
110
  --color-sentiment-content-primary-hover: #302612;
111
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -125,11 +125,11 @@
125
125
  --color-sentiment-background-surface-hover: #FFF0B2;
126
126
  --color-sentiment-background-surface-active: #FFE98F;
127
127
  }
128
- .np-theme-personal .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 {
128
+ .np-theme-personal.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 {
133
133
  --color-sentiment-content-primary: #4A3B1C;
134
134
  --color-sentiment-content-primary-hover: #302612;
135
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -149,11 +149,11 @@
149
149
  --color-sentiment-background-surface-hover: #FFBF0F;
150
150
  --color-sentiment-background-surface-active: #FFBB00;
151
151
  }
152
- .np-theme-personal--dark .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 {
152
+ .np-theme-personal--dark.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 {
157
157
  --color-sentiment-content-primary: #FADC65;
158
158
  --color-sentiment-content-primary-hover: #F9D648;
159
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -173,11 +173,11 @@
173
173
  --color-sentiment-background-surface-hover: #504930;
174
174
  --color-sentiment-background-surface-active: #665D3D;
175
175
  }
176
- .np-theme-personal--dark .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 {
176
+ .np-theme-personal--dark.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 {
181
181
  --color-sentiment-content-primary: #3A3523;
182
182
  --color-sentiment-content-primary-hover: #504930;
183
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -197,11 +197,11 @@
197
197
  --color-sentiment-background-surface-hover: #F9D648;
198
198
  --color-sentiment-background-surface-active: #F8CD20;
199
199
  }
200
- .np-theme-personal .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 {
200
+ .np-theme-personal.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 {
205
205
  --color-sentiment-content-primary: #054D28;
206
206
  --color-sentiment-content-primary-hover: #043A1E;
207
207
  --color-sentiment-content-primary-active: #022614;
@@ -221,11 +221,11 @@
221
221
  --color-sentiment-background-surface-hover: #D3F2C0;
222
222
  --color-sentiment-background-surface-active: #C5EDAB;
223
223
  }
224
- .np-theme-personal .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 {
224
+ .np-theme-personal.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 {
229
229
  --color-sentiment-content-primary: #E2F6D5;
230
230
  --color-sentiment-content-primary-hover: #D3F2C0;
231
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -245,11 +245,11 @@
245
245
  --color-sentiment-background-surface-hover: #043A1E;
246
246
  --color-sentiment-background-surface-active: #022614;
247
247
  }
248
- .np-theme-personal--dark .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 {
248
+ .np-theme-personal--dark.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 {
253
253
  --color-sentiment-content-primary: #BAE5A0;
254
254
  --color-sentiment-content-primary-hover: #C8EAB3;
255
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -269,11 +269,11 @@
269
269
  --color-sentiment-background-surface-hover: #323B2B;
270
270
  --color-sentiment-background-surface-active: #3E4A36;
271
271
  }
272
- .np-theme-personal--dark .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 {
272
+ .np-theme-personal--dark.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 {
277
277
  --color-sentiment-content-primary: #252C20;
278
278
  --color-sentiment-content-primary-hover: #323B2B;
279
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -293,11 +293,11 @@
293
293
  --color-sentiment-background-surface-hover: #C8EAB3;
294
294
  --color-sentiment-background-surface-active: #D6F0C7;
295
295
  }
296
- .np-theme-personal .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 {
296
+ .np-theme-personal.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 {
301
301
  --color-sentiment-content-primary: #454745;
302
302
  --color-sentiment-content-primary-hover: #353635;
303
303
  --color-sentiment-content-primary-active: #232423;
@@ -317,11 +317,11 @@
317
317
  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
318
  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
- .np-theme-personal .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 {
320
+ .np-theme-personal.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 {
325
325
  --color-sentiment-content-primary: #F1F1ED;
326
326
  --color-sentiment-content-primary-hover: #E7E7E1;
327
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -341,11 +341,11 @@
341
341
  --color-sentiment-background-surface-hover: #353635;
342
342
  --color-sentiment-background-surface-active: #232423;
343
343
  }
344
- .np-theme-personal--dark .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 {
344
+ .np-theme-personal--dark.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 {
349
349
  --color-sentiment-content-primary: #F1F1ED;
350
350
  --color-sentiment-content-primary-hover: #E7E7E1;
351
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -365,11 +365,11 @@
365
365
  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
366
  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
- .np-theme-personal--dark .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 {
368
+ .np-theme-personal--dark.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 {
373
373
  --color-sentiment-content-primary: #2A2C29;
374
374
  --color-sentiment-content-primary-hover: #414441;
375
375
  --color-sentiment-content-primary-active: #595B58;
@@ -389,11 +389,11 @@
389
389
  --color-sentiment-background-surface-hover: #E7E7E1;
390
390
  --color-sentiment-background-surface-active: #DFDED5;
391
391
  }
392
- .np-theme-personal .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 {
392
+ .np-theme-personal.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 {
397
397
  --color-sentiment-content-primary: #0E0F0C;
398
398
  --color-sentiment-content-primary-hover: #0A2826;
399
399
  --color-sentiment-content-primary-active: #074140;
@@ -413,11 +413,11 @@
413
413
  --color-sentiment-background-surface-hover: #CAF1F1;
414
414
  --color-sentiment-background-surface-active: #B6ECEC;
415
415
  }
416
- .np-theme-personal .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 {
416
+ .np-theme-personal.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 {
421
421
  --color-sentiment-content-primary: #FFFFFF;
422
422
  --color-sentiment-content-primary-hover: #EAF9F9;
423
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -437,11 +437,11 @@
437
437
  --color-sentiment-background-surface-hover: #043A3A;
438
438
  --color-sentiment-background-surface-active: #022626;
439
439
  }
440
- .np-theme-personal--dark .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 {
440
+ .np-theme-personal--dark.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 {
445
445
  --color-sentiment-content-primary: #FFFFFF;
446
446
  --color-sentiment-content-primary-hover: #EAF9F9;
447
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -461,11 +461,11 @@
461
461
  --color-sentiment-background-surface-hover: #124F4C;
462
462
  --color-sentiment-background-surface-active: #176460;
463
463
  }
464
- .np-theme-personal--dark .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 {
464
+ .np-theme-personal--dark.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 {
469
469
  --color-sentiment-content-primary: #0E0F0C;
470
470
  --color-sentiment-content-primary-hover: #0A2826;
471
471
  --color-sentiment-content-primary-active: #074140;
@@ -3930,6 +3930,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3930
3930
  border-radius: var(--size-10);
3931
3931
  text-align: start;
3932
3932
  }
3933
+ .np-button-input:has(.np-select-input-option-description-in-trigger) {
3934
+ height: auto !important;
3935
+ align-content: start;
3936
+ padding-top: 12px !important;
3937
+ padding-top: var(--size-12) !important;
3938
+ padding-bottom: 12px !important;
3939
+ padding-bottom: var(--size-12) !important;
3940
+ }
3933
3941
  .np-popover-v2-container {
3934
3942
  z-index: 1060;
3935
3943
  display: flex;
package/build/overlayHeader/OverlayHeader.js CHANGED
@@ -23,9 +23,9 @@ require('../common/propsValues/scroll.js');
23
23
  require('../common/propsValues/markdownNodeType.js');
24
24
  require('../common/fileType.js');
25
25
  var CloseButton = require('../common/closeButton/CloseButton.js');
26
+ var jsxRuntime = require('react/jsx-runtime');
26
27
  var FlowHeader = require('../common/flowHeader/FlowHeader.js');
27
28
  var Logo = require('../logo/Logo.js');
28
- var jsxRuntime = require('react/jsx-runtime');
29
29
 
30
30
  const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
31
31
  function OverlayHeader({
package/build/overlayHeader/OverlayHeader.mjs CHANGED
@@ -19,9 +19,9 @@ import '../common/propsValues/scroll.mjs';
19
19
  import '../common/propsValues/markdownNodeType.mjs';
20
20
  import '../common/fileType.mjs';
21
21
  import { CloseButton } from '../common/closeButton/CloseButton.mjs';
22
+ import { jsx, jsxs } from 'react/jsx-runtime';
22
23
  import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
23
24
  import Logo from '../logo/Logo.mjs';
24
- import { jsx, jsxs } from 'react/jsx-runtime';
25
25
 
26
26
  const defaultLogo = /*#__PURE__*/jsx(Logo, {});
27
27
  function OverlayHeader({
package/build/popover/Popover.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
2
+ import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
3
3
  import '../common/theme.mjs';
4
4
  import '../common/direction.mjs';
5
5
  import '../common/propsValues/control.mjs';
package/build/promoCard/PromoCardContext.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, useContext } from 'react';
1
+ import { useContext, createContext } from 'react';
2
2
 
3
3
  const defaultPromoCardContext = {
4
4
  state: '',
package/build/prompt/ActionPrompt/ActionPrompt.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var clsx = require('clsx');
7
5
  var StatusIcon = require('../../statusIcon/StatusIcon.js');
@@ -144,5 +142,4 @@ const ActionPrompt = ({
144
142
  };
145
143
 
146
144
  exports.ActionPrompt = ActionPrompt;
147
- exports.default = ActionPrompt;
148
145
  //# sourceMappingURL=ActionPrompt.js.map
package/build/prompt/ActionPrompt/ActionPrompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n role=\"region\"\n onDismiss={onDismiss}\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
1
+ {"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n role=\"region\"\n onDismiss={onDismiss}\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
package/build/prompt/ActionPrompt/ActionPrompt.mjs CHANGED
@@ -139,5 +139,5 @@ const ActionPrompt = ({
139
139
  });
140
140
  };
141
141
 
142
- export { ActionPrompt, ActionPrompt as default };
142
+ export { ActionPrompt };
143
143
  //# sourceMappingURL=ActionPrompt.mjs.map
package/build/prompt/InfoPrompt/InfoPrompt.js CHANGED
@@ -25,6 +25,7 @@ var clsx = require('clsx');
25
25
  require('react-intl');
26
26
  require('../../common/closeButton/CloseButton.messages.js');
27
27
  var jsxRuntime = require('react/jsx-runtime');
28
+ var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
28
29
  var StatusIcon = require('../../statusIcon/StatusIcon.js');
29
30
  var Body = require('../../body/Body.js');
30
31
  var Link = require('../../link/Link.js');
@@ -38,6 +39,7 @@ const InfoPrompt = ({
38
39
  title,
39
40
  description,
40
41
  className,
42
+ 'aria-live': ariaLive = 'polite',
41
43
  'data-testid': dataTestId,
42
44
  ...restProps
43
45
  }) => {
@@ -76,35 +78,39 @@ const InfoPrompt = ({
76
78
  sentiment: statusIconSentiment
77
79
  });
78
80
  };
79
- return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
80
- sentiment: sentiment$1,
81
- media: renderMedia(),
82
- "data-testid": dataTestId,
83
- className: clsx.clsx('wds-info-prompt', className),
84
- ...restProps,
85
- onTouchStart: handleTouchStart,
86
- onTouchEnd: handleTouchEnd,
87
- onTouchMove: handleTouchMove,
88
- onDismiss: onDismiss,
89
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
90
- className: "wds-info-prompt__content",
91
- children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
92
- className: "wds-info-prompt__title",
93
- type: typography.Typography.BODY_LARGE_BOLD,
94
- as: "span",
95
- children: title
96
- }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
97
- as: "span",
98
- className: "wds-info-prompt__description",
99
- children: description
100
- }), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
101
- href: action.href,
102
- target: action.target,
103
- type: typography.Typography.LINK_DEFAULT,
104
- className: "wds-info-prompt__action",
105
- onClick: action.onClick,
106
- children: action.label
107
- })]
81
+ // Render content directly in LiveRegion
82
+ return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
83
+ "aria-live": ariaLive,
84
+ children: /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
85
+ sentiment: sentiment$1,
86
+ media: renderMedia(),
87
+ "data-testid": dataTestId,
88
+ className: clsx.clsx('wds-info-prompt', className),
89
+ ...restProps,
90
+ onTouchStart: handleTouchStart,
91
+ onTouchEnd: handleTouchEnd,
92
+ onTouchMove: handleTouchMove,
93
+ onDismiss: onDismiss,
94
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
95
+ className: "wds-info-prompt__content",
96
+ children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
97
+ className: "wds-info-prompt__title",
98
+ type: typography.Typography.BODY_LARGE_BOLD,
99
+ as: "span",
100
+ children: title
101
+ }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
102
+ as: "span",
103
+ className: "wds-info-prompt__description",
104
+ children: description
105
+ }), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
106
+ href: action.href,
107
+ target: action.target,
108
+ type: typography.Typography.LINK_DEFAULT,
109
+ className: "wds-info-prompt__action",
110
+ onClick: action.onClick,
111
+ children: action.label
112
+ })]
113
+ })
108
114
  })
109
115
  });
110
116
  };
package/build/prompt/InfoPrompt/InfoPrompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}
1
+ {"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}