@aws-amplify/ui 4.0.1 → 4.1.1

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 18:28:07 GMT
+ * Generated on Fri, 06 Jan 2023 04:15:01 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -338,6 +338,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 +521,7 @@
   --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-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 +631,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 +827,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);
@@ -1430,6 +1455,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);
@@ -1610,6 +1639,7 @@ strong.amplify-text {
      object-fit: var(--amplify-components-image-object-fit);
   -o-object-position: var(--amplify-components-image-object-position);
      object-position: var(--amplify-components-image-object-position);
+  overflow: clip;
 }
 
 .amplify-link {
@@ -1654,21 +1684,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 +1701,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 +1743,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 +1756,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 +1769,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 +1778,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 +1794,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 +1804,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 +1879,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 +2309,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 +2337,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 +2345,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 +2444,6 @@ strong.amplify-text {
   width: 100%;
 }
 .amplify-field-group__field-wrapper--vertical {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 18:28:07 GMT
+ * Generated on Fri, 06 Jan 2023 04:15:01 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -336,6 +336,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 +519,7 @@
   --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-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 +629,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 +825,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/utils.d.ts

@@ -3,6 +3,11 @@
  * implementations can use.
  */
 import { AuthInterpreter, HubHandler } from '../../types';
+declare type ConfigureOptions = {
+    packageName: string;
+    version: string;
+};
+export declare const configureComponent: ({ packageName, version, }: ConfigureOptions) => void;
 export declare const censorAllButFirstAndLast: (value: string) => string;
 export declare const censorPhoneNumber: (val: string) => string;
 export declare const defaultAuthHubHandler: HubHandler;
@@ -17,3 +22,4 @@ export declare const defaultAuthHubHandler: HubHandler;
 export declare const listenToAuthHub: (service: AuthInterpreter, handler?: HubHandler) => () => void;
 export declare const hasSpecialChars: (password: string) => boolean;
 export declare const getTotpCodeURL: (issuer: string, username: string, secret: string) => string;
+export {};

package/dist/types/theme/tokens/components/autocomplete.d.ts

@@ -0,0 +1,42 @@
+import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderWidthValue, BorderStyleValue, BorderRadiusValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexDirectionValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue, TransitionTimingFunctionValue } from '../types/designToken';
+export interface AutocompleteTokens {
+    menu: {
+        width: DesignToken<SpaceValue>;
+        marginBlockStart: DesignToken<SpaceValue>;
+        backgroundColor: DesignToken<BackgroundColorValue>;
+        borderColor: DesignToken<BorderColorValue>;
+        borderWidth: DesignToken<BorderWidthValue>;
+        borderStyle: DesignToken<BorderStyleValue>;
+        borderRadius: DesignToken<BorderRadiusValue>;
+        options: {
+            display: DesignToken<DisplayValue>;
+            flexDirection: DesignToken<FlexDirectionValue>;
+            maxHeight: DesignToken<SpaceValue>;
+        };
+        option: {
+            backgroundColor: DesignToken<BackgroundColorValue>;
+            color: DesignToken<ColorValue>;
+            cursor: DesignToken<CursorValue>;
+            transitionDuration: DesignToken<TransitionDurationValue>;
+            transitionProperty: DesignToken<TransitionPropertyValue>;
+            transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
+            _active: {
+                backgroundColor: DesignToken<BackgroundColorValue>;
+                color: DesignToken<ColorValue>;
+            };
+        };
+        _empty: {
+            display: DesignToken<DisplayValue>;
+        };
+        _loading: {
+            alignItems: DesignToken<AlignItemsValue>;
+            display: DesignToken<DisplayValue>;
+            gap: DesignToken<SpaceValue>;
+        };
+        spaceShared: {
+            paddingBlock: DesignToken<SpaceValue>;
+            paddingInline: DesignToken<SpaceValue>;
+        };
+    };
+}
+export declare const autocomplete: AutocompleteTokens;

package/dist/types/theme/tokens/components/highlightMatch.d.ts

@@ -0,0 +1,9 @@
+import { DesignToken, FontWeightValue } from '../types/designToken';
+interface HighlightMatchHighlightedTokens {
+    fontWeight: DesignToken<FontWeightValue>;
+}
+export interface HighlightMatchTokens {
+    highlighted: HighlightMatchHighlightedTokens;
+}
+export declare const highlightmatch: HighlightMatchTokens;
+export {};

package/dist/types/theme/tokens/components/index.d.ts

@@ -1,4 +1,5 @@
 import { AlertTokens } from './alert';
+import { AutocompleteTokens } from './autocomplete';
 import { AuthenticatorTokens } from './authenticator';
 import { BadgeTokens } from './badge';
 import { ButtonTokens } from './button';
@@ -16,6 +17,7 @@ import { FieldGroupTokens } from './fieldGroup';
 import { FieldMessagesTokens } from './fieldMessages';
 import { FlexTokens } from './flex';
 import { HeadingTokens } from './heading';
+import { HighlightMatchTokens } from './highlightMatch';
 import { IconTokens } from './icon';
 import { ImageTokens } from './image';
 import { LinkTokens } from './link';
@@ -44,6 +46,7 @@ import { ToggleButtonGroupTokens } from './toggleButtonGroup';
 export interface ComponentTokens {
     alert: AlertTokens;
     authenticator: AuthenticatorTokens;
+    autocomplete: AutocompleteTokens;
     badge: BadgeTokens;
     button: ButtonTokens;
     card: CardTokens;
@@ -61,6 +64,7 @@ export interface ComponentTokens {
     flex: FlexTokens;
     heading: HeadingTokens;
     icon: IconTokens;
+    highlightmatch: HighlightMatchTokens;
     image: ImageTokens;
     link: LinkTokens;
     loader: LoaderTokens;

package/dist/types/types/primitives/componentClassName.d.ts

@@ -4,6 +4,14 @@ export declare enum ComponentClassName {
     AlertHeading = "amplify-alert__heading",
     AlertBody = "amplify-alert__body",
     AlertDismiss = "amplify-alert__dismiss",
+    Autocomplete = "amplify-autocomplete",
+    AutocompleteMenu = "amplify-autocomplete__menu",
+    AutocompleteMenuEmpty = "amplify-autocomplete__menu--empty",
+    AutocompleteMenuFooter = "amplify-autocomplete__menu__footer",
+    AutocompleteMenuHeader = "amplify-autocomplete__menu__header",
+    AutocompleteMenuLoading = "amplify-autocomplete__menu--loading",
+    AutocompleteMenuOption = "amplify-autocomplete__menu__option",
+    AutocompleteMenuOptions = "amplify-autocomplete__menu__options",
     Badge = "amplify-badge",
     Button = "amplify-button",
     ButtonGroup = "amplify-buttongroup",
@@ -48,6 +56,8 @@ export declare enum ComponentClassName {
     Flex = "amplify-flex",
     Grid = "amplify-grid",
     Heading = "amplify-heading",
+    HighlightMatch = "amplify-highlightmatch",
+    HighlightMatchHighlighted = "amplify-highlightmatch__highlighted",
     Icon = "amplify-icon",
     Image = "amplify-image",
     Input = "amplify-input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {