@transferwise/components 46.115.1 → 46.116.1

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 (77) hide show
  1. package/build/alert/Alert.js +2 -1
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +2 -1
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/criticalBanner/CriticalCommsBanner.js +1 -0
  6. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  7. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -0
  8. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  9. package/build/main.css +428 -44
  10. package/build/mocks.js +7 -0
  11. package/build/mocks.js.map +1 -1
  12. package/build/mocks.mjs +7 -1
  13. package/build/mocks.mjs.map +1 -1
  14. package/build/sentimentSurface/SentimentSurface.js +43 -0
  15. package/build/sentimentSurface/SentimentSurface.js.map +1 -0
  16. package/build/sentimentSurface/SentimentSurface.mjs +39 -0
  17. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -0
  18. package/build/sentimentSurface/classMap.js +17 -0
  19. package/build/sentimentSurface/classMap.js.map +1 -0
  20. package/build/sentimentSurface/classMap.mjs +14 -0
  21. package/build/sentimentSurface/classMap.mjs.map +1 -0
  22. package/build/statusIcon/StatusIcon.js +10 -1
  23. package/build/statusIcon/StatusIcon.js.map +1 -1
  24. package/build/statusIcon/StatusIcon.mjs +10 -1
  25. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  26. package/build/styles/inputs/Input.css +2 -4
  27. package/build/styles/inputs/TextArea.css +2 -4
  28. package/build/styles/main.css +428 -44
  29. package/build/styles/popover/Popover.css +2 -4
  30. package/build/styles/sentimentSurface/SentimentSurface.css +420 -0
  31. package/build/styles/statusIcon/StatusIcon.css +4 -36
  32. package/build/types/alert/Alert.d.ts.map +1 -1
  33. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +2 -1
  34. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  35. package/build/types/mocks.d.ts +1 -0
  36. package/build/types/mocks.d.ts.map +1 -1
  37. package/build/types/sentimentSurface/SentimentSurface.d.ts +30 -0
  38. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -0
  39. package/build/types/sentimentSurface/SentimentSurface.types.d.ts +80 -0
  40. package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map +1 -0
  41. package/build/types/sentimentSurface/classMap.d.ts +4 -0
  42. package/build/types/sentimentSurface/classMap.d.ts.map +1 -0
  43. package/build/types/sentimentSurface/index.d.ts +3 -0
  44. package/build/types/sentimentSurface/index.d.ts.map +1 -0
  45. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  46. package/build/types/test-utils/window-mock.d.ts +1 -0
  47. package/build/types/test-utils/window-mock.d.ts.map +1 -1
  48. package/package.json +2 -2
  49. package/src/alert/Alert.tsx +3 -1
  50. package/src/criticalBanner/CriticalCommsBanner.tsx +3 -2
  51. package/src/expressiveMoneyInput/ExpressiveMoneyInput.spec.tsx +229 -0
  52. package/src/expressiveMoneyInput/amountInput/AmountInput.spec.tsx +282 -0
  53. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.spec.tsx +160 -0
  54. package/src/inputs/Input.css +2 -4
  55. package/src/inputs/SelectInput.spec.tsx +7 -1
  56. package/src/inputs/TextArea.css +2 -4
  57. package/src/main.css +428 -44
  58. package/src/main.less +2 -0
  59. package/src/mocks.ts +7 -0
  60. package/src/moneyInput/MoneyInput.spec.tsx +9 -1
  61. package/src/popover/Popover.css +2 -4
  62. package/src/provider/theme/ThemeProvider.story.tsx +78 -11
  63. package/src/sentimentSurface/SentimentSurface.css +420 -0
  64. package/src/sentimentSurface/SentimentSurface.docs.mdx +549 -0
  65. package/src/sentimentSurface/SentimentSurface.less +293 -0
  66. package/src/sentimentSurface/SentimentSurface.spec.tsx +140 -0
  67. package/src/sentimentSurface/SentimentSurface.story.tsx +303 -0
  68. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +72 -0
  69. package/src/sentimentSurface/SentimentSurface.tsx +72 -0
  70. package/src/sentimentSurface/SentimentSurface.types.ts +104 -0
  71. package/src/sentimentSurface/classMap.ts +15 -0
  72. package/src/sentimentSurface/index.ts +8 -0
  73. package/src/statusIcon/StatusIcon.css +4 -36
  74. package/src/statusIcon/StatusIcon.less +3 -41
  75. package/src/statusIcon/StatusIcon.tsx +14 -1
  76. package/src/test-utils/jest.setup.ts +0 -5
  77. package/src/test-utils/window-mock.ts +5 -0
@@ -0,0 +1,420 @@
1
+ .np-theme-personal .wds-sentiment-surface-negative-base,
2
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
3
+ --color-sentiment-content-primary: #CB272F;
4
+ --color-sentiment-content-primary-hover: #B8232B;
5
+ --color-sentiment-content-primary-active: #A72027;
6
+ --color-sentiment-interactive-primary: #CB272F;
7
+ --color-sentiment-interactive-primary-hover: #B8232B;
8
+ --color-sentiment-interactive-primary-active: #A72027;
9
+ --color-sentiment-interactive-secondary: #FBEAEA;
10
+ --color-sentiment-interactive-secondary-hover: #F9E1E1;
11
+ --color-sentiment-interactive-secondary-active: #F8D8D8;
12
+ --color-sentiment-interactive-secondary-neutral: #F5D3D4;
13
+ --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
14
+ --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
15
+ --color-sentiment-interactive-control: #FBEAEA;
16
+ --color-sentiment-interactive-control-hover: #F9E1E1;
17
+ --color-sentiment-interactive-control-active: #F8D8D8;
18
+ --color-sentiment-background-surface: #FBEAEA;
19
+ --color-sentiment-background-surface-hover: #F9E1E1;
20
+ --color-sentiment-background-surface-active: #F8D8D8;
21
+ }
22
+ .np-theme-personal .wds-sentiment-surface-negative-elevated,
23
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
24
+ --color-sentiment-content-primary: #FFFFFF;
25
+ --color-sentiment-content-primary-hover: #F5CCCC;
26
+ --color-sentiment-content-primary-active: #F1B7B7;
27
+ --color-sentiment-interactive-primary: #FBEAEA;
28
+ --color-sentiment-interactive-primary-hover: #F5CCCC;
29
+ --color-sentiment-interactive-primary-active: #F1B7B7;
30
+ --color-sentiment-interactive-secondary: #CB272F;
31
+ --color-sentiment-interactive-secondary-hover: #B8232B;
32
+ --color-sentiment-interactive-secondary-active: #A72027;
33
+ --color-sentiment-interactive-secondary-neutral: #9B141B;
34
+ --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
+ --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
36
+ --color-sentiment-interactive-control: #CB272F;
37
+ --color-sentiment-interactive-control-hover: #B8232B;
38
+ --color-sentiment-interactive-control-active: #A72027;
39
+ --color-sentiment-background-surface: #90000D;
40
+ --color-sentiment-background-surface-hover: #B8232B;
41
+ --color-sentiment-background-surface-active: #A72027;
42
+ }
43
+ .np-theme-personal--dark .wds-sentiment-surface-negative-base,
44
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
45
+ --color-sentiment-content-primary: #FFA8AD;
46
+ --color-sentiment-content-primary-hover: #FFBDC0;
47
+ --color-sentiment-content-primary-active: #FFD1D3;
48
+ --color-sentiment-interactive-primary: #FFA8AD;
49
+ --color-sentiment-interactive-primary-hover: #FFBDC0;
50
+ --color-sentiment-interactive-primary-active: #FFD1D3;
51
+ --color-sentiment-interactive-secondary: #410B0D;
52
+ --color-sentiment-interactive-secondary-hover: #641115;
53
+ --color-sentiment-interactive-secondary-active: #761418;
54
+ --color-sentiment-interactive-secondary-neutral: #601013;
55
+ --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
56
+ --color-sentiment-interactive-secondary-neutral-active: #90181D;
57
+ --color-sentiment-interactive-control: #410B0D;
58
+ --color-sentiment-interactive-control-hover: #641115;
59
+ --color-sentiment-interactive-control-active: #761418;
60
+ --color-sentiment-background-surface: #410B0D;
61
+ --color-sentiment-background-surface-hover: #641115;
62
+ --color-sentiment-background-surface-active: #761418;
63
+ }
64
+ .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
65
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
66
+ --color-sentiment-content-primary: #410B0D;
67
+ --color-sentiment-content-primary-hover: #641115;
68
+ --color-sentiment-content-primary-active: #761418;
69
+ --color-sentiment-interactive-primary: #410B0D;
70
+ --color-sentiment-interactive-primary-hover: #641115;
71
+ --color-sentiment-interactive-primary-active: #761418;
72
+ --color-sentiment-interactive-secondary: #FFA8AD;
73
+ --color-sentiment-interactive-secondary-hover: #FFBDC0;
74
+ --color-sentiment-interactive-secondary-active: #FFD1D3;
75
+ --color-sentiment-interactive-secondary-neutral: #D9898D;
76
+ --color-sentiment-interactive-secondary-neutral-hover: #D68084;
77
+ --color-sentiment-interactive-secondary-neutral-active: #D06C71;
78
+ --color-sentiment-interactive-control: #FFA8AD;
79
+ --color-sentiment-interactive-control-hover: #FFBDC0;
80
+ --color-sentiment-interactive-control-active: #FFD1D3;
81
+ --color-sentiment-background-surface: #FFA8AD;
82
+ --color-sentiment-background-surface-hover: #FFBDC0;
83
+ --color-sentiment-background-surface-active: #FFD1D3;
84
+ }
85
+ .np-theme-personal .wds-sentiment-surface-warning-base,
86
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
87
+ --color-sentiment-content-primary: #4A3B1C;
88
+ --color-sentiment-content-primary-hover: #302612;
89
+ --color-sentiment-content-primary-active: #2C2311;
90
+ --color-sentiment-interactive-primary: #FFD11A;
91
+ --color-sentiment-interactive-primary-hover: #FFBF0F;
92
+ --color-sentiment-interactive-primary-active: #FFBB00;
93
+ --color-sentiment-interactive-secondary: #FFF7D7;
94
+ --color-sentiment-interactive-secondary-hover: #FFF0B2;
95
+ --color-sentiment-interactive-secondary-active: #FFE98F;
96
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
97
+ --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
98
+ --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
99
+ --color-sentiment-interactive-control: #4A3B1C;
100
+ --color-sentiment-interactive-control-hover: #302612;
101
+ --color-sentiment-interactive-control-active: #2C2311;
102
+ --color-sentiment-background-surface: #FFF7D7;
103
+ --color-sentiment-background-surface-hover: #FFF0B2;
104
+ --color-sentiment-background-surface-active: #FFE98F;
105
+ }
106
+ .np-theme-personal .wds-sentiment-surface-warning-elevated,
107
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
108
+ --color-sentiment-content-primary: #4A3B1C;
109
+ --color-sentiment-content-primary-hover: #302612;
110
+ --color-sentiment-content-primary-active: #2C2311;
111
+ --color-sentiment-interactive-primary: #4A3B1C;
112
+ --color-sentiment-interactive-primary-hover: #302612;
113
+ --color-sentiment-interactive-primary-active: #2C2311;
114
+ --color-sentiment-interactive-secondary: #FFD11A;
115
+ --color-sentiment-interactive-secondary-hover: #FFBF0F;
116
+ --color-sentiment-interactive-secondary-active: #FFBB00;
117
+ --color-sentiment-interactive-secondary-neutral: #FFEC9E;
118
+ --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
119
+ --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
120
+ --color-sentiment-interactive-control: #FFD11A;
121
+ --color-sentiment-interactive-control-hover: #FFBF0F;
122
+ --color-sentiment-interactive-control-active: #FFBB00;
123
+ --color-sentiment-background-surface: #FFD11A;
124
+ --color-sentiment-background-surface-hover: #FFBF0F;
125
+ --color-sentiment-background-surface-active: #FFBB00;
126
+ }
127
+ .np-theme-personal--dark .wds-sentiment-surface-warning-base,
128
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
129
+ --color-sentiment-content-primary: #FADC65;
130
+ --color-sentiment-content-primary-hover: #F9D648;
131
+ --color-sentiment-content-primary-active: #F8CD20;
132
+ --color-sentiment-interactive-primary: #FADC65;
133
+ --color-sentiment-interactive-primary-hover: #F9D648;
134
+ --color-sentiment-interactive-primary-active: #F8CD20;
135
+ --color-sentiment-interactive-secondary: #3A3523;
136
+ --color-sentiment-interactive-secondary-hover: #504930;
137
+ --color-sentiment-interactive-secondary-active: #665D3D;
138
+ --color-sentiment-interactive-secondary-neutral: #4D462A;
139
+ --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
140
+ --color-sentiment-interactive-secondary-neutral-active: #685D33;
141
+ --color-sentiment-interactive-control: #3A3523;
142
+ --color-sentiment-interactive-control-hover: #504930;
143
+ --color-sentiment-interactive-control-active: #665D3D;
144
+ --color-sentiment-background-surface: #3A3523;
145
+ --color-sentiment-background-surface-hover: #504930;
146
+ --color-sentiment-background-surface-active: #665D3D;
147
+ }
148
+ .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
149
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
150
+ --color-sentiment-content-primary: #3A3523;
151
+ --color-sentiment-content-primary-hover: #504930;
152
+ --color-sentiment-content-primary-active: #665D3D;
153
+ --color-sentiment-interactive-primary: #3A3523;
154
+ --color-sentiment-interactive-primary-hover: #504930;
155
+ --color-sentiment-interactive-primary-active: #665D3D;
156
+ --color-sentiment-interactive-secondary: #FADC65;
157
+ --color-sentiment-interactive-secondary-hover: #F9D648;
158
+ --color-sentiment-interactive-secondary-active: #F8CD20;
159
+ --color-sentiment-interactive-secondary-neutral: #E3C85D;
160
+ --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
161
+ --color-sentiment-interactive-secondary-neutral-active: #D9B526;
162
+ --color-sentiment-interactive-control: #FADC65;
163
+ --color-sentiment-interactive-control-hover: #F9D648;
164
+ --color-sentiment-interactive-control-active: #F8CD20;
165
+ --color-sentiment-background-surface: #FADC65;
166
+ --color-sentiment-background-surface-hover: #F9D648;
167
+ --color-sentiment-background-surface-active: #F8CD20;
168
+ }
169
+ .np-theme-personal .wds-sentiment-surface-success-base,
170
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
171
+ --color-sentiment-content-primary: #054D28;
172
+ --color-sentiment-content-primary-hover: #043A1E;
173
+ --color-sentiment-content-primary-active: #022614;
174
+ --color-sentiment-interactive-primary: #054D28;
175
+ --color-sentiment-interactive-primary-hover: #043A1E;
176
+ --color-sentiment-interactive-primary-active: #022614;
177
+ --color-sentiment-interactive-secondary: #E2F6D5;
178
+ --color-sentiment-interactive-secondary-hover: #D3F2C0;
179
+ --color-sentiment-interactive-secondary-active: #C5EDAB;
180
+ --color-sentiment-interactive-secondary-neutral: #BCD9B8;
181
+ --color-sentiment-interactive-secondary-neutral-hover: #AACFA5;
182
+ --color-sentiment-interactive-secondary-neutral-active: #94C38E;
183
+ --color-sentiment-interactive-control: #E2F6D5;
184
+ --color-sentiment-interactive-control-hover: #D3F2C0;
185
+ --color-sentiment-interactive-control-active: #C5EDAB;
186
+ --color-sentiment-background-surface: #E2F6D5;
187
+ --color-sentiment-background-surface-hover: #D3F2C0;
188
+ --color-sentiment-background-surface-active: #C5EDAB;
189
+ }
190
+ .np-theme-personal .wds-sentiment-surface-success-elevated,
191
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
192
+ --color-sentiment-content-primary: #E2F6D5;
193
+ --color-sentiment-content-primary-hover: #D3F2C0;
194
+ --color-sentiment-content-primary-active: #C5EDAB;
195
+ --color-sentiment-interactive-primary: #E2F6D5;
196
+ --color-sentiment-interactive-primary-hover: #D3F2C0;
197
+ --color-sentiment-interactive-primary-active: #C5EDAB;
198
+ --color-sentiment-interactive-secondary: #054D28;
199
+ --color-sentiment-interactive-secondary-hover: #043A1E;
200
+ --color-sentiment-interactive-secondary-active: #022614;
201
+ --color-sentiment-interactive-secondary-neutral: #256A43;
202
+ --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
203
+ --color-sentiment-interactive-secondary-neutral-active: #329057;
204
+ --color-sentiment-interactive-control: #054D28;
205
+ --color-sentiment-interactive-control-hover: #043A1E;
206
+ --color-sentiment-interactive-control-active: #022614;
207
+ --color-sentiment-background-surface: #054D28;
208
+ --color-sentiment-background-surface-hover: #043A1E;
209
+ --color-sentiment-background-surface-active: #022614;
210
+ }
211
+ .np-theme-personal--dark .wds-sentiment-surface-success-base,
212
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-base {
213
+ --color-sentiment-content-primary: #BAE5A0;
214
+ --color-sentiment-content-primary-hover: #C8EAB3;
215
+ --color-sentiment-content-primary-active: #D6F0C7;
216
+ --color-sentiment-interactive-primary: #BAE5A0;
217
+ --color-sentiment-interactive-primary-hover: #C8EAB3;
218
+ --color-sentiment-interactive-primary-active: #D6F0C7;
219
+ --color-sentiment-interactive-secondary: #252C20;
220
+ --color-sentiment-interactive-secondary-hover: #323B2B;
221
+ --color-sentiment-interactive-secondary-active: #3E4A36;
222
+ --color-sentiment-interactive-secondary-neutral: #37422F;
223
+ --color-sentiment-interactive-secondary-neutral-hover: #46533B;
224
+ --color-sentiment-interactive-secondary-neutral-active: #546548;
225
+ --color-sentiment-interactive-control: #252C20;
226
+ --color-sentiment-interactive-control-hover: #323B2B;
227
+ --color-sentiment-interactive-control-active: #3E4A36;
228
+ --color-sentiment-background-surface: #252C20;
229
+ --color-sentiment-background-surface-hover: #323B2B;
230
+ --color-sentiment-background-surface-active: #3E4A36;
231
+ }
232
+ .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
233
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
234
+ --color-sentiment-content-primary: #252C20;
235
+ --color-sentiment-content-primary-hover: #323B2B;
236
+ --color-sentiment-content-primary-active: #3E4A36;
237
+ --color-sentiment-interactive-primary: #252C20;
238
+ --color-sentiment-interactive-primary-hover: #323B2B;
239
+ --color-sentiment-interactive-primary-active: #3E4A36;
240
+ --color-sentiment-interactive-secondary: #BAE5A0;
241
+ --color-sentiment-interactive-secondary-hover: #C8EAB3;
242
+ --color-sentiment-interactive-secondary-active: #D6F0C7;
243
+ --color-sentiment-interactive-secondary-neutral: #A8CF91;
244
+ --color-sentiment-interactive-secondary-neutral-hover: #94C478;
245
+ --color-sentiment-interactive-secondary-neutral-active: #83BB63;
246
+ --color-sentiment-interactive-control: #BAE5A0;
247
+ --color-sentiment-interactive-control-hover: #C8EAB3;
248
+ --color-sentiment-interactive-control-active: #D6F0C7;
249
+ --color-sentiment-background-surface: #BAE5A0;
250
+ --color-sentiment-background-surface-hover: #C8EAB3;
251
+ --color-sentiment-background-surface-active: #D6F0C7;
252
+ }
253
+ .np-theme-personal .wds-sentiment-surface-neutral-base,
254
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
255
+ --color-sentiment-content-primary: #454745;
256
+ --color-sentiment-content-primary-hover: #353635;
257
+ --color-sentiment-content-primary-active: #232423;
258
+ --color-sentiment-interactive-primary: #454745;
259
+ --color-sentiment-interactive-primary-hover: #353635;
260
+ --color-sentiment-interactive-primary-active: #232423;
261
+ --color-sentiment-interactive-secondary: #F1F1ED;
262
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
263
+ --color-sentiment-interactive-secondary-active: #DFDED5;
264
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
265
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
266
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
267
+ --color-sentiment-interactive-control: #F1F1ED;
268
+ --color-sentiment-interactive-control-hover: #E7E7E1;
269
+ --color-sentiment-interactive-control-active: #DFDED5;
270
+ --color-sentiment-background-surface: #F1F1ED;
271
+ --color-sentiment-background-surface-hover: #E7E7E1;
272
+ --color-sentiment-background-surface-active: #DFDED5;
273
+ }
274
+ .np-theme-personal .wds-sentiment-surface-neutral-elevated,
275
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
276
+ --color-sentiment-content-primary: #F1F1ED;
277
+ --color-sentiment-content-primary-hover: #E7E7E1;
278
+ --color-sentiment-content-primary-active: #DFDED5;
279
+ --color-sentiment-interactive-primary: #F1F1ED;
280
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
281
+ --color-sentiment-interactive-primary-active: #DFDED5;
282
+ --color-sentiment-interactive-secondary: #454745;
283
+ --color-sentiment-interactive-secondary-hover: #353635;
284
+ --color-sentiment-interactive-secondary-active: #232423;
285
+ --color-sentiment-interactive-secondary-neutral: #5A5C5A;
286
+ --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
287
+ --color-sentiment-interactive-secondary-neutral-active: #727472;
288
+ --color-sentiment-interactive-control: #454745;
289
+ --color-sentiment-interactive-control-hover: #353635;
290
+ --color-sentiment-interactive-control-active: #232423;
291
+ --color-sentiment-background-surface: #454745;
292
+ --color-sentiment-background-surface-hover: #353635;
293
+ --color-sentiment-background-surface-active: #232423;
294
+ }
295
+ .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
296
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
297
+ --color-sentiment-content-primary: #F1F1ED;
298
+ --color-sentiment-content-primary-hover: #E7E7E1;
299
+ --color-sentiment-content-primary-active: #DFDED5;
300
+ --color-sentiment-interactive-primary: #F1F1ED;
301
+ --color-sentiment-interactive-primary-hover: #E7E7E1;
302
+ --color-sentiment-interactive-primary-active: #DFDED5;
303
+ --color-sentiment-interactive-secondary: #2A2C29;
304
+ --color-sentiment-interactive-secondary-hover: #414441;
305
+ --color-sentiment-interactive-secondary-active: #595B58;
306
+ --color-sentiment-interactive-secondary-neutral: #424441;
307
+ --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
308
+ --color-sentiment-interactive-secondary-neutral-active: #565955;
309
+ --color-sentiment-interactive-control: #2A2C29;
310
+ --color-sentiment-interactive-control-hover: #414441;
311
+ --color-sentiment-interactive-control-active: #595B58;
312
+ --color-sentiment-background-surface: #2A2C29;
313
+ --color-sentiment-background-surface-hover: #414441;
314
+ --color-sentiment-background-surface-active: #595B58;
315
+ }
316
+ .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
317
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
318
+ --color-sentiment-content-primary: #2A2C29;
319
+ --color-sentiment-content-primary-hover: #414441;
320
+ --color-sentiment-content-primary-active: #595B58;
321
+ --color-sentiment-interactive-primary: #2A2C29;
322
+ --color-sentiment-interactive-primary-hover: #414441;
323
+ --color-sentiment-interactive-primary-active: #595B58;
324
+ --color-sentiment-interactive-secondary: #F1F1ED;
325
+ --color-sentiment-interactive-secondary-hover: #E7E7E1;
326
+ --color-sentiment-interactive-secondary-active: #DFDED5;
327
+ --color-sentiment-interactive-secondary-neutral: #E4E4DC;
328
+ --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
329
+ --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
330
+ --color-sentiment-interactive-control: #F1F1ED;
331
+ --color-sentiment-interactive-control-hover: #E7E7E1;
332
+ --color-sentiment-interactive-control-active: #DFDED5;
333
+ --color-sentiment-background-surface: #F1F1ED;
334
+ --color-sentiment-background-surface-hover: #E7E7E1;
335
+ --color-sentiment-background-surface-active: #DFDED5;
336
+ }
337
+ .np-theme-personal .wds-sentiment-surface-proposition-base,
338
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
339
+ --color-sentiment-content-primary: #0E0F0C;
340
+ --color-sentiment-content-primary-hover: #0A2826;
341
+ --color-sentiment-content-primary-active: #074140;
342
+ --color-sentiment-interactive-primary: #054D4D;
343
+ --color-sentiment-interactive-primary-hover: #043A3A;
344
+ --color-sentiment-interactive-primary-active: #022626;
345
+ --color-sentiment-interactive-secondary: #E0F7F7;
346
+ --color-sentiment-interactive-secondary-hover: #CAF1F1;
347
+ --color-sentiment-interactive-secondary-active: #B6ECEC;
348
+ --color-sentiment-interactive-secondary-neutral: #B4D5D5;
349
+ --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
350
+ --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
351
+ --color-sentiment-interactive-control: #E0F7F7;
352
+ --color-sentiment-interactive-control-hover: #CAF1F1;
353
+ --color-sentiment-interactive-control-active: #B6ECEC;
354
+ --color-sentiment-background-surface: #E0F7F7;
355
+ --color-sentiment-background-surface-hover: #CAF1F1;
356
+ --color-sentiment-background-surface-active: #B6ECEC;
357
+ }
358
+ .np-theme-personal .wds-sentiment-surface-proposition-elevated,
359
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
360
+ --color-sentiment-content-primary: #FFFFFF;
361
+ --color-sentiment-content-primary-hover: #EAF9F9;
362
+ --color-sentiment-content-primary-active: #D5F4F4;
363
+ --color-sentiment-interactive-primary: #E0F7F7;
364
+ --color-sentiment-interactive-primary-hover: #CAF1F1;
365
+ --color-sentiment-interactive-primary-active: #B6ECEC;
366
+ --color-sentiment-interactive-secondary: #054D4D;
367
+ --color-sentiment-interactive-secondary-hover: #043A3A;
368
+ --color-sentiment-interactive-secondary-active: #022626;
369
+ --color-sentiment-interactive-secondary-neutral: #1F6161;
370
+ --color-sentiment-interactive-secondary-neutral-hover: #247070;
371
+ --color-sentiment-interactive-secondary-neutral-active: #298080;
372
+ --color-sentiment-interactive-control: #054D4D;
373
+ --color-sentiment-interactive-control-hover: #043A3A;
374
+ --color-sentiment-interactive-control-active: #022626;
375
+ --color-sentiment-background-surface: #054D4D;
376
+ --color-sentiment-background-surface-hover: #043A3A;
377
+ --color-sentiment-background-surface-active: #022626;
378
+ }
379
+ .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
380
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
381
+ --color-sentiment-content-primary: #FFFFFF;
382
+ --color-sentiment-content-primary-hover: #EAF9F9;
383
+ --color-sentiment-content-primary-active: #D5F4F4;
384
+ --color-sentiment-interactive-primary: #E0F7F7;
385
+ --color-sentiment-interactive-primary-hover: #CAF1F1;
386
+ --color-sentiment-interactive-primary-active: #B6ECEC;
387
+ --color-sentiment-interactive-secondary: #0B312F;
388
+ --color-sentiment-interactive-secondary-hover: #124F4C;
389
+ --color-sentiment-interactive-secondary-active: #176460;
390
+ --color-sentiment-interactive-secondary-neutral: #174E4D;
391
+ --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
392
+ --color-sentiment-interactive-secondary-neutral-active: #237675;
393
+ --color-sentiment-interactive-control: #0B312F;
394
+ --color-sentiment-interactive-control-hover: #124F4C;
395
+ --color-sentiment-interactive-control-active: #176460;
396
+ --color-sentiment-background-surface: #0B312F;
397
+ --color-sentiment-background-surface-hover: #124F4C;
398
+ --color-sentiment-background-surface-active: #176460;
399
+ }
400
+ .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
401
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
402
+ --color-sentiment-content-primary: #0E0F0C;
403
+ --color-sentiment-content-primary-hover: #0A2826;
404
+ --color-sentiment-content-primary-active: #074140;
405
+ --color-sentiment-interactive-primary: #0B312F;
406
+ --color-sentiment-interactive-primary-hover: #104744;
407
+ --color-sentiment-interactive-primary-active: #16605C;
408
+ --color-sentiment-interactive-secondary: #E0F7F7;
409
+ --color-sentiment-interactive-secondary-hover: #CAF1F1;
410
+ --color-sentiment-interactive-secondary-active: #B6ECEC;
411
+ --color-sentiment-interactive-secondary-neutral: #B4D5D5;
412
+ --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
413
+ --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
414
+ --color-sentiment-interactive-control: #E0F7F7;
415
+ --color-sentiment-interactive-control-hover: #CAF1F1;
416
+ --color-sentiment-interactive-control-active: #B6ECEC;
417
+ --color-sentiment-background-surface: #E0F7F7;
418
+ --color-sentiment-background-surface-hover: #CAF1F1;
419
+ --color-sentiment-background-surface-active: #B6ECEC;
420
+ }
@@ -1,38 +1,6 @@
1
- .status-circle .light {
2
- color: var(--color-contrast-overlay);
1
+ .wds-sentiment-surface.status-circle {
2
+ background-color: var(--color-sentiment-interactive-primary);
3
3
  }
4
- .np-theme-personal--bright-green .status-circle .light {
5
- color: var(--color-white);
6
- }
7
- .status-circle .dark {
8
- color: #37517e;
9
- color: var(--color-content-primary);
10
- }
11
- .status-circle.warning,
12
- .status-circle.pending {
13
- background-color: var(--color-sentiment-warning);
14
- }
15
- .np-theme-personal .status-circle.warning .status-icon,
16
- .np-theme-personal .status-circle.pending .status-icon {
17
- color: var(--color-dark);
18
- }
19
- .status-circle.negative,
20
- .status-circle.error {
21
- background-color: var(--color-sentiment-negative);
22
- }
23
- .status-circle.negative .status-icon,
24
- .status-circle.error .status-icon {
25
- color: var(--color-sentiment-negative-secondary);
26
- }
27
- .status-circle.neutral {
28
- background-color: #5d7079;
29
- background-color: var(--color-content-secondary);
30
- }
31
- .status-circle.positive,
32
- .status-circle.success {
33
- background-color: var(--color-sentiment-positive);
34
- }
35
- .status-circle.positive .status-icon,
36
- .status-circle.success .status-icon {
37
- color: var(--color-sentiment-positive-secondary);
4
+ .wds-sentiment-surface.status-circle .status-icon {
5
+ color: var(--color-sentiment-interactive-control);
38
6
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAoJZ"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAsJZ"}
@@ -3,7 +3,8 @@ export type CriticalCommsBannerProps = {
3
3
  subtitle?: string;
4
4
  action?: {
5
5
  label: string;
6
- href: string;
6
+ href?: string;
7
+ onClick?: () => void;
7
8
  };
8
9
  className?: string;
9
10
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}
@@ -5,5 +5,6 @@ interface GlobalMockParams {
5
5
  }
6
6
  export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
7
7
  export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
8
+ export declare function mockRequestAnimationFrame(): void;
8
9
  export {};
9
10
  //# sourceMappingURL=mocks.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}
1
+ {"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F;AAED,wBAAgB,yBAAyB,SAKxC"}
@@ -0,0 +1,30 @@
1
+ import { SentimentSurfaceComponent } from './SentimentSurface.types';
2
+ /**
3
+ * SentimentSurface is a polymorphic container component that applies contextual background colours
4
+ * and text styling based on sentiment types (negative, warning, neutral, success, proposition).
5
+ * It's designed to visually communicate the nature or importance of its content through colour.
6
+ *
7
+ * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.
8
+ * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).
9
+ * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
10
+ * @param {ReactNode} [children] - Content to render inside the surface.
11
+ * @param {string} [className] - Additional CSS classes to apply.
12
+ * @param {CSSProperties} [style] - Inline styles to apply.
13
+ * @param {string} [id] - Unique identifier for the component.
14
+ * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.
15
+ *
16
+ * @component
17
+ * @example
18
+ * ```tsx
19
+ * // Basic usage with negative sentiment
20
+ * <SentimentSurface sentiment="negative">
21
+ * Your payment has failed
22
+ * </SentimentSurface>
23
+ * ```
24
+ *
25
+ * @see {@link SentimentSurface} for further information.
26
+ * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}
27
+ */
28
+ declare const SentimentSurface: SentimentSurfaceComponent;
29
+ export default SentimentSurface;
30
+ //# sourceMappingURL=SentimentSurface.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBA+BtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,80 @@
1
+ import { ReactNode, ElementType, CSSProperties, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
2
+ /**
3
+ * Sentiment types for the SentimentSurface component
4
+ */
5
+ export type Sentiment = 'negative' | 'warning' | 'neutral' | 'success' | 'proposition';
6
+ /**
7
+ * Emphasis levels for the SentimentSurface component
8
+ */
9
+ export type Emphasis = 'base' | 'elevated';
10
+ /**
11
+ * Common properties for the SentimentSurface component
12
+ */
13
+ export interface CommonProps {
14
+ /**
15
+ * The sentiment type that determines the colour scheme
16
+ */
17
+ sentiment: Sentiment;
18
+ /**
19
+ * The emphasis level affecting background and text contrast
20
+ * @default 'base'
21
+ */
22
+ emphasis?: Emphasis;
23
+ /**
24
+ * Content to render inside the surface
25
+ */
26
+ children?: ReactNode;
27
+ /**
28
+ * Additional CSS classes
29
+ */
30
+ className?: string;
31
+ /**
32
+ * Inline styles
33
+ */
34
+ style?: CSSProperties;
35
+ /**
36
+ * Unique identifier for the component
37
+ */
38
+ id?: string;
39
+ /**
40
+ * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
41
+ */
42
+ testId?: string;
43
+ /**
44
+ * `data-testid` is strictly controlled through the `testId` prop.
45
+ * This lets consumers know that this data attribute will not be applied.
46
+ */
47
+ 'data-testid'?: never;
48
+ }
49
+ /**
50
+ * Props when rendering as a div or custom element
51
+ */
52
+ export type SentimentSurfaceDivProps<T extends ElementType = 'div'> = Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & CommonProps & {
53
+ /**
54
+ * The underlying HTML element to render
55
+ * @default 'div'
56
+ */
57
+ as?: T;
58
+ };
59
+ /**
60
+ * All possible props for the SentimentSurface component
61
+ */
62
+ export type SentimentSurfaceProps<T extends ElementType = 'div'> = SentimentSurfaceDivProps<T>;
63
+ /**
64
+ * Combines SentimentSurface props with all valid HTML attributes for the specified element type.
65
+ * Supports polymorphic rendering via the `as` prop while maintaining full type safety.
66
+ *
67
+ * @example
68
+ * <SentimentSurface sentiment="negative" role="alert" aria-live="polite">
69
+ * Error message
70
+ * </SentimentSurface>
71
+ */
72
+ export type SentimentSurfaceComponentProps<T extends ElementType = 'div'> = SentimentSurfaceProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SentimentSurfaceProps<T>>;
73
+ /**
74
+ * The SentimentSurface component type signature
75
+ */
76
+ export interface SentimentSurfaceComponent {
77
+ <T extends ElementType = 'div'>(props: SentimentSurfaceComponentProps<T>): ReactNode;
78
+ displayName?: string;
79
+ }
80
+ //# sourceMappingURL=SentimentSurface.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SentimentSurface.types.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CACxE,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,WAAW,CAClB,GACC,WAAW,GAAG;IACZ;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE/F;;;;;;;;GAQG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
@@ -0,0 +1,4 @@
1
+ import type { Sentiment, Emphasis } from './SentimentSurface.types';
2
+ export declare const sentimentClassMap: Record<Sentiment, string>;
3
+ export declare const getSentimentSurfaceClassName: (sentiment: Sentiment, emphasis: Emphasis) => string;
4
+ //# sourceMappingURL=classMap.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/classMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMvD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,SAAS,EAAE,UAAU,QAAQ,KAAG,MAEvF,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default } from './SentimentSurface';
2
+ export type { SentimentSurfaceComponent, SentimentSurfaceProps, CommonProps, Sentiment, Emphasis, } from './SentimentSurface.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,0BAA0B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCA8D7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCAyE7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export declare function mockMatchMedia(): void;
2
2
  export declare function mockResizeObserver(): void;
3
+ export declare function mockRequestAnimationFrame(): void;
3
4
  //# sourceMappingURL=window-mock.d.ts.map