@dust-tt/sparkle 0.2.188 → 0.2.190-rc

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 (32) hide show
  1. package/dist/cjs/_index.d.ts +2 -0
  2. package/dist/cjs/components/DragArea.d.ts +8 -0
  3. package/dist/cjs/index.js +4275 -4249
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/cjs/lottie/dragArea.d.ts +1028 -0
  6. package/dist/cjs/stories/Dragndrop.stories.d.ts +7 -0
  7. package/dist/esm/_index.d.ts +2 -0
  8. package/dist/esm/components/DragArea.d.ts +8 -0
  9. package/dist/esm/index.js +4275 -4250
  10. package/dist/esm/index.js.map +1 -1
  11. package/dist/esm/lottie/dragArea.d.ts +1028 -0
  12. package/dist/esm/stories/Dragndrop.stories.d.ts +7 -0
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +1 -1
  15. package/src/_index.ts +3 -0
  16. package/src/components/Citation.tsx +30 -29
  17. package/src/components/ContextItem.tsx +6 -6
  18. package/src/components/DragArea.tsx +52 -0
  19. package/src/lottie/collapseBar.ts +124 -124
  20. package/src/lottie/dragArea.ts +3 -0
  21. package/src/lottie/spinnerColor.ts +337 -337
  22. package/src/lottie/spinnerColorLG.ts +825 -821
  23. package/src/lottie/spinnerColorXS.ts +187 -187
  24. package/src/lottie/spinnerDark.ts +353 -353
  25. package/src/lottie/spinnerDarkLG.ts +824 -824
  26. package/src/lottie/spinnerDarkXS.ts +218 -218
  27. package/src/lottie/spinnerLight.ts +342 -342
  28. package/src/lottie/spinnerLightLG.ts +797 -797
  29. package/src/lottie/spinnerLightXS.ts +215 -215
  30. package/src/lottie/src/dragArea.json +1 -0
  31. package/src/stories/ContextItem.stories.tsx +20 -0
  32. package/src/stories/Dragndrop.stories.tsx +20 -0
package/src/lottie/spinnerLightXS.ts CHANGED
@@ -1,358 +1,358 @@
1
1
  const animation = {
2
- v: "5.9.0",
3
- fr: 50,
4
- ip: 0,
5
- op: 112,
6
- w: 400,
7
- h: 400,
8
- nm: "spinnerLightXS",
9
- ddd: 0,
10
- assets: [],
11
- layers: [
2
+ "v": "5.9.0",
3
+ "fr": 50,
4
+ "ip": 0,
5
+ "op": 112,
6
+ "w": 400,
7
+ "h": 400,
8
+ "nm": "spinnerLightXS",
9
+ "ddd": 0,
10
+ "assets": [],
11
+ "layers": [
12
12
  {
13
- ddd: 0,
14
- ind: 1,
15
- ty: 4,
16
- nm: "circle",
17
- sr: 1,
18
- ks: {
19
- o: { a: 0, k: 100, ix: 11 },
20
- r: { a: 0, k: 0, ix: 10 },
21
- p: {
22
- a: 1,
23
- k: [
13
+ "ddd": 0,
14
+ "ind": 1,
15
+ "ty": 4,
16
+ "nm": "circle",
17
+ "sr": 1,
18
+ "ks": {
19
+ "o": { "a": 0, "k": 100, "ix": 11 },
20
+ "r": { "a": 0, "k": 0, "ix": 10 },
21
+ "p": {
22
+ "a": 1,
23
+ "k": [
24
24
  {
25
- i: { x: 0.667, y: 1 },
26
- o: { x: 0.333, y: 0 },
27
- t: 10,
28
- s: [202, 200, 0],
29
- to: [0, 0, 0],
30
- ti: [0, 0, 0],
25
+ "i": { "x": 0.667, "y": 1 },
26
+ "o": { "x": 0.333, "y": 0 },
27
+ "t": 10,
28
+ "s": [202, 200, 0],
29
+ "to": [0, 0, 0],
30
+ "ti": [0, 0, 0]
31
31
  },
32
32
  {
33
- i: { x: 0.833, y: 0.833 },
34
- o: { x: 0.333, y: 0.333 },
35
- t: 26,
36
- s: [202, 242, 0],
37
- to: [0, 0, 0],
38
- ti: [0, 0, 0],
33
+ "i": { "x": 0.833, "y": 0.833 },
34
+ "o": { "x": 0.333, "y": 0.333 },
35
+ "t": 26,
36
+ "s": [202, 242, 0],
37
+ "to": [0, 0, 0],
38
+ "ti": [0, 0, 0]
39
39
  },
40
40
  {
41
- i: { x: 0.667, y: 1 },
42
- o: { x: 0.333, y: 0 },
43
- t: 46,
44
- s: [202, 242, 0],
45
- to: [0, 0, 0],
46
- ti: [0, 0, 0],
41
+ "i": { "x": 0.667, "y": 1 },
42
+ "o": { "x": 0.333, "y": 0 },
43
+ "t": 46,
44
+ "s": [202, 242, 0],
45
+ "to": [0, 0, 0],
46
+ "ti": [0, 0, 0]
47
47
  },
48
- { t: 58, s: [202, 200, 0] },
48
+ { "t": 58, "s": [202, 200, 0] }
49
49
  ],
50
- ix: 2,
51
- l: 2,
50
+ "ix": 2,
51
+ "l": 2
52
52
  },
53
- a: { a: 0, k: [2, 0, 0], ix: 1, l: 2 },
54
- s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
53
+ "a": { "a": 0, "k": [2, 0, 0], "ix": 1, "l": 2 },
54
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
55
55
  },
56
- ao: 0,
57
- shapes: [
56
+ "ao": 0,
57
+ "shapes": [
58
58
  {
59
- ty: "gr",
60
- it: [
59
+ "ty": "gr",
60
+ "it": [
61
61
  {
62
- ind: 0,
63
- ty: "sh",
64
- ix: 1,
65
- ks: {
66
- a: 1,
67
- k: [
62
+ "ind": 0,
63
+ "ty": "sh",
64
+ "ix": 1,
65
+ "ks": {
66
+ "a": 1,
67
+ "k": [
68
68
  {
69
- i: { x: 0.62, y: 1 },
70
- o: { x: 0.85, y: 0 },
71
- t: 0,
72
- s: [
69
+ "i": { "x": 0.62, "y": 1 },
70
+ "o": { "x": 0.85, "y": 0 },
71
+ "t": 0,
72
+ "s": [
73
73
  {
74
- i: [
74
+ "i": [
75
75
  [-98.859, 0],
76
76
  [0, -98.859],
77
77
  [98.859, 0],
78
- [0, 98.859],
78
+ [0, 98.859]
79
79
  ],
80
- o: [
80
+ "o": [
81
81
  [98.859, 0],
82
82
  [0, 98.859],
83
83
  [-98.859, 0],
84
- [0, -98.859],
84
+ [0, -98.859]
85
85
  ],
86
- v: [
86
+ "v": [
87
87
  [0, -179],
88
88
  [179, 0],
89
89
  [0, 179],
90
- [-179, 0],
90
+ [-179, 0]
91
91
  ],
92
- c: true,
93
- },
94
- ],
92
+ "c": true
93
+ }
94
+ ]
95
95
  },
96
96
  {
97
- i: { x: 0.62, y: 1 },
98
- o: { x: 0.85, y: 0 },
99
- t: 25.84,
100
- s: [
97
+ "i": { "x": 0.62, "y": 1 },
98
+ "o": { "x": 0.85, "y": 0 },
99
+ "t": 25.84,
100
+ "s": [
101
101
  {
102
- i: [
103
- [0, 0],
102
+ "i": [
104
103
  [0, 0],
105
104
  [0, 0],
106
105
  [0, 0],
106
+ [0, 0]
107
107
  ],
108
- o: [
109
- [0, 0],
108
+ "o": [
110
109
  [0, 0],
111
110
  [0, 0],
112
111
  [0, 0],
112
+ [0, 0]
113
113
  ],
114
- v: [
114
+ "v": [
115
115
  [-2, -180.234],
116
116
  [74.744, -47.309],
117
117
  [151.489, 85.617],
118
- [-155.489, 85.617],
118
+ [-155.489, 85.617]
119
119
  ],
120
- c: true,
121
- },
122
- ],
120
+ "c": true
121
+ }
122
+ ]
123
123
  },
124
124
  {
125
- i: { x: 0.62, y: 1 },
126
- o: { x: 0.85, y: 0 },
127
- t: 37,
128
- s: [
125
+ "i": { "x": 0.62, "y": 1 },
126
+ "o": { "x": 0.85, "y": 0 },
127
+ "t": 37,
128
+ "s": [
129
129
  {
130
- i: [
131
- [0, 0],
130
+ "i": [
132
131
  [0, 0],
133
132
  [0, 0],
134
133
  [0, 0],
134
+ [0, 0]
135
135
  ],
136
- o: [
137
- [0, 0],
136
+ "o": [
138
137
  [0, 0],
139
138
  [0, 0],
140
139
  [0, 0],
140
+ [0, 0]
141
141
  ],
142
- v: [
142
+ "v": [
143
143
  [-2, -180.234],
144
144
  [74.744, -47.309],
145
145
  [151.489, 85.617],
146
- [-155.489, 85.617],
146
+ [-155.489, 85.617]
147
147
  ],
148
- c: true,
149
- },
150
- ],
148
+ "c": true
149
+ }
150
+ ]
151
151
  },
152
152
  {
153
- i: { x: 0.62, y: 1 },
154
- o: { x: 0.167, y: 0 },
155
- t: 68,
156
- s: [
153
+ "i": { "x": 0.62, "y": 1 },
154
+ "o": { "x": 0.167, "y": 0 },
155
+ "t": 68,
156
+ "s": [
157
157
  {
158
- i: [
159
- [0, 0],
158
+ "i": [
160
159
  [0, 0],
161
160
  [0, 0],
162
161
  [0, 0],
162
+ [0, 0]
163
163
  ],
164
- o: [
165
- [0, 0],
164
+ "o": [
166
165
  [0, 0],
167
166
  [0, 0],
168
167
  [0, 0],
168
+ [0, 0]
169
169
  ],
170
- v: [
170
+ "v": [
171
171
  [125, -130],
172
172
  [125, 122],
173
173
  [-127, 122],
174
- [-127, -130],
174
+ [-127, -130]
175
175
  ],
176
- c: true,
177
- },
178
- ],
176
+ "c": true
177
+ }
178
+ ]
179
179
  },
180
180
  {
181
- i: { x: 0.62, y: 1 },
182
- o: { x: 0.85, y: 0 },
183
- t: 81,
184
- s: [
181
+ "i": { "x": 0.62, "y": 1 },
182
+ "o": { "x": 0.85, "y": 0 },
183
+ "t": 81,
184
+ "s": [
185
185
  {
186
- i: [
187
- [0, 0],
186
+ "i": [
188
187
  [0, 0],
189
188
  [0, 0],
190
189
  [0, 0],
190
+ [0, 0]
191
191
  ],
192
- o: [
193
- [0, 0],
192
+ "o": [
194
193
  [0, 0],
195
194
  [0, 0],
196
195
  [0, 0],
196
+ [0, 0]
197
197
  ],
198
- v: [
198
+ "v": [
199
199
  [125, -130],
200
200
  [125, 122],
201
201
  [-127, 122],
202
- [-127, -130],
202
+ [-127, -130]
203
203
  ],
204
- c: true,
205
- },
206
- ],
204
+ "c": true
205
+ }
206
+ ]
207
207
  },
208
208
  {
209
- i: { x: 0.62, y: 1 },
210
- o: { x: 0.85, y: 0 },
211
- t: 104,
212
- s: [
209
+ "i": { "x": 0.62, "y": 1 },
210
+ "o": { "x": 0.85, "y": 0 },
211
+ "t": 104,
212
+ "s": [
213
213
  {
214
- i: [
214
+ "i": [
215
215
  [-98.859, 0],
216
216
  [0, -98.859],
217
217
  [98.859, 0],
218
- [0, 98.859],
218
+ [0, 98.859]
219
219
  ],
220
- o: [
220
+ "o": [
221
221
  [98.859, 0],
222
222
  [0, 98.859],
223
223
  [-98.859, 0],
224
- [0, -98.859],
224
+ [0, -98.859]
225
225
  ],
226
- v: [
226
+ "v": [
227
227
  [0, -179],
228
228
  [179, 0],
229
229
  [0, 179],
230
- [-179, 0],
230
+ [-179, 0]
231
231
  ],
232
- c: true,
233
- },
234
- ],
232
+ "c": true
233
+ }
234
+ ]
235
235
  },
236
236
  {
237
- t: 112,
238
- s: [
237
+ "t": 112,
238
+ "s": [
239
239
  {
240
- i: [
240
+ "i": [
241
241
  [-98.859, 0],
242
242
  [0, -98.859],
243
243
  [98.859, 0],
244
- [0, 98.859],
244
+ [0, 98.859]
245
245
  ],
246
- o: [
246
+ "o": [
247
247
  [98.859, 0],
248
248
  [0, 98.859],
249
249
  [-98.859, 0],
250
- [0, -98.859],
250
+ [0, -98.859]
251
251
  ],
252
- v: [
252
+ "v": [
253
253
  [0, -179],
254
254
  [179, 0],
255
255
  [0, 179],
256
- [-179, 0],
256
+ [-179, 0]
257
257
  ],
258
- c: true,
259
- },
260
- ],
261
- },
258
+ "c": true
259
+ }
260
+ ]
261
+ }
262
262
  ],
263
- ix: 2,
263
+ "ix": 2
264
264
  },
265
- nm: "Tracé 1",
266
- mn: "ADBE Vector Shape - Group",
267
- hd: false,
265
+ "nm": "Tracé 1",
266
+ "mn": "ADBE Vector Shape - Group",
267
+ "hd": false
268
268
  },
269
269
  {
270
- ty: "st",
271
- c: { a: 0, k: [1, 1, 1, 1], ix: 3 },
272
- o: { a: 0, k: 100, ix: 4 },
273
- w: { a: 0, k: 0, ix: 5 },
274
- lc: 1,
275
- lj: 1,
276
- ml: 4,
277
- bm: 0,
278
- nm: "Traccia 1",
279
- mn: "ADBE Vector Graphic - Stroke",
280
- hd: false,
270
+ "ty": "st",
271
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
272
+ "o": { "a": 0, "k": 100, "ix": 4 },
273
+ "w": { "a": 0, "k": 0, "ix": 5 },
274
+ "lc": 1,
275
+ "lj": 1,
276
+ "ml": 4,
277
+ "bm": 0,
278
+ "nm": "Traccia 1",
279
+ "mn": "ADBE Vector Graphic - Stroke",
280
+ "hd": false
281
281
  },
282
282
  {
283
- ty: "fl",
284
- c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
285
- o: {
286
- a: 1,
287
- k: [
283
+ "ty": "fl",
284
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
285
+ "o": {
286
+ "a": 1,
287
+ "k": [
288
288
  {
289
- i: { x: [0.833], y: [0.833] },
290
- o: { x: [0.167], y: [0.167] },
291
- t: 0,
292
- s: [70],
289
+ "i": { "x": [0.833], "y": [0.833] },
290
+ "o": { "x": [0.167], "y": [0.167] },
291
+ "t": 0,
292
+ "s": [70]
293
293
  },
294
294
  {
295
- i: { x: [0.833], y: [0.833] },
296
- o: { x: [0.167], y: [0.167] },
297
- t: 26,
298
- s: [100],
295
+ "i": { "x": [0.833], "y": [0.833] },
296
+ "o": { "x": [0.167], "y": [0.167] },
297
+ "t": 26,
298
+ "s": [100]
299
299
  },
300
300
  {
301
- i: { x: [0.833], y: [0.833] },
302
- o: { x: [0.167], y: [0.167] },
303
- t: 37,
304
- s: [100],
301
+ "i": { "x": [0.833], "y": [0.833] },
302
+ "o": { "x": [0.167], "y": [0.167] },
303
+ "t": 37,
304
+ "s": [100]
305
305
  },
306
306
  {
307
- i: { x: [0.833], y: [0.833] },
308
- o: { x: [0.167], y: [0.167] },
309
- t: 68,
310
- s: [80],
307
+ "i": { "x": [0.833], "y": [0.833] },
308
+ "o": { "x": [0.167], "y": [0.167] },
309
+ "t": 68,
310
+ "s": [80]
311
311
  },
312
312
  {
313
- i: { x: [0.833], y: [0.833] },
314
- o: { x: [0.167], y: [0.167] },
315
- t: 81,
316
- s: [80],
313
+ "i": { "x": [0.833], "y": [0.833] },
314
+ "o": { "x": [0.167], "y": [0.167] },
315
+ "t": 81,
316
+ "s": [80]
317
317
  },
318
- { t: 104, s: [70] },
318
+ { "t": 104, "s": [70] }
319
319
  ],
320
- ix: 5,
320
+ "ix": 5
321
321
  },
322
- r: 1,
323
- bm: 0,
324
- nm: "Riempimento 1",
325
- mn: "ADBE Vector Graphic - Fill",
326
- hd: false,
322
+ "r": 1,
323
+ "bm": 0,
324
+ "nm": "Riempimento 1",
325
+ "mn": "ADBE Vector Graphic - Fill",
326
+ "hd": false
327
327
  },
328
328
  {
329
- ty: "tr",
330
- p: { a: 0, k: [2, 0], ix: 2 },
331
- a: { a: 0, k: [0, 0], ix: 1 },
332
- s: { a: 0, k: [100, 100], ix: 3 },
333
- r: { a: 0, k: 0, ix: 6 },
334
- o: { a: 0, k: 100, ix: 7 },
335
- sk: { a: 0, k: 0, ix: 4 },
336
- sa: { a: 0, k: 0, ix: 5 },
337
- nm: "Transformer ",
338
- },
329
+ "ty": "tr",
330
+ "p": { "a": 0, "k": [2, 0], "ix": 2 },
331
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
332
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
333
+ "r": { "a": 0, "k": 0, "ix": 6 },
334
+ "o": { "a": 0, "k": 100, "ix": 7 },
335
+ "sk": { "a": 0, "k": 0, "ix": 4 },
336
+ "sa": { "a": 0, "k": 0, "ix": 5 },
337
+ "nm": "Transformer "
338
+ }
339
339
  ],
340
- nm: "Ellisse 1",
341
- np: 3,
342
- cix: 2,
343
- bm: 0,
344
- ix: 1,
345
- mn: "ADBE Vector Group",
346
- hd: false,
347
- },
340
+ "nm": "Ellisse 1",
341
+ "np": 3,
342
+ "cix": 2,
343
+ "bm": 0,
344
+ "ix": 1,
345
+ "mn": "ADBE Vector Group",
346
+ "hd": false
347
+ }
348
348
  ],
349
- ip: 0,
350
- op: 750,
351
- st: 0,
352
- bm: 0,
353
- },
349
+ "ip": 0,
350
+ "op": 750,
351
+ "st": 0,
352
+ "bm": 0
353
+ }
354
354
  ],
355
- markers: [],
355
+ "markers": []
356
356
  };
357
357
 
358
358
  export default animation;
package/src/lottie/src/dragArea.json ADDED
@@ -0,0 +1 @@
1
+ {"v":"5.9.0","fr":60,"ip":0,"op":60,"w":320,"h":320,"nm":"dragArea","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"HalfCircle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.134],"y":[0.302]},"t":7,"s":[255.577]},{"t":60,"s":[155.577]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.472},"o":{"x":0.333,"y":0},"t":13,"s":[160,160,0],"to":[0,0,0],"ti":[28.266,28.984,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.319,"y":1},"t":29,"s":[121.164,100.484,0],"to":[-28.266,-28.984,0],"ti":[0,0,0]},{"t":60,"s":[62,64.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.166,-0.033],[0,-9.389],[9.389,0],[-0.001,8.75]],"o":[[9.389,0],[0,9.389],[0.236,0.059],[0.001,-8.75]],"v":[[0,-17.167],[17,-0.167],[0,16.833],[-0.005,-0.229]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.972549019608,0.443137254902,0.443137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[6,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.178,0.178],"y":[0.135,0.135]},"t":13,"s":[0,0]},{"t":40,"s":[200,200]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Rectangle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.163],"y":[0.39]},"t":13,"s":[252.738]},{"t":60,"s":[362.738]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":13,"s":[160,160,0],"to":[0,0,0],"ti":[-35.027,16.005,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":29,"s":[227.973,140.505,0],"to":[35.027,-16.005,0],"ti":[0,0,0]},{"t":60,"s":[275.5,72.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,50,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[50,50],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.219607844949,0.741176486015,0.972549021244,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.222,0.222],"y":[0.315,0.315]},"t":13,"s":[0,0]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":40,"s":[120,120]},{"t":60,"s":[140,140]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Square","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":13,"s":[160,160,0],"to":[0,0,0],"ti":[-15.191,-19.222,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":32.5,"s":[199.809,184.278,0],"to":[15.191,19.222,0],"ti":[0,0,0]},{"t":56,"s":[221,239,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[56,56],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976470588235,0.658823529412,0.83137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":13,"s":[0,0]},{"t":60,"s":[100,100]}],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.562],"y":[1]},"o":{"x":[0.216],"y":[0]},"t":13,"s":[0]},{"t":60,"s":[-90]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Triangle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.057],"y":[0.118]},"t":13,"s":[205.174]},{"t":60,"s":[465.174]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":13,"s":[160,160,0],"to":[0,0,0],"ti":[23.043,-33.745,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":35,"s":[109.043,194.755,0],"to":[-23.043,33.745,0],"ti":[0,0,0]},{"t":60,"s":[96,269.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":2,"d":1,"pt":{"a":0,"k":3,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":90,"ix":5},"or":{"a":0,"k":28,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[0.98431372549,0.749019607843,0.141176470588,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":13,"s":[0,0]},{"t":60,"s":[140,140]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Background","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[160,160,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.986,0.986],"y":[0.929,0.929]},"o":{"x":[0.565,0.565],"y":[-0.003,-0.003]},"t":8,"s":[1,1]},{"i":{"x":[0.678,0.678],"y":[1.616,1.616]},"o":{"x":[0.16,0.16],"y":[2.739,2.739]},"t":23,"s":[96,96]},{"t":47,"s":[140,140]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Tracé d'ellipse 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.117647058824,0.160784313725,0.23137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}
package/src/stories/ContextItem.stories.tsx CHANGED
@@ -9,7 +9,10 @@ import {
9
9
  Chip,
10
10
  Cog6ToothIcon,
11
11
  ContextItem,
12
+ FolderIcon,
13
+ Icon,
12
14
  PencilSquareIcon,
15
+ RobotIcon,
13
16
  SliderToggle,
14
17
  TrashIcon,
15
18
  } from "../index_with_tw_base";
@@ -24,6 +27,23 @@ export default meta;
24
27
  export const ListItemExample = () => (
25
28
  <div>
26
29
  <ContextItem.List>
30
+ <ContextItem
31
+ title="docs.stripe.com-payments-payment-intents-verifying-status"
32
+ subElement={
33
+ <>
34
+ Added by: Edouard Wautier
35
+ <span className="s-h-3 s-w-0.5 s-bg-element-500" />
36
+ <div className="s-flex s-items-center s-gap-1">
37
+ Used by: 3
38
+ <Icon visual={RobotIcon} size="xs" />
39
+ </div>
40
+ </>
41
+ }
42
+ action={<Chip size="xs" label="Last Sync ~7 days ago" color="pink" />}
43
+ visual={<Icon visual={FolderIcon} size="md" />}
44
+ >
45
+ <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
46
+ </ContextItem>
27
47
  <ContextItem.SectionHeader
28
48
  title="Connected platforms"
29
49
  description="Platforms connected"