@frigade/react 2.0.34 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +43 -42
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +314 -269
  4. package/dist/index.js +12 -12
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
2
2
  import * as RadixDialog from '@radix-ui/react-dialog';
3
3
  import * as React$1 from 'react';
4
- import React__default, { CSSProperties, MouseEvent, SyntheticEvent, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
4
+ import React__default, { CSSProperties, SyntheticEvent, ForwardRefExoticComponent, RefAttributes } from 'react';
5
5
  import * as _frigade_js from '@frigade/js';
6
6
  import { Flow, FlowStep } from '@frigade/js';
7
7
  export { Flow, FlowType, Frigade } from '@frigade/js';
@@ -14,6 +14,25 @@ type DeepPartial<T> = {
14
14
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
15
15
  };
16
16
 
17
+ declare const colorScaleDegrees: readonly ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
18
+ type ColorScaleDegrees = (typeof colorScaleDegrees)[number];
19
+
20
+ interface SemanticColorUsage {
21
+ background: string;
22
+ border: string;
23
+ foreground: string;
24
+ surface: string;
25
+ }
26
+ type SemanticColorScale = {
27
+ [Degree in ColorScaleDegrees]: string;
28
+ };
29
+ type SemanticColorState = 'active' | 'focus' | 'hover';
30
+ type SemanticColor = SemanticColorScale & SemanticColorUsage & {
31
+ [State in SemanticColorState]: {
32
+ [Usage in keyof SemanticColorUsage]: string;
33
+ };
34
+ };
35
+
17
36
  declare const tokens: {
18
37
  radii: {
19
38
  md: string;
@@ -25,8 +44,13 @@ declare const tokens: {
25
44
  };
26
45
  space: {
27
46
  0: string;
28
- 4: string;
47
+ 5: string;
48
+ 10: string;
29
49
  20: string;
50
+ 4: string;
51
+ 9: string;
52
+ 2: string;
53
+ 1: string;
30
54
  [-20]: string;
31
55
  19: string;
32
56
  [-19]: string;
@@ -46,9 +70,7 @@ declare const tokens: {
46
70
  [-12]: string;
47
71
  11: string;
48
72
  [-11]: string;
49
- 10: string;
50
73
  [-10]: string;
51
- 9: string;
52
74
  [-9]: string;
53
75
  8: string;
54
76
  [-8]: string;
@@ -56,14 +78,11 @@ declare const tokens: {
56
78
  [-7]: string;
57
79
  6: string;
58
80
  [-6]: string;
59
- 5: string;
60
81
  [-5]: string;
61
82
  [-4]: string;
62
83
  3: string;
63
84
  [-3]: string;
64
- 2: string;
65
85
  [-2]: string;
66
- 1: string;
67
86
  [-1]: string;
68
87
  0.5: string;
69
88
  [-0.5]: string;
@@ -108,79 +127,11 @@ declare const tokens: {
108
127
  '4xl': string;
109
128
  };
110
129
  colors: {
111
- neutral: {
112
- background: string;
113
- border: string;
114
- foreground: string;
115
- surface: string;
116
- active: {
117
- background: string;
118
- border: string;
119
- foreground: string;
120
- surface: string;
121
- };
122
- focus: {
123
- background: string;
124
- border: string;
125
- foreground: string;
126
- surface: string;
127
- };
128
- hover: {
129
- background: string;
130
- border: string;
131
- foreground: string;
132
- surface: string;
133
- };
134
- };
135
- primary: {
136
- background: string;
137
- border: string;
138
- foreground: string;
139
- surface: string;
140
- active: {
141
- background: string;
142
- border: string;
143
- foreground: string;
144
- surface: string;
145
- };
146
- focus: {
147
- background: string;
148
- border: string;
149
- foreground: string;
150
- surface: string;
151
- };
152
- hover: {
153
- background: string;
154
- border: string;
155
- foreground: string;
156
- surface: string;
157
- };
158
- };
159
- secondary: {
160
- background: string;
161
- border: string;
162
- foreground: string;
163
- surface: string;
164
- active: {
165
- background: string;
166
- border: string;
167
- foreground: string;
168
- surface: string;
169
- };
170
- focus: {
171
- background: string;
172
- border: string;
173
- foreground: string;
174
- surface: string;
175
- };
176
- hover: {
177
- background: string;
178
- border: string;
179
- foreground: string;
180
- surface: string;
181
- };
182
- };
183
- black: string;
130
+ negative: SemanticColor;
131
+ neutral: SemanticColor;
132
+ positive: SemanticColor;
133
+ primary: SemanticColor;
134
+ secondary: SemanticColor;
184
135
  gray100: string;
185
136
  gray200: string;
186
137
  gray300: string;
@@ -190,7 +141,6 @@ declare const tokens: {
190
141
  gray700: string;
191
142
  gray800: string;
192
143
  gray900: string;
193
- white: string;
194
144
  blue400: string;
195
145
  blue500: string;
196
146
  blue800: string;
@@ -198,9 +148,66 @@ declare const tokens: {
198
148
  green400: string;
199
149
  green500: string;
200
150
  green800: string;
151
+ red500: string;
201
152
  transparent: string;
202
153
  inherit: string;
203
- red500: string;
154
+ blue: {
155
+ 100: string;
156
+ 200: string;
157
+ 300: string;
158
+ 400: string;
159
+ 500: string;
160
+ 600: string;
161
+ 700: string;
162
+ 800: string;
163
+ 900: string;
164
+ };
165
+ gray: {
166
+ 100: string;
167
+ 200: string;
168
+ 300: string;
169
+ 400: string;
170
+ 500: string;
171
+ 600: string;
172
+ 700: string;
173
+ 800: string;
174
+ 900: string;
175
+ };
176
+ green: {
177
+ 100: string;
178
+ 200: string;
179
+ 300: string;
180
+ 400: string;
181
+ 500: string;
182
+ 600: string;
183
+ 700: string;
184
+ 800: string;
185
+ 900: string;
186
+ };
187
+ red: {
188
+ 100: string;
189
+ 200: string;
190
+ 300: string;
191
+ 400: string;
192
+ 500: string;
193
+ 600: string;
194
+ 700: string;
195
+ 800: string;
196
+ 900: string;
197
+ };
198
+ yellow: {
199
+ 100: string;
200
+ 200: string;
201
+ 300: string;
202
+ 400: string;
203
+ 500: string;
204
+ 600: string;
205
+ 700: string;
206
+ 800: string;
207
+ 900: string;
208
+ };
209
+ black: string;
210
+ white: string;
204
211
  };
205
212
  borders: {
206
213
  md: string;
@@ -225,8 +232,13 @@ declare const theme: DeepPartial<{
225
232
  };
226
233
  space: {
227
234
  0: string;
228
- 4: string;
235
+ 5: string;
236
+ 10: string;
229
237
  20: string;
238
+ 4: string;
239
+ 9: string;
240
+ 2: string;
241
+ 1: string;
230
242
  [-20]: string;
231
243
  19: string;
232
244
  [-19]: string;
@@ -246,9 +258,7 @@ declare const theme: DeepPartial<{
246
258
  [-12]: string;
247
259
  11: string;
248
260
  [-11]: string;
249
- 10: string;
250
261
  [-10]: string;
251
- 9: string;
252
262
  [-9]: string;
253
263
  8: string;
254
264
  [-8]: string;
@@ -256,14 +266,11 @@ declare const theme: DeepPartial<{
256
266
  [-7]: string;
257
267
  6: string;
258
268
  [-6]: string;
259
- 5: string;
260
269
  [-5]: string;
261
270
  [-4]: string;
262
271
  3: string;
263
272
  [-3]: string;
264
- 2: string;
265
273
  [-2]: string;
266
- 1: string;
267
274
  [-1]: string;
268
275
  0.5: string;
269
276
  [-0.5]: string;
@@ -308,79 +315,11 @@ declare const theme: DeepPartial<{
308
315
  '4xl': string;
309
316
  };
310
317
  colors: {
311
- neutral: {
312
- background: string;
313
- border: string;
314
- foreground: string;
315
- surface: string;
316
- active: {
317
- background: string;
318
- border: string;
319
- foreground: string;
320
- surface: string;
321
- };
322
- focus: {
323
- background: string;
324
- border: string;
325
- foreground: string;
326
- surface: string;
327
- };
328
- hover: {
329
- background: string;
330
- border: string;
331
- foreground: string;
332
- surface: string;
333
- };
334
- };
335
- primary: {
336
- background: string;
337
- border: string;
338
- foreground: string;
339
- surface: string;
340
- active: {
341
- background: string;
342
- border: string;
343
- foreground: string;
344
- surface: string;
345
- };
346
- focus: {
347
- background: string;
348
- border: string;
349
- foreground: string;
350
- surface: string;
351
- };
352
- hover: {
353
- background: string;
354
- border: string;
355
- foreground: string;
356
- surface: string;
357
- };
358
- };
359
- secondary: {
360
- background: string;
361
- border: string;
362
- foreground: string;
363
- surface: string;
364
- active: {
365
- background: string;
366
- border: string;
367
- foreground: string;
368
- surface: string;
369
- };
370
- focus: {
371
- background: string;
372
- border: string;
373
- foreground: string;
374
- surface: string;
375
- };
376
- hover: {
377
- background: string;
378
- border: string;
379
- foreground: string;
380
- surface: string;
381
- };
382
- };
383
- black: string;
318
+ negative: SemanticColor;
319
+ neutral: SemanticColor;
320
+ positive: SemanticColor;
321
+ primary: SemanticColor;
322
+ secondary: SemanticColor;
384
323
  gray100: string;
385
324
  gray200: string;
386
325
  gray300: string;
@@ -390,7 +329,6 @@ declare const theme: DeepPartial<{
390
329
  gray700: string;
391
330
  gray800: string;
392
331
  gray900: string;
393
- white: string;
394
332
  blue400: string;
395
333
  blue500: string;
396
334
  blue800: string;
@@ -398,9 +336,66 @@ declare const theme: DeepPartial<{
398
336
  green400: string;
399
337
  green500: string;
400
338
  green800: string;
339
+ red500: string;
401
340
  transparent: string;
402
341
  inherit: string;
403
- red500: string;
342
+ blue: {
343
+ 100: string;
344
+ 200: string;
345
+ 300: string;
346
+ 400: string;
347
+ 500: string;
348
+ 600: string;
349
+ 700: string;
350
+ 800: string;
351
+ 900: string;
352
+ };
353
+ gray: {
354
+ 100: string;
355
+ 200: string;
356
+ 300: string;
357
+ 400: string;
358
+ 500: string;
359
+ 600: string;
360
+ 700: string;
361
+ 800: string;
362
+ 900: string;
363
+ };
364
+ green: {
365
+ 100: string;
366
+ 200: string;
367
+ 300: string;
368
+ 400: string;
369
+ 500: string;
370
+ 600: string;
371
+ 700: string;
372
+ 800: string;
373
+ 900: string;
374
+ };
375
+ red: {
376
+ 100: string;
377
+ 200: string;
378
+ 300: string;
379
+ 400: string;
380
+ 500: string;
381
+ 600: string;
382
+ 700: string;
383
+ 800: string;
384
+ 900: string;
385
+ };
386
+ yellow: {
387
+ 100: string;
388
+ 200: string;
389
+ 300: string;
390
+ 400: string;
391
+ 500: string;
392
+ 600: string;
393
+ 700: string;
394
+ 800: string;
395
+ 900: string;
396
+ };
397
+ black: string;
398
+ white: string;
404
399
  };
405
400
  borders: {
406
401
  md: string;
@@ -462,8 +457,13 @@ declare const themedStyleProps: {
462
457
  }>;
463
458
  readonly gap: DeepPartial<{
464
459
  0: string;
465
- 4: string;
460
+ 5: string;
461
+ 10: string;
466
462
  20: string;
463
+ 4: string;
464
+ 9: string;
465
+ 2: string;
466
+ 1: string;
467
467
  [-20]: string;
468
468
  19: string;
469
469
  [-19]: string;
@@ -483,9 +483,7 @@ declare const themedStyleProps: {
483
483
  [-12]: string;
484
484
  11: string;
485
485
  [-11]: string;
486
- 10: string;
487
486
  [-10]: string;
488
- 9: string;
489
487
  [-9]: string;
490
488
  8: string;
491
489
  [-8]: string;
@@ -493,14 +491,11 @@ declare const themedStyleProps: {
493
491
  [-7]: string;
494
492
  6: string;
495
493
  [-6]: string;
496
- 5: string;
497
494
  [-5]: string;
498
495
  [-4]: string;
499
496
  3: string;
500
497
  [-3]: string;
501
- 2: string;
502
498
  [-2]: string;
503
- 1: string;
504
499
  [-1]: string;
505
500
  0.5: string;
506
501
  [-0.5]: string;
@@ -518,8 +513,13 @@ declare const themedStyleProps: {
518
513
  }>;
519
514
  readonly margin: DeepPartial<{
520
515
  0: string;
521
- 4: string;
516
+ 5: string;
517
+ 10: string;
522
518
  20: string;
519
+ 4: string;
520
+ 9: string;
521
+ 2: string;
522
+ 1: string;
523
523
  [-20]: string;
524
524
  19: string;
525
525
  [-19]: string;
@@ -539,9 +539,7 @@ declare const themedStyleProps: {
539
539
  [-12]: string;
540
540
  11: string;
541
541
  [-11]: string;
542
- 10: string;
543
542
  [-10]: string;
544
- 9: string;
545
543
  [-9]: string;
546
544
  8: string;
547
545
  [-8]: string;
@@ -549,14 +547,11 @@ declare const themedStyleProps: {
549
547
  [-7]: string;
550
548
  6: string;
551
549
  [-6]: string;
552
- 5: string;
553
550
  [-5]: string;
554
551
  [-4]: string;
555
552
  3: string;
556
553
  [-3]: string;
557
- 2: string;
558
554
  [-2]: string;
559
- 1: string;
560
555
  [-1]: string;
561
556
  0.5: string;
562
557
  [-0.5]: string;
@@ -564,8 +559,13 @@ declare const themedStyleProps: {
564
559
  }>;
565
560
  readonly marginBottom: DeepPartial<{
566
561
  0: string;
567
- 4: string;
562
+ 5: string;
563
+ 10: string;
568
564
  20: string;
565
+ 4: string;
566
+ 9: string;
567
+ 2: string;
568
+ 1: string;
569
569
  [-20]: string;
570
570
  19: string;
571
571
  [-19]: string;
@@ -585,9 +585,7 @@ declare const themedStyleProps: {
585
585
  [-12]: string;
586
586
  11: string;
587
587
  [-11]: string;
588
- 10: string;
589
588
  [-10]: string;
590
- 9: string;
591
589
  [-9]: string;
592
590
  8: string;
593
591
  [-8]: string;
@@ -595,14 +593,11 @@ declare const themedStyleProps: {
595
593
  [-7]: string;
596
594
  6: string;
597
595
  [-6]: string;
598
- 5: string;
599
596
  [-5]: string;
600
597
  [-4]: string;
601
598
  3: string;
602
599
  [-3]: string;
603
- 2: string;
604
600
  [-2]: string;
605
- 1: string;
606
601
  [-1]: string;
607
602
  0.5: string;
608
603
  [-0.5]: string;
@@ -610,8 +605,13 @@ declare const themedStyleProps: {
610
605
  }>;
611
606
  readonly marginLeft: DeepPartial<{
612
607
  0: string;
613
- 4: string;
608
+ 5: string;
609
+ 10: string;
614
610
  20: string;
611
+ 4: string;
612
+ 9: string;
613
+ 2: string;
614
+ 1: string;
615
615
  [-20]: string;
616
616
  19: string;
617
617
  [-19]: string;
@@ -631,9 +631,7 @@ declare const themedStyleProps: {
631
631
  [-12]: string;
632
632
  11: string;
633
633
  [-11]: string;
634
- 10: string;
635
634
  [-10]: string;
636
- 9: string;
637
635
  [-9]: string;
638
636
  8: string;
639
637
  [-8]: string;
@@ -641,14 +639,11 @@ declare const themedStyleProps: {
641
639
  [-7]: string;
642
640
  6: string;
643
641
  [-6]: string;
644
- 5: string;
645
642
  [-5]: string;
646
643
  [-4]: string;
647
644
  3: string;
648
645
  [-3]: string;
649
- 2: string;
650
646
  [-2]: string;
651
- 1: string;
652
647
  [-1]: string;
653
648
  0.5: string;
654
649
  [-0.5]: string;
@@ -656,8 +651,13 @@ declare const themedStyleProps: {
656
651
  }>;
657
652
  readonly marginRight: DeepPartial<{
658
653
  0: string;
659
- 4: string;
654
+ 5: string;
655
+ 10: string;
660
656
  20: string;
657
+ 4: string;
658
+ 9: string;
659
+ 2: string;
660
+ 1: string;
661
661
  [-20]: string;
662
662
  19: string;
663
663
  [-19]: string;
@@ -677,9 +677,7 @@ declare const themedStyleProps: {
677
677
  [-12]: string;
678
678
  11: string;
679
679
  [-11]: string;
680
- 10: string;
681
680
  [-10]: string;
682
- 9: string;
683
681
  [-9]: string;
684
682
  8: string;
685
683
  [-8]: string;
@@ -687,14 +685,11 @@ declare const themedStyleProps: {
687
685
  [-7]: string;
688
686
  6: string;
689
687
  [-6]: string;
690
- 5: string;
691
688
  [-5]: string;
692
689
  [-4]: string;
693
690
  3: string;
694
691
  [-3]: string;
695
- 2: string;
696
692
  [-2]: string;
697
- 1: string;
698
693
  [-1]: string;
699
694
  0.5: string;
700
695
  [-0.5]: string;
@@ -702,8 +697,13 @@ declare const themedStyleProps: {
702
697
  }>;
703
698
  readonly marginTop: DeepPartial<{
704
699
  0: string;
705
- 4: string;
700
+ 5: string;
701
+ 10: string;
706
702
  20: string;
703
+ 4: string;
704
+ 9: string;
705
+ 2: string;
706
+ 1: string;
707
707
  [-20]: string;
708
708
  19: string;
709
709
  [-19]: string;
@@ -723,9 +723,7 @@ declare const themedStyleProps: {
723
723
  [-12]: string;
724
724
  11: string;
725
725
  [-11]: string;
726
- 10: string;
727
726
  [-10]: string;
728
- 9: string;
729
727
  [-9]: string;
730
728
  8: string;
731
729
  [-8]: string;
@@ -733,14 +731,11 @@ declare const themedStyleProps: {
733
731
  [-7]: string;
734
732
  6: string;
735
733
  [-6]: string;
736
- 5: string;
737
734
  [-5]: string;
738
735
  [-4]: string;
739
736
  3: string;
740
737
  [-3]: string;
741
- 2: string;
742
738
  [-2]: string;
743
- 1: string;
744
739
  [-1]: string;
745
740
  0.5: string;
746
741
  [-0.5]: string;
@@ -748,8 +743,13 @@ declare const themedStyleProps: {
748
743
  }>;
749
744
  readonly padding: DeepPartial<{
750
745
  0: string;
751
- 4: string;
746
+ 5: string;
747
+ 10: string;
752
748
  20: string;
749
+ 4: string;
750
+ 9: string;
751
+ 2: string;
752
+ 1: string;
753
753
  [-20]: string;
754
754
  19: string;
755
755
  [-19]: string;
@@ -769,9 +769,7 @@ declare const themedStyleProps: {
769
769
  [-12]: string;
770
770
  11: string;
771
771
  [-11]: string;
772
- 10: string;
773
772
  [-10]: string;
774
- 9: string;
775
773
  [-9]: string;
776
774
  8: string;
777
775
  [-8]: string;
@@ -779,14 +777,11 @@ declare const themedStyleProps: {
779
777
  [-7]: string;
780
778
  6: string;
781
779
  [-6]: string;
782
- 5: string;
783
780
  [-5]: string;
784
781
  [-4]: string;
785
782
  3: string;
786
783
  [-3]: string;
787
- 2: string;
788
784
  [-2]: string;
789
- 1: string;
790
785
  [-1]: string;
791
786
  0.5: string;
792
787
  [-0.5]: string;
@@ -794,8 +789,13 @@ declare const themedStyleProps: {
794
789
  }>;
795
790
  readonly paddingBottom: DeepPartial<{
796
791
  0: string;
797
- 4: string;
792
+ 5: string;
793
+ 10: string;
798
794
  20: string;
795
+ 4: string;
796
+ 9: string;
797
+ 2: string;
798
+ 1: string;
799
799
  [-20]: string;
800
800
  19: string;
801
801
  [-19]: string;
@@ -815,9 +815,7 @@ declare const themedStyleProps: {
815
815
  [-12]: string;
816
816
  11: string;
817
817
  [-11]: string;
818
- 10: string;
819
818
  [-10]: string;
820
- 9: string;
821
819
  [-9]: string;
822
820
  8: string;
823
821
  [-8]: string;
@@ -825,14 +823,11 @@ declare const themedStyleProps: {
825
823
  [-7]: string;
826
824
  6: string;
827
825
  [-6]: string;
828
- 5: string;
829
826
  [-5]: string;
830
827
  [-4]: string;
831
828
  3: string;
832
829
  [-3]: string;
833
- 2: string;
834
830
  [-2]: string;
835
- 1: string;
836
831
  [-1]: string;
837
832
  0.5: string;
838
833
  [-0.5]: string;
@@ -840,8 +835,13 @@ declare const themedStyleProps: {
840
835
  }>;
841
836
  readonly paddingLeft: DeepPartial<{
842
837
  0: string;
843
- 4: string;
838
+ 5: string;
839
+ 10: string;
844
840
  20: string;
841
+ 4: string;
842
+ 9: string;
843
+ 2: string;
844
+ 1: string;
845
845
  [-20]: string;
846
846
  19: string;
847
847
  [-19]: string;
@@ -861,9 +861,7 @@ declare const themedStyleProps: {
861
861
  [-12]: string;
862
862
  11: string;
863
863
  [-11]: string;
864
- 10: string;
865
864
  [-10]: string;
866
- 9: string;
867
865
  [-9]: string;
868
866
  8: string;
869
867
  [-8]: string;
@@ -871,14 +869,11 @@ declare const themedStyleProps: {
871
869
  [-7]: string;
872
870
  6: string;
873
871
  [-6]: string;
874
- 5: string;
875
872
  [-5]: string;
876
873
  [-4]: string;
877
874
  3: string;
878
875
  [-3]: string;
879
- 2: string;
880
876
  [-2]: string;
881
- 1: string;
882
877
  [-1]: string;
883
878
  0.5: string;
884
879
  [-0.5]: string;
@@ -886,8 +881,13 @@ declare const themedStyleProps: {
886
881
  }>;
887
882
  readonly paddingRight: DeepPartial<{
888
883
  0: string;
889
- 4: string;
884
+ 5: string;
885
+ 10: string;
890
886
  20: string;
887
+ 4: string;
888
+ 9: string;
889
+ 2: string;
890
+ 1: string;
891
891
  [-20]: string;
892
892
  19: string;
893
893
  [-19]: string;
@@ -907,9 +907,7 @@ declare const themedStyleProps: {
907
907
  [-12]: string;
908
908
  11: string;
909
909
  [-11]: string;
910
- 10: string;
911
910
  [-10]: string;
912
- 9: string;
913
911
  [-9]: string;
914
912
  8: string;
915
913
  [-8]: string;
@@ -917,14 +915,11 @@ declare const themedStyleProps: {
917
915
  [-7]: string;
918
916
  6: string;
919
917
  [-6]: string;
920
- 5: string;
921
918
  [-5]: string;
922
919
  [-4]: string;
923
920
  3: string;
924
921
  [-3]: string;
925
- 2: string;
926
922
  [-2]: string;
927
- 1: string;
928
923
  [-1]: string;
929
924
  0.5: string;
930
925
  [-0.5]: string;
@@ -932,8 +927,13 @@ declare const themedStyleProps: {
932
927
  }>;
933
928
  readonly paddingTop: DeepPartial<{
934
929
  0: string;
935
- 4: string;
930
+ 5: string;
931
+ 10: string;
936
932
  20: string;
933
+ 4: string;
934
+ 9: string;
935
+ 2: string;
936
+ 1: string;
937
937
  [-20]: string;
938
938
  19: string;
939
939
  [-19]: string;
@@ -953,9 +953,7 @@ declare const themedStyleProps: {
953
953
  [-12]: string;
954
954
  11: string;
955
955
  [-11]: string;
956
- 10: string;
957
956
  [-10]: string;
958
- 9: string;
959
957
  [-9]: string;
960
958
  8: string;
961
959
  [-8]: string;
@@ -963,14 +961,11 @@ declare const themedStyleProps: {
963
961
  [-7]: string;
964
962
  6: string;
965
963
  [-6]: string;
966
- 5: string;
967
964
  [-5]: string;
968
965
  [-4]: string;
969
966
  3: string;
970
967
  [-3]: string;
971
- 2: string;
972
968
  [-2]: string;
973
- 1: string;
974
969
  [-1]: string;
975
970
  0.5: string;
976
971
  [-0.5]: string;
@@ -1105,33 +1100,24 @@ declare namespace Text {
1105
1100
  };
1106
1101
  }
1107
1102
 
1108
- interface DialogContentProps extends Pick<RadixDialog.DialogContentProps, 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'> {
1109
- }
1110
- interface DialogRootProps extends RadixDialog.DialogProps {
1111
- }
1112
- interface DialogProps extends BoxProps, DialogRootProps, DialogContentProps {
1113
- }
1114
- declare function Dialog({ children, className, modal, ...props }: DialogProps): _emotion_react_jsx_runtime.JSX.Element;
1115
- declare namespace Dialog {
1116
- var Dismiss: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1117
- var Subtitle: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
1118
- var Media: ({ src, ...props }: MediaProps) => _emotion_react_jsx_runtime.JSX.Element;
1119
- var Primary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1120
- var ProgressDots: ({ current, total }: {
1121
- current: number;
1122
- total: number;
1123
- }) => _emotion_react_jsx_runtime.JSX.Element;
1124
- var Secondary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1125
- var Title: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
1126
- var displayName: string;
1127
- }
1128
-
1129
- type FlowHandlerProp = (flow: Flow, event?: MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
1103
+ /**
1104
+ * A function that handles a Flow event.
1105
+ * If the function returns a promise that evaluates to `false`, the Flow's state will not be updated for the current user (e.g. a Flow will not be marked as completed or dismissed).
1106
+ */
1107
+ type FlowHandlerProp = (
1108
+ /**
1109
+ * The Flow that the handler is being called on
1110
+ */
1111
+ flow: Flow,
1112
+ /**
1113
+ * The event that triggered the handler
1114
+ */
1115
+ event?: MouseEvent | KeyboardEvent) => Promise<boolean | void> | (boolean | void);
1130
1116
  interface FlowHandlerProps {
1131
1117
  onComplete?: FlowHandlerProp;
1132
1118
  onDismiss?: FlowHandlerProp;
1133
1119
  }
1134
- type DismissHandler = (e: MouseEvent<unknown>) => Promise<boolean | void>;
1120
+ type DismissHandler = (e: MouseEvent | KeyboardEvent) => Promise<boolean | void>;
1135
1121
  declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: FlowHandlerProps): {
1136
1122
  handleDismiss: DismissHandler;
1137
1123
  };
@@ -1147,27 +1133,31 @@ declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: St
1147
1133
  handleSecondary: StepHandler;
1148
1134
  };
1149
1135
 
1150
- interface FlowProps extends BoxProps {
1151
- /**
1152
- * Flow accepts a render function as its only child, whose props are described in FlowChildrenProps
1153
- */
1154
- children?: (props: FlowChildrenProps) => ReactNode;
1136
+ interface BoxPropsWithoutChildren extends Omit<BoxProps, 'children'> {
1137
+ }
1138
+ interface FlowPropsWithoutChildren extends BoxPropsWithoutChildren {
1155
1139
  /**
1156
1140
  * Whether the Flow is dismissible or not
1157
1141
  *
1158
- * @defaultValue `true`
1159
1142
  */
1160
1143
  dismissible?: boolean;
1161
1144
  /**
1162
1145
  * The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
1163
1146
  */
1164
1147
  flowId: string;
1148
+ /**
1149
+ * If true, the Flow will be mounted even if it has already been completed or dismissed.
1150
+ * However, if the user does not match the Flow's targeting, the Flow will not be mounted.
1151
+ */
1152
+ forceMount?: boolean;
1165
1153
  /**
1166
1154
  * Handler for when the Flow is completed.
1155
+ * If this function a promise that evaluates to `false`, the Flow will not be marked as completed.
1167
1156
  */
1168
1157
  onComplete?: FlowHandlerProp;
1169
1158
  /**
1170
1159
  * Handler for when the Flow is dismissed.
1160
+ * If this function a promise that evaluates to `false`, the Flow will not be marked as dismissed.
1171
1161
  */
1172
1162
  onDismiss?: FlowHandlerProp;
1173
1163
  /**
@@ -1185,24 +1175,60 @@ interface FlowProps extends BoxProps {
1185
1175
  * For instance, you can use `title: Hello, ${name}!` in the Flow configuration and pass `variables={{name: 'John'}}` to customize the copy.
1186
1176
  */
1187
1177
  variables?: Record<string, unknown>;
1188
- /**
1189
- * If true, the Flow will be mounted even if it has already been completed or dismissed.
1190
- * However, if the user does not match the Flow's targeting, the Flow will not be mounted.
1191
- */
1192
- forceMount?: boolean;
1193
- }
1194
- interface FlowPropsWithoutChildren extends Omit<FlowProps, 'children'> {
1195
1178
  }
1179
+ type ParentProps = {
1180
+ dismissible: boolean;
1181
+ flowId: string;
1182
+ variables: Record<string, unknown>;
1183
+ [x: string]: unknown;
1184
+ };
1196
1185
  interface FlowChildrenProps {
1197
1186
  flow: Flow;
1198
1187
  handleDismiss: DismissHandler;
1199
1188
  handlePrimary: StepHandler;
1200
1189
  handleSecondary: StepHandler;
1201
- parentProps: Record<string, unknown>;
1190
+ parentProps: ParentProps;
1202
1191
  step: FlowStep;
1203
1192
  }
1204
1193
 
1194
+ interface DialogContentProps extends Pick<RadixDialog.DialogContentProps, 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'> {
1195
+ }
1196
+ interface DialogRootProps extends RadixDialog.DialogProps {
1197
+ }
1198
+ interface DialogProps extends BoxPropsWithoutChildren, DialogRootProps, DialogContentProps {
1199
+ /**
1200
+ * The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
1201
+ */
1202
+ modal?: boolean;
1203
+ }
1204
+ declare function Dialog({ children, className, modal, ...props }: DialogProps): _emotion_react_jsx_runtime.JSX.Element;
1205
+ declare namespace Dialog {
1206
+ var Dismiss: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1207
+ var Subtitle: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
1208
+ var Media: ({ src, ...props }: MediaProps) => _emotion_react_jsx_runtime.JSX.Element;
1209
+ var Primary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1210
+ var ProgressDots: ({ current, total }: {
1211
+ current: number;
1212
+ total: number;
1213
+ }) => _emotion_react_jsx_runtime.JSX.Element;
1214
+ var Secondary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
1215
+ var Title: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
1216
+ var displayName: string;
1217
+ }
1218
+
1205
1219
  interface AnnouncementProps extends FlowPropsWithoutChildren, DialogProps {
1220
+ /**
1221
+ * @ignore
1222
+ */
1223
+ children: React.ReactNode;
1224
+ /**
1225
+ * @ignore
1226
+ */
1227
+ open?: boolean;
1228
+ /**
1229
+ * @ignore
1230
+ */
1231
+ defaultOpen?: boolean;
1206
1232
  }
1207
1233
  declare function Announcement({ flowId, ...props }: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;
1208
1234
 
@@ -1210,8 +1236,15 @@ interface BannerProps extends FlowPropsWithoutChildren {
1210
1236
  }
1211
1237
  declare function Banner({ flowId, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
1212
1238
 
1239
+ interface CardHeaderProps extends BoxProps {
1240
+ dismissible?: boolean;
1241
+ handleDismiss?: DismissHandler;
1242
+ subtitle?: string;
1243
+ title?: string;
1244
+ }
1213
1245
  interface CardComponent extends ForwardRefExoticComponent<Omit<FlowPropsWithoutChildren, 'ref'> & RefAttributes<unknown>> {
1214
1246
  Dismiss: (props: ButtonProps) => EmotionJSX.Element;
1247
+ Header: (props: CardHeaderProps) => EmotionJSX.Element;
1215
1248
  Media: (props: MediaProps) => EmotionJSX.Element;
1216
1249
  Primary: (props: ButtonProps) => EmotionJSX.Element;
1217
1250
  Secondary: (props: ButtonProps) => EmotionJSX.Element;
@@ -1403,9 +1436,9 @@ declare namespace index {
1403
1436
  };
1404
1437
  }
1405
1438
 
1406
- interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild' | 'color' | 'content' | 'translate'> {
1439
+ interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild' | 'color' | 'content' | 'translate' | 'forceMount'> {
1407
1440
  }
1408
- interface TooltipProps extends BoxProps, MergedRadixPopoverProps {
1441
+ interface TooltipProps extends BoxPropsWithoutChildren, Omit<MergedRadixPopoverProps, 'children'> {
1409
1442
  /**
1410
1443
  * How to align the Tooltip relative to the anchor.
1411
1444
  * Uses the same notation as the `align` property in [Radix Popover](https://www.radix-ui.com/primitives/docs/components/popover).
@@ -1437,6 +1470,18 @@ declare namespace Tooltip {
1437
1470
  }
1438
1471
 
1439
1472
  interface TourProps extends TooltipProps, FlowPropsWithoutChildren {
1473
+ /**
1474
+ * @ignore
1475
+ */
1476
+ defaultOpen?: boolean;
1477
+ /**
1478
+ * @ignore
1479
+ */
1480
+ open?: boolean;
1481
+ /**
1482
+ * The modality of the tooltip. When set to `true`, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
1483
+ */
1484
+ modal?: boolean;
1440
1485
  }
1441
1486
  declare function Tour({ flowId, onComplete, variables, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;
1442
1487
 
@@ -1475,4 +1520,4 @@ declare function useGroup(): {
1475
1520
  track: (eventName: string, properties?: Record<string, unknown>) => Promise<void>;
1476
1521
  };
1477
1522
 
1478
- export { Announcement, AnnouncementProps, Banner, Box, BoxProps, Button, ButtonProps, Card, index$2 as Checklist, CollapsibleProps, CollapsibleStepProps, Dialog, DialogProps, Flex, FlowConfig, Form, index$1 as Progress, Provider, ProviderProps, index as Survey, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps, themeVariables, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useModal, useStepHandlers, useUser };
1523
+ export { Announcement, AnnouncementProps, Banner, Box, BoxProps, Button, ButtonProps, Card, index$2 as Checklist, CollapsibleProps, CollapsibleStepProps, Dialog, DialogProps, Flex, FlowConfig, Form, index$1 as Progress, Provider, ProviderProps, index as Survey, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps, themeVariables, tokens, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useModal, useStepHandlers, useUser };