@x-plat/design-system 0.1.3 → 0.1.5

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 (70) hide show
  1. package/dist/components/Accordion/index.cjs +908 -18
  2. package/dist/components/Accordion/index.js +908 -18
  3. package/dist/components/Avatar/index.css +1 -0
  4. package/dist/components/CheckBox/index.cjs +1 -1
  5. package/dist/components/CheckBox/index.css +13 -1
  6. package/dist/components/CheckBox/index.js +1 -1
  7. package/dist/components/DatePicker/index.cjs +75 -5
  8. package/dist/components/DatePicker/index.css +20 -2
  9. package/dist/components/DatePicker/index.d.cts +245 -4
  10. package/dist/components/DatePicker/index.d.ts +245 -4
  11. package/dist/components/DatePicker/index.js +75 -5
  12. package/dist/components/Drawer/index.cjs +111 -0
  13. package/dist/components/Drawer/index.css +70 -0
  14. package/dist/components/Drawer/index.d.cts +14 -0
  15. package/dist/components/Drawer/index.d.ts +14 -0
  16. package/dist/components/Drawer/index.js +74 -0
  17. package/dist/components/Dropdown/index.cjs +185 -0
  18. package/dist/components/Dropdown/index.css +54 -0
  19. package/dist/components/Dropdown/index.d.cts +17 -0
  20. package/dist/components/Dropdown/index.d.ts +17 -0
  21. package/dist/components/Dropdown/index.js +148 -0
  22. package/dist/components/EmptyState/index.cjs +60 -0
  23. package/dist/components/EmptyState/index.css +32 -0
  24. package/dist/components/EmptyState/index.d.cts +12 -0
  25. package/dist/components/EmptyState/index.d.ts +12 -0
  26. package/dist/components/EmptyState/index.js +33 -0
  27. package/dist/components/FileUpload/index.cjs +1039 -0
  28. package/dist/components/FileUpload/index.css +42 -0
  29. package/dist/components/FileUpload/index.d.cts +14 -0
  30. package/dist/components/FileUpload/index.d.ts +14 -0
  31. package/dist/components/FileUpload/index.js +1002 -0
  32. package/dist/components/Pagination/index.cjs +913 -7
  33. package/dist/components/Pagination/index.js +913 -7
  34. package/dist/components/Radio/index.css +1 -1
  35. package/dist/components/Select/index.cjs +17 -7
  36. package/dist/components/Select/index.d.cts +2 -0
  37. package/dist/components/Select/index.d.ts +2 -0
  38. package/dist/components/Select/index.js +17 -7
  39. package/dist/components/Steps/index.cjs +1105 -0
  40. package/dist/components/Steps/index.css +918 -0
  41. package/dist/components/Steps/index.d.cts +134 -0
  42. package/dist/components/Steps/index.d.ts +134 -0
  43. package/dist/components/Steps/index.js +1078 -0
  44. package/dist/components/Switch/index.cjs +2 -0
  45. package/dist/components/Switch/index.css +34 -8
  46. package/dist/components/Switch/index.d.cts +2 -0
  47. package/dist/components/Switch/index.d.ts +2 -0
  48. package/dist/components/Switch/index.js +2 -0
  49. package/dist/components/Tag/index.cjs +1090 -0
  50. package/dist/components/Tag/index.css +498 -0
  51. package/dist/components/Tag/index.d.cts +131 -0
  52. package/dist/components/Tag/index.d.ts +131 -0
  53. package/dist/components/Tag/index.js +1063 -0
  54. package/dist/components/Toast/index.cjs +150 -0
  55. package/dist/components/Toast/index.css +111 -0
  56. package/dist/components/Toast/index.d.cts +15 -0
  57. package/dist/components/Toast/index.d.ts +15 -0
  58. package/dist/components/Toast/index.js +112 -0
  59. package/dist/components/Tooltip/index.css +3 -0
  60. package/dist/components/index.cjs +1669 -1188
  61. package/dist/components/index.css +5803 -4011
  62. package/dist/components/index.d.cts +7 -0
  63. package/dist/components/index.d.ts +7 -0
  64. package/dist/components/index.js +1635 -1162
  65. package/dist/index.cjs +2689 -2244
  66. package/dist/index.css +5803 -4011
  67. package/dist/index.d.cts +7 -0
  68. package/dist/index.d.ts +7 -0
  69. package/dist/index.js +2758 -2321
  70. package/package.json +2 -2
@@ -0,0 +1,918 @@
1
+ /* src/components/Steps/steps.scss */
2
+ .lib-xplat-steps {
3
+ display: flex;
4
+ width: 100%;
5
+ }
6
+ .lib-xplat-steps .step-item {
7
+ flex: 1;
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ }
12
+ .lib-xplat-steps .step-item:last-child .step-line {
13
+ display: none;
14
+ }
15
+ .lib-xplat-steps .step-indicator {
16
+ display: flex;
17
+ align-items: center;
18
+ width: 100%;
19
+ position: relative;
20
+ }
21
+ .lib-xplat-steps .step-circle {
22
+ width: 32px;
23
+ height: 32px;
24
+ border-radius: 50%;
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ font-size: 13px;
29
+ font-weight: 600;
30
+ flex-shrink: 0;
31
+ z-index: 1;
32
+ transition: background-color 0.2s, color 0.2s;
33
+ }
34
+ .lib-xplat-steps .step-circle svg {
35
+ width: 16px;
36
+ height: 16px;
37
+ }
38
+ .lib-xplat-steps .step-line {
39
+ flex: 1;
40
+ height: 2px;
41
+ transition: background-color 0.2s;
42
+ }
43
+ .lib-xplat-steps .step-content {
44
+ display: flex;
45
+ flex-direction: column;
46
+ align-items: center;
47
+ margin-top: 8px;
48
+ text-align: center;
49
+ }
50
+ .lib-xplat-steps .step-title {
51
+ font-size: 13px;
52
+ font-weight: 500;
53
+ color: #171717;
54
+ }
55
+ .lib-xplat-steps .step-description {
56
+ font-size: 12px;
57
+ color: #737373;
58
+ margin-top: 2px;
59
+ }
60
+ .lib-xplat-steps .step-item.completed .step-circle {
61
+ color: #FFFFFF;
62
+ }
63
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-50 {
64
+ background-color: #FFF0F0;
65
+ }
66
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-100 {
67
+ background-color: #FFDDDE;
68
+ }
69
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-200 {
70
+ background-color: #FFC1C2;
71
+ }
72
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-300 {
73
+ background-color: #FF9698;
74
+ }
75
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-400 {
76
+ background-color: #FF5A5D;
77
+ }
78
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-500 {
79
+ background-color: #FF272B;
80
+ }
81
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-600 {
82
+ background-color: #F80409;
83
+ }
84
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-700 {
85
+ background-color: #D40105;
86
+ }
87
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-800 {
88
+ background-color: #AE0609;
89
+ }
90
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-red-900 {
91
+ background-color: #900C0F;
92
+ }
93
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-50 {
94
+ background-color: #E5F6EA;
95
+ }
96
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-100 {
97
+ background-color: #C1E7CC;
98
+ }
99
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-200 {
100
+ background-color: #98D8AC;
101
+ }
102
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-300 {
103
+ background-color: #6CCA8B;
104
+ }
105
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-400 {
106
+ background-color: #47BE72;
107
+ }
108
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-500 {
109
+ background-color: #10B259;
110
+ }
111
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-600 {
112
+ background-color: #00A34F;
113
+ }
114
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-700 {
115
+ background-color: #009143;
116
+ }
117
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-800 {
118
+ background-color: #007F38;
119
+ }
120
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-green-900 {
121
+ background-color: #006024;
122
+ }
123
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-50 {
124
+ background-color: #FFF8EC;
125
+ }
126
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-100 {
127
+ background-color: #FFF0D3;
128
+ }
129
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-200 {
130
+ background-color: #FFDDA5;
131
+ }
132
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-300 {
133
+ background-color: #FFC46D;
134
+ }
135
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-400 {
136
+ background-color: #FF9F32;
137
+ }
138
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-500 {
139
+ background-color: #FF820A;
140
+ }
141
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-600 {
142
+ background-color: #FF6900;
143
+ }
144
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-700 {
145
+ background-color: #CC4B02;
146
+ }
147
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-800 {
148
+ background-color: #A13A0B;
149
+ }
150
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-orange-900 {
151
+ background-color: #82320C;
152
+ }
153
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-50 {
154
+ background-color: #FFFDE7;
155
+ }
156
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-100 {
157
+ background-color: #FFFAC1;
158
+ }
159
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-200 {
160
+ background-color: #FFF186;
161
+ }
162
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-300 {
163
+ background-color: #FFE041;
164
+ }
165
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-400 {
166
+ background-color: #FFCC0D;
167
+ }
168
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-500 {
169
+ background-color: #F0B100;
170
+ }
171
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-600 {
172
+ background-color: #D18800;
173
+ }
174
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-700 {
175
+ background-color: #A66002;
176
+ }
177
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-800 {
178
+ background-color: #894B0A;
179
+ }
180
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-yellow-900 {
181
+ background-color: #743D0F;
182
+ }
183
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-50 {
184
+ background-color: #F1F4FD;
185
+ }
186
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-100 {
187
+ background-color: #DFE7FA;
188
+ }
189
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-200 {
190
+ background-color: #C5D4F8;
191
+ }
192
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-300 {
193
+ background-color: #9EB8F2;
194
+ }
195
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-400 {
196
+ background-color: #7093EA;
197
+ }
198
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-500 {
199
+ background-color: #4D6DE3;
200
+ }
201
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-600 {
202
+ background-color: #3950D7;
203
+ }
204
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-700 {
205
+ background-color: #303EC5;
206
+ }
207
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-800 {
208
+ background-color: #2D35A0;
209
+ }
210
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-blue-900 {
211
+ background-color: #29317F;
212
+ }
213
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-50 {
214
+ background-color: #EEFAFF;
215
+ }
216
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-100 {
217
+ background-color: #D9F4FF;
218
+ }
219
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-200 {
220
+ background-color: #BBEDFF;
221
+ }
222
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-300 {
223
+ background-color: #8DE3FF;
224
+ }
225
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-400 {
226
+ background-color: #57D0FF;
227
+ }
228
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-500 {
229
+ background-color: #30B6FF;
230
+ }
231
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-600 {
232
+ background-color: #1999F7;
233
+ }
234
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-700 {
235
+ background-color: #1280E3;
236
+ }
237
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-800 {
238
+ background-color: #1566B8;
239
+ }
240
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-lightblue-900 {
241
+ background-color: #175791;
242
+ }
243
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-50 {
244
+ background-color: #FBF6FE;
245
+ }
246
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-100 {
247
+ background-color: #F5EAFD;
248
+ }
249
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-200 {
250
+ background-color: #EDD8FC;
251
+ }
252
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-300 {
253
+ background-color: #E0BAF8;
254
+ }
255
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-400 {
256
+ background-color: #CD8DF3;
257
+ }
258
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-500 {
259
+ background-color: #B961EB;
260
+ }
261
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-600 {
262
+ background-color: #A541DC;
263
+ }
264
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-700 {
265
+ background-color: #9230C5;
266
+ }
267
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-800 {
268
+ background-color: #782B9E;
269
+ }
270
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-purple-900 {
271
+ background-color: #62247F;
272
+ }
273
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-50 {
274
+ background-color: #FFF4FE;
275
+ }
276
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-100 {
277
+ background-color: #FFE7FD;
278
+ }
279
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-200 {
280
+ background-color: #FFCFFA;
281
+ }
282
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-300 {
283
+ background-color: #FEA9F1;
284
+ }
285
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-400 {
286
+ background-color: #FD75E7;
287
+ }
288
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-500 {
289
+ background-color: #F553DA;
290
+ }
291
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-600 {
292
+ background-color: #D821B6;
293
+ }
294
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-700 {
295
+ background-color: #B31892;
296
+ }
297
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-800 {
298
+ background-color: #921676;
299
+ }
300
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-pink-900 {
301
+ background-color: #781761;
302
+ }
303
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-50 {
304
+ background-color: #FAFAFA;
305
+ }
306
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-100 {
307
+ background-color: #F5F5F5;
308
+ }
309
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-200 {
310
+ background-color: #E5E5E5;
311
+ }
312
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-300 {
313
+ background-color: #D4D4D4;
314
+ }
315
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-400 {
316
+ background-color: #A1A1A1;
317
+ }
318
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-500 {
319
+ background-color: #737373;
320
+ }
321
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-600 {
322
+ background-color: #525252;
323
+ }
324
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-700 {
325
+ background-color: #404040;
326
+ }
327
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-800 {
328
+ background-color: #262626;
329
+ }
330
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-neutral-900 {
331
+ background-color: #171717;
332
+ }
333
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-black {
334
+ background-color: #000000;
335
+ }
336
+ .lib-xplat-steps .step-item.completed .step-circle.xplat-white {
337
+ background-color: #FFFFFF;
338
+ }
339
+ .lib-xplat-steps .step-item.completed .step-circle.test-default {
340
+ background-color: #ffffff;
341
+ }
342
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-50 {
343
+ background-color: #FFF0F0;
344
+ }
345
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-100 {
346
+ background-color: #FFDDDE;
347
+ }
348
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-200 {
349
+ background-color: #FFC1C2;
350
+ }
351
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-300 {
352
+ background-color: #FF9698;
353
+ }
354
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-400 {
355
+ background-color: #FF5A5D;
356
+ }
357
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-500 {
358
+ background-color: #FF272B;
359
+ }
360
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-600 {
361
+ background-color: #F80409;
362
+ }
363
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-700 {
364
+ background-color: #D40105;
365
+ }
366
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-800 {
367
+ background-color: #AE0609;
368
+ }
369
+ .lib-xplat-steps .step-item.completed .step-line.xplat-red-900 {
370
+ background-color: #900C0F;
371
+ }
372
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-50 {
373
+ background-color: #E5F6EA;
374
+ }
375
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-100 {
376
+ background-color: #C1E7CC;
377
+ }
378
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-200 {
379
+ background-color: #98D8AC;
380
+ }
381
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-300 {
382
+ background-color: #6CCA8B;
383
+ }
384
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-400 {
385
+ background-color: #47BE72;
386
+ }
387
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-500 {
388
+ background-color: #10B259;
389
+ }
390
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-600 {
391
+ background-color: #00A34F;
392
+ }
393
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-700 {
394
+ background-color: #009143;
395
+ }
396
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-800 {
397
+ background-color: #007F38;
398
+ }
399
+ .lib-xplat-steps .step-item.completed .step-line.xplat-green-900 {
400
+ background-color: #006024;
401
+ }
402
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-50 {
403
+ background-color: #FFF8EC;
404
+ }
405
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-100 {
406
+ background-color: #FFF0D3;
407
+ }
408
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-200 {
409
+ background-color: #FFDDA5;
410
+ }
411
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-300 {
412
+ background-color: #FFC46D;
413
+ }
414
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-400 {
415
+ background-color: #FF9F32;
416
+ }
417
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-500 {
418
+ background-color: #FF820A;
419
+ }
420
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-600 {
421
+ background-color: #FF6900;
422
+ }
423
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-700 {
424
+ background-color: #CC4B02;
425
+ }
426
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-800 {
427
+ background-color: #A13A0B;
428
+ }
429
+ .lib-xplat-steps .step-item.completed .step-line.xplat-orange-900 {
430
+ background-color: #82320C;
431
+ }
432
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-50 {
433
+ background-color: #FFFDE7;
434
+ }
435
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-100 {
436
+ background-color: #FFFAC1;
437
+ }
438
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-200 {
439
+ background-color: #FFF186;
440
+ }
441
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-300 {
442
+ background-color: #FFE041;
443
+ }
444
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-400 {
445
+ background-color: #FFCC0D;
446
+ }
447
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-500 {
448
+ background-color: #F0B100;
449
+ }
450
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-600 {
451
+ background-color: #D18800;
452
+ }
453
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-700 {
454
+ background-color: #A66002;
455
+ }
456
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-800 {
457
+ background-color: #894B0A;
458
+ }
459
+ .lib-xplat-steps .step-item.completed .step-line.xplat-yellow-900 {
460
+ background-color: #743D0F;
461
+ }
462
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-50 {
463
+ background-color: #F1F4FD;
464
+ }
465
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-100 {
466
+ background-color: #DFE7FA;
467
+ }
468
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-200 {
469
+ background-color: #C5D4F8;
470
+ }
471
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-300 {
472
+ background-color: #9EB8F2;
473
+ }
474
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-400 {
475
+ background-color: #7093EA;
476
+ }
477
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-500 {
478
+ background-color: #4D6DE3;
479
+ }
480
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-600 {
481
+ background-color: #3950D7;
482
+ }
483
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-700 {
484
+ background-color: #303EC5;
485
+ }
486
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-800 {
487
+ background-color: #2D35A0;
488
+ }
489
+ .lib-xplat-steps .step-item.completed .step-line.xplat-blue-900 {
490
+ background-color: #29317F;
491
+ }
492
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-50 {
493
+ background-color: #EEFAFF;
494
+ }
495
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-100 {
496
+ background-color: #D9F4FF;
497
+ }
498
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-200 {
499
+ background-color: #BBEDFF;
500
+ }
501
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-300 {
502
+ background-color: #8DE3FF;
503
+ }
504
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-400 {
505
+ background-color: #57D0FF;
506
+ }
507
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-500 {
508
+ background-color: #30B6FF;
509
+ }
510
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-600 {
511
+ background-color: #1999F7;
512
+ }
513
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-700 {
514
+ background-color: #1280E3;
515
+ }
516
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-800 {
517
+ background-color: #1566B8;
518
+ }
519
+ .lib-xplat-steps .step-item.completed .step-line.xplat-lightblue-900 {
520
+ background-color: #175791;
521
+ }
522
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-50 {
523
+ background-color: #FBF6FE;
524
+ }
525
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-100 {
526
+ background-color: #F5EAFD;
527
+ }
528
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-200 {
529
+ background-color: #EDD8FC;
530
+ }
531
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-300 {
532
+ background-color: #E0BAF8;
533
+ }
534
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-400 {
535
+ background-color: #CD8DF3;
536
+ }
537
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-500 {
538
+ background-color: #B961EB;
539
+ }
540
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-600 {
541
+ background-color: #A541DC;
542
+ }
543
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-700 {
544
+ background-color: #9230C5;
545
+ }
546
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-800 {
547
+ background-color: #782B9E;
548
+ }
549
+ .lib-xplat-steps .step-item.completed .step-line.xplat-purple-900 {
550
+ background-color: #62247F;
551
+ }
552
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-50 {
553
+ background-color: #FFF4FE;
554
+ }
555
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-100 {
556
+ background-color: #FFE7FD;
557
+ }
558
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-200 {
559
+ background-color: #FFCFFA;
560
+ }
561
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-300 {
562
+ background-color: #FEA9F1;
563
+ }
564
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-400 {
565
+ background-color: #FD75E7;
566
+ }
567
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-500 {
568
+ background-color: #F553DA;
569
+ }
570
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-600 {
571
+ background-color: #D821B6;
572
+ }
573
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-700 {
574
+ background-color: #B31892;
575
+ }
576
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-800 {
577
+ background-color: #921676;
578
+ }
579
+ .lib-xplat-steps .step-item.completed .step-line.xplat-pink-900 {
580
+ background-color: #781761;
581
+ }
582
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-50 {
583
+ background-color: #FAFAFA;
584
+ }
585
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-100 {
586
+ background-color: #F5F5F5;
587
+ }
588
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-200 {
589
+ background-color: #E5E5E5;
590
+ }
591
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-300 {
592
+ background-color: #D4D4D4;
593
+ }
594
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-400 {
595
+ background-color: #A1A1A1;
596
+ }
597
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-500 {
598
+ background-color: #737373;
599
+ }
600
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-600 {
601
+ background-color: #525252;
602
+ }
603
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-700 {
604
+ background-color: #404040;
605
+ }
606
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-800 {
607
+ background-color: #262626;
608
+ }
609
+ .lib-xplat-steps .step-item.completed .step-line.xplat-neutral-900 {
610
+ background-color: #171717;
611
+ }
612
+ .lib-xplat-steps .step-item.completed .step-line.xplat-black {
613
+ background-color: #000000;
614
+ }
615
+ .lib-xplat-steps .step-item.completed .step-line.xplat-white {
616
+ background-color: #FFFFFF;
617
+ }
618
+ .lib-xplat-steps .step-item.completed .step-line.test-default {
619
+ background-color: #ffffff;
620
+ }
621
+ .lib-xplat-steps .step-item.active .step-circle {
622
+ color: #FFFFFF;
623
+ }
624
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-50 {
625
+ background-color: #FFF0F0;
626
+ }
627
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-100 {
628
+ background-color: #FFDDDE;
629
+ }
630
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-200 {
631
+ background-color: #FFC1C2;
632
+ }
633
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-300 {
634
+ background-color: #FF9698;
635
+ }
636
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-400 {
637
+ background-color: #FF5A5D;
638
+ }
639
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-500 {
640
+ background-color: #FF272B;
641
+ }
642
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-600 {
643
+ background-color: #F80409;
644
+ }
645
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-700 {
646
+ background-color: #D40105;
647
+ }
648
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-800 {
649
+ background-color: #AE0609;
650
+ }
651
+ .lib-xplat-steps .step-item.active .step-circle.xplat-red-900 {
652
+ background-color: #900C0F;
653
+ }
654
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-50 {
655
+ background-color: #E5F6EA;
656
+ }
657
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-100 {
658
+ background-color: #C1E7CC;
659
+ }
660
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-200 {
661
+ background-color: #98D8AC;
662
+ }
663
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-300 {
664
+ background-color: #6CCA8B;
665
+ }
666
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-400 {
667
+ background-color: #47BE72;
668
+ }
669
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-500 {
670
+ background-color: #10B259;
671
+ }
672
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-600 {
673
+ background-color: #00A34F;
674
+ }
675
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-700 {
676
+ background-color: #009143;
677
+ }
678
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-800 {
679
+ background-color: #007F38;
680
+ }
681
+ .lib-xplat-steps .step-item.active .step-circle.xplat-green-900 {
682
+ background-color: #006024;
683
+ }
684
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-50 {
685
+ background-color: #FFF8EC;
686
+ }
687
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-100 {
688
+ background-color: #FFF0D3;
689
+ }
690
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-200 {
691
+ background-color: #FFDDA5;
692
+ }
693
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-300 {
694
+ background-color: #FFC46D;
695
+ }
696
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-400 {
697
+ background-color: #FF9F32;
698
+ }
699
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-500 {
700
+ background-color: #FF820A;
701
+ }
702
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-600 {
703
+ background-color: #FF6900;
704
+ }
705
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-700 {
706
+ background-color: #CC4B02;
707
+ }
708
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-800 {
709
+ background-color: #A13A0B;
710
+ }
711
+ .lib-xplat-steps .step-item.active .step-circle.xplat-orange-900 {
712
+ background-color: #82320C;
713
+ }
714
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-50 {
715
+ background-color: #FFFDE7;
716
+ }
717
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-100 {
718
+ background-color: #FFFAC1;
719
+ }
720
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-200 {
721
+ background-color: #FFF186;
722
+ }
723
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-300 {
724
+ background-color: #FFE041;
725
+ }
726
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-400 {
727
+ background-color: #FFCC0D;
728
+ }
729
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-500 {
730
+ background-color: #F0B100;
731
+ }
732
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-600 {
733
+ background-color: #D18800;
734
+ }
735
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-700 {
736
+ background-color: #A66002;
737
+ }
738
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-800 {
739
+ background-color: #894B0A;
740
+ }
741
+ .lib-xplat-steps .step-item.active .step-circle.xplat-yellow-900 {
742
+ background-color: #743D0F;
743
+ }
744
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-50 {
745
+ background-color: #F1F4FD;
746
+ }
747
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-100 {
748
+ background-color: #DFE7FA;
749
+ }
750
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-200 {
751
+ background-color: #C5D4F8;
752
+ }
753
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-300 {
754
+ background-color: #9EB8F2;
755
+ }
756
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-400 {
757
+ background-color: #7093EA;
758
+ }
759
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-500 {
760
+ background-color: #4D6DE3;
761
+ }
762
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-600 {
763
+ background-color: #3950D7;
764
+ }
765
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-700 {
766
+ background-color: #303EC5;
767
+ }
768
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-800 {
769
+ background-color: #2D35A0;
770
+ }
771
+ .lib-xplat-steps .step-item.active .step-circle.xplat-blue-900 {
772
+ background-color: #29317F;
773
+ }
774
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-50 {
775
+ background-color: #EEFAFF;
776
+ }
777
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-100 {
778
+ background-color: #D9F4FF;
779
+ }
780
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-200 {
781
+ background-color: #BBEDFF;
782
+ }
783
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-300 {
784
+ background-color: #8DE3FF;
785
+ }
786
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-400 {
787
+ background-color: #57D0FF;
788
+ }
789
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-500 {
790
+ background-color: #30B6FF;
791
+ }
792
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-600 {
793
+ background-color: #1999F7;
794
+ }
795
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-700 {
796
+ background-color: #1280E3;
797
+ }
798
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-800 {
799
+ background-color: #1566B8;
800
+ }
801
+ .lib-xplat-steps .step-item.active .step-circle.xplat-lightblue-900 {
802
+ background-color: #175791;
803
+ }
804
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-50 {
805
+ background-color: #FBF6FE;
806
+ }
807
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-100 {
808
+ background-color: #F5EAFD;
809
+ }
810
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-200 {
811
+ background-color: #EDD8FC;
812
+ }
813
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-300 {
814
+ background-color: #E0BAF8;
815
+ }
816
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-400 {
817
+ background-color: #CD8DF3;
818
+ }
819
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-500 {
820
+ background-color: #B961EB;
821
+ }
822
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-600 {
823
+ background-color: #A541DC;
824
+ }
825
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-700 {
826
+ background-color: #9230C5;
827
+ }
828
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-800 {
829
+ background-color: #782B9E;
830
+ }
831
+ .lib-xplat-steps .step-item.active .step-circle.xplat-purple-900 {
832
+ background-color: #62247F;
833
+ }
834
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-50 {
835
+ background-color: #FFF4FE;
836
+ }
837
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-100 {
838
+ background-color: #FFE7FD;
839
+ }
840
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-200 {
841
+ background-color: #FFCFFA;
842
+ }
843
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-300 {
844
+ background-color: #FEA9F1;
845
+ }
846
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-400 {
847
+ background-color: #FD75E7;
848
+ }
849
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-500 {
850
+ background-color: #F553DA;
851
+ }
852
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-600 {
853
+ background-color: #D821B6;
854
+ }
855
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-700 {
856
+ background-color: #B31892;
857
+ }
858
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-800 {
859
+ background-color: #921676;
860
+ }
861
+ .lib-xplat-steps .step-item.active .step-circle.xplat-pink-900 {
862
+ background-color: #781761;
863
+ }
864
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-50 {
865
+ background-color: #FAFAFA;
866
+ }
867
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-100 {
868
+ background-color: #F5F5F5;
869
+ }
870
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-200 {
871
+ background-color: #E5E5E5;
872
+ }
873
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-300 {
874
+ background-color: #D4D4D4;
875
+ }
876
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-400 {
877
+ background-color: #A1A1A1;
878
+ }
879
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-500 {
880
+ background-color: #737373;
881
+ }
882
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-600 {
883
+ background-color: #525252;
884
+ }
885
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-700 {
886
+ background-color: #404040;
887
+ }
888
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-800 {
889
+ background-color: #262626;
890
+ }
891
+ .lib-xplat-steps .step-item.active .step-circle.xplat-neutral-900 {
892
+ background-color: #171717;
893
+ }
894
+ .lib-xplat-steps .step-item.active .step-circle.xplat-black {
895
+ background-color: #000000;
896
+ }
897
+ .lib-xplat-steps .step-item.active .step-circle.xplat-white {
898
+ background-color: #FFFFFF;
899
+ }
900
+ .lib-xplat-steps .step-item.active .step-circle.test-default {
901
+ background-color: #ffffff;
902
+ }
903
+ .lib-xplat-steps .step-item.active .step-line {
904
+ background-color: #E5E5E5;
905
+ }
906
+ .lib-xplat-steps .step-item.pending .step-circle {
907
+ background-color: #E5E5E5;
908
+ color: #737373;
909
+ }
910
+ .lib-xplat-steps .step-item.pending .step-line {
911
+ background-color: #E5E5E5;
912
+ }
913
+ .lib-xplat-steps .step-item.pending .step-title {
914
+ color: #A1A1A1;
915
+ }
916
+ .lib-xplat-steps .step-item.pending .step-description {
917
+ color: #D4D4D4;
918
+ }