@aws-amplify/ui-react 2.18.0 → 2.18.3

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/dist/styles.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Tue, 17 May 2022 21:59:14 GMT
7
+ * Generated on Thu, 26 May 2022 23:17:06 GMT
8
8
  */
9
9
 
10
10
  :root, [data-amplify-theme] {
@@ -382,17 +382,22 @@
382
382
  --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
383
383
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
384
384
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
385
+ --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
386
+ --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
387
+ --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
385
388
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
386
389
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
390
+ --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
387
391
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
388
392
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
389
393
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
390
394
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
391
395
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
396
+ --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
397
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
398
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
392
399
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
393
- --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
394
400
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
395
- --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
396
401
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
397
402
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
398
403
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -400,9 +405,7 @@
400
405
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
401
406
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
402
407
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
403
- --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
404
408
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
405
- --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
406
409
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
407
410
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
408
411
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -442,7 +445,7 @@
442
445
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
443
446
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
444
447
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
445
- --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
448
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
446
449
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
447
450
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
448
451
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
@@ -634,6 +637,7 @@
634
637
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
635
638
  --amplify-components-alert-padding-block: var(--amplify-space-small);
636
639
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
640
+ --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
637
641
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
638
642
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
639
643
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
@@ -641,13 +645,16 @@
641
645
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
642
646
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
643
647
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
648
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
644
649
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
645
650
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
646
651
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
647
652
  --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
648
- --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
653
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
654
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
649
655
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
650
- --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
656
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
657
+ --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
651
658
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
652
659
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
653
660
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -791,8 +798,12 @@
791
798
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
792
799
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
793
800
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
801
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
802
+ --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
794
803
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
804
+ --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
795
805
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
806
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
796
807
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
797
808
  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
798
809
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
@@ -800,7 +811,8 @@
800
811
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
801
812
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
802
813
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
803
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
814
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
815
+ --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
804
816
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
805
817
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
806
818
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -3030,6 +3042,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3030
3042
  }
3031
3043
 
3032
3044
  .amplify-sliderfield__thumb:focus {
3045
+ border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
3033
3046
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
3034
3047
  }
3035
3048
 
@@ -3415,9 +3428,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3415
3428
  }
3416
3429
 
3417
3430
  .amplify-togglebutton {
3418
- background-color: var(--amplify-internal-togglebutton-background-color);
3419
- border-color: var(--amplify-internal-togglebutton-border-color);
3420
- color: var(--amplify-internal-togglebutton-color);
3421
3431
  --amplify-internal-togglebutton-background-color: initial;
3422
3432
  --amplify-internal-togglebutton-border-color: var(
3423
3433
  --amplify-components-togglebutton-border-color
@@ -3425,9 +3435,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3425
3435
  --amplify-internal-togglebutton-color: var(
3426
3436
  --amplify-components-togglebutton-color
3427
3437
  );
3428
- --amplify-internal-togglebutton-hover-background-color: var(
3429
- --amplify-components-togglebutton-hover-background-color
3430
- );
3438
+ background-color: var(--amplify-internal-togglebutton-background-color);
3439
+ border-color: var(--amplify-internal-togglebutton-border-color);
3440
+ color: var(--amplify-internal-togglebutton-color);
3431
3441
  --amplify-internal-togglebutton-focus-background-color: var(
3432
3442
  --amplify-internal-togglebutton-background-color
3433
3443
  );
@@ -3437,6 +3447,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3437
3447
  --amplify-internal-togglebutton-focus-color: var(
3438
3448
  --amplify-components-togglebutton-focus-color
3439
3449
  );
3450
+ --amplify-internal-togglebutton-hover-background-color: var(
3451
+ --amplify-components-togglebutton-hover-background-color
3452
+ );
3453
+ --amplify-internal-togglebutton-hover-border-color: var(
3454
+ --amplify-internal-togglebutton-border-color
3455
+ );
3456
+ --amplify-internal-togglebutton-hover-color: var(
3457
+ --amplify-internal-togglebutton-color
3458
+ );
3440
3459
  --amplify-internal-togglebutton-active-background-color: var(
3441
3460
  --amplify-components-togglebutton-active-background-color
3442
3461
  );
@@ -3451,21 +3470,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3451
3470
  );
3452
3471
  }
3453
3472
 
3454
- .amplify-togglebutton:hover {
3455
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
3456
- border-color: var(--amplify-internal-togglebutton-border-color);
3457
- color: var(--amplify-internal-togglebutton-color);
3458
- --amplify-internal-togglebutton-focus-background-color: var(
3459
- --amplify-internal-togglebutton-hover-background-color
3460
- );
3461
- }
3462
-
3463
3473
  .amplify-togglebutton:focus {
3464
3474
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3465
3475
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3466
3476
  color: var(--amplify-internal-togglebutton-focus-color);
3467
3477
  }
3468
3478
 
3479
+ .amplify-togglebutton:hover {
3480
+ background-color: var(--amplify-internal-togglebutton-hover-background-color);
3481
+ border-color: var(--amplify-internal-togglebutton-hover-border-color);
3482
+ color: var(--amplify-internal-togglebutton-hover-color);
3483
+ }
3484
+
3469
3485
  .amplify-togglebutton:active {
3470
3486
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3471
3487
  }
@@ -3477,24 +3493,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3477
3493
  }
3478
3494
 
3479
3495
  .amplify-togglebutton--pressed {
3496
+ --amplify-internal-togglebutton-border-color: var(
3497
+ --amplify-components-togglebutton-pressed-border-color
3498
+ );
3480
3499
  --amplify-internal-togglebutton-background-color: var(
3481
3500
  --amplify-components-togglebutton-pressed-background-color
3482
3501
  );
3483
3502
  --amplify-internal-togglebutton-color: var(
3484
3503
  --amplify-components-togglebutton-pressed-color
3485
3504
  );
3486
- }
3487
-
3488
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3489
3505
  --amplify-internal-togglebutton-hover-background-color: var(
3490
3506
  --amplify-components-togglebutton-pressed-hover-background-color
3491
3507
  );
3492
- }
3493
-
3494
- .amplify-togglebutton--pressed:disabled {
3495
3508
  --amplify-internal-togglebutton-disabled-background-color: var(
3496
3509
  --amplify-components-togglebutton-pressed-background-color
3497
3510
  );
3511
+ --amplify-internal-togglebutton-disabled-border-color: var(
3512
+ --amplify-components-togglebutton-pressed-border-color
3513
+ );
3498
3514
  --amplify-internal-togglebutton-disabled-color: var(
3499
3515
  --amplify-components-togglebutton-pressed-color
3500
3516
  );
@@ -3520,27 +3536,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3520
3536
  --amplify-internal-togglebutton-primary-color
3521
3537
  );
3522
3538
  border-width: var(--amplify-components-togglebutton-primary-border-width);
3523
- --amplify-internal-togglebutton-hover-background-color: var(
3524
- --amplify-components-togglebutton-primary-background-color
3525
- );
3526
- --amplify-internal-togglebutton-focus-border-color: var(
3527
- --amplify-components-togglebutton-border-color
3528
- );
3529
- --amplify-internal-togglebutton-focus-color: var(
3530
- --amplify-components-togglebutton-color
3531
- );
3532
- --amplify-internal-togglebutton-active-background-color: var(
3533
- --amplify-components-togglebutton-primary-background-color
3534
- );
3535
- --amplify-internal-togglebutton-disabled-background-color: var(
3536
- --amplify-components-togglebutton-primary-background-color
3537
- );
3538
- --amplify-internal-togglebutton-disabled-border-color: var(
3539
- --amplify-components-togglebutton-border-color
3540
- );
3541
- --amplify-internal-togglebutton-disabled-color: var(
3542
- --amplify-components-togglebutton-color
3543
- );
3544
3539
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3545
3540
  --amplify-components-togglebutton-primary-focus-background-color
3546
3541
  );
@@ -3550,6 +3545,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3550
3545
  --amplify-internal-togglebutton-primary-focus-color: var(
3551
3546
  --amplify-components-togglebutton-primary-focus-color
3552
3547
  );
3548
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3549
+ --amplify-components-togglebutton-primary-focus-box-shadow
3550
+ );
3551
+ --amplify-internal-togglebutton-focus-background-color: var(
3552
+ --amplify-internal-togglebutton-primary-focus-background-color
3553
+ );
3554
+ --amplify-internal-togglebutton-focus-border-color: var(
3555
+ --amplify-internal-togglebutton-primary-focus-border-color
3556
+ );
3557
+ --amplify-internal-togglebutton-focus-color: var(
3558
+ --amplify-internal-togglebutton-primary-focus-color
3559
+ );
3553
3560
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3554
3561
  --amplify-components-togglebutton-primary-hover-background-color
3555
3562
  );
@@ -3559,43 +3566,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3559
3566
  --amplify-internal-togglebutton-primary-hover-color: var(
3560
3567
  --amplify-components-togglebutton-primary-hover-color
3561
3568
  );
3569
+ --amplify-internal-togglebutton-hover-background-color: var(
3570
+ --amplify-internal-togglebutton-primary-hover-background-color
3571
+ );
3572
+ --amplify-internal-togglebutton-hover-border-color: var(
3573
+ --amplify-internal-togglebutton-primary-hover-border-color
3574
+ );
3575
+ --amplify-internal-togglebutton-hover-color: var(
3576
+ --amplify-internal-togglebutton-primary-hover-color
3577
+ );
3562
3578
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3563
3579
  --amplify-components-togglebutton-primary-disabled-background-color
3564
3580
  );
3565
3581
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3566
- --amplify-internal-togglebutton-primary-border-color
3582
+ --amplify-components-togglebutton-primary-disabled-border-color
3567
3583
  );
3568
3584
  --amplify-internal-togglebutton-primary-disabled-color: var(
3569
3585
  --amplify-components-togglebutton-primary-disabled-color
3570
3586
  );
3571
- }
3572
-
3573
- .amplify-togglebutton--primary:focus {
3574
- --amplify-internal-togglebutton-focus-background-color: var(
3575
- --amplify-internal-togglebutton-primary-focus-background-color
3576
- );
3577
- --amplify-internal-togglebutton-focus-border-color: var(
3578
- --amplify-internal-togglebutton-primary-focus-border-color
3579
- );
3580
- --amplify-internal-togglebutton-focus-color: var(
3581
- --amplify-internal-togglebutton-primary-focus-color
3582
- );
3583
- box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
3584
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3585
- --amplify-internal-togglebutton-primary-focus-border-color
3586
- );
3587
- }
3588
-
3589
- .amplify-togglebutton--primary:hover {
3590
- background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
3591
- border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
3592
- color: var(--amplify-internal-togglebutton-primary-hover-color);
3593
- --amplify-internal-togglebutton-focus-background-color: var(
3594
- --amplify-internal-togglebutton-primary-hover-background-color
3595
- );
3596
- }
3597
-
3598
- .amplify-togglebutton--primary:disabled {
3599
3587
  --amplify-internal-togglebutton-disabled-background-color: var(
3600
3588
  --amplify-internal-togglebutton-primary-disabled-background-color
3601
3589
  );
@@ -3607,6 +3595,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
3607
3595
  );
3608
3596
  }
3609
3597
 
3598
+ .amplify-togglebutton--primary:focus {
3599
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3600
+ }
3601
+
3610
3602
  .amplify-togglebutton--pressed {
3611
3603
  --amplify-internal-togglebutton-primary-background-color: var(
3612
3604
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3617,48 +3609,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3617
3609
  --amplify-internal-togglebutton-primary-color: var(
3618
3610
  --amplify-components-togglebutton-primary-pressed-color
3619
3611
  );
3620
- }
3621
-
3622
- .amplify-togglebutton--pressed:focus {
3623
3612
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3624
3613
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3625
3614
  );
3626
3615
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3627
3616
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3628
3617
  );
3629
- }
3630
-
3631
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3632
- --amplify-internal-togglebutton-primary-hover-background-color: var(
3633
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3634
- );
3635
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3636
- --amplify-components-togglebutton-primary-pressed-hover-border-color
3637
- );
3638
- --amplify-internal-togglebutton-primary-focus-background-color: var(
3639
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3640
- );
3641
- }
3642
-
3643
- .amplify-togglebutton--pressed:focus {
3644
3618
  --amplify-internal-togglebutton-primary-focus-color: var(
3645
- --amplify-components-togglebutton-primary-pressed-color
3619
+ --amplify-components-togglebutton-primary-pressed-focus-color
3646
3620
  );
3647
- }
3648
-
3649
- .amplify-togglebutton--pressed:hover {
3650
3621
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3651
- --amplify-components-togglebutton-primary-hover-background-color
3622
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3652
3623
  );
3653
3624
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3654
- --amplify-internal-togglebutton-primary-border-color
3625
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3655
3626
  );
3656
3627
  --amplify-internal-togglebutton-primary-hover-color: var(
3657
- --amplify-components-togglebutton-primary-pressed-color
3628
+ --amplify-components-togglebutton-primary-pressed-hover-color
3658
3629
  );
3659
- }
3660
-
3661
- .amplify-togglebutton--pressed:disabled {
3662
3630
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3663
3631
  --amplify-components-togglebutton-primary-pressed-background-color
3664
3632
  );
@@ -3670,29 +3638,25 @@ html[dir=rtl] .amplify-field-group__inner-start {
3670
3638
  );
3671
3639
  }
3672
3640
 
3641
+ .amplify-togglebutton--pressed:hover {
3642
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3643
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow
3644
+ );
3645
+ }
3646
+
3673
3647
  .amplify-togglebutton--link {
3674
3648
  --amplify-internal-togglebutton-link-background-color: var(
3675
- --amplify-components-togglebutton-background-color
3649
+ --amplify-components-togglebutton-link-background-color
3676
3650
  );
3677
3651
  --amplify-internal-togglebutton-link-color: var(
3678
3652
  --amplify-components-togglebutton-link-color
3679
3653
  );
3680
- background-color: var(--amplify-internal-togglebutton-link-background-color);
3681
- color: var(--amplify-internal-togglebutton-link-color);
3682
- --amplify-internal-togglebutton-link-hover-background-color: var(
3683
- --amplify-components-togglebutton-link-hover-background-color
3654
+ --amplify-internal-togglebutton-background-color: var(
3655
+ --amplify-internal-togglebutton-link-background-color
3684
3656
  );
3685
- --amplify-internal-togglebutton-link-hover-color: var(
3686
- --amplify-components-togglebutton-link-hover-color
3657
+ --amplify-internal-togglebutton-color: var(
3658
+ --amplify-internal-togglebutton-link-color
3687
3659
  );
3688
- }
3689
-
3690
- .amplify-togglebutton--link:hover {
3691
- background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
3692
- color: var(--amplify-internal-togglebutton-link-hover-color);
3693
- }
3694
-
3695
- .amplify-togglebutton--link:focus {
3696
3660
  --amplify-internal-togglebutton-link-focus-background-color: var(
3697
3661
  --amplify-components-togglebutton-link-focus-background-color
3698
3662
  );
@@ -3705,12 +3669,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3705
3669
  --amplify-internal-togglebutton-focus-color: var(
3706
3670
  --amplify-internal-togglebutton-link-focus-color
3707
3671
  );
3708
- }
3709
-
3710
- .amplify-togglebutton--link:disabled {
3711
- --amplify-internal-togglebutton-disabled-color: var(
3672
+ --amplify-internal-togglebutton-link-hover-background-color: var(
3673
+ --amplify-components-togglebutton-link-hover-background-color
3674
+ );
3675
+ --amplify-internal-togglebutton-link-hover-color: var(
3676
+ --amplify-components-togglebutton-link-hover-color
3677
+ );
3678
+ --amplify-internal-togglebutton-hover-background-color: var(
3679
+ --amplify-internal-togglebutton-link-hover-background-color
3680
+ );
3681
+ --amplify-internal-togglebutton-hover-color: var(
3682
+ --amplify-internal-togglebutton-link-hover-color
3683
+ );
3684
+ --amplify-internal-togglebutton-link-disabled-color: var(
3712
3685
  --amplify-components-togglebutton-link-disabled-color
3713
3686
  );
3687
+ --amplify-internal-togglebutton-link-disabled-background-color: var(
3688
+ --amplify-components-togglebutton-link-disabled-background-color
3689
+ );
3690
+ --amplify-internal-togglebutton-disabled-color: var(
3691
+ --amplify-internal-togglebutton-link-disabled-color
3692
+ );
3693
+ --amplify-internal-togglebutton-disabled-background-color: var(
3694
+ --amplify-internal-togglebutton-link-disabled-background-color
3695
+ );
3714
3696
  }
3715
3697
 
3716
3698
  .amplify-togglebutton--pressed {
@@ -3720,22 +3702,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3720
3702
  --amplify-internal-togglebutton-link-background-color: var(
3721
3703
  --amplify-components-togglebutton-link-pressed-background-color
3722
3704
  );
3723
- }
3724
-
3725
- .amplify-togglebutton--pressed:hover {
3705
+ --amplify-internal-togglebutton-link-focus-background-color: var(
3706
+ --amplify-components-togglebutton-link-pressed-focus-background-color
3707
+ );
3708
+ --amplify-internal-togglebutton-link-focus-color: var(
3709
+ --amplify-components-togglebutton-link-pressed-focus-color
3710
+ );
3726
3711
  --amplify-internal-togglebutton-link-hover-background-color: var(
3727
3712
  --amplify-components-togglebutton-link-pressed-hover-background-color
3728
3713
  );
3729
3714
  --amplify-internal-togglebutton-link-hover-color: var(
3730
- --amplify-components-togglebutton-link-pressed-color
3731
- );
3732
- }
3733
-
3734
- .amplify-togglebutton--pressed:focus {
3735
- --amplify-internal-togglebutton-link-focus-background-color: var(
3736
- --amplify-components-togglebutton-link-pressed-background-color
3715
+ --amplify-components-togglebutton-link-pressed-hover-color
3737
3716
  );
3738
- --amplify-internal-togglebutton-link-focus-color: var(
3717
+ --amplify-internal-togglebutton-link-disabled-color: var(
3739
3718
  --amplify-components-togglebutton-link-pressed-color
3740
3719
  );
3741
3720
  }
@@ -1,13 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  /**
3
- * The `<Geocoder>` component provides location search. See https://ui.docs.amplify.aws/components/geo#geocoder.
3
+ * The `<LocationSearch>` component provides location search. See https://ui.docs.amplify.aws/components/geo#geocoder.
4
4
  *
5
5
  * @example
6
6
  * // Used as a map control:
7
7
  * function App() {
8
8
  * return (
9
9
  * <MapView>
10
- * <Geocoder />
10
+ * <LocationSearch />
11
11
  * </MapView>
12
12
  * );
13
13
  * }
@@ -15,11 +15,12 @@
15
15
  * @example
16
16
  * // Used as a standalone component:
17
17
  * function App() {
18
- * return <Geocoder />;
18
+ * return <LocationSearch />;
19
19
  * }
20
20
  */
21
- export declare const Geocoder: (props: GeocoderProps) => JSX.Element;
22
- export declare type GeocoderProps = {
21
+ export declare const LocationSearch: (props: LocationSearchProps) => JSX.Element;
22
+ export declare const Geocoder: (props: LocationSearchProps) => JSX.Element;
23
+ export declare type LocationSearchProps = {
23
24
  /**
24
25
  * A bounding box given as an array in the format `[minX, minY, maxX, maxY]`.
25
26
  * Search results will be limited to the bounding box.
@@ -27,17 +28,17 @@ export declare type GeocoderProps = {
27
28
  bbox?: number[];
28
29
  /**
29
30
  * Default: false
30
- * If `true`, the geocoder control will clear it's contents and blur when user presses the escape key.
31
+ * If `true`, the LocationSearch control will clear it's contents and blur when user presses the escape key.
31
32
  */
32
33
  clearAndBlurOnEsc?: boolean;
33
34
  /**
34
35
  * Default: false
35
- * If `true`, the geocoder control will clear its value when the input blurs.
36
+ * If `true`, the LocationSearch control will clear its value when the input blurs.
36
37
  */
37
38
  clearOnBlur?: boolean;
38
39
  /**
39
40
  * Default: false
40
- * If `true`, the geocoder control will collapse until hovered or in focus.
41
+ * If `true`, the LocationSearch control will collapse until hovered or in focus.
41
42
  */
42
43
  collapsed?: boolean;
43
44
  /**
@@ -46,7 +47,7 @@ export declare type GeocoderProps = {
46
47
  countries?: string;
47
48
  /**
48
49
  * Default: 200
49
- * Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the Geocoder
50
+ * Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the LocationSearch
50
51
  * input box. This parameter may be useful for reducing the total number of API calls made for a single query.
51
52
  */
52
53
  debounceSearch?: number;
@@ -56,7 +57,7 @@ export declare type GeocoderProps = {
56
57
  */
57
58
  enableEventLogging?: boolean;
58
59
  /**
59
- * A function accepting the query string, current features list, and geocoder options which performs geocoding to
60
+ * A function accepting the query string, current features list, and LocationSearch options which performs geocoding to
60
61
  * supplement results from the Maplibre Geocoding API. Expected to return a Promise which resolves to an Array of
61
62
  * GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format.
62
63
  */
@@ -131,7 +132,7 @@ export declare type GeocoderProps = {
131
132
  popupRender?: Function;
132
133
  /**
133
134
  * Default: 'top-right'
134
- * Position the geocoder will be rendered on the map. Only relevant when `<Geocoder>` is used with a map.
135
+ * Position the LocationSearch will be rendered on the map. Only relevant when `<LocationSearch>` is used with a map.
135
136
  */
136
137
  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
137
138
  /**
@@ -168,13 +169,13 @@ export declare type GeocoderProps = {
168
169
  showResultMarkers?: boolean | object;
169
170
  /**
170
171
  * Default: true
171
- * If `false`, indicates that search will only occur on enter key press. If `true`, indicates that the Geocoder will
172
+ * If `false`, indicates that search will only occur on enter key press. If `true`, indicates that the LocationSearch will
172
173
  * search on the input box being updated above the minLength option.
173
174
  */
174
175
  showResultsWhileTyping?: boolean;
175
176
  /**
176
177
  * Default: true
177
- * If `true`, the geocoder proximity will automatically update based on the map view.
178
+ * If `true`, the LocationSearch proximity will automatically update based on the map view.
178
179
  */
179
180
  trackProximity?: boolean;
180
181
  /**
@@ -1,2 +1,2 @@
1
1
  export { MapView } from './MapView';
2
- export { Geocoder } from './Geocoder';
2
+ export { Geocoder, LocationSearch } from './LocationSearch';
@@ -1,11 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import { Theme } from '@aws-amplify/ui';
3
3
  export declare type ColorMode = 'system' | 'light' | 'dark';
4
- interface AmplifyProviderProps {
4
+ interface ThemeProviderProps {
5
5
  children: React.ReactNode;
6
6
  colorMode?: ColorMode;
7
7
  theme?: Theme;
8
8
  nonce?: string;
9
9
  }
10
- export declare function AmplifyProvider({ children, colorMode, theme, nonce, }: AmplifyProviderProps): JSX.Element;
10
+ export declare function AmplifyProvider({ children, colorMode, theme, nonce, }: ThemeProviderProps): JSX.Element;
11
+ export declare const ThemeProvider: typeof AmplifyProvider;
11
12
  export {};
@@ -1,3 +1,3 @@
1
- export * from './AmplifyProvider';
1
+ export * from './ThemeProvider';
2
2
  export * from './Authenticator';
3
3
  export * from './Geo';
@@ -1,5 +1,5 @@
1
1
  import { WebTheme } from '@aws-amplify/ui';
2
- import { AmplifyContextType } from '../components/AmplifyProvider/AmplifyContext';
2
+ import { AmplifyContextType } from '../components/ThemeProvider/AmplifyContext';
3
3
  export declare const useTheme: () => WebTheme;
4
4
  /**
5
5
  * Get current Theme object value from Amplify context.
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { ViewProps } from '../types/view';
2
3
  declare type ExpanderType = 'single' | 'multiple';
3
4
  export interface ExpanderProps extends ViewProps {
@@ -26,7 +27,7 @@ export interface ExpanderItemProps extends ViewProps {
26
27
  /**
27
28
  * The content of the heading.
28
29
  */
29
- title?: string;
30
+ title?: React.ReactNode;
30
31
  /**
31
32
  * A unique value for the item.
32
33
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "2.18.0",
3
+ "version": "2.18.3",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {
@@ -58,7 +58,7 @@
58
58
  "size": "yarn run size-limit"
59
59
  },
60
60
  "dependencies": {
61
- "@aws-amplify/ui": "3.9.0",
61
+ "@aws-amplify/ui": "3.9.2",
62
62
  "@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9",
63
63
  "@radix-ui/react-accordion": "0.1.6",
64
64
  "@radix-ui/react-dropdown-menu": "0.1.6",
@@ -73,7 +73,7 @@
73
73
  "maplibre-gl-js-amplify": "1.5.0",
74
74
  "qrcode": "1.5.0",
75
75
  "react-generate-context": "1.0.1",
76
- "react-map-gl": "7.0.10"
76
+ "react-map-gl": "7.0.15"
77
77
  },
78
78
  "peerDependencies": {
79
79
  "aws-amplify": "3.x.x || 4.x.x",
@@ -132,7 +132,7 @@
132
132
  {
133
133
  "name": "Geo",
134
134
  "path": "dist/esm/index.js",
135
- "import": "{ MapView, Geocoder }",
135
+ "import": "{ MapView, LocationSearch }",
136
136
  "limit": "300 kB"
137
137
  }
138
138
  ]