@aws-amplify/ui-react 2.18.1 → 2.18.2

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 Thu, 19 May 2022 22:35:34 GMT
7
+ * Generated on Tue, 24 May 2022 22:52:46 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);
@@ -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);
@@ -3417,9 +3428,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3417
3428
  }
3418
3429
 
3419
3430
  .amplify-togglebutton {
3420
- background-color: var(--amplify-internal-togglebutton-background-color);
3421
- border-color: var(--amplify-internal-togglebutton-border-color);
3422
- color: var(--amplify-internal-togglebutton-color);
3423
3431
  --amplify-internal-togglebutton-background-color: initial;
3424
3432
  --amplify-internal-togglebutton-border-color: var(
3425
3433
  --amplify-components-togglebutton-border-color
@@ -3427,9 +3435,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3427
3435
  --amplify-internal-togglebutton-color: var(
3428
3436
  --amplify-components-togglebutton-color
3429
3437
  );
3430
- --amplify-internal-togglebutton-hover-background-color: var(
3431
- --amplify-components-togglebutton-hover-background-color
3432
- );
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);
3433
3441
  --amplify-internal-togglebutton-focus-background-color: var(
3434
3442
  --amplify-internal-togglebutton-background-color
3435
3443
  );
@@ -3439,6 +3447,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3439
3447
  --amplify-internal-togglebutton-focus-color: var(
3440
3448
  --amplify-components-togglebutton-focus-color
3441
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
+ );
3442
3459
  --amplify-internal-togglebutton-active-background-color: var(
3443
3460
  --amplify-components-togglebutton-active-background-color
3444
3461
  );
@@ -3453,21 +3470,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3453
3470
  );
3454
3471
  }
3455
3472
 
3456
- .amplify-togglebutton:hover {
3457
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
3458
- border-color: var(--amplify-internal-togglebutton-border-color);
3459
- color: var(--amplify-internal-togglebutton-color);
3460
- --amplify-internal-togglebutton-focus-background-color: var(
3461
- --amplify-internal-togglebutton-hover-background-color
3462
- );
3463
- }
3464
-
3465
3473
  .amplify-togglebutton:focus {
3466
3474
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3467
3475
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3468
3476
  color: var(--amplify-internal-togglebutton-focus-color);
3469
3477
  }
3470
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
+
3471
3485
  .amplify-togglebutton:active {
3472
3486
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3473
3487
  }
@@ -3479,24 +3493,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3479
3493
  }
3480
3494
 
3481
3495
  .amplify-togglebutton--pressed {
3496
+ --amplify-internal-togglebutton-border-color: var(
3497
+ --amplify-components-togglebutton-pressed-border-color
3498
+ );
3482
3499
  --amplify-internal-togglebutton-background-color: var(
3483
3500
  --amplify-components-togglebutton-pressed-background-color
3484
3501
  );
3485
3502
  --amplify-internal-togglebutton-color: var(
3486
3503
  --amplify-components-togglebutton-pressed-color
3487
3504
  );
3488
- }
3489
-
3490
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3491
3505
  --amplify-internal-togglebutton-hover-background-color: var(
3492
3506
  --amplify-components-togglebutton-pressed-hover-background-color
3493
3507
  );
3494
- }
3495
-
3496
- .amplify-togglebutton--pressed:disabled {
3497
3508
  --amplify-internal-togglebutton-disabled-background-color: var(
3498
3509
  --amplify-components-togglebutton-pressed-background-color
3499
3510
  );
3511
+ --amplify-internal-togglebutton-disabled-border-color: var(
3512
+ --amplify-components-togglebutton-pressed-border-color
3513
+ );
3500
3514
  --amplify-internal-togglebutton-disabled-color: var(
3501
3515
  --amplify-components-togglebutton-pressed-color
3502
3516
  );
@@ -3522,27 +3536,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3522
3536
  --amplify-internal-togglebutton-primary-color
3523
3537
  );
3524
3538
  border-width: var(--amplify-components-togglebutton-primary-border-width);
3525
- --amplify-internal-togglebutton-hover-background-color: var(
3526
- --amplify-components-togglebutton-primary-background-color
3527
- );
3528
- --amplify-internal-togglebutton-focus-border-color: var(
3529
- --amplify-components-togglebutton-border-color
3530
- );
3531
- --amplify-internal-togglebutton-focus-color: var(
3532
- --amplify-components-togglebutton-color
3533
- );
3534
- --amplify-internal-togglebutton-active-background-color: var(
3535
- --amplify-components-togglebutton-primary-background-color
3536
- );
3537
- --amplify-internal-togglebutton-disabled-background-color: var(
3538
- --amplify-components-togglebutton-primary-background-color
3539
- );
3540
- --amplify-internal-togglebutton-disabled-border-color: var(
3541
- --amplify-components-togglebutton-border-color
3542
- );
3543
- --amplify-internal-togglebutton-disabled-color: var(
3544
- --amplify-components-togglebutton-color
3545
- );
3546
3539
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3547
3540
  --amplify-components-togglebutton-primary-focus-background-color
3548
3541
  );
@@ -3552,6 +3545,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3552
3545
  --amplify-internal-togglebutton-primary-focus-color: var(
3553
3546
  --amplify-components-togglebutton-primary-focus-color
3554
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
+ );
3555
3560
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3556
3561
  --amplify-components-togglebutton-primary-hover-background-color
3557
3562
  );
@@ -3561,43 +3566,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3561
3566
  --amplify-internal-togglebutton-primary-hover-color: var(
3562
3567
  --amplify-components-togglebutton-primary-hover-color
3563
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
+ );
3564
3578
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3565
3579
  --amplify-components-togglebutton-primary-disabled-background-color
3566
3580
  );
3567
3581
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3568
- --amplify-internal-togglebutton-primary-border-color
3582
+ --amplify-components-togglebutton-primary-disabled-border-color
3569
3583
  );
3570
3584
  --amplify-internal-togglebutton-primary-disabled-color: var(
3571
3585
  --amplify-components-togglebutton-primary-disabled-color
3572
3586
  );
3573
- }
3574
-
3575
- .amplify-togglebutton--primary:focus {
3576
- --amplify-internal-togglebutton-focus-background-color: var(
3577
- --amplify-internal-togglebutton-primary-focus-background-color
3578
- );
3579
- --amplify-internal-togglebutton-focus-border-color: var(
3580
- --amplify-internal-togglebutton-primary-focus-border-color
3581
- );
3582
- --amplify-internal-togglebutton-focus-color: var(
3583
- --amplify-internal-togglebutton-primary-focus-color
3584
- );
3585
- box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
3586
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3587
- --amplify-internal-togglebutton-primary-focus-border-color
3588
- );
3589
- }
3590
-
3591
- .amplify-togglebutton--primary:hover {
3592
- background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
3593
- border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
3594
- color: var(--amplify-internal-togglebutton-primary-hover-color);
3595
- --amplify-internal-togglebutton-focus-background-color: var(
3596
- --amplify-internal-togglebutton-primary-hover-background-color
3597
- );
3598
- }
3599
-
3600
- .amplify-togglebutton--primary:disabled {
3601
3587
  --amplify-internal-togglebutton-disabled-background-color: var(
3602
3588
  --amplify-internal-togglebutton-primary-disabled-background-color
3603
3589
  );
@@ -3609,6 +3595,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
3609
3595
  );
3610
3596
  }
3611
3597
 
3598
+ .amplify-togglebutton--primary:focus {
3599
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3600
+ }
3601
+
3612
3602
  .amplify-togglebutton--pressed {
3613
3603
  --amplify-internal-togglebutton-primary-background-color: var(
3614
3604
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3619,48 +3609,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3619
3609
  --amplify-internal-togglebutton-primary-color: var(
3620
3610
  --amplify-components-togglebutton-primary-pressed-color
3621
3611
  );
3622
- }
3623
-
3624
- .amplify-togglebutton--pressed:focus {
3625
3612
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3626
3613
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3627
3614
  );
3628
3615
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3629
3616
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3630
3617
  );
3631
- }
3632
-
3633
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3634
- --amplify-internal-togglebutton-primary-hover-background-color: var(
3635
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3636
- );
3637
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3638
- --amplify-components-togglebutton-primary-pressed-hover-border-color
3639
- );
3640
- --amplify-internal-togglebutton-primary-focus-background-color: var(
3641
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3642
- );
3643
- }
3644
-
3645
- .amplify-togglebutton--pressed:focus {
3646
3618
  --amplify-internal-togglebutton-primary-focus-color: var(
3647
- --amplify-components-togglebutton-primary-pressed-color
3619
+ --amplify-components-togglebutton-primary-pressed-focus-color
3648
3620
  );
3649
- }
3650
-
3651
- .amplify-togglebutton--pressed:hover {
3652
3621
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3653
- --amplify-components-togglebutton-primary-hover-background-color
3622
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3654
3623
  );
3655
3624
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3656
- --amplify-internal-togglebutton-primary-border-color
3625
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3657
3626
  );
3658
3627
  --amplify-internal-togglebutton-primary-hover-color: var(
3659
- --amplify-components-togglebutton-primary-pressed-color
3628
+ --amplify-components-togglebutton-primary-pressed-hover-color
3660
3629
  );
3661
- }
3662
-
3663
- .amplify-togglebutton--pressed:disabled {
3664
3630
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3665
3631
  --amplify-components-togglebutton-primary-pressed-background-color
3666
3632
  );
@@ -3672,29 +3638,25 @@ html[dir=rtl] .amplify-field-group__inner-start {
3672
3638
  );
3673
3639
  }
3674
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
+
3675
3647
  .amplify-togglebutton--link {
3676
3648
  --amplify-internal-togglebutton-link-background-color: var(
3677
- --amplify-components-togglebutton-background-color
3649
+ --amplify-components-togglebutton-link-background-color
3678
3650
  );
3679
3651
  --amplify-internal-togglebutton-link-color: var(
3680
3652
  --amplify-components-togglebutton-link-color
3681
3653
  );
3682
- background-color: var(--amplify-internal-togglebutton-link-background-color);
3683
- color: var(--amplify-internal-togglebutton-link-color);
3684
- --amplify-internal-togglebutton-link-hover-background-color: var(
3685
- --amplify-components-togglebutton-link-hover-background-color
3654
+ --amplify-internal-togglebutton-background-color: var(
3655
+ --amplify-internal-togglebutton-link-background-color
3686
3656
  );
3687
- --amplify-internal-togglebutton-link-hover-color: var(
3688
- --amplify-components-togglebutton-link-hover-color
3657
+ --amplify-internal-togglebutton-color: var(
3658
+ --amplify-internal-togglebutton-link-color
3689
3659
  );
3690
- }
3691
-
3692
- .amplify-togglebutton--link:hover {
3693
- background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
3694
- color: var(--amplify-internal-togglebutton-link-hover-color);
3695
- }
3696
-
3697
- .amplify-togglebutton--link:focus {
3698
3660
  --amplify-internal-togglebutton-link-focus-background-color: var(
3699
3661
  --amplify-components-togglebutton-link-focus-background-color
3700
3662
  );
@@ -3707,12 +3669,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3707
3669
  --amplify-internal-togglebutton-focus-color: var(
3708
3670
  --amplify-internal-togglebutton-link-focus-color
3709
3671
  );
3710
- }
3711
-
3712
- .amplify-togglebutton--link:disabled {
3713
- --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(
3714
3685
  --amplify-components-togglebutton-link-disabled-color
3715
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
+ );
3716
3696
  }
3717
3697
 
3718
3698
  .amplify-togglebutton--pressed {
@@ -3722,22 +3702,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3722
3702
  --amplify-internal-togglebutton-link-background-color: var(
3723
3703
  --amplify-components-togglebutton-link-pressed-background-color
3724
3704
  );
3725
- }
3726
-
3727
- .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
+ );
3728
3711
  --amplify-internal-togglebutton-link-hover-background-color: var(
3729
3712
  --amplify-components-togglebutton-link-pressed-hover-background-color
3730
3713
  );
3731
3714
  --amplify-internal-togglebutton-link-hover-color: var(
3732
- --amplify-components-togglebutton-link-pressed-color
3733
- );
3734
- }
3735
-
3736
- .amplify-togglebutton--pressed:focus {
3737
- --amplify-internal-togglebutton-link-focus-background-color: var(
3738
- --amplify-components-togglebutton-link-pressed-background-color
3715
+ --amplify-components-togglebutton-link-pressed-hover-color
3739
3716
  );
3740
- --amplify-internal-togglebutton-link-focus-color: var(
3717
+ --amplify-internal-togglebutton-link-disabled-color: var(
3741
3718
  --amplify-components-togglebutton-link-pressed-color
3742
3719
  );
3743
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';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "2.18.1",
3
+ "version": "2.18.2",
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.1",
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
  ]