@frigade/react 2.0.0-alpha.4 → 2.0.0-alpha.41
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.
- package/README.md +601 -4
- package/dist/index.cjs +65 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1210 -44
- package/dist/index.js +21 -2
- package/dist/index.js.map +1 -1
- package/package.json +17 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,60 +1,1204 @@
|
|
|
1
|
+
import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
|
|
1
2
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
3
|
-
import * as
|
|
3
|
+
import React__default, { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
import * as _frigade_js from '@frigade/js';
|
|
5
|
+
import { Flow, FlowStep } from '@frigade/js';
|
|
6
|
+
import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
|
|
7
|
+
import { ControllerFieldState, Message, ValidationRule } from 'react-hook-form';
|
|
4
8
|
import * as Popover from '@radix-ui/react-popover';
|
|
5
9
|
|
|
10
|
+
declare const tokens: {
|
|
11
|
+
radii: {
|
|
12
|
+
md: string;
|
|
13
|
+
lg: string;
|
|
14
|
+
round: string;
|
|
15
|
+
};
|
|
16
|
+
shadows: {
|
|
17
|
+
md: string;
|
|
18
|
+
};
|
|
19
|
+
space: {
|
|
20
|
+
0: string;
|
|
21
|
+
4: string;
|
|
22
|
+
20: string;
|
|
23
|
+
[-20]: string;
|
|
24
|
+
19: string;
|
|
25
|
+
[-19]: string;
|
|
26
|
+
18: string;
|
|
27
|
+
[-18]: string;
|
|
28
|
+
17: string;
|
|
29
|
+
[-17]: string;
|
|
30
|
+
16: string;
|
|
31
|
+
[-16]: string;
|
|
32
|
+
15: string;
|
|
33
|
+
[-15]: string;
|
|
34
|
+
14: string;
|
|
35
|
+
[-14]: string;
|
|
36
|
+
13: string;
|
|
37
|
+
[-13]: string;
|
|
38
|
+
12: string;
|
|
39
|
+
[-12]: string;
|
|
40
|
+
11: string;
|
|
41
|
+
[-11]: string;
|
|
42
|
+
10: string;
|
|
43
|
+
[-10]: string;
|
|
44
|
+
9: string;
|
|
45
|
+
[-9]: string;
|
|
46
|
+
8: string;
|
|
47
|
+
[-8]: string;
|
|
48
|
+
7: string;
|
|
49
|
+
[-7]: string;
|
|
50
|
+
6: string;
|
|
51
|
+
[-6]: string;
|
|
52
|
+
5: string;
|
|
53
|
+
[-5]: string;
|
|
54
|
+
[-4]: string;
|
|
55
|
+
3: string;
|
|
56
|
+
[-3]: string;
|
|
57
|
+
2: string;
|
|
58
|
+
[-2]: string;
|
|
59
|
+
1: string;
|
|
60
|
+
[-1]: string;
|
|
61
|
+
0.5: string;
|
|
62
|
+
[-0.5]: string;
|
|
63
|
+
auto: string;
|
|
64
|
+
};
|
|
65
|
+
fontFamilies: {
|
|
66
|
+
default: string;
|
|
67
|
+
};
|
|
68
|
+
fontSizes: {
|
|
69
|
+
xs: string;
|
|
70
|
+
sm: string;
|
|
71
|
+
md: string;
|
|
72
|
+
lg: string;
|
|
73
|
+
xl: string;
|
|
74
|
+
'2xl': string;
|
|
75
|
+
'3xl': string;
|
|
76
|
+
'4xl': string;
|
|
77
|
+
'5xl': string;
|
|
78
|
+
};
|
|
79
|
+
fontWeights: {
|
|
80
|
+
thin: string;
|
|
81
|
+
extralight: string;
|
|
82
|
+
light: string;
|
|
83
|
+
regular: string;
|
|
84
|
+
medium: string;
|
|
85
|
+
demibold: string;
|
|
86
|
+
bold: string;
|
|
87
|
+
extrabold: string;
|
|
88
|
+
black: string;
|
|
89
|
+
};
|
|
90
|
+
letterSpacings: {
|
|
91
|
+
md: string;
|
|
92
|
+
};
|
|
93
|
+
lineHeights: {
|
|
94
|
+
xs: string;
|
|
95
|
+
sm: string;
|
|
96
|
+
md: string;
|
|
97
|
+
lg: string;
|
|
98
|
+
xl: string;
|
|
99
|
+
'2xl': string;
|
|
100
|
+
'3xl': string;
|
|
101
|
+
'4xl': string;
|
|
102
|
+
};
|
|
103
|
+
colors: {
|
|
104
|
+
neutral: {
|
|
105
|
+
background: string;
|
|
106
|
+
border: string;
|
|
107
|
+
foreground: string;
|
|
108
|
+
surface: string;
|
|
109
|
+
active: {
|
|
110
|
+
background: string;
|
|
111
|
+
border: string;
|
|
112
|
+
foreground: string;
|
|
113
|
+
surface: string;
|
|
114
|
+
};
|
|
115
|
+
focus: {
|
|
116
|
+
background: string;
|
|
117
|
+
border: string;
|
|
118
|
+
foreground: string;
|
|
119
|
+
surface: string;
|
|
120
|
+
};
|
|
121
|
+
hover: {
|
|
122
|
+
background: string;
|
|
123
|
+
border: string;
|
|
124
|
+
foreground: string;
|
|
125
|
+
surface: string;
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
primary: {
|
|
129
|
+
background: string;
|
|
130
|
+
border: string;
|
|
131
|
+
foreground: string;
|
|
132
|
+
surface: string;
|
|
133
|
+
active: {
|
|
134
|
+
background: string;
|
|
135
|
+
border: string;
|
|
136
|
+
foreground: string;
|
|
137
|
+
surface: string;
|
|
138
|
+
};
|
|
139
|
+
focus: {
|
|
140
|
+
background: string;
|
|
141
|
+
border: string;
|
|
142
|
+
foreground: string;
|
|
143
|
+
surface: string;
|
|
144
|
+
};
|
|
145
|
+
hover: {
|
|
146
|
+
background: string;
|
|
147
|
+
border: string;
|
|
148
|
+
foreground: string;
|
|
149
|
+
surface: string;
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
secondary: {
|
|
153
|
+
background: string;
|
|
154
|
+
border: string;
|
|
155
|
+
foreground: string;
|
|
156
|
+
surface: string;
|
|
157
|
+
active: {
|
|
158
|
+
background: string;
|
|
159
|
+
border: string;
|
|
160
|
+
foreground: string;
|
|
161
|
+
surface: string;
|
|
162
|
+
};
|
|
163
|
+
focus: {
|
|
164
|
+
background: string;
|
|
165
|
+
border: string;
|
|
166
|
+
foreground: string;
|
|
167
|
+
surface: string;
|
|
168
|
+
};
|
|
169
|
+
hover: {
|
|
170
|
+
background: string;
|
|
171
|
+
border: string;
|
|
172
|
+
foreground: string;
|
|
173
|
+
surface: string;
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
black: string;
|
|
177
|
+
gray100: string;
|
|
178
|
+
gray200: string;
|
|
179
|
+
gray300: string;
|
|
180
|
+
gray400: string;
|
|
181
|
+
gray500: string;
|
|
182
|
+
gray600: string;
|
|
183
|
+
gray700: string;
|
|
184
|
+
gray800: string;
|
|
185
|
+
gray900: string;
|
|
186
|
+
white: string;
|
|
187
|
+
blue400: string;
|
|
188
|
+
blue500: string;
|
|
189
|
+
blue800: string;
|
|
190
|
+
blue900: string;
|
|
191
|
+
green400: string;
|
|
192
|
+
green500: string;
|
|
193
|
+
green800: string;
|
|
194
|
+
transparent: string;
|
|
195
|
+
inherit: string;
|
|
196
|
+
red500: string;
|
|
197
|
+
};
|
|
198
|
+
borders: {
|
|
199
|
+
md: string;
|
|
200
|
+
};
|
|
201
|
+
borderWidths: {
|
|
202
|
+
0: string;
|
|
203
|
+
md: string;
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
type Tokens = typeof tokens;
|
|
207
|
+
|
|
208
|
+
type Theme = Partial<Tokens>;
|
|
209
|
+
declare const theme: Partial<{
|
|
210
|
+
radii: {
|
|
211
|
+
md: string;
|
|
212
|
+
lg: string;
|
|
213
|
+
round: string;
|
|
214
|
+
};
|
|
215
|
+
shadows: {
|
|
216
|
+
md: string;
|
|
217
|
+
};
|
|
218
|
+
space: {
|
|
219
|
+
0: string;
|
|
220
|
+
4: string;
|
|
221
|
+
20: string;
|
|
222
|
+
[-20]: string;
|
|
223
|
+
19: string;
|
|
224
|
+
[-19]: string;
|
|
225
|
+
18: string;
|
|
226
|
+
[-18]: string;
|
|
227
|
+
17: string;
|
|
228
|
+
[-17]: string;
|
|
229
|
+
16: string;
|
|
230
|
+
[-16]: string;
|
|
231
|
+
15: string;
|
|
232
|
+
[-15]: string;
|
|
233
|
+
14: string;
|
|
234
|
+
[-14]: string;
|
|
235
|
+
13: string;
|
|
236
|
+
[-13]: string;
|
|
237
|
+
12: string;
|
|
238
|
+
[-12]: string;
|
|
239
|
+
11: string;
|
|
240
|
+
[-11]: string;
|
|
241
|
+
10: string;
|
|
242
|
+
[-10]: string;
|
|
243
|
+
9: string;
|
|
244
|
+
[-9]: string;
|
|
245
|
+
8: string;
|
|
246
|
+
[-8]: string;
|
|
247
|
+
7: string;
|
|
248
|
+
[-7]: string;
|
|
249
|
+
6: string;
|
|
250
|
+
[-6]: string;
|
|
251
|
+
5: string;
|
|
252
|
+
[-5]: string;
|
|
253
|
+
[-4]: string;
|
|
254
|
+
3: string;
|
|
255
|
+
[-3]: string;
|
|
256
|
+
2: string;
|
|
257
|
+
[-2]: string;
|
|
258
|
+
1: string;
|
|
259
|
+
[-1]: string;
|
|
260
|
+
0.5: string;
|
|
261
|
+
[-0.5]: string;
|
|
262
|
+
auto: string;
|
|
263
|
+
};
|
|
264
|
+
fontFamilies: {
|
|
265
|
+
default: string;
|
|
266
|
+
};
|
|
267
|
+
fontSizes: {
|
|
268
|
+
xs: string;
|
|
269
|
+
sm: string;
|
|
270
|
+
md: string;
|
|
271
|
+
lg: string;
|
|
272
|
+
xl: string;
|
|
273
|
+
'2xl': string;
|
|
274
|
+
'3xl': string;
|
|
275
|
+
'4xl': string;
|
|
276
|
+
'5xl': string;
|
|
277
|
+
};
|
|
278
|
+
fontWeights: {
|
|
279
|
+
thin: string;
|
|
280
|
+
extralight: string;
|
|
281
|
+
light: string;
|
|
282
|
+
regular: string;
|
|
283
|
+
medium: string;
|
|
284
|
+
demibold: string;
|
|
285
|
+
bold: string;
|
|
286
|
+
extrabold: string;
|
|
287
|
+
black: string;
|
|
288
|
+
};
|
|
289
|
+
letterSpacings: {
|
|
290
|
+
md: string;
|
|
291
|
+
};
|
|
292
|
+
lineHeights: {
|
|
293
|
+
xs: string;
|
|
294
|
+
sm: string;
|
|
295
|
+
md: string;
|
|
296
|
+
lg: string;
|
|
297
|
+
xl: string;
|
|
298
|
+
'2xl': string;
|
|
299
|
+
'3xl': string;
|
|
300
|
+
'4xl': string;
|
|
301
|
+
};
|
|
302
|
+
colors: {
|
|
303
|
+
neutral: {
|
|
304
|
+
background: string;
|
|
305
|
+
border: string;
|
|
306
|
+
foreground: string;
|
|
307
|
+
surface: string;
|
|
308
|
+
active: {
|
|
309
|
+
background: string;
|
|
310
|
+
border: string;
|
|
311
|
+
foreground: string;
|
|
312
|
+
surface: string;
|
|
313
|
+
};
|
|
314
|
+
focus: {
|
|
315
|
+
background: string;
|
|
316
|
+
border: string;
|
|
317
|
+
foreground: string;
|
|
318
|
+
surface: string;
|
|
319
|
+
};
|
|
320
|
+
hover: {
|
|
321
|
+
background: string;
|
|
322
|
+
border: string;
|
|
323
|
+
foreground: string;
|
|
324
|
+
surface: string;
|
|
325
|
+
};
|
|
326
|
+
};
|
|
327
|
+
primary: {
|
|
328
|
+
background: string;
|
|
329
|
+
border: string;
|
|
330
|
+
foreground: string;
|
|
331
|
+
surface: string;
|
|
332
|
+
active: {
|
|
333
|
+
background: string;
|
|
334
|
+
border: string;
|
|
335
|
+
foreground: string;
|
|
336
|
+
surface: string;
|
|
337
|
+
};
|
|
338
|
+
focus: {
|
|
339
|
+
background: string;
|
|
340
|
+
border: string;
|
|
341
|
+
foreground: string;
|
|
342
|
+
surface: string;
|
|
343
|
+
};
|
|
344
|
+
hover: {
|
|
345
|
+
background: string;
|
|
346
|
+
border: string;
|
|
347
|
+
foreground: string;
|
|
348
|
+
surface: string;
|
|
349
|
+
};
|
|
350
|
+
};
|
|
351
|
+
secondary: {
|
|
352
|
+
background: string;
|
|
353
|
+
border: string;
|
|
354
|
+
foreground: string;
|
|
355
|
+
surface: string;
|
|
356
|
+
active: {
|
|
357
|
+
background: string;
|
|
358
|
+
border: string;
|
|
359
|
+
foreground: string;
|
|
360
|
+
surface: string;
|
|
361
|
+
};
|
|
362
|
+
focus: {
|
|
363
|
+
background: string;
|
|
364
|
+
border: string;
|
|
365
|
+
foreground: string;
|
|
366
|
+
surface: string;
|
|
367
|
+
};
|
|
368
|
+
hover: {
|
|
369
|
+
background: string;
|
|
370
|
+
border: string;
|
|
371
|
+
foreground: string;
|
|
372
|
+
surface: string;
|
|
373
|
+
};
|
|
374
|
+
};
|
|
375
|
+
black: string;
|
|
376
|
+
gray100: string;
|
|
377
|
+
gray200: string;
|
|
378
|
+
gray300: string;
|
|
379
|
+
gray400: string;
|
|
380
|
+
gray500: string;
|
|
381
|
+
gray600: string;
|
|
382
|
+
gray700: string;
|
|
383
|
+
gray800: string;
|
|
384
|
+
gray900: string;
|
|
385
|
+
white: string;
|
|
386
|
+
blue400: string;
|
|
387
|
+
blue500: string;
|
|
388
|
+
blue800: string;
|
|
389
|
+
blue900: string;
|
|
390
|
+
green400: string;
|
|
391
|
+
green500: string;
|
|
392
|
+
green800: string;
|
|
393
|
+
transparent: string;
|
|
394
|
+
inherit: string;
|
|
395
|
+
red500: string;
|
|
396
|
+
};
|
|
397
|
+
borders: {
|
|
398
|
+
md: string;
|
|
399
|
+
};
|
|
400
|
+
borderWidths: {
|
|
401
|
+
0: string;
|
|
402
|
+
md: string;
|
|
403
|
+
};
|
|
404
|
+
}>;
|
|
405
|
+
|
|
406
|
+
type PathsToStringProps<T> = T extends string ? [] : {
|
|
407
|
+
[K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
|
|
408
|
+
}[Extract<keyof T, string>];
|
|
409
|
+
type Join<T extends string[], D extends string> = T extends [] ? never : T extends [infer F] ? F : T extends [infer F, ...infer R] ? F extends string ? `${F}${D}${Join<Extract<R, string[]>, D>}` : never : string;
|
|
410
|
+
type ColorName = Join<PathsToStringProps<typeof theme.colors>, '.'>;
|
|
411
|
+
declare const themedStyleProps: {
|
|
412
|
+
readonly color: Record<ColorName, string>;
|
|
413
|
+
readonly backgroundColor: Record<ColorName, string>;
|
|
414
|
+
readonly borderColor: Record<ColorName, string>;
|
|
415
|
+
readonly border: {
|
|
416
|
+
md: string;
|
|
417
|
+
};
|
|
418
|
+
readonly borderRadius: {
|
|
419
|
+
md: string;
|
|
420
|
+
lg: string;
|
|
421
|
+
round: string;
|
|
422
|
+
};
|
|
423
|
+
readonly borderWidth: {
|
|
424
|
+
0: string;
|
|
425
|
+
md: string;
|
|
426
|
+
};
|
|
427
|
+
readonly boxShadow: {
|
|
428
|
+
md: string;
|
|
429
|
+
};
|
|
430
|
+
readonly fontFamily: {
|
|
431
|
+
default: string;
|
|
432
|
+
};
|
|
433
|
+
readonly fontSize: {
|
|
434
|
+
xs: string;
|
|
435
|
+
sm: string;
|
|
436
|
+
md: string;
|
|
437
|
+
lg: string;
|
|
438
|
+
xl: string;
|
|
439
|
+
'2xl': string;
|
|
440
|
+
'3xl': string;
|
|
441
|
+
'4xl': string;
|
|
442
|
+
'5xl': string;
|
|
443
|
+
};
|
|
444
|
+
readonly fontWeight: {
|
|
445
|
+
thin: string;
|
|
446
|
+
extralight: string;
|
|
447
|
+
light: string;
|
|
448
|
+
regular: string;
|
|
449
|
+
medium: string;
|
|
450
|
+
demibold: string;
|
|
451
|
+
bold: string;
|
|
452
|
+
extrabold: string;
|
|
453
|
+
black: string;
|
|
454
|
+
};
|
|
455
|
+
readonly gap: {
|
|
456
|
+
0: string;
|
|
457
|
+
4: string;
|
|
458
|
+
20: string;
|
|
459
|
+
[-20]: string;
|
|
460
|
+
19: string;
|
|
461
|
+
[-19]: string;
|
|
462
|
+
18: string;
|
|
463
|
+
[-18]: string;
|
|
464
|
+
17: string;
|
|
465
|
+
[-17]: string;
|
|
466
|
+
16: string;
|
|
467
|
+
[-16]: string;
|
|
468
|
+
15: string;
|
|
469
|
+
[-15]: string;
|
|
470
|
+
14: string;
|
|
471
|
+
[-14]: string;
|
|
472
|
+
13: string;
|
|
473
|
+
[-13]: string;
|
|
474
|
+
12: string;
|
|
475
|
+
[-12]: string;
|
|
476
|
+
11: string;
|
|
477
|
+
[-11]: string;
|
|
478
|
+
10: string;
|
|
479
|
+
[-10]: string;
|
|
480
|
+
9: string;
|
|
481
|
+
[-9]: string;
|
|
482
|
+
8: string;
|
|
483
|
+
[-8]: string;
|
|
484
|
+
7: string;
|
|
485
|
+
[-7]: string;
|
|
486
|
+
6: string;
|
|
487
|
+
[-6]: string;
|
|
488
|
+
5: string;
|
|
489
|
+
[-5]: string;
|
|
490
|
+
[-4]: string;
|
|
491
|
+
3: string;
|
|
492
|
+
[-3]: string;
|
|
493
|
+
2: string;
|
|
494
|
+
[-2]: string;
|
|
495
|
+
1: string;
|
|
496
|
+
[-1]: string;
|
|
497
|
+
0.5: string;
|
|
498
|
+
[-0.5]: string;
|
|
499
|
+
auto: string;
|
|
500
|
+
};
|
|
501
|
+
readonly lineHeight: {
|
|
502
|
+
xs: string;
|
|
503
|
+
sm: string;
|
|
504
|
+
md: string;
|
|
505
|
+
lg: string;
|
|
506
|
+
xl: string;
|
|
507
|
+
'2xl': string;
|
|
508
|
+
'3xl': string;
|
|
509
|
+
'4xl': string;
|
|
510
|
+
};
|
|
511
|
+
readonly margin: {
|
|
512
|
+
0: string;
|
|
513
|
+
4: string;
|
|
514
|
+
20: string;
|
|
515
|
+
[-20]: string;
|
|
516
|
+
19: string;
|
|
517
|
+
[-19]: string;
|
|
518
|
+
18: string;
|
|
519
|
+
[-18]: string;
|
|
520
|
+
17: string;
|
|
521
|
+
[-17]: string;
|
|
522
|
+
16: string;
|
|
523
|
+
[-16]: string;
|
|
524
|
+
15: string;
|
|
525
|
+
[-15]: string;
|
|
526
|
+
14: string;
|
|
527
|
+
[-14]: string;
|
|
528
|
+
13: string;
|
|
529
|
+
[-13]: string;
|
|
530
|
+
12: string;
|
|
531
|
+
[-12]: string;
|
|
532
|
+
11: string;
|
|
533
|
+
[-11]: string;
|
|
534
|
+
10: string;
|
|
535
|
+
[-10]: string;
|
|
536
|
+
9: string;
|
|
537
|
+
[-9]: string;
|
|
538
|
+
8: string;
|
|
539
|
+
[-8]: string;
|
|
540
|
+
7: string;
|
|
541
|
+
[-7]: string;
|
|
542
|
+
6: string;
|
|
543
|
+
[-6]: string;
|
|
544
|
+
5: string;
|
|
545
|
+
[-5]: string;
|
|
546
|
+
[-4]: string;
|
|
547
|
+
3: string;
|
|
548
|
+
[-3]: string;
|
|
549
|
+
2: string;
|
|
550
|
+
[-2]: string;
|
|
551
|
+
1: string;
|
|
552
|
+
[-1]: string;
|
|
553
|
+
0.5: string;
|
|
554
|
+
[-0.5]: string;
|
|
555
|
+
auto: string;
|
|
556
|
+
};
|
|
557
|
+
readonly marginBottom: {
|
|
558
|
+
0: string;
|
|
559
|
+
4: string;
|
|
560
|
+
20: string;
|
|
561
|
+
[-20]: string;
|
|
562
|
+
19: string;
|
|
563
|
+
[-19]: string;
|
|
564
|
+
18: string;
|
|
565
|
+
[-18]: string;
|
|
566
|
+
17: string;
|
|
567
|
+
[-17]: string;
|
|
568
|
+
16: string;
|
|
569
|
+
[-16]: string;
|
|
570
|
+
15: string;
|
|
571
|
+
[-15]: string;
|
|
572
|
+
14: string;
|
|
573
|
+
[-14]: string;
|
|
574
|
+
13: string;
|
|
575
|
+
[-13]: string;
|
|
576
|
+
12: string;
|
|
577
|
+
[-12]: string;
|
|
578
|
+
11: string;
|
|
579
|
+
[-11]: string;
|
|
580
|
+
10: string;
|
|
581
|
+
[-10]: string;
|
|
582
|
+
9: string;
|
|
583
|
+
[-9]: string;
|
|
584
|
+
8: string;
|
|
585
|
+
[-8]: string;
|
|
586
|
+
7: string;
|
|
587
|
+
[-7]: string;
|
|
588
|
+
6: string;
|
|
589
|
+
[-6]: string;
|
|
590
|
+
5: string;
|
|
591
|
+
[-5]: string;
|
|
592
|
+
[-4]: string;
|
|
593
|
+
3: string;
|
|
594
|
+
[-3]: string;
|
|
595
|
+
2: string;
|
|
596
|
+
[-2]: string;
|
|
597
|
+
1: string;
|
|
598
|
+
[-1]: string;
|
|
599
|
+
0.5: string;
|
|
600
|
+
[-0.5]: string;
|
|
601
|
+
auto: string;
|
|
602
|
+
};
|
|
603
|
+
readonly marginLeft: {
|
|
604
|
+
0: string;
|
|
605
|
+
4: string;
|
|
606
|
+
20: string;
|
|
607
|
+
[-20]: string;
|
|
608
|
+
19: string;
|
|
609
|
+
[-19]: string;
|
|
610
|
+
18: string;
|
|
611
|
+
[-18]: string;
|
|
612
|
+
17: string;
|
|
613
|
+
[-17]: string;
|
|
614
|
+
16: string;
|
|
615
|
+
[-16]: string;
|
|
616
|
+
15: string;
|
|
617
|
+
[-15]: string;
|
|
618
|
+
14: string;
|
|
619
|
+
[-14]: string;
|
|
620
|
+
13: string;
|
|
621
|
+
[-13]: string;
|
|
622
|
+
12: string;
|
|
623
|
+
[-12]: string;
|
|
624
|
+
11: string;
|
|
625
|
+
[-11]: string;
|
|
626
|
+
10: string;
|
|
627
|
+
[-10]: string;
|
|
628
|
+
9: string;
|
|
629
|
+
[-9]: string;
|
|
630
|
+
8: string;
|
|
631
|
+
[-8]: string;
|
|
632
|
+
7: string;
|
|
633
|
+
[-7]: string;
|
|
634
|
+
6: string;
|
|
635
|
+
[-6]: string;
|
|
636
|
+
5: string;
|
|
637
|
+
[-5]: string;
|
|
638
|
+
[-4]: string;
|
|
639
|
+
3: string;
|
|
640
|
+
[-3]: string;
|
|
641
|
+
2: string;
|
|
642
|
+
[-2]: string;
|
|
643
|
+
1: string;
|
|
644
|
+
[-1]: string;
|
|
645
|
+
0.5: string;
|
|
646
|
+
[-0.5]: string;
|
|
647
|
+
auto: string;
|
|
648
|
+
};
|
|
649
|
+
readonly marginRight: {
|
|
650
|
+
0: string;
|
|
651
|
+
4: string;
|
|
652
|
+
20: string;
|
|
653
|
+
[-20]: string;
|
|
654
|
+
19: string;
|
|
655
|
+
[-19]: string;
|
|
656
|
+
18: string;
|
|
657
|
+
[-18]: string;
|
|
658
|
+
17: string;
|
|
659
|
+
[-17]: string;
|
|
660
|
+
16: string;
|
|
661
|
+
[-16]: string;
|
|
662
|
+
15: string;
|
|
663
|
+
[-15]: string;
|
|
664
|
+
14: string;
|
|
665
|
+
[-14]: string;
|
|
666
|
+
13: string;
|
|
667
|
+
[-13]: string;
|
|
668
|
+
12: string;
|
|
669
|
+
[-12]: string;
|
|
670
|
+
11: string;
|
|
671
|
+
[-11]: string;
|
|
672
|
+
10: string;
|
|
673
|
+
[-10]: string;
|
|
674
|
+
9: string;
|
|
675
|
+
[-9]: string;
|
|
676
|
+
8: string;
|
|
677
|
+
[-8]: string;
|
|
678
|
+
7: string;
|
|
679
|
+
[-7]: string;
|
|
680
|
+
6: string;
|
|
681
|
+
[-6]: string;
|
|
682
|
+
5: string;
|
|
683
|
+
[-5]: string;
|
|
684
|
+
[-4]: string;
|
|
685
|
+
3: string;
|
|
686
|
+
[-3]: string;
|
|
687
|
+
2: string;
|
|
688
|
+
[-2]: string;
|
|
689
|
+
1: string;
|
|
690
|
+
[-1]: string;
|
|
691
|
+
0.5: string;
|
|
692
|
+
[-0.5]: string;
|
|
693
|
+
auto: string;
|
|
694
|
+
};
|
|
695
|
+
readonly marginTop: {
|
|
696
|
+
0: string;
|
|
697
|
+
4: string;
|
|
698
|
+
20: string;
|
|
699
|
+
[-20]: string;
|
|
700
|
+
19: string;
|
|
701
|
+
[-19]: string;
|
|
702
|
+
18: string;
|
|
703
|
+
[-18]: string;
|
|
704
|
+
17: string;
|
|
705
|
+
[-17]: string;
|
|
706
|
+
16: string;
|
|
707
|
+
[-16]: string;
|
|
708
|
+
15: string;
|
|
709
|
+
[-15]: string;
|
|
710
|
+
14: string;
|
|
711
|
+
[-14]: string;
|
|
712
|
+
13: string;
|
|
713
|
+
[-13]: string;
|
|
714
|
+
12: string;
|
|
715
|
+
[-12]: string;
|
|
716
|
+
11: string;
|
|
717
|
+
[-11]: string;
|
|
718
|
+
10: string;
|
|
719
|
+
[-10]: string;
|
|
720
|
+
9: string;
|
|
721
|
+
[-9]: string;
|
|
722
|
+
8: string;
|
|
723
|
+
[-8]: string;
|
|
724
|
+
7: string;
|
|
725
|
+
[-7]: string;
|
|
726
|
+
6: string;
|
|
727
|
+
[-6]: string;
|
|
728
|
+
5: string;
|
|
729
|
+
[-5]: string;
|
|
730
|
+
[-4]: string;
|
|
731
|
+
3: string;
|
|
732
|
+
[-3]: string;
|
|
733
|
+
2: string;
|
|
734
|
+
[-2]: string;
|
|
735
|
+
1: string;
|
|
736
|
+
[-1]: string;
|
|
737
|
+
0.5: string;
|
|
738
|
+
[-0.5]: string;
|
|
739
|
+
auto: string;
|
|
740
|
+
};
|
|
741
|
+
readonly padding: {
|
|
742
|
+
0: string;
|
|
743
|
+
4: string;
|
|
744
|
+
20: string;
|
|
745
|
+
[-20]: string;
|
|
746
|
+
19: string;
|
|
747
|
+
[-19]: string;
|
|
748
|
+
18: string;
|
|
749
|
+
[-18]: string;
|
|
750
|
+
17: string;
|
|
751
|
+
[-17]: string;
|
|
752
|
+
16: string;
|
|
753
|
+
[-16]: string;
|
|
754
|
+
15: string;
|
|
755
|
+
[-15]: string;
|
|
756
|
+
14: string;
|
|
757
|
+
[-14]: string;
|
|
758
|
+
13: string;
|
|
759
|
+
[-13]: string;
|
|
760
|
+
12: string;
|
|
761
|
+
[-12]: string;
|
|
762
|
+
11: string;
|
|
763
|
+
[-11]: string;
|
|
764
|
+
10: string;
|
|
765
|
+
[-10]: string;
|
|
766
|
+
9: string;
|
|
767
|
+
[-9]: string;
|
|
768
|
+
8: string;
|
|
769
|
+
[-8]: string;
|
|
770
|
+
7: string;
|
|
771
|
+
[-7]: string;
|
|
772
|
+
6: string;
|
|
773
|
+
[-6]: string;
|
|
774
|
+
5: string;
|
|
775
|
+
[-5]: string;
|
|
776
|
+
[-4]: string;
|
|
777
|
+
3: string;
|
|
778
|
+
[-3]: string;
|
|
779
|
+
2: string;
|
|
780
|
+
[-2]: string;
|
|
781
|
+
1: string;
|
|
782
|
+
[-1]: string;
|
|
783
|
+
0.5: string;
|
|
784
|
+
[-0.5]: string;
|
|
785
|
+
auto: string;
|
|
786
|
+
};
|
|
787
|
+
readonly paddingBottom: {
|
|
788
|
+
0: string;
|
|
789
|
+
4: string;
|
|
790
|
+
20: string;
|
|
791
|
+
[-20]: string;
|
|
792
|
+
19: string;
|
|
793
|
+
[-19]: string;
|
|
794
|
+
18: string;
|
|
795
|
+
[-18]: string;
|
|
796
|
+
17: string;
|
|
797
|
+
[-17]: string;
|
|
798
|
+
16: string;
|
|
799
|
+
[-16]: string;
|
|
800
|
+
15: string;
|
|
801
|
+
[-15]: string;
|
|
802
|
+
14: string;
|
|
803
|
+
[-14]: string;
|
|
804
|
+
13: string;
|
|
805
|
+
[-13]: string;
|
|
806
|
+
12: string;
|
|
807
|
+
[-12]: string;
|
|
808
|
+
11: string;
|
|
809
|
+
[-11]: string;
|
|
810
|
+
10: string;
|
|
811
|
+
[-10]: string;
|
|
812
|
+
9: string;
|
|
813
|
+
[-9]: string;
|
|
814
|
+
8: string;
|
|
815
|
+
[-8]: string;
|
|
816
|
+
7: string;
|
|
817
|
+
[-7]: string;
|
|
818
|
+
6: string;
|
|
819
|
+
[-6]: string;
|
|
820
|
+
5: string;
|
|
821
|
+
[-5]: string;
|
|
822
|
+
[-4]: string;
|
|
823
|
+
3: string;
|
|
824
|
+
[-3]: string;
|
|
825
|
+
2: string;
|
|
826
|
+
[-2]: string;
|
|
827
|
+
1: string;
|
|
828
|
+
[-1]: string;
|
|
829
|
+
0.5: string;
|
|
830
|
+
[-0.5]: string;
|
|
831
|
+
auto: string;
|
|
832
|
+
};
|
|
833
|
+
readonly paddingLeft: {
|
|
834
|
+
0: string;
|
|
835
|
+
4: string;
|
|
836
|
+
20: string;
|
|
837
|
+
[-20]: string;
|
|
838
|
+
19: string;
|
|
839
|
+
[-19]: string;
|
|
840
|
+
18: string;
|
|
841
|
+
[-18]: string;
|
|
842
|
+
17: string;
|
|
843
|
+
[-17]: string;
|
|
844
|
+
16: string;
|
|
845
|
+
[-16]: string;
|
|
846
|
+
15: string;
|
|
847
|
+
[-15]: string;
|
|
848
|
+
14: string;
|
|
849
|
+
[-14]: string;
|
|
850
|
+
13: string;
|
|
851
|
+
[-13]: string;
|
|
852
|
+
12: string;
|
|
853
|
+
[-12]: string;
|
|
854
|
+
11: string;
|
|
855
|
+
[-11]: string;
|
|
856
|
+
10: string;
|
|
857
|
+
[-10]: string;
|
|
858
|
+
9: string;
|
|
859
|
+
[-9]: string;
|
|
860
|
+
8: string;
|
|
861
|
+
[-8]: string;
|
|
862
|
+
7: string;
|
|
863
|
+
[-7]: string;
|
|
864
|
+
6: string;
|
|
865
|
+
[-6]: string;
|
|
866
|
+
5: string;
|
|
867
|
+
[-5]: string;
|
|
868
|
+
[-4]: string;
|
|
869
|
+
3: string;
|
|
870
|
+
[-3]: string;
|
|
871
|
+
2: string;
|
|
872
|
+
[-2]: string;
|
|
873
|
+
1: string;
|
|
874
|
+
[-1]: string;
|
|
875
|
+
0.5: string;
|
|
876
|
+
[-0.5]: string;
|
|
877
|
+
auto: string;
|
|
878
|
+
};
|
|
879
|
+
readonly paddingRight: {
|
|
880
|
+
0: string;
|
|
881
|
+
4: string;
|
|
882
|
+
20: string;
|
|
883
|
+
[-20]: string;
|
|
884
|
+
19: string;
|
|
885
|
+
[-19]: string;
|
|
886
|
+
18: string;
|
|
887
|
+
[-18]: string;
|
|
888
|
+
17: string;
|
|
889
|
+
[-17]: string;
|
|
890
|
+
16: string;
|
|
891
|
+
[-16]: string;
|
|
892
|
+
15: string;
|
|
893
|
+
[-15]: string;
|
|
894
|
+
14: string;
|
|
895
|
+
[-14]: string;
|
|
896
|
+
13: string;
|
|
897
|
+
[-13]: string;
|
|
898
|
+
12: string;
|
|
899
|
+
[-12]: string;
|
|
900
|
+
11: string;
|
|
901
|
+
[-11]: string;
|
|
902
|
+
10: string;
|
|
903
|
+
[-10]: string;
|
|
904
|
+
9: string;
|
|
905
|
+
[-9]: string;
|
|
906
|
+
8: string;
|
|
907
|
+
[-8]: string;
|
|
908
|
+
7: string;
|
|
909
|
+
[-7]: string;
|
|
910
|
+
6: string;
|
|
911
|
+
[-6]: string;
|
|
912
|
+
5: string;
|
|
913
|
+
[-5]: string;
|
|
914
|
+
[-4]: string;
|
|
915
|
+
3: string;
|
|
916
|
+
[-3]: string;
|
|
917
|
+
2: string;
|
|
918
|
+
[-2]: string;
|
|
919
|
+
1: string;
|
|
920
|
+
[-1]: string;
|
|
921
|
+
0.5: string;
|
|
922
|
+
[-0.5]: string;
|
|
923
|
+
auto: string;
|
|
924
|
+
};
|
|
925
|
+
readonly paddingTop: {
|
|
926
|
+
0: string;
|
|
927
|
+
4: string;
|
|
928
|
+
20: string;
|
|
929
|
+
[-20]: string;
|
|
930
|
+
19: string;
|
|
931
|
+
[-19]: string;
|
|
932
|
+
18: string;
|
|
933
|
+
[-18]: string;
|
|
934
|
+
17: string;
|
|
935
|
+
[-17]: string;
|
|
936
|
+
16: string;
|
|
937
|
+
[-16]: string;
|
|
938
|
+
15: string;
|
|
939
|
+
[-15]: string;
|
|
940
|
+
14: string;
|
|
941
|
+
[-14]: string;
|
|
942
|
+
13: string;
|
|
943
|
+
[-13]: string;
|
|
944
|
+
12: string;
|
|
945
|
+
[-12]: string;
|
|
946
|
+
11: string;
|
|
947
|
+
[-11]: string;
|
|
948
|
+
10: string;
|
|
949
|
+
[-10]: string;
|
|
950
|
+
9: string;
|
|
951
|
+
[-9]: string;
|
|
952
|
+
8: string;
|
|
953
|
+
[-8]: string;
|
|
954
|
+
7: string;
|
|
955
|
+
[-7]: string;
|
|
956
|
+
6: string;
|
|
957
|
+
[-6]: string;
|
|
958
|
+
5: string;
|
|
959
|
+
[-5]: string;
|
|
960
|
+
[-4]: string;
|
|
961
|
+
3: string;
|
|
962
|
+
[-3]: string;
|
|
963
|
+
2: string;
|
|
964
|
+
[-2]: string;
|
|
965
|
+
1: string;
|
|
966
|
+
[-1]: string;
|
|
967
|
+
0.5: string;
|
|
968
|
+
[-0.5]: string;
|
|
969
|
+
auto: string;
|
|
970
|
+
};
|
|
971
|
+
};
|
|
972
|
+
declare const stylePropShorthands: {
|
|
973
|
+
readonly bg: readonly ["backgroundColor"];
|
|
974
|
+
readonly m: readonly ["margin"];
|
|
975
|
+
readonly mt: readonly ["marginTop"];
|
|
976
|
+
readonly mr: readonly ["marginRight"];
|
|
977
|
+
readonly mb: readonly ["marginBottom"];
|
|
978
|
+
readonly ml: readonly ["marginLeft"];
|
|
979
|
+
readonly mx: readonly ["marginLeft", "marginRight"];
|
|
980
|
+
readonly my: readonly ["marginTop", "marginBottom"];
|
|
981
|
+
readonly p: readonly ["padding"];
|
|
982
|
+
readonly pt: readonly ["paddingTop"];
|
|
983
|
+
readonly pr: readonly ["paddingRight"];
|
|
984
|
+
readonly pb: readonly ["paddingBottom"];
|
|
985
|
+
readonly pl: readonly ["paddingLeft"];
|
|
986
|
+
readonly px: readonly ["paddingLeft", "paddingRight"];
|
|
987
|
+
readonly py: readonly ["paddingTop", "paddingBottom"];
|
|
988
|
+
};
|
|
989
|
+
type ThemedStyleProps = {
|
|
990
|
+
[K in keyof typeof themedStyleProps]: keyof (typeof themedStyleProps)[K];
|
|
991
|
+
};
|
|
992
|
+
type FilteredCSSProps = Omit<{
|
|
993
|
+
[key in keyof CSSProperties]: CSSProperties[key];
|
|
994
|
+
}, `-${string}` | `Moz${string}` | `ms${string}` | `Webkit${string}` | `Khtml${string}` | `O${string}`>;
|
|
995
|
+
type ThemedStyleProp<K extends keyof ThemedStyleProps> = ThemedStyleProps[K] | (string & {});
|
|
996
|
+
type StylePropShorthands = {
|
|
997
|
+
[K in keyof typeof stylePropShorthands]?: ThemedStyleProp<(typeof stylePropShorthands)[K][0]>;
|
|
998
|
+
};
|
|
999
|
+
interface StyleProps extends FilteredCSSProps, StylePropShorthands {
|
|
1000
|
+
backgroundColor?: ThemedStyleProp<'backgroundColor'>;
|
|
1001
|
+
border?: ThemedStyleProp<'border'>;
|
|
1002
|
+
borderColor?: ThemedStyleProp<'borderColor'>;
|
|
1003
|
+
borderRadius?: ThemedStyleProp<'borderRadius'>;
|
|
1004
|
+
borderWidth?: ThemedStyleProp<'borderWidth'>;
|
|
1005
|
+
boxShadow?: ThemedStyleProp<'boxShadow'>;
|
|
1006
|
+
color?: ThemedStyleProp<'color'>;
|
|
1007
|
+
fontFamily?: ThemedStyleProp<'fontFamily'>;
|
|
1008
|
+
fontSize?: ThemedStyleProp<'fontSize'>;
|
|
1009
|
+
fontWeight?: ThemedStyleProp<'fontWeight'>;
|
|
1010
|
+
gap?: ThemedStyleProp<'gap'>;
|
|
1011
|
+
lineHeight?: ThemedStyleProp<'lineHeight'>;
|
|
1012
|
+
margin?: ThemedStyleProp<'margin'>;
|
|
1013
|
+
marginBottom?: ThemedStyleProp<'marginBottom'>;
|
|
1014
|
+
marginLeft?: ThemedStyleProp<'marginLeft'>;
|
|
1015
|
+
marginRight?: ThemedStyleProp<'marginRight'>;
|
|
1016
|
+
marginTop?: ThemedStyleProp<'marginTop'>;
|
|
1017
|
+
padding?: ThemedStyleProp<'padding'>;
|
|
1018
|
+
paddingBottom?: ThemedStyleProp<'paddingBottom'>;
|
|
1019
|
+
paddingLeft?: ThemedStyleProp<'paddingLeft'>;
|
|
1020
|
+
paddingRight?: ThemedStyleProp<'paddingRight'>;
|
|
1021
|
+
paddingTop?: ThemedStyleProp<'paddingTop'>;
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
type Part = string | Part[];
|
|
6
1025
|
type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
|
|
7
1026
|
as?: T;
|
|
8
|
-
part?:
|
|
9
|
-
} & React$1.
|
|
10
|
-
declare const Box: React$1.
|
|
1027
|
+
part?: Part;
|
|
1028
|
+
} & StyleProps & React$1.ComponentPropsWithoutRef<T>;
|
|
1029
|
+
declare const Box: <T extends React$1.ElementType<any> = React$1.ElementType<any>>(props: BoxProps<T>) => React$1.ReactElement;
|
|
11
1030
|
|
|
12
1031
|
type ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
|
|
13
1032
|
interface ButtonProps extends BoxProps {
|
|
14
1033
|
title?: string;
|
|
15
1034
|
variant?: ButtonVariant;
|
|
16
1035
|
}
|
|
17
|
-
declare function BaseButton({ as, children,
|
|
1036
|
+
declare function BaseButton({ as, children, part, title, variant, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
18
1037
|
declare const Button: typeof BaseButton & {
|
|
19
1038
|
[k: string]: {
|
|
20
|
-
(
|
|
1039
|
+
(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
21
1040
|
displayName: string;
|
|
22
1041
|
};
|
|
23
1042
|
};
|
|
24
1043
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
1044
|
+
interface MediaProps extends BoxProps {
|
|
1045
|
+
src: string;
|
|
1046
|
+
type?: 'image' | 'video';
|
|
1047
|
+
}
|
|
29
1048
|
|
|
30
|
-
interface
|
|
31
|
-
apiKey: string;
|
|
32
|
-
children?: React.ReactNode;
|
|
33
|
-
config?: ProviderConfig;
|
|
34
|
-
theme?: Record<any, any>;
|
|
1049
|
+
interface TextProps extends BoxProps {
|
|
35
1050
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
1051
|
+
declare const Display1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1052
|
+
declare const Display2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1053
|
+
declare const H1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1054
|
+
declare const H2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1055
|
+
declare const H3: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1056
|
+
declare const H4: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1057
|
+
declare const Body1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1058
|
+
declare const Body2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1059
|
+
declare const Caption: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any>>>;
|
|
1060
|
+
|
|
1061
|
+
declare const Text_Body1: typeof Body1;
|
|
1062
|
+
declare const Text_Body2: typeof Body2;
|
|
1063
|
+
declare const Text_Caption: typeof Caption;
|
|
1064
|
+
declare const Text_Display1: typeof Display1;
|
|
1065
|
+
declare const Text_Display2: typeof Display2;
|
|
1066
|
+
declare const Text_H1: typeof H1;
|
|
1067
|
+
declare const Text_H2: typeof H2;
|
|
1068
|
+
declare const Text_H3: typeof H3;
|
|
1069
|
+
declare const Text_H4: typeof H4;
|
|
1070
|
+
type Text_TextProps = TextProps;
|
|
1071
|
+
declare namespace Text {
|
|
1072
|
+
export {
|
|
1073
|
+
Text_Body1 as Body1,
|
|
1074
|
+
Text_Body2 as Body2,
|
|
1075
|
+
Text_Caption as Caption,
|
|
1076
|
+
Text_Display1 as Display1,
|
|
1077
|
+
Text_Display2 as Display2,
|
|
1078
|
+
Text_H1 as H1,
|
|
1079
|
+
Text_H2 as H2,
|
|
1080
|
+
Text_H3 as H3,
|
|
1081
|
+
Text_H4 as H4,
|
|
1082
|
+
Text_TextProps as TextProps,
|
|
1083
|
+
};
|
|
39
1084
|
}
|
|
40
|
-
declare function Provider({ apiKey, children, config, theme }: ProviderProps): react_jsx_runtime.JSX.Element;
|
|
41
1085
|
|
|
42
|
-
|
|
43
|
-
interface TextProps extends BoxProps {
|
|
44
|
-
variant?: TextVariant;
|
|
1086
|
+
interface DialogProps extends BoxProps {
|
|
45
1087
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
1088
|
+
|
|
1089
|
+
type FlowHandlerProp = (flow: Flow, event?: React.MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
|
|
1090
|
+
interface FlowHandlerProps {
|
|
1091
|
+
onComplete?: FlowHandlerProp;
|
|
1092
|
+
onDismiss?: FlowHandlerProp;
|
|
1093
|
+
}
|
|
1094
|
+
type DismissHandler = (e: React.MouseEvent<unknown>) => Promise<boolean | void>;
|
|
1095
|
+
declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: FlowHandlerProps): {
|
|
1096
|
+
handleDismiss: DismissHandler;
|
|
52
1097
|
};
|
|
53
1098
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1099
|
+
type StepHandlerProp = (step: FlowStep, event?: React.MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
|
|
1100
|
+
interface StepHandlerProps {
|
|
1101
|
+
onPrimary?: StepHandlerProp;
|
|
1102
|
+
onSecondary?: StepHandlerProp;
|
|
1103
|
+
}
|
|
1104
|
+
type StepHandler = (e: React.MouseEvent<unknown>) => Promise<boolean | void>;
|
|
1105
|
+
declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlerProps): {
|
|
1106
|
+
handlePrimary: StepHandler;
|
|
1107
|
+
handleSecondary: StepHandler;
|
|
1108
|
+
};
|
|
1109
|
+
|
|
1110
|
+
interface FlowComponentProps extends Omit<BoxProps, 'container'> {
|
|
1111
|
+
container?: 'dialog' | 'none';
|
|
1112
|
+
dismissible?: boolean;
|
|
1113
|
+
flowId: string;
|
|
1114
|
+
onComplete?: FlowHandlerProp;
|
|
1115
|
+
onDismiss?: FlowHandlerProp;
|
|
1116
|
+
onPrimary?: StepHandlerProp;
|
|
1117
|
+
onSecondary?: StepHandlerProp;
|
|
1118
|
+
variables?: Record<string, unknown>;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
interface AnnouncementProps extends FlowComponentProps, Omit<DialogProps, 'container'> {
|
|
1122
|
+
}
|
|
1123
|
+
declare function Announcement(props: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
1124
|
+
|
|
1125
|
+
interface BannerProps extends FlowComponentProps {
|
|
1126
|
+
}
|
|
1127
|
+
declare function Banner(props: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
1128
|
+
|
|
1129
|
+
interface CardComponent extends ForwardRefExoticComponent<Omit<FlowComponentProps, 'ref'> & RefAttributes<unknown>> {
|
|
1130
|
+
Media: (props: MediaProps) => EmotionJSX.Element;
|
|
1131
|
+
Primary: (props: ButtonProps) => EmotionJSX.Element;
|
|
1132
|
+
Secondary: (props: ButtonProps) => EmotionJSX.Element;
|
|
1133
|
+
Subtitle: (props: TextProps) => EmotionJSX.Element;
|
|
1134
|
+
Title: (props: TextProps) => EmotionJSX.Element;
|
|
1135
|
+
}
|
|
1136
|
+
declare const Card: CardComponent;
|
|
1137
|
+
|
|
1138
|
+
declare const Row: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any>>, "ref"> & React$1.RefAttributes<unknown>>;
|
|
1139
|
+
declare const Column: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any>>, "ref"> & React$1.RefAttributes<unknown>>;
|
|
1140
|
+
|
|
1141
|
+
declare const Flex_Column: typeof Column;
|
|
1142
|
+
declare const Flex_Row: typeof Row;
|
|
1143
|
+
declare namespace Flex {
|
|
1144
|
+
export {
|
|
1145
|
+
Flex_Column as Column,
|
|
1146
|
+
Flex_Row as Row,
|
|
1147
|
+
};
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
type FieldTypes = Record<string, React.ComponentType<FormFieldProps>>;
|
|
1151
|
+
interface ValidationRules {
|
|
1152
|
+
required?: Message | ValidationRule<boolean>;
|
|
1153
|
+
min?: ValidationRule<number | string>;
|
|
1154
|
+
max?: ValidationRule<number | string>;
|
|
1155
|
+
maxLength?: ValidationRule<number>;
|
|
1156
|
+
minLength?: ValidationRule<number>;
|
|
1157
|
+
pattern?: ValidationRule<RegExp>;
|
|
1158
|
+
}
|
|
1159
|
+
interface FormFieldData extends ValidationRules {
|
|
1160
|
+
id: string;
|
|
1161
|
+
options?: {
|
|
1162
|
+
label: string;
|
|
1163
|
+
value: string;
|
|
1164
|
+
}[];
|
|
1165
|
+
placeholder?: string;
|
|
1166
|
+
label?: string;
|
|
1167
|
+
type: string;
|
|
1168
|
+
}
|
|
1169
|
+
interface FormFieldProps {
|
|
1170
|
+
field: any;
|
|
1171
|
+
fieldData: FormFieldData;
|
|
1172
|
+
formState: any;
|
|
1173
|
+
fieldState: ControllerFieldState;
|
|
1174
|
+
}
|
|
1175
|
+
interface FormProps extends FlowComponentProps {
|
|
1176
|
+
fieldTypes?: FieldTypes;
|
|
1177
|
+
}
|
|
1178
|
+
declare function Form({ fieldTypes, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
1179
|
+
|
|
1180
|
+
type NavigateHandler = (url: string, target?: string) => void;
|
|
1181
|
+
interface ProviderProps {
|
|
1182
|
+
apiKey: string;
|
|
1183
|
+
apiUrl?: string;
|
|
1184
|
+
children?: React.ReactNode;
|
|
1185
|
+
navigate?: NavigateHandler;
|
|
1186
|
+
theme?: Theme;
|
|
1187
|
+
userId?: string;
|
|
1188
|
+
groupId?: string;
|
|
1189
|
+
/**
|
|
1190
|
+
* @ignore Internal use only.
|
|
1191
|
+
* If enabled, Frigade will not send any data to the API. A user's state will be reset on page refresh.
|
|
1192
|
+
*/
|
|
1193
|
+
__readOnly?: boolean;
|
|
1194
|
+
/**
|
|
1195
|
+
* @ignore Internal use only.
|
|
1196
|
+
* Map of Flow ID to Flow Config for all flows in the app.
|
|
1197
|
+
* Configs will have to be provided in serialized JSON format rather than YAML.
|
|
1198
|
+
*/
|
|
1199
|
+
__flowConfigOverrides?: Record<string, string>;
|
|
57
1200
|
}
|
|
1201
|
+
declare function Provider({ children, navigate, theme, ...props }: ProviderProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
58
1202
|
|
|
59
1203
|
interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild'> {
|
|
60
1204
|
}
|
|
@@ -64,20 +1208,42 @@ interface TooltipProps extends MergedRadixPopoverProps {
|
|
|
64
1208
|
spotlight?: boolean;
|
|
65
1209
|
style?: React__default.CSSProperties;
|
|
66
1210
|
}
|
|
67
|
-
declare function Tooltip({ anchor, children,
|
|
1211
|
+
declare function Tooltip({ anchor, children, className, spotlight, style, ...props }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
68
1212
|
declare namespace Tooltip {
|
|
69
|
-
var Close: (
|
|
70
|
-
var Media: ({ src, ...props }: MediaProps) =>
|
|
71
|
-
var Primary: ({ onClick, title, ...props }: ButtonProps) =>
|
|
72
|
-
var Progress: ({ children, ...props }: TextProps) =>
|
|
73
|
-
var Secondary: ({ onClick, title, ...props }: ButtonProps) =>
|
|
74
|
-
var Subtitle: ({ children, ...props }: TextProps) =>
|
|
75
|
-
var Title: ({ children, ...props }: TextProps) =>
|
|
1213
|
+
var Close: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1214
|
+
var Media: ({ src, ...props }: MediaProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1215
|
+
var Primary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1216
|
+
var Progress: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1217
|
+
var Secondary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1218
|
+
var Subtitle: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
1219
|
+
var Title: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
76
1220
|
}
|
|
77
1221
|
|
|
78
|
-
interface TourProps extends TooltipProps {
|
|
79
|
-
flowId: string;
|
|
1222
|
+
interface TourProps extends TooltipProps, FlowComponentProps {
|
|
80
1223
|
}
|
|
81
|
-
declare function Tour({ flowId, ...props }: TourProps):
|
|
1224
|
+
declare function Tour({ flowId, onComplete, variables, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
1225
|
+
|
|
1226
|
+
declare function useBoundingClientRect(): {
|
|
1227
|
+
node: any;
|
|
1228
|
+
rect: DOMRect;
|
|
1229
|
+
ref: (node: Element) => void;
|
|
1230
|
+
};
|
|
1231
|
+
|
|
1232
|
+
interface FlowConfig {
|
|
1233
|
+
variables?: Record<string, unknown>;
|
|
1234
|
+
}
|
|
1235
|
+
declare function useFlow(flowId: string, config?: FlowConfig): {
|
|
1236
|
+
flow: Flow;
|
|
1237
|
+
};
|
|
1238
|
+
|
|
1239
|
+
declare function useModal(flow: Flow): {
|
|
1240
|
+
isCurrentModal: boolean;
|
|
1241
|
+
removeModal: () => void;
|
|
1242
|
+
};
|
|
1243
|
+
|
|
1244
|
+
declare function useFrigade(): {
|
|
1245
|
+
frigade: _frigade_js.Frigade;
|
|
1246
|
+
isLoading: boolean;
|
|
1247
|
+
};
|
|
82
1248
|
|
|
83
|
-
export { Box, BoxProps, Button, ButtonProps, Flex, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps };
|
|
1249
|
+
export { Announcement, AnnouncementProps, Banner, Box, BoxProps, Button, ButtonProps, Card, Flex, FlowConfig, Form, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useModal, useStepHandlers };
|