@aws-amplify/ui 4.0.1 → 5.0.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 18:28:07 GMT
+ * Generated on Mon, 14 Nov 2022 16:53:03 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -255,6 +255,15 @@
   --amplify-components-loader-linear-width: 100%;
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
+  --amplify-components-inappmessaging-dialog-width: 30vw;
+  --amplify-components-inappmessaging-dialog-min-width: 400px;
+  --amplify-components-inappmessaging-dialog-min-height: 400px;
+  --amplify-components-inappmessaging-dialog-height: 50vh;
+  --amplify-components-inappmessaging-button-color: black;
+  --amplify-components-inappmessaging-button-border-radius: 5px;
+  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
+  --amplify-components-inappmessaging-banner-width: 400px ;
+  --amplify-components-inappmessaging-banner-height: 150px ;
   --amplify-components-image-object-position: initial;
   --amplify-components-image-object-fit: initial;
   --amplify-components-image-height: auto;
@@ -338,6 +347,18 @@
   --amplify-components-button-loading-background-color: transparent;
   --amplify-components-badge-text-align: center;
   --amplify-components-badge-line-height: 1;
+  --amplify-components-autocomplete-menu-loading-display: flex;
+  --amplify-components-autocomplete-menu-loading-align-items: center;
+  --amplify-components-autocomplete-menu-empty-display: flex;
+  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
+  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
+  --amplify-components-autocomplete-menu-option-cursor: pointer;
+  --amplify-components-autocomplete-menu-option-color: currentcolor;
+  --amplify-components-autocomplete-menu-options-max-height: 300px;
+  --amplify-components-autocomplete-menu-options-flex-direction: column;
+  --amplify-components-autocomplete-menu-options-display: flex;
+  --amplify-components-autocomplete-menu-border-style: solid;
+  --amplify-components-autocomplete-menu-width: 100%;
   --amplify-components-authenticator-router-border-style: solid;
   --amplify-components-authenticator-container-width-max: 30rem;
   --amplify-components-authenticator-max-width: 60rem;
@@ -509,6 +530,9 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-inappmessaging-header-font-weight: 800;
+  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -618,6 +642,14 @@
   --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
   --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
   --amplify-components-badge-font-weight: 600;
+  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
+  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
+  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
+  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
+  --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
+  --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
+  --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
   --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
   --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
   --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
@@ -806,6 +838,10 @@
   --amplify-components-badge-info-color: var(--amplify-colors-font-info);
   --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
@@ -965,7 +1001,7 @@ html,
 
 @supports (font-variation-settings: normal) {
   html,
-[data-amplify-theme] {
+  [data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -1430,6 +1466,10 @@ strong.amplify-text {
   width: var(--amplify-components-icon-height);
 }
 
+.amplify-highlightmatch__highlighted {
+  font-weight: var(--amplify-components-highlightmatch-highlighted-font-weight);
+}
+
 .amplify-input {
   box-sizing: border-box;
   color: var(--amplify-components-fieldcontrol-color);
@@ -1654,21 +1694,16 @@ strong.amplify-text {
 }
 .amplify-loader circle:last-of-type {
   transform-origin: center center;
-  -webkit-animation-name: amplify-loader-circular;
-          animation-name: amplify-loader-circular;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
-          animation-duration: var(--amplify-components-loader-animation-duration);
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
   stroke: var(--amplify-components-loader-stroke-filled);
   stroke-linecap: var(--amplify-components-loader-stroke-linecap);
 }
 @media (prefers-reduced-motion) {
   .amplify-loader circle:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dasharray: 100% 200%;
     stroke-dashoffset: 50%;
   }
@@ -1676,19 +1711,14 @@ strong.amplify-text {
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
-  -webkit-animation-name: amplify-loader-linear;
-          animation-name: amplify-loader-linear;
-  -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
-          animation-duration: var(--amplify-components-loader-linear-animation-duration);
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
+  animation-name: amplify-loader-linear;
+  animation-duration: var(--amplify-components-loader-linear-animation-duration);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 @media (prefers-reduced-motion) {
   .amplify-loader line:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dashoffset: -50%;
   }
 }
@@ -1723,13 +1753,11 @@ strong.amplify-text {
   font-size: var(--amplify-internal-loader-linear-font-size);
 }
 .amplify-loader--determinate circle:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   transform: rotate(-90deg);
 }
 .amplify-loader--determinate line:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   stroke-dashoffset: 0%;
   stroke-dasharray: none;
 }
@@ -1738,20 +1766,6 @@ strong.amplify-text {
   stroke: none;
 }
 
-@-webkit-keyframes amplify-loader-circular {
-  0% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(120deg);
-  }
-  50% {
-    stroke-dasharray: 20% 400%;
-  }
-  100% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(480deg);
-  }
-}
-
 @keyframes amplify-loader-circular {
   0% {
     stroke-dasharray: 100% 200%;
@@ -1765,14 +1779,6 @@ strong.amplify-text {
     transform: rotate(480deg);
   }
 }
-@-webkit-keyframes amplify-loader-linear {
-  0% {
-    stroke-dashoffset: 200%;
-  }
-  100% {
-    stroke-dashoffset: -50%;
-  }
-}
 @keyframes amplify-loader-linear {
   0% {
     stroke-dashoffset: 200%;
@@ -1782,14 +1788,10 @@ strong.amplify-text {
   }
 }
 .amplify-placeholder {
-  -webkit-animation-direction: alternate;
-          animation-direction: alternate;
-  -webkit-animation-duration: var(--amplify-components-placeholder-transition-duration);
-          animation-duration: var(--amplify-components-placeholder-transition-duration);
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-name: amplify-placeholder-loading;
-          animation-name: amplify-placeholder-loading;
+  animation-direction: alternate;
+  animation-duration: var(--amplify-components-placeholder-transition-duration);
+  animation-iteration-count: infinite;
+  animation-name: amplify-placeholder-loading;
   border-radius: var(--amplify-components-placeholder-border-radius);
   height: var(--amplify-components-placeholder-default-height);
   width: 100%;
@@ -1802,15 +1804,6 @@ strong.amplify-text {
   height: var(--amplify-components-placeholder-large-height);
 }
 
-@-webkit-keyframes amplify-placeholder-loading {
-  0% {
-    background-color: var(--amplify-components-placeholder-start-color);
-  }
-  100% {
-    background-color: var(--amplify-components-placeholder-end-color);
-  }
-}
-
 @keyframes amplify-placeholder-loading {
   0% {
     background-color: var(--amplify-components-placeholder-start-color);
@@ -1821,8 +1814,7 @@ strong.amplify-text {
 }
 @media (prefers-reduced-motion: reduce) {
   .amplify-placeholder {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     background-color: var(--amplify-components-placeholder-end-color);
   }
 }
@@ -1897,6 +1889,54 @@ strong.amplify-text {
   color: inherit;
 }
 
+.amplify-autocomplete__menu__option, .amplify-autocomplete__menu--loading, .amplify-autocomplete__menu--empty {
+  padding-block: var(--amplify-components-autocomplete-menu-space-shared-padding-block);
+  padding-inline: var(--amplify-components-autocomplete-menu-space-shared-padding-inline);
+}
+
+.amplify-autocomplete {
+  position: relative;
+}
+
+.amplify-autocomplete__menu {
+  position: absolute;
+  z-index: 99;
+  width: var(--amplify-components-autocomplete-menu-width);
+  -webkit-margin-before: var(--amplify-components-autocomplete-menu-margin-block-start);
+          margin-block-start: var(--amplify-components-autocomplete-menu-margin-block-start);
+  background-color: var(--amplify-components-autocomplete-menu-background-color);
+  border-color: var(--amplify-components-autocomplete-menu-border-color);
+  border-width: var(--amplify-components-autocomplete-menu-border-width);
+  border-style: var(--amplify-components-autocomplete-menu-border-style);
+  border-radius: var(--amplify-components-autocomplete-menu-border-radius);
+}
+.amplify-autocomplete__menu--empty {
+  display: var(--amplify-components-autocomplete-menu-empty-display);
+}
+.amplify-autocomplete__menu--loading {
+  display: var(--amplify-components-autocomplete-menu-loading-display);
+  align-items: var(--amplify-components-autocomplete-menu-loading-align-items);
+  gap: var(--amplify-components-autocomplete-menu-loading-gap);
+}
+.amplify-autocomplete__menu__options {
+  position: relative;
+  display: var(--amplify-components-autocomplete-menu-options-display);
+  flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
+  max-height: var(--amplify-components-autocomplete-menu-options-max-height);
+}
+.amplify-autocomplete__menu__option {
+  background-color: var(--amplify-components-autocomplete-menu-option-background-color);
+  color: var(--amplify-components-autocomplete-menu-option-color);
+  cursor: var(--amplify-components-autocomplete-menu-option-cursor);
+  transition-duration: var(--amplify-components-autocomplete-menu-option-transition-duration);
+  transition-property: var(--amplify-components-autocomplete-menu-option-transition-property);
+  transition-timing-function: var(--amplify-components-autocomplete-menu-option-transition-timing-function);
+}
+.amplify-autocomplete__menu__option--active {
+  background-color: var(--amplify-components-autocomplete-menu-option-active-background-color);
+  color: var(--amplify-components-autocomplete-menu-option-active-color);
+}
+
 /* Center by default */
 [data-amplify-authenticator] {
   display: grid;
@@ -2279,20 +2319,14 @@ strong.amplify-text {
           padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
 }
 .amplify-expander__content[data-state=open] {
-  -webkit-animation-name: amplify-expander-slide-down;
-          animation-name: amplify-expander-slide-down;
-  -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
+  animation-name: amplify-expander-slide-down;
+  animation-duration: var(--amplify-components-expander-content-open-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
 }
 .amplify-expander__content[data-state=closed] {
-  -webkit-animation-name: amplify-expander-slide-up;
-          animation-name: amplify-expander-slide-up;
-  -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
+  animation-name: amplify-expander-slide-up;
+  animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
 }
 
 .amplify-expander__content__text {
@@ -2313,15 +2347,6 @@ strong.amplify-text {
   transform: rotate(180deg);
 }
 
-@-webkit-keyframes amplify-expander-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: auto;
-  }
-}
-
 @keyframes amplify-expander-slide-down {
   from {
     height: 0;
@@ -2330,14 +2355,6 @@ strong.amplify-text {
     height: auto;
   }
 }
-@-webkit-keyframes amplify-expander-slide-up {
-  from {
-    height: auto;
-  }
-  to {
-    height: 0;
-  }
-}
 @keyframes amplify-expander-slide-up {
   from {
     height: auto;
@@ -2437,7 +2454,6 @@ strong.amplify-text {
   width: 100%;
 }
 .amplify-field-group__field-wrapper--vertical {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -2498,7 +2514,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
-[data-radix-popper-content-wrapper] {
+.amplify-menu-content-wrapper {
   z-index: 999999;
 }
 
@@ -3868,6 +3884,186 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-inappmessaging-backdrop {
+  background-color: var(--amplify-colors-overlay-50);
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-backdrop-content-container {
+  align-items: center;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: 1001;
+}
+
+.amplify-inappmessaging-backdrop-content {
+  pointer-events: auto;
+}
+
+.amplify-inappmessaging-bannermessage {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-banner-height);
+  margin: var(--amplify-space-small);
+  max-width: 50%;
+  position: fixed;
+  width: var(--amplify-components-inappmessaging-banner-width);
+}
+.amplify-inappmessaging-bannermessage--top {
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--middle {
+  bottom: 0;
+  margin: auto var(--amplify-space-small);
+  top: 0;
+}
+.amplify-inappmessaging-bannermessage--bottom {
+  bottom: 0;
+}
+.amplify-inappmessaging-bannermessage--left {
+  left: 0;
+}
+.amplify-inappmessaging-bannermessage--center {
+  left: 0;
+  margin: var(--amplify-space-small) auto;
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--right {
+  right: 0;
+}
+.amplify-inappmessaging-bannermessage--center-middle {
+  inset: 0;
+  margin: auto;
+}
+.amplify-inappmessaging-bannermessage--full-width {
+  max-width: initial;
+  width: calc(100% - 2 * var(--amplify-space-small));
+}
+
+.amplify-inappmessaging-fullscreenmessage {
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-fullscreenmessage--fullscreen {
+  height: auto;
+  inset: 0;
+  position: fixed;
+  width: auto;
+  z-index: 1000;
+}
+
+.amplify-inappmessaging-messagelayout {
+  background-color: var(--amplify-colors-background-primary);
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--amplify-space-xxxs);
+  max-width: 100%;
+  padding: var(--amplify-space-medium);
+}
+.amplify-inappmessaging-messagelayout__button {
+  border-width: 0;
+  width: 100%;
+}
+.amplify-inappmessaging-messagelayout__button, .amplify-inappmessaging-messagelayout__button:active, .amplify-inappmessaging-messagelayout__button:visited, .amplify-inappmessaging-messagelayout__button:hover, .amplify-inappmessaging-messagelayout__button:focus {
+  background-color: var(--amplify-components-inappmessaging-button-background-color);
+  border-radius: var(--amplify-components-inappmessaging-button-border-radius);
+  color: var(--amplify-components-inappmessaging-button-color);
+}
+.amplify-inappmessaging-messagelayout__button--dark:active, .amplify-inappmessaging-messagelayout__button--dark:visited, .amplify-inappmessaging-messagelayout__button--light:active, .amplify-inappmessaging-messagelayout__button--light:visited {
+  filter: brightness(100%);
+}
+.amplify-inappmessaging-messagelayout__button--dark:hover, .amplify-inappmessaging-messagelayout__button--dark:focus {
+  filter: brightness(120%);
+}
+.amplify-inappmessaging-messagelayout__button--light:hover, .amplify-inappmessaging-messagelayout__button--light:focus {
+  filter: brightness(80%);
+}
+.amplify-inappmessaging-messagelayout__close-button {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:active, .amplify-inappmessaging-messagelayout__close-button:visited {
+  color: var(--amplify-colors-neutral-80);
+}
+.amplify-inappmessaging-messagelayout__close-button:hover, .amplify-inappmessaging-messagelayout__close-button:focus {
+  color: var(--amplify-colors-neutral-100);
+}
+.amplify-inappmessaging-messagelayout__content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.amplify-inappmessaging-messagelayout__content--horizontal {
+  flex-direction: row;
+}
+.amplify-inappmessaging-messagelayout__content--vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.amplify-inappmessaging-messagelayout__header {
+  flex-shrink: 0;
+  font-size: var(--amplify-components-inappmessaging-header-font-size);
+  font-weight: var(--amplify-components-inappmessaging-header-font-weight);
+}
+.amplify-inappmessaging-messagelayout__image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.amplify-inappmessaging-messagelayout__image-container img {
+  max-height: 100%;
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  position: absolute;
+}
+.amplify-inappmessaging-messagelayout__image-container--horizontal {
+  max-width: 15%;
+  min-width: 15%;
+}
+.amplify-inappmessaging-messagelayout__image-container--vertical {
+  max-height: 40%;
+  min-height: 40%;
+}
+.amplify-inappmessaging-messagelayout__text-container {
+  flex-direction: column;
+  overflow-y: auto;
+  gap: var(--amplify-space-xxxs);
+}
+.amplify-inappmessaging-messagelayout__text-container--horizontal {
+  flex-grow: 1;
+}
+.amplify-inappmessaging-messagelayout__text-container--vertical {
+  flex-grow: 0;
+}
+
+.amplify-inappmessaging-modalmessage {
+  align-items: center;
+  height: initial;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  width: initial;
+  z-index: 1000;
+}
+.amplify-inappmessaging-modalmessage__dialog {
+  box-shadow: var(--amplify-shadows-medium);
+  height: var(--amplify-components-inappmessaging-dialog-height);
+  min-height: var(--amplify-components-inappmessaging-dialog-min-height);
+  min-width: var(--amplify-components-inappmessaging-dialog-min-width);
+  pointer-events: auto;
+  width: var(--amplify-components-inappmessaging-dialog-width);
+}
+.amplify-inappmessaging-modalmessage__dialog--full-width {
+  width: 100%;
+  margin: var(--amplify-space-small);
+}
+
 [data-label-position=start] {
   flex-direction: row;
 }

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 18:28:07 GMT
+ * Generated on Mon, 14 Nov 2022 16:53:03 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -253,6 +253,15 @@
   --amplify-components-loader-linear-width: 100%;
   --amplify-components-loader-animation-duration: 1s;
   --amplify-components-loader-stroke-linecap: round;
+  --amplify-components-inappmessaging-dialog-width: 30vw;
+  --amplify-components-inappmessaging-dialog-min-width: 400px;
+  --amplify-components-inappmessaging-dialog-min-height: 400px;
+  --amplify-components-inappmessaging-dialog-height: 50vh;
+  --amplify-components-inappmessaging-button-color: black;
+  --amplify-components-inappmessaging-button-border-radius: 5px;
+  --amplify-components-inappmessaging-button-background-color: #e8e8e8;
+  --amplify-components-inappmessaging-banner-width: 400px ;
+  --amplify-components-inappmessaging-banner-height: 150px ;
   --amplify-components-image-object-position: initial;
   --amplify-components-image-object-fit: initial;
   --amplify-components-image-height: auto;
@@ -336,6 +345,18 @@
   --amplify-components-button-loading-background-color: transparent;
   --amplify-components-badge-text-align: center;
   --amplify-components-badge-line-height: 1;
+  --amplify-components-autocomplete-menu-loading-display: flex;
+  --amplify-components-autocomplete-menu-loading-align-items: center;
+  --amplify-components-autocomplete-menu-empty-display: flex;
+  --amplify-components-autocomplete-menu-option-transition-timing-function: ease;
+  --amplify-components-autocomplete-menu-option-transition-property: background-color, color;
+  --amplify-components-autocomplete-menu-option-cursor: pointer;
+  --amplify-components-autocomplete-menu-option-color: currentcolor;
+  --amplify-components-autocomplete-menu-options-max-height: 300px;
+  --amplify-components-autocomplete-menu-options-flex-direction: column;
+  --amplify-components-autocomplete-menu-options-display: flex;
+  --amplify-components-autocomplete-menu-border-style: solid;
+  --amplify-components-autocomplete-menu-width: 100%;
   --amplify-components-authenticator-router-border-style: solid;
   --amplify-components-authenticator-container-width-max: 30rem;
   --amplify-components-authenticator-max-width: 60rem;
@@ -507,6 +528,9 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
+  --amplify-components-inappmessaging-header-font-weight: 800;
+  --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-highlightmatch-highlighted-font-weight: 700;
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -616,6 +640,14 @@
   --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
   --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
   --amplify-components-badge-font-weight: 600;
+  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
+  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
+  --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
+  --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
+  --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
+  --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
+  --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
   --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
   --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
   --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
@@ -804,6 +836,10 @@
   --amplify-components-badge-info-color: var(--amplify-colors-font-info);
   --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
   --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);

package/dist/types/helpers/authenticator/facade.d.ts

@@ -5,7 +5,7 @@
  */
 import { Sender } from 'xstate';
 import { AuthEvent, AuthEventData, AuthMachineState, CodeDeliveryDetails, AmplifyUser, ValidationError, SocialProvider, UnverifiedContactMethods } from '../../types';
-export declare type AuthenticatorRoute = 'authenticated' | 'autoSignIn' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'verifyUser';
+export declare type AuthenticatorRoute = 'authenticated' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'idle' | 'resetPassword' | 'setup' | 'signOut' | 'setupTOTP' | 'signIn' | 'signUp' | 'transition' | 'verifyUser';
 declare type AuthenticatorValidationErrors = ValidationError;
 declare type AuthStatus = 'configuring' | 'authenticated' | 'unauthenticated';
 interface AuthenticatorServiceContextFacade {

package/dist/types/helpers/authenticator/index.d.ts

@@ -5,3 +5,4 @@ export * from './constants';
 export * from './form';
 export * from './utils';
 export * from './formFields';
+export * from './textUtil';