@aws-amplify/ui 3.1.0 → 3.3.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 (8) hide show
  1. package/dist/esm/index.js +6 -6
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.ts +226 -114
  4. package/dist/index.js +12 -12
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +127 -143
  7. package/dist/theme.css +31 -2
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Tue, 01 Mar 2022 22:42:53 GMT
6
+ * Generated on Thu, 10 Mar 2022 23:10:07 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -12,6 +12,7 @@
12
12
  --amplify-time-long: 500ms;
13
13
  --amplify-time-medium: 250ms;
14
14
  --amplify-time-short: 100ms;
15
+ --amplify-space-relative-full: 100%;
15
16
  --amplify-space-relative-xxxl: 4.5em;
16
17
  --amplify-space-relative-xxl: 3.0em;
17
18
  --amplify-space-relative-xl: 2.0em;
@@ -19,7 +20,7 @@
19
20
  --amplify-space-relative-medium: 1em;
20
21
  --amplify-space-relative-small: 0.75em;
21
22
  --amplify-space-relative-xs: 0.5em;
22
- --amplify-space-relative-xxs: 0.375rem;
23
+ --amplify-space-relative-xxs: 0.375em;
23
24
  --amplify-space-relative-xxxs: 0.25em;
24
25
  --amplify-space-xxxl: 4.5rem;
25
26
  --amplify-space-xxl: 3.0rem;
@@ -30,6 +31,7 @@
30
31
  --amplify-space-xs: 0.5rem;
31
32
  --amplify-space-xxs: 0.375rem;
32
33
  --amplify-space-xxxs: 0.25rem;
34
+ --amplify-space-zero: 0;
33
35
  --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
34
36
  --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
35
37
  --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
@@ -627,10 +629,20 @@
627
629
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
628
630
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
629
631
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
632
+ --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
633
+ --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
634
+ --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
635
+ --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
630
636
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
631
637
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
632
638
  --amplify-components-divider-border-style: solid;
633
639
  --amplify-components-countrycodeselect-height: 100%;
640
+ --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
641
+ --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
642
+ --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
643
+ --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
644
+ --amplify-components-copy-gap: var(--amplify-space-relative-medium);
645
+ --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
634
646
  --amplify-components-checkboxfield-justify-content: center;
635
647
  --amplify-components-checkboxfield-flex-direction: column;
636
648
  --amplify-components-checkboxfield-align-content: center;
@@ -803,6 +815,23 @@
803
815
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
804
816
  --amplify-components-badge-line-height: 1;
805
817
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
818
+ --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
819
+ --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
820
+ --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
821
+ --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
822
+ --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
823
+ --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
824
+ --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
825
+ --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
826
+ --amplify-components-authenticator-router-border-style: solid;
827
+ --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
828
+ --amplify-components-authenticator-container-width-max: 30rem;
829
+ --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
830
+ --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
831
+ --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
832
+ --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
833
+ --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
834
+ --amplify-components-authenticator-max-width: 60rem;
806
835
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
807
836
  --amplify-components-alert-success-color: var(--amplify-colors-font-success);
808
837
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
@@ -1411,6 +1440,34 @@ h6.amplify-heading {
1411
1440
  background-color: var(--amplify-components-placeholder-end-color);
1412
1441
  }
1413
1442
  }
1443
+ [data-amplify-copy] {
1444
+ display: flex;
1445
+ font-size: var(--amplify-components-copy-font-size);
1446
+ gap: var(--amplify-components-copy-gap);
1447
+ justify-content: center;
1448
+ align-items: center;
1449
+ word-break: break-all;
1450
+ }
1451
+
1452
+ [data-amplify-copy-svg] {
1453
+ cursor: pointer;
1454
+ position: relative;
1455
+ }
1456
+ [data-amplify-copy-svg] path {
1457
+ fill: var(--amplify-components-copy-svg-path-fill);
1458
+ }
1459
+ [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
1460
+ visibility: visible;
1461
+ font-size: var(--amplify-components-copy-tool-tip-font-size);
1462
+ }
1463
+
1464
+ [data-amplify-copy-tooltip] {
1465
+ visibility: hidden;
1466
+ position: absolute;
1467
+ bottom: var(--amplify-components-copy-tool-tip-bottom);
1468
+ color: var(--amplify-components-copy-tool-tip-color);
1469
+ }
1470
+
1414
1471
  .amplify-alert {
1415
1472
  align-items: var(--amplify-components-alert-align-items);
1416
1473
  justify-content: var(--amplify-components-alert-justify-content);
@@ -1457,150 +1514,51 @@ h6.amplify-heading {
1457
1514
  /* Center by default */
1458
1515
  [data-amplify-authenticator] {
1459
1516
  display: grid;
1517
+ max-width: var(--amplify-components-authenticator-max-width);
1518
+ margin: auto;
1460
1519
  }
1461
-
1462
1520
  [data-amplify-authenticator][data-variation=modal] {
1463
1521
  display: grid;
1464
- width: 100vw;
1465
- height: 100vh;
1466
- height: -webkit-fill-available;
1467
- background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1468
- /* Override browser default `body { margin: 8px }` */
1522
+ width: var(--amplify-components-authenticator-modal-width);
1523
+ height: var(--amplify-components-authenticator-modal-height);
1524
+ background-color: var(--amplify-components-authenticator-modal-background-color);
1469
1525
  position: fixed;
1470
- top: 0;
1471
- left: 0;
1526
+ top: var(--amplify-components-authenticator-modal-top);
1527
+ left: var(--amplify-components-authenticator-modal-left);
1472
1528
  /* Having a z-index at least "wins" by default */
1473
1529
  z-index: 1;
1474
- /* top-align at the top 20% of the screen */
1475
- box-sizing: border-box;
1476
- padding-top: 20vh;
1477
- align-content: flex-start;
1478
- }
1479
- @media (max-width: 30rem) {
1480
- [data-amplify-authenticator][data-variation=modal] {
1481
- overflow: auto;
1482
- padding-top: 0;
1483
- }
1484
- }
1485
-
1486
- [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1487
- max-height: 60vh;
1488
- overflow-y: auto;
1489
- /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
1490
- background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center bottom;
1491
- background-repeat: no-repeat;
1492
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
1493
- background-attachment: local, local, scroll, scroll;
1494
- }
1495
- @media (max-width: 30rem) {
1496
- [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1497
- max-height: unset;
1498
- }
1499
1530
  }
1500
-
1501
- /* Texture for modal */
1502
- [data-amplify-authenticator][data-variation=modal]::before {
1503
- position: absolute;
1504
- width: 100%;
1505
- height: 100%;
1506
- content: "";
1507
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='texture' data-v-1d260e0e=''%3E%3Cfilter id='noise' data-v-1d260e0e=''%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch' data-v-1d260e0e=''%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' data-v-1d260e0e=''%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' data-v-1d260e0e=''%3E%3C/rect%3E%3C/svg%3E");
1508
- opacity: 0.35;
1509
- filter: "contrast(120%) brightness(120%)";
1510
- }
1511
-
1512
1531
  [data-amplify-authenticator] [data-amplify-container] {
1513
- /* Fix z-index of texture being over the Authenticator */
1514
- position: relative;
1515
1532
  place-self: center;
1516
- width: 30rem;
1517
1533
  }
1518
- @media (max-width: 30rem) {
1534
+ @media (min-width: 30rem) {
1519
1535
  [data-amplify-authenticator] [data-amplify-container] {
1520
- width: 100%;
1536
+ width: var(--amplify-components-authenticator-container-width-max);
1521
1537
  }
1522
1538
  }
1523
-
1524
- [data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
1525
- padding-bottom: var(--amplify-space-medium);
1526
- text-align: center;
1527
- }
1528
-
1529
1539
  [data-amplify-authenticator] [data-amplify-router] {
1530
- background-color: var(--amplify-colors-background-primary);
1531
- box-shadow: var(--amplify-shadows-medium);
1540
+ background-color: var(--amplify-components-authenticator-router-background-color);
1541
+ box-shadow: var(--amplify-components-authenticator-router-box-shadow);
1542
+ border-color: var(--amplify-components-authenticator-router-border-color);
1543
+ border-width: var(--amplify-components-authenticator-router-border-width);
1544
+ border-style: var(--amplify-components-authenticator-router-border-style);
1545
+ }
1546
+ [data-amplify-authenticator] [data-amplify-footer] {
1547
+ padding-bottom: var(--amplify-components-authenticator-footer-padding-bottom);
1548
+ text-align: center;
1532
1549
  }
1533
-
1534
1550
  [data-amplify-authenticator] [data-amplify-form] {
1535
- padding: var(--amplify-space-xl);
1536
- }
1537
-
1538
- [data-amplify-authenticator] [data-state=inactive][role=tab] {
1539
- background-color: var(--amplify-colors-background-secondary);
1540
- }
1541
-
1542
- /* Remove double-border between the password field & reveal button */
1543
- [data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
1544
- border-left: none;
1545
- }
1546
-
1547
- [data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
1548
- height: 100%;
1549
- }
1550
-
1551
- [data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
1552
- height: 100%;
1553
- }
1554
-
1555
- /* Remove double-border between the phone field & country select */
1556
- [data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
1557
- border-right: none;
1558
- }
1559
-
1560
- [data-amplify-authenticator] [data-or-container] {
1561
- position: relative;
1562
- color: gray;
1563
- align-items: center;
1564
- justify-content: center;
1565
- padding: 1.5rem 0px;
1566
- }
1567
- [data-amplify-authenticator] [data-or-container] [data-or-line] {
1568
- position: absolute;
1569
- background: var(--amplify-colors-white);
1570
- z-index: 1;
1571
- padding: 0px 1.5rem;
1551
+ padding: var(--amplify-components-authenticator-form-padding);
1572
1552
  }
1573
-
1574
- [data-amplify-copy] {
1575
- display: flex;
1576
- font-size: 0.688rem;
1577
- gap: 1rem;
1578
- justify-content: center;
1579
- align-items: center;
1553
+ [data-amplify-authenticator] [data-state=inactive] {
1554
+ background-color: var(--amplify-components-authenticator-state-inactive-background-color);
1580
1555
  }
1581
- @media (max-width: 30rem) {
1582
- [data-amplify-copy] {
1583
- word-break: break-all;
1556
+ @media (max-width: 26rem) {
1557
+ [data-amplify-authenticator] [data-amplify-sign-up-errors] {
1558
+ font-size: 0.688rem;
1584
1559
  }
1585
1560
  }
1586
1561
 
1587
- [data-amplify-copy-svg] {
1588
- cursor: pointer;
1589
- position: relative;
1590
- }
1591
- [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
1592
- visibility: visible;
1593
- font-size: 0.55rem;
1594
- }
1595
-
1596
- [data-amplify-copy-tooltip] {
1597
- visibility: hidden;
1598
- position: absolute;
1599
- top: -1rem;
1600
- left: -0.1rem;
1601
- color: var(--amplify-colors-teal-100);
1602
- }
1603
-
1604
1562
  .amplify-card {
1605
1563
  background-color: var(--amplify-components-card-background-color);
1606
1564
  border-radius: var(--amplify-components-card-border-radius);
@@ -1608,7 +1566,7 @@ h6.amplify-heading {
1608
1566
  border-style: var(--amplify-components-card-border-style);
1609
1567
  border-color: var(--amplify-components-card-border-color);
1610
1568
  box-shadow: var(--amplify-components-card-box-shadow);
1611
- display: inline-block;
1569
+ display: block;
1612
1570
  padding: var(--amplify-components-card-padding);
1613
1571
  }
1614
1572
  .amplify-card[data-variation=outlined] {
@@ -1724,10 +1682,11 @@ h6.amplify-heading {
1724
1682
  border-color: var(--amplify-components-divider-border-color);
1725
1683
  border-style: var(--amplify-components-divider-border-style);
1726
1684
  border-width: 0;
1727
- margin: 0;
1728
1685
  opacity: var(--amplify-components-divider-opacity);
1729
1686
  padding: 0;
1730
1687
  display: block;
1688
+ position: relative;
1689
+ text-align: center;
1731
1690
  }
1732
1691
  .amplify-divider[aria-orientation=horizontal] {
1733
1692
  width: 100%;
@@ -1748,6 +1707,28 @@ h6.amplify-heading {
1748
1707
  .amplify-divider[aria-orientation=vertical][data-size=large] {
1749
1708
  border-left-width: var(--amplify-components-divider-large-border-width);
1750
1709
  }
1710
+ .amplify-divider--label {
1711
+ display: flex;
1712
+ justify-content: center;
1713
+ }
1714
+ .amplify-divider--label::after {
1715
+ content: attr(data-label);
1716
+ position: absolute;
1717
+ transform: translateY(-50%);
1718
+ font-size: var(--amplify-components-divider-label-font-size);
1719
+ padding-inline: var(--amplify-components-divider-label-padding-inline);
1720
+ background-color: var(--amplify-components-divider-label-background-color);
1721
+ color: var(--amplify-components-divider-label-color);
1722
+ }
1723
+ .amplify-divider--label[aria-orientation=vertical] {
1724
+ flex-direction: column;
1725
+ }
1726
+ .amplify-divider--label[aria-orientation=vertical]::after {
1727
+ top: auto;
1728
+ transform: translateX(-50%);
1729
+ padding-block: 0;
1730
+ padding-inline: 0;
1731
+ }
1751
1732
 
1752
1733
  .amplify-expander {
1753
1734
  display: block;
@@ -1982,22 +1963,6 @@ h6.amplify-heading {
1982
1963
  color: var(--amplify-components-field-label-color);
1983
1964
  }
1984
1965
 
1985
- [data-label-position=start] {
1986
- flex-direction: row;
1987
- }
1988
-
1989
- [data-label-position=end] {
1990
- flex-direction: row-reverse;
1991
- }
1992
-
1993
- [data-label-position=top] {
1994
- flex-direction: column;
1995
- }
1996
-
1997
- [data-label-position=bottom] {
1998
- flex-direction: column-reverse;
1999
- }
2000
-
2001
1966
  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
2002
1967
  border-start-start-radius: 0;
2003
1968
  border-end-start-radius: 0;
@@ -2282,6 +2247,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2282
2247
  align-items: var(--amplify-components-radio-align-items);
2283
2248
  justify-content: var(--amplify-components-radio-justify-content);
2284
2249
  gap: inherit;
2250
+ flex-direction: row-reverse;
2285
2251
  }
2286
2252
 
2287
2253
  .amplify-radio[data-disabled=true] {
@@ -2359,10 +2325,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
2359
2325
  .amplify-radiogroup {
2360
2326
  gap: inherit;
2361
2327
  flex-direction: inherit;
2328
+ align-items: inherit;
2362
2329
  }
2363
2330
 
2364
2331
  .amplify-radiogroupfield {
2365
2332
  flex-direction: column;
2333
+ align-items: flex-start;
2366
2334
  }
2367
2335
 
2368
2336
  .amplify-select__wrapper {
@@ -2904,6 +2872,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
2904
2872
  }
2905
2873
  }
2906
2874
 
2875
+ [data-label-position=start] {
2876
+ flex-direction: row;
2877
+ }
2878
+
2879
+ [data-label-position=end] {
2880
+ flex-direction: row-reverse;
2881
+ }
2882
+
2883
+ [data-label-position=top] {
2884
+ flex-direction: column;
2885
+ }
2886
+
2887
+ [data-label-position=bottom] {
2888
+ flex-direction: column-reverse;
2889
+ }
2890
+
2907
2891
  .amplify-visually-hidden {
2908
2892
  position: absolute;
2909
2893
  width: 1px;
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 01 Mar 2022 22:42:53 GMT
3
+ * Generated on Thu, 10 Mar 2022 23:10:07 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -10,6 +10,7 @@
10
10
  --amplify-time-long: 500ms;
11
11
  --amplify-time-medium: 250ms;
12
12
  --amplify-time-short: 100ms;
13
+ --amplify-space-relative-full: 100%;
13
14
  --amplify-space-relative-xxxl: 4.5em;
14
15
  --amplify-space-relative-xxl: 3.0em;
15
16
  --amplify-space-relative-xl: 2.0em;
@@ -17,7 +18,7 @@
17
18
  --amplify-space-relative-medium: 1em;
18
19
  --amplify-space-relative-small: 0.75em;
19
20
  --amplify-space-relative-xs: 0.5em;
20
- --amplify-space-relative-xxs: 0.375rem;
21
+ --amplify-space-relative-xxs: 0.375em;
21
22
  --amplify-space-relative-xxxs: 0.25em;
22
23
  --amplify-space-xxxl: 4.5rem;
23
24
  --amplify-space-xxl: 3.0rem;
@@ -28,6 +29,7 @@
28
29
  --amplify-space-xs: 0.5rem;
29
30
  --amplify-space-xxs: 0.375rem;
30
31
  --amplify-space-xxxs: 0.25rem;
32
+ --amplify-space-zero: 0;
31
33
  --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
32
34
  --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
33
35
  --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
@@ -625,10 +627,20 @@
625
627
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
626
628
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
627
629
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
630
+ --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
631
+ --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
632
+ --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
633
+ --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
628
634
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
629
635
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
630
636
  --amplify-components-divider-border-style: solid;
631
637
  --amplify-components-countrycodeselect-height: 100%;
638
+ --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
639
+ --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
640
+ --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
641
+ --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
642
+ --amplify-components-copy-gap: var(--amplify-space-relative-medium);
643
+ --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
632
644
  --amplify-components-checkboxfield-justify-content: center;
633
645
  --amplify-components-checkboxfield-flex-direction: column;
634
646
  --amplify-components-checkboxfield-align-content: center;
@@ -801,6 +813,23 @@
801
813
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
802
814
  --amplify-components-badge-line-height: 1;
803
815
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
816
+ --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
817
+ --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
818
+ --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
819
+ --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
820
+ --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
821
+ --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
822
+ --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
823
+ --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
824
+ --amplify-components-authenticator-router-border-style: solid;
825
+ --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
826
+ --amplify-components-authenticator-container-width-max: 30rem;
827
+ --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
828
+ --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
829
+ --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
830
+ --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
831
+ --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
832
+ --amplify-components-authenticator-max-width: 60rem;
804
833
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
805
834
  --amplify-components-alert-success-color: var(--amplify-colors-font-success);
806
835
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.1.0",
3
+ "version": "3.3.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {