@pingux/astro 2.49.0 → 2.50.0-alpha.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.
- package/lib/cjs/components/Button/Button.stories.js +11 -0
- package/lib/cjs/components/Button/Buttons.styles.d.ts +256 -212
- package/lib/cjs/components/Button/Buttons.styles.js +10 -6
- package/lib/components/Button/Button.stories.js +11 -0
- package/lib/components/Button/Buttons.styles.js +10 -6
- package/package.json +1 -1
|
@@ -116,6 +116,17 @@ var TextIconButton = function TextIconButton() {
|
|
|
116
116
|
title: {
|
|
117
117
|
name: 'Add Circle Icon'
|
|
118
118
|
}
|
|
119
|
+
}), "Button Text"), (0, _react2.jsx)(_index.Button, {
|
|
120
|
+
mb: "sm",
|
|
121
|
+
variant: "primaryWithIcon"
|
|
122
|
+
}, (0, _react2.jsx)(_index.Icon, {
|
|
123
|
+
icon: _PlusIcon["default"],
|
|
124
|
+
mr: "xs",
|
|
125
|
+
color: "white",
|
|
126
|
+
size: 20,
|
|
127
|
+
title: {
|
|
128
|
+
name: 'Add Circle Icon'
|
|
129
|
+
}
|
|
119
130
|
}), "Button Text"), (0, _react2.jsx)(_index.Button, {
|
|
120
131
|
mb: "sm",
|
|
121
132
|
mr: "auto",
|
|
@@ -110,6 +110,135 @@ export declare const link: {
|
|
|
110
110
|
whiteSpace: string;
|
|
111
111
|
};
|
|
112
112
|
declare const _default: {
|
|
113
|
+
colorBlock: {
|
|
114
|
+
bg: string;
|
|
115
|
+
border: string;
|
|
116
|
+
borderColor: string;
|
|
117
|
+
borderRadius: number;
|
|
118
|
+
outline: string;
|
|
119
|
+
cursor: string;
|
|
120
|
+
width: number;
|
|
121
|
+
height: string;
|
|
122
|
+
p: string;
|
|
123
|
+
display: string;
|
|
124
|
+
justifyContent: string;
|
|
125
|
+
alignItems: string;
|
|
126
|
+
'&.is-hovered': {
|
|
127
|
+
bg: string;
|
|
128
|
+
};
|
|
129
|
+
'&.is-focused': {
|
|
130
|
+
outline: string;
|
|
131
|
+
outlineColor: string;
|
|
132
|
+
outlineOffset: string;
|
|
133
|
+
};
|
|
134
|
+
'&.is-pressed': {
|
|
135
|
+
bg: string;
|
|
136
|
+
borderColor: string;
|
|
137
|
+
};
|
|
138
|
+
'& span': {
|
|
139
|
+
color: string;
|
|
140
|
+
textAlign: string;
|
|
141
|
+
};
|
|
142
|
+
'&>div': {
|
|
143
|
+
alignItems: string;
|
|
144
|
+
};
|
|
145
|
+
'&>svg': {
|
|
146
|
+
color: string;
|
|
147
|
+
fill: string;
|
|
148
|
+
};
|
|
149
|
+
'&.is-configured': {
|
|
150
|
+
bg: string;
|
|
151
|
+
borderColor: string;
|
|
152
|
+
'& span': {
|
|
153
|
+
color: string;
|
|
154
|
+
};
|
|
155
|
+
'&>svg': {
|
|
156
|
+
color: string;
|
|
157
|
+
fill: string;
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
'&.is-configured.is-hovered': {
|
|
161
|
+
bg: string;
|
|
162
|
+
borderColor: string;
|
|
163
|
+
};
|
|
164
|
+
'&.is-configured.is-pressed': {
|
|
165
|
+
bg: string;
|
|
166
|
+
borderColor: string;
|
|
167
|
+
};
|
|
168
|
+
};
|
|
169
|
+
colorBlockPrimary: {
|
|
170
|
+
'& span': {
|
|
171
|
+
color: string;
|
|
172
|
+
textAlign: string;
|
|
173
|
+
};
|
|
174
|
+
'&.is-hovered': {
|
|
175
|
+
backgroundColor: string;
|
|
176
|
+
color: string;
|
|
177
|
+
bg: string;
|
|
178
|
+
border: string;
|
|
179
|
+
borderColor: string;
|
|
180
|
+
boxShadow: string;
|
|
181
|
+
};
|
|
182
|
+
'&.is-pressed': {
|
|
183
|
+
backgroundColor: string;
|
|
184
|
+
border: string;
|
|
185
|
+
borderColor: string;
|
|
186
|
+
bg: string;
|
|
187
|
+
color: string;
|
|
188
|
+
boxShadow: string;
|
|
189
|
+
path: {
|
|
190
|
+
fill: string;
|
|
191
|
+
};
|
|
192
|
+
};
|
|
193
|
+
bg: string;
|
|
194
|
+
border: string;
|
|
195
|
+
borderColor: string;
|
|
196
|
+
color: string;
|
|
197
|
+
boxShadow: string;
|
|
198
|
+
path: {
|
|
199
|
+
fill: string;
|
|
200
|
+
};
|
|
201
|
+
borderRadius: number;
|
|
202
|
+
outline: string;
|
|
203
|
+
cursor: string;
|
|
204
|
+
width: number;
|
|
205
|
+
height: string;
|
|
206
|
+
p: string;
|
|
207
|
+
display: string;
|
|
208
|
+
justifyContent: string;
|
|
209
|
+
alignItems: string;
|
|
210
|
+
'&.is-focused': {
|
|
211
|
+
outline: string;
|
|
212
|
+
outlineColor: string;
|
|
213
|
+
outlineOffset: string;
|
|
214
|
+
};
|
|
215
|
+
'&>div': {
|
|
216
|
+
alignItems: string;
|
|
217
|
+
};
|
|
218
|
+
'&>svg': {
|
|
219
|
+
color: string;
|
|
220
|
+
fill: string;
|
|
221
|
+
};
|
|
222
|
+
'&.is-configured': {
|
|
223
|
+
bg: string;
|
|
224
|
+
borderColor: string;
|
|
225
|
+
'& span': {
|
|
226
|
+
color: string;
|
|
227
|
+
};
|
|
228
|
+
'&>svg': {
|
|
229
|
+
color: string;
|
|
230
|
+
fill: string;
|
|
231
|
+
};
|
|
232
|
+
};
|
|
233
|
+
'&.is-configured.is-hovered': {
|
|
234
|
+
bg: string;
|
|
235
|
+
borderColor: string;
|
|
236
|
+
};
|
|
237
|
+
'&.is-configured.is-pressed': {
|
|
238
|
+
bg: string;
|
|
239
|
+
borderColor: string;
|
|
240
|
+
};
|
|
241
|
+
};
|
|
113
242
|
critical: {
|
|
114
243
|
display: string;
|
|
115
244
|
bg: string;
|
|
@@ -204,6 +333,37 @@ declare const _default: {
|
|
|
204
333
|
flexShrink: number;
|
|
205
334
|
whiteSpace: string;
|
|
206
335
|
};
|
|
336
|
+
exampleText: {
|
|
337
|
+
'&.is-hovered': {
|
|
338
|
+
textDecoration: string;
|
|
339
|
+
};
|
|
340
|
+
background: string;
|
|
341
|
+
'&.is-focused': {
|
|
342
|
+
outline: string;
|
|
343
|
+
outlineColor: string;
|
|
344
|
+
outlineOffset: string;
|
|
345
|
+
};
|
|
346
|
+
fontSize: string;
|
|
347
|
+
fontWeight: number;
|
|
348
|
+
color: string;
|
|
349
|
+
fontFamily: string;
|
|
350
|
+
display: string;
|
|
351
|
+
overflowWrap: string;
|
|
352
|
+
maxWidth: string;
|
|
353
|
+
wordWrap: string;
|
|
354
|
+
wordBreak: string;
|
|
355
|
+
cursor: string;
|
|
356
|
+
height: string;
|
|
357
|
+
lineHeight: string;
|
|
358
|
+
minWidth: string;
|
|
359
|
+
padding: string;
|
|
360
|
+
outline: string;
|
|
361
|
+
alignItems: string;
|
|
362
|
+
justifyContent: string;
|
|
363
|
+
borderRadius: string;
|
|
364
|
+
flexShrink: number;
|
|
365
|
+
whiteSpace: string;
|
|
366
|
+
};
|
|
207
367
|
filter: {
|
|
208
368
|
px: string;
|
|
209
369
|
borderColor: string;
|
|
@@ -406,32 +566,48 @@ declare const _default: {
|
|
|
406
566
|
flexShrink: number;
|
|
407
567
|
whiteSpace: string;
|
|
408
568
|
};
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
justifyContent: string;
|
|
414
|
-
width: string;
|
|
415
|
-
'&.is-current': {
|
|
416
|
-
cursor: string;
|
|
569
|
+
inlinePrimaryWithIcon: {
|
|
570
|
+
padding: string;
|
|
571
|
+
'&.is-hovered': {
|
|
572
|
+
backgroundColor: string;
|
|
417
573
|
color: string;
|
|
574
|
+
bg: string;
|
|
575
|
+
border: string;
|
|
576
|
+
borderColor: string;
|
|
577
|
+
boxShadow: string;
|
|
418
578
|
};
|
|
419
|
-
'&.is-
|
|
579
|
+
'&.is-pressed': {
|
|
580
|
+
backgroundColor: string;
|
|
581
|
+
border: string;
|
|
582
|
+
borderColor: string;
|
|
583
|
+
bg: string;
|
|
584
|
+
color: string;
|
|
420
585
|
boxShadow: string;
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
586
|
+
path: {
|
|
587
|
+
fill: string;
|
|
588
|
+
};
|
|
424
589
|
};
|
|
425
590
|
bg: string;
|
|
426
591
|
border: string;
|
|
427
592
|
borderColor: string;
|
|
428
593
|
color: string;
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
textDecoration: string;
|
|
594
|
+
boxShadow: string;
|
|
595
|
+
path: {
|
|
596
|
+
fill: string;
|
|
433
597
|
};
|
|
598
|
+
display: string;
|
|
599
|
+
height: string;
|
|
600
|
+
lineHeight: number;
|
|
434
601
|
fontSize: string;
|
|
602
|
+
borderRadius: string;
|
|
603
|
+
alignSelf: string;
|
|
604
|
+
paddingTop: string;
|
|
605
|
+
paddingBottom: string;
|
|
606
|
+
'&.is-focused': {
|
|
607
|
+
outline: string;
|
|
608
|
+
outlineColor: string;
|
|
609
|
+
outlineOffset: string;
|
|
610
|
+
};
|
|
435
611
|
fontWeight: number;
|
|
436
612
|
fontFamily: string;
|
|
437
613
|
overflowWrap: string;
|
|
@@ -442,16 +618,23 @@ declare const _default: {
|
|
|
442
618
|
minWidth: string;
|
|
443
619
|
outline: string;
|
|
444
620
|
alignItems: string;
|
|
445
|
-
|
|
621
|
+
justifyContent: string;
|
|
446
622
|
flexShrink: number;
|
|
447
623
|
whiteSpace: string;
|
|
448
624
|
};
|
|
449
|
-
|
|
625
|
+
inlineWithIcon: {
|
|
626
|
+
padding: string;
|
|
450
627
|
display: string;
|
|
451
628
|
bg: string;
|
|
629
|
+
height: string;
|
|
630
|
+
lineHeight: number;
|
|
631
|
+
fontSize: string;
|
|
632
|
+
borderRadius: string;
|
|
452
633
|
border: string;
|
|
453
634
|
borderColor: string;
|
|
454
|
-
|
|
635
|
+
alignSelf: string;
|
|
636
|
+
paddingTop: string;
|
|
637
|
+
paddingBottom: string;
|
|
455
638
|
'&.is-hovered': {
|
|
456
639
|
bg: string;
|
|
457
640
|
border: string;
|
|
@@ -465,46 +648,55 @@ declare const _default: {
|
|
|
465
648
|
borderColor: string;
|
|
466
649
|
color: string;
|
|
467
650
|
boxShadow: string;
|
|
651
|
+
path: {
|
|
652
|
+
fill: string;
|
|
653
|
+
};
|
|
468
654
|
};
|
|
469
655
|
'&.is-focused': {
|
|
470
656
|
outline: string;
|
|
471
657
|
outlineColor: string;
|
|
472
658
|
outlineOffset: string;
|
|
473
659
|
};
|
|
474
|
-
fontSize: string;
|
|
475
660
|
fontWeight: number;
|
|
661
|
+
color: string;
|
|
476
662
|
fontFamily: string;
|
|
477
663
|
overflowWrap: string;
|
|
478
664
|
maxWidth: string;
|
|
479
665
|
wordWrap: string;
|
|
480
666
|
wordBreak: string;
|
|
481
667
|
cursor: string;
|
|
482
|
-
height: string;
|
|
483
|
-
lineHeight: string;
|
|
484
668
|
minWidth: string;
|
|
485
|
-
padding: string;
|
|
486
669
|
outline: string;
|
|
487
670
|
alignItems: string;
|
|
488
671
|
justifyContent: string;
|
|
489
|
-
borderRadius: string;
|
|
490
672
|
flexShrink: number;
|
|
491
673
|
whiteSpace: string;
|
|
492
674
|
};
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
};
|
|
497
|
-
success: {
|
|
675
|
+
link: {
|
|
676
|
+
lineHeight: string;
|
|
677
|
+
textDecoration: string;
|
|
498
678
|
display: string;
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
679
|
+
justifyContent: string;
|
|
680
|
+
width: string;
|
|
681
|
+
'&.is-current': {
|
|
682
|
+
cursor: string;
|
|
683
|
+
color: string;
|
|
684
|
+
};
|
|
503
685
|
'&.is-focused': {
|
|
686
|
+
boxShadow: string;
|
|
504
687
|
outline: string;
|
|
505
688
|
outlineColor: string;
|
|
506
689
|
outlineOffset: string;
|
|
507
690
|
};
|
|
691
|
+
bg: string;
|
|
692
|
+
border: string;
|
|
693
|
+
borderColor: string;
|
|
694
|
+
color: string;
|
|
695
|
+
height: string;
|
|
696
|
+
padding: string;
|
|
697
|
+
'&.is-hovered': {
|
|
698
|
+
textDecoration: string;
|
|
699
|
+
};
|
|
508
700
|
fontSize: string;
|
|
509
701
|
fontWeight: number;
|
|
510
702
|
fontFamily: string;
|
|
@@ -513,151 +705,33 @@ declare const _default: {
|
|
|
513
705
|
wordWrap: string;
|
|
514
706
|
wordBreak: string;
|
|
515
707
|
cursor: string;
|
|
516
|
-
height: string;
|
|
517
|
-
lineHeight: string;
|
|
518
708
|
minWidth: string;
|
|
519
|
-
padding: string;
|
|
520
709
|
outline: string;
|
|
521
710
|
alignItems: string;
|
|
522
|
-
justifyContent: string;
|
|
523
711
|
borderRadius: string;
|
|
524
712
|
flexShrink: number;
|
|
525
713
|
whiteSpace: string;
|
|
526
714
|
};
|
|
527
|
-
|
|
715
|
+
primary: {
|
|
716
|
+
display: string;
|
|
528
717
|
bg: string;
|
|
529
718
|
border: string;
|
|
530
719
|
borderColor: string;
|
|
531
|
-
|
|
532
|
-
outline: string;
|
|
533
|
-
cursor: string;
|
|
534
|
-
width: number;
|
|
535
|
-
height: string;
|
|
536
|
-
p: string;
|
|
537
|
-
display: string;
|
|
538
|
-
justifyContent: string;
|
|
539
|
-
alignItems: string;
|
|
540
|
-
'&.is-hovered': {
|
|
541
|
-
bg: string;
|
|
542
|
-
};
|
|
543
|
-
'&.is-focused': {
|
|
544
|
-
outline: string;
|
|
545
|
-
outlineColor: string;
|
|
546
|
-
outlineOffset: string;
|
|
547
|
-
};
|
|
548
|
-
'&.is-pressed': {
|
|
549
|
-
bg: string;
|
|
550
|
-
borderColor: string;
|
|
551
|
-
};
|
|
552
|
-
'& span': {
|
|
553
|
-
color: string;
|
|
554
|
-
textAlign: string;
|
|
555
|
-
};
|
|
556
|
-
'&>div': {
|
|
557
|
-
alignItems: string;
|
|
558
|
-
};
|
|
559
|
-
'&>svg': {
|
|
560
|
-
color: string;
|
|
561
|
-
fill: string;
|
|
562
|
-
};
|
|
563
|
-
'&.is-configured': {
|
|
564
|
-
bg: string;
|
|
565
|
-
borderColor: string;
|
|
566
|
-
'& span': {
|
|
567
|
-
color: string;
|
|
568
|
-
};
|
|
569
|
-
'&>svg': {
|
|
570
|
-
color: string;
|
|
571
|
-
fill: string;
|
|
572
|
-
};
|
|
573
|
-
};
|
|
574
|
-
'&.is-configured.is-hovered': {
|
|
575
|
-
bg: string;
|
|
576
|
-
borderColor: string;
|
|
577
|
-
};
|
|
578
|
-
'&.is-configured.is-pressed': {
|
|
579
|
-
bg: string;
|
|
580
|
-
borderColor: string;
|
|
581
|
-
};
|
|
582
|
-
};
|
|
583
|
-
colorBlockPrimary: {
|
|
584
|
-
'& span': {
|
|
585
|
-
color: string;
|
|
586
|
-
textAlign: string;
|
|
587
|
-
};
|
|
720
|
+
color: string;
|
|
588
721
|
'&.is-hovered': {
|
|
589
|
-
backgroundColor: string;
|
|
590
|
-
color: string;
|
|
591
722
|
bg: string;
|
|
592
723
|
border: string;
|
|
593
724
|
borderColor: string;
|
|
725
|
+
color: string;
|
|
594
726
|
boxShadow: string;
|
|
595
727
|
};
|
|
596
728
|
'&.is-pressed': {
|
|
597
|
-
|
|
729
|
+
bg: string;
|
|
598
730
|
border: string;
|
|
599
731
|
borderColor: string;
|
|
600
|
-
bg: string;
|
|
601
732
|
color: string;
|
|
602
733
|
boxShadow: string;
|
|
603
|
-
path: {
|
|
604
|
-
fill: string;
|
|
605
|
-
};
|
|
606
734
|
};
|
|
607
|
-
bg: string;
|
|
608
|
-
border: string;
|
|
609
|
-
borderColor: string;
|
|
610
|
-
color: string;
|
|
611
|
-
boxShadow: string;
|
|
612
|
-
path: {
|
|
613
|
-
fill: string;
|
|
614
|
-
};
|
|
615
|
-
borderRadius: number;
|
|
616
|
-
outline: string;
|
|
617
|
-
cursor: string;
|
|
618
|
-
width: number;
|
|
619
|
-
height: string;
|
|
620
|
-
p: string;
|
|
621
|
-
display: string;
|
|
622
|
-
justifyContent: string;
|
|
623
|
-
alignItems: string;
|
|
624
|
-
'&.is-focused': {
|
|
625
|
-
outline: string;
|
|
626
|
-
outlineColor: string;
|
|
627
|
-
outlineOffset: string;
|
|
628
|
-
};
|
|
629
|
-
'&>div': {
|
|
630
|
-
alignItems: string;
|
|
631
|
-
};
|
|
632
|
-
'&>svg': {
|
|
633
|
-
color: string;
|
|
634
|
-
fill: string;
|
|
635
|
-
};
|
|
636
|
-
'&.is-configured': {
|
|
637
|
-
bg: string;
|
|
638
|
-
borderColor: string;
|
|
639
|
-
'& span': {
|
|
640
|
-
color: string;
|
|
641
|
-
};
|
|
642
|
-
'&>svg': {
|
|
643
|
-
color: string;
|
|
644
|
-
fill: string;
|
|
645
|
-
};
|
|
646
|
-
};
|
|
647
|
-
'&.is-configured.is-hovered': {
|
|
648
|
-
bg: string;
|
|
649
|
-
borderColor: string;
|
|
650
|
-
};
|
|
651
|
-
'&.is-configured.is-pressed': {
|
|
652
|
-
bg: string;
|
|
653
|
-
borderColor: string;
|
|
654
|
-
};
|
|
655
|
-
};
|
|
656
|
-
exampleText: {
|
|
657
|
-
'&.is-hovered': {
|
|
658
|
-
textDecoration: string;
|
|
659
|
-
};
|
|
660
|
-
background: string;
|
|
661
735
|
'&.is-focused': {
|
|
662
736
|
outline: string;
|
|
663
737
|
outlineColor: string;
|
|
@@ -665,9 +739,7 @@ declare const _default: {
|
|
|
665
739
|
};
|
|
666
740
|
fontSize: string;
|
|
667
741
|
fontWeight: number;
|
|
668
|
-
color: string;
|
|
669
742
|
fontFamily: string;
|
|
670
|
-
display: string;
|
|
671
743
|
overflowWrap: string;
|
|
672
744
|
maxWidth: string;
|
|
673
745
|
wordWrap: string;
|
|
@@ -684,12 +756,13 @@ declare const _default: {
|
|
|
684
756
|
flexShrink: number;
|
|
685
757
|
whiteSpace: string;
|
|
686
758
|
};
|
|
687
|
-
|
|
759
|
+
primaryWithIcon: {
|
|
688
760
|
padding: string;
|
|
761
|
+
display: string;
|
|
689
762
|
bg: string;
|
|
690
763
|
border: string;
|
|
691
764
|
borderColor: string;
|
|
692
|
-
|
|
765
|
+
color: string;
|
|
693
766
|
'&.is-hovered': {
|
|
694
767
|
bg: string;
|
|
695
768
|
border: string;
|
|
@@ -703,9 +776,6 @@ declare const _default: {
|
|
|
703
776
|
borderColor: string;
|
|
704
777
|
color: string;
|
|
705
778
|
boxShadow: string;
|
|
706
|
-
path: {
|
|
707
|
-
fill: string;
|
|
708
|
-
};
|
|
709
779
|
};
|
|
710
780
|
'&.is-focused': {
|
|
711
781
|
outline: string;
|
|
@@ -714,7 +784,6 @@ declare const _default: {
|
|
|
714
784
|
};
|
|
715
785
|
fontSize: string;
|
|
716
786
|
fontWeight: number;
|
|
717
|
-
color: string;
|
|
718
787
|
fontFamily: string;
|
|
719
788
|
overflowWrap: string;
|
|
720
789
|
maxWidth: string;
|
|
@@ -731,109 +800,84 @@ declare const _default: {
|
|
|
731
800
|
flexShrink: number;
|
|
732
801
|
whiteSpace: string;
|
|
733
802
|
};
|
|
734
|
-
|
|
735
|
-
|
|
803
|
+
quiet: {
|
|
804
|
+
all: string;
|
|
805
|
+
display: string;
|
|
806
|
+
};
|
|
807
|
+
success: {
|
|
736
808
|
display: string;
|
|
737
809
|
bg: string;
|
|
738
|
-
height: string;
|
|
739
|
-
lineHeight: number;
|
|
740
|
-
fontSize: string;
|
|
741
|
-
borderRadius: string;
|
|
742
810
|
border: string;
|
|
743
811
|
borderColor: string;
|
|
744
|
-
|
|
745
|
-
paddingTop: string;
|
|
746
|
-
paddingBottom: string;
|
|
747
|
-
'&.is-hovered': {
|
|
748
|
-
bg: string;
|
|
749
|
-
border: string;
|
|
750
|
-
borderColor: string;
|
|
751
|
-
color: string;
|
|
752
|
-
boxShadow: string;
|
|
753
|
-
};
|
|
754
|
-
'&.is-pressed': {
|
|
755
|
-
bg: string;
|
|
756
|
-
border: string;
|
|
757
|
-
borderColor: string;
|
|
758
|
-
color: string;
|
|
759
|
-
boxShadow: string;
|
|
760
|
-
path: {
|
|
761
|
-
fill: string;
|
|
762
|
-
};
|
|
763
|
-
};
|
|
812
|
+
color: string;
|
|
764
813
|
'&.is-focused': {
|
|
765
814
|
outline: string;
|
|
766
815
|
outlineColor: string;
|
|
767
816
|
outlineOffset: string;
|
|
768
817
|
};
|
|
818
|
+
fontSize: string;
|
|
769
819
|
fontWeight: number;
|
|
770
|
-
color: string;
|
|
771
820
|
fontFamily: string;
|
|
772
821
|
overflowWrap: string;
|
|
773
822
|
maxWidth: string;
|
|
774
823
|
wordWrap: string;
|
|
775
824
|
wordBreak: string;
|
|
776
825
|
cursor: string;
|
|
826
|
+
height: string;
|
|
827
|
+
lineHeight: string;
|
|
777
828
|
minWidth: string;
|
|
829
|
+
padding: string;
|
|
778
830
|
outline: string;
|
|
779
831
|
alignItems: string;
|
|
780
832
|
justifyContent: string;
|
|
833
|
+
borderRadius: string;
|
|
781
834
|
flexShrink: number;
|
|
782
835
|
whiteSpace: string;
|
|
783
836
|
};
|
|
784
|
-
|
|
837
|
+
withIcon: {
|
|
785
838
|
padding: string;
|
|
839
|
+
bg: string;
|
|
840
|
+
border: string;
|
|
841
|
+
borderColor: string;
|
|
842
|
+
display: string;
|
|
786
843
|
'&.is-hovered': {
|
|
787
|
-
backgroundColor: string;
|
|
788
|
-
color: string;
|
|
789
844
|
bg: string;
|
|
790
845
|
border: string;
|
|
791
846
|
borderColor: string;
|
|
847
|
+
color: string;
|
|
792
848
|
boxShadow: string;
|
|
793
849
|
};
|
|
794
850
|
'&.is-pressed': {
|
|
795
|
-
|
|
851
|
+
bg: string;
|
|
796
852
|
border: string;
|
|
797
853
|
borderColor: string;
|
|
798
|
-
bg: string;
|
|
799
854
|
color: string;
|
|
800
855
|
boxShadow: string;
|
|
801
856
|
path: {
|
|
802
857
|
fill: string;
|
|
803
858
|
};
|
|
804
859
|
};
|
|
805
|
-
bg: string;
|
|
806
|
-
border: string;
|
|
807
|
-
borderColor: string;
|
|
808
|
-
color: string;
|
|
809
|
-
boxShadow: string;
|
|
810
|
-
path: {
|
|
811
|
-
fill: string;
|
|
812
|
-
};
|
|
813
|
-
display: string;
|
|
814
|
-
height: string;
|
|
815
|
-
lineHeight: number;
|
|
816
|
-
fontSize: string;
|
|
817
|
-
borderRadius: string;
|
|
818
|
-
alignSelf: string;
|
|
819
|
-
paddingTop: string;
|
|
820
|
-
paddingBottom: string;
|
|
821
860
|
'&.is-focused': {
|
|
822
861
|
outline: string;
|
|
823
862
|
outlineColor: string;
|
|
824
863
|
outlineOffset: string;
|
|
825
864
|
};
|
|
865
|
+
fontSize: string;
|
|
826
866
|
fontWeight: number;
|
|
867
|
+
color: string;
|
|
827
868
|
fontFamily: string;
|
|
828
869
|
overflowWrap: string;
|
|
829
870
|
maxWidth: string;
|
|
830
871
|
wordWrap: string;
|
|
831
872
|
wordBreak: string;
|
|
832
873
|
cursor: string;
|
|
874
|
+
height: string;
|
|
875
|
+
lineHeight: string;
|
|
833
876
|
minWidth: string;
|
|
834
877
|
outline: string;
|
|
835
878
|
alignItems: string;
|
|
836
879
|
justifyContent: string;
|
|
880
|
+
borderRadius: string;
|
|
837
881
|
flexShrink: number;
|
|
838
882
|
whiteSpace: string;
|
|
839
883
|
};
|
|
@@ -93,6 +93,9 @@ var withIcon = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
93
93
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
|
94
94
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
95
95
|
});
|
|
96
|
+
var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
|
|
97
|
+
padding: '10px 15px 10px 10px'
|
|
98
|
+
});
|
|
96
99
|
var success = _objectSpread(_objectSpread({}, base), {}, {
|
|
97
100
|
display: 'inline-flex',
|
|
98
101
|
bg: 'success.bright',
|
|
@@ -287,6 +290,8 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
287
290
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
288
291
|
});
|
|
289
292
|
var _default = {
|
|
293
|
+
colorBlock: colorBlock,
|
|
294
|
+
colorBlockPrimary: colorBlockPrimary,
|
|
290
295
|
critical: critical,
|
|
291
296
|
"default": _objectSpread(_objectSpread({}, base), {}, {
|
|
292
297
|
bg: 'white',
|
|
@@ -296,19 +301,18 @@ var _default = {
|
|
|
296
301
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
|
297
302
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
298
303
|
}),
|
|
304
|
+
exampleText: exampleText,
|
|
299
305
|
filter: filter,
|
|
300
306
|
headerBar: headerBar,
|
|
301
307
|
inline: inline,
|
|
302
308
|
inlinePrimary: inlinePrimary,
|
|
309
|
+
inlinePrimaryWithIcon: inlinePrimaryWithIcon,
|
|
310
|
+
inlineWithIcon: inlineWithIcon,
|
|
303
311
|
link: link,
|
|
304
312
|
primary: primary,
|
|
313
|
+
primaryWithIcon: primaryWithIcon,
|
|
305
314
|
quiet: quiet,
|
|
306
315
|
success: success,
|
|
307
|
-
|
|
308
|
-
colorBlockPrimary: colorBlockPrimary,
|
|
309
|
-
exampleText: exampleText,
|
|
310
|
-
withIcon: withIcon,
|
|
311
|
-
inlineWithIcon: inlineWithIcon,
|
|
312
|
-
inlinePrimaryWithIcon: inlinePrimaryWithIcon
|
|
316
|
+
withIcon: withIcon
|
|
313
317
|
};
|
|
314
318
|
exports["default"] = _default;
|
|
@@ -104,6 +104,17 @@ export var TextIconButton = function TextIconButton() {
|
|
|
104
104
|
title: {
|
|
105
105
|
name: 'Add Circle Icon'
|
|
106
106
|
}
|
|
107
|
+
}), "Button Text"), ___EmotionJSX(Button, {
|
|
108
|
+
mb: "sm",
|
|
109
|
+
variant: "primaryWithIcon"
|
|
110
|
+
}, ___EmotionJSX(Icon, {
|
|
111
|
+
icon: PlusIcon,
|
|
112
|
+
mr: "xs",
|
|
113
|
+
color: "white",
|
|
114
|
+
size: 20,
|
|
115
|
+
title: {
|
|
116
|
+
name: 'Add Circle Icon'
|
|
117
|
+
}
|
|
107
118
|
}), "Button Text"), ___EmotionJSX(Button, {
|
|
108
119
|
mb: "sm",
|
|
109
120
|
mr: "auto",
|
|
@@ -83,6 +83,9 @@ var withIcon = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
83
83
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
|
84
84
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
85
85
|
});
|
|
86
|
+
var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
|
|
87
|
+
padding: '10px 15px 10px 10px'
|
|
88
|
+
});
|
|
86
89
|
var success = _objectSpread(_objectSpread({}, base), {}, {
|
|
87
90
|
display: 'inline-flex',
|
|
88
91
|
bg: 'success.bright',
|
|
@@ -274,6 +277,8 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
|
|
|
274
277
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
275
278
|
});
|
|
276
279
|
export default {
|
|
280
|
+
colorBlock: colorBlock,
|
|
281
|
+
colorBlockPrimary: colorBlockPrimary,
|
|
277
282
|
critical: critical,
|
|
278
283
|
"default": _objectSpread(_objectSpread({}, base), {}, {
|
|
279
284
|
bg: 'white',
|
|
@@ -283,18 +288,17 @@ export default {
|
|
|
283
288
|
'&.is-pressed': _objectSpread({}, defaultActive),
|
|
284
289
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
285
290
|
}),
|
|
291
|
+
exampleText: exampleText,
|
|
286
292
|
filter: filter,
|
|
287
293
|
headerBar: headerBar,
|
|
288
294
|
inline: inline,
|
|
289
295
|
inlinePrimary: inlinePrimary,
|
|
296
|
+
inlinePrimaryWithIcon: inlinePrimaryWithIcon,
|
|
297
|
+
inlineWithIcon: inlineWithIcon,
|
|
290
298
|
link: link,
|
|
291
299
|
primary: primary,
|
|
300
|
+
primaryWithIcon: primaryWithIcon,
|
|
292
301
|
quiet: quiet,
|
|
293
302
|
success: success,
|
|
294
|
-
|
|
295
|
-
colorBlockPrimary: colorBlockPrimary,
|
|
296
|
-
exampleText: exampleText,
|
|
297
|
-
withIcon: withIcon,
|
|
298
|
-
inlineWithIcon: inlineWithIcon,
|
|
299
|
-
inlinePrimaryWithIcon: inlinePrimaryWithIcon
|
|
303
|
+
withIcon: withIcon
|
|
300
304
|
};
|