@aws-amplify/ui 6.2.0 → 6.4.0

package/dist/styles.layer.css

@@ -84,6 +84,35 @@
   --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
   --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
   --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-avatar-line-height: 1;
+  --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
+  --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-avatar-text-align: center;
+  --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
+  --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
+  --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-avatar-border-radius: 100%;
+  --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
+  --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
+  --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
+  --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
+  --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
+  --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
+  --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
+  --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
+  --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
+  --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
+  --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
+  --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
+  --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
+  --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
+  --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
+  --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
   --amplify-components-badge-line-height: 1;
   --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
@@ -3422,6 +3451,118 @@ strong.amplify-text {
   gap: var(--amplify-space-medium);
 }
 
+.amplify-avatar {
+  --avatar-color: var(--amplify-components-avatar-color);
+  --avatar-background-color: var(--amplify-components-avatar-background-color);
+  --avatar-filled-background-color: var(--amplify-components-avatar-color);
+  --avatar-filled-color: var(--amplify-components-avatar-background-color);
+  --avatar-border-color: var(--amplify-components-avatar-border-color);
+  --avatar-size: var(--amplify-components-avatar-width);
+  --amplify-components-icon-height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--avatar-color);
+  background-color: var(--avatar-background-color);
+  font-weight: var(--amplify-components-avatar-font-weight);
+  font-size: var(--amplify-components-avatar-font-size);
+  width: var(--amplify-components-avatar-width);
+  height: var(--amplify-components-avatar-height);
+  overflow: hidden;
+  border-radius: var(--amplify-components-avatar-border-radius);
+}
+.amplify-avatar--filled {
+  background-color: var(--avatar-filled-background-color);
+  color: var(--avatar-filled-color);
+}
+.amplify-avatar--outlined {
+  border-width: var(--amplify-components-avatar-border-width);
+  border-style: solid;
+  padding: var(--amplify-components-avatar-border-width);
+  border-color: var(--avatar-border-color);
+  background-color: transparent;
+  color: var(--avatar-color);
+}
+.amplify-avatar--small {
+  --avatar-size: var(--amplify-components-avatar-small-width);
+  width: var(--amplify-components-avatar-small-width);
+  height: var(--amplify-components-avatar-small-height);
+  font-size: var(--amplify-components-avatar-small-font-size);
+}
+.amplify-avatar--large {
+  --avatar-size: var(--amplify-components-avatar-large-width);
+  width: var(--amplify-components-avatar-large-width);
+  height: var(--amplify-components-avatar-large-height);
+  font-size: var(--amplify-components-avatar-large-font-size);
+}
+.amplify-avatar--warning {
+  --avatar-border-color: var(
+    --amplify-components-avatar-warning-border-color
+  );
+  --avatar-background-color: var(
+    --amplify-components-avatar-warning-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-warning-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-warning-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-warning-background-color
+  );
+}
+.amplify-avatar--error {
+  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
+  --avatar-background-color: var(
+    --amplify-components-avatar-error-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-error-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-error-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-error-background-color
+  );
+}
+.amplify-avatar--info {
+  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
+  --avatar-background-color: var(
+    --amplify-components-avatar-info-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-info-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-info-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-info-background-color
+  );
+}
+.amplify-avatar--success {
+  --avatar-border-color: var(
+    --amplify-components-avatar-success-border-color
+  );
+  --avatar-background-color: var(
+    --amplify-components-avatar-success-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-success-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-success-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-success-background-color
+  );
+}
+.amplify-avatar__icon {
+  display: flex;
+  font-size: calc(var(--avatar-size) * 0.6);
+}
+.amplify-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
 .amplify-breadcrumbs__list {
   display: flex;
   flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -6185,6 +6326,115 @@ html[dir=rtl] .amplify-field-group__inner-start {
   gap: var(--amplify-space-small);
 }
 
+.amplify-ai-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.amplify-ai-conversation__message {
+  --content-bg: transparent;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: var(--amplify-space-small);
+  padding: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__list {
+  display: flex;
+  flex-direction: column;
+}
+.amplify-ai-conversation__message__avatar {
+  flex-shrink: 0;
+}
+.amplify-ai-conversation__message__sender {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  height: var(--amplify-components-avatar-height);
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__sender__username {
+  font-weight: bold;
+}
+.amplify-ai-conversation__message__sender__timestamp {
+  color: var(--amplify-colors-font-tertiary);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__message__body {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--body-align-items);
+  gap: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__message__content {
+  background-color: var(--content-bg);
+  border-radius: var(--amplify-radii-medium);
+  padding: var(--content-padding);
+}
+.amplify-ai-conversation__message__actions {
+  display: flex;
+  flex-direction: row;
+}
+.amplify-ai-conversation__message--bubble {
+  --content-bg: var(--bg-color);
+  --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
+  --flex-direction: row-reverse;
+  --body-align-items: flex-end;
+}
+.amplify-ai-conversation__message--user {
+  --bg-color: var(--amplify-colors-background-secondary);
+}
+.amplify-ai-conversation__message--assistant {
+  --bg-color: var(--amplify-colors-primary-10);
+  --flex-direction: row;
+  --body-align-items: flex-start;
+}
+.amplify-ai-conversation__form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__form__dropzone {
+  text-align: initial;
+  border: none;
+  padding: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__attachment {
+  display: flex;
+  flex-direction: row;
+  padding-block: var(--amplify-space-xxxs);
+  padding-inline: var(--amplify-space-xs);
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  align-items: center;
+  gap: var(--amplify-space-xs);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__attachment__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--amplify-space-small);
+  padding-block-start: var(--amplify-space-small);
+}
+.amplify-ai-conversation__attachment__image {
+  width: 1rem;
+  height: 1rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.amplify-ai-conversation__attachment__size {
+  color: var(--amplify-colors-font-tertiary);
+}
+.amplify-ai-conversation__attachment__remove {
+  padding: var(--amplify-space-xxs);
+}
+.amplify-ai-conversation__prompt {
+  font-weight: normal;
+}
+
 .amplify-label-start {
   flex-direction: row;
 }

package/dist/theme.css

@@ -80,6 +80,35 @@
 --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
 --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
 --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+--amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
+--amplify-components-avatar-line-height: 1;
+--amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
+--amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
+--amplify-components-avatar-text-align: center;
+--amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
+--amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
+--amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
+--amplify-components-avatar-border-radius: 100%;
+--amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
+--amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
+--amplify-components-avatar-info-color: var(--amplify-colors-font-info);
+--amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
+--amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
+--amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
+--amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
+--amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
+--amplify-components-avatar-success-color: var(--amplify-colors-font-success);
+--amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
+--amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
+--amplify-components-avatar-error-color: var(--amplify-colors-font-error);
+--amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
+--amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
+--amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
+--amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
+--amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
+--amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
+--amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
 --amplify-components-badge-color: var(--amplify-colors-font-primary);
 --amplify-components-badge-line-height: 1;
 --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);

package/dist/types/theme/components/avatar.d.ts

@@ -0,0 +1,5 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme, Size } from './utils';
+export type AvatarTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | ColorTheme | 'filled' | 'outlined', Required> & Elements<{
+    icon?: ComponentStyles;
+    image?: ComponentStyles;
+}, Required>;

package/dist/types/theme/components/fileUploader.d.ts

@@ -0,0 +1,20 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme } from './utils';
+export type FileUploaderTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme, Required> & Elements<{
+    dropzone?: ComponentStyles & Modifiers<'active' | 'small', Required>;
+    dropzone__icon?: ComponentStyles;
+    dropzone__text?: ComponentStyles;
+    file?: ComponentStyles;
+    file__picker?: ComponentStyles;
+    file__wrapper?: ComponentStyles;
+    file__name?: ComponentStyles;
+    file__size?: ComponentStyles;
+    file__list?: ComponentStyles;
+    file__main?: ComponentStyles;
+    file__image?: ComponentStyles;
+    file__status?: ComponentStyles & Modifiers<'error' | 'success', Required>;
+    loader?: ComponentStyles;
+    previewer?: ComponentStyles;
+    previewer__text?: ComponentStyles;
+    previewer__footer?: ComponentStyles;
+    previewer__actions?: ComponentStyles;
+}, Required>;

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

@@ -2,6 +2,7 @@ import { WebTokens } from '../tokens';
 import { AccordionTheme } from './accordion';
 import { AlertTheme } from './alert';
 import { AutoCompleteTheme } from './autocomplete';
+import { AvatarTheme } from './avatar';
 import { BadgeTheme } from './badge';
 import { BreadcrumbsTheme } from './breadcrumbs';
 import { ButtonTheme } from './button';
@@ -43,11 +44,12 @@ import { ToggleButtonTheme, ToggleButtonGroupTheme } from './toggleButton';
 import { ComponentTheme, BaseComponentTheme, BaseTheme } from './utils';
 export { ClassNameFunction } from '../createTheme/createComponentClasses';
 export type { ComponentTheme, BaseComponentTheme, BaseTheme };
-export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
+export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
 export type AllComponentThemes = {
     accordion: AccordionTheme;
     alert: AlertTheme;
     autocomplete: AutoCompleteTheme;
+    avatar: AvatarTheme;
     badge: BadgeTheme;
     breadcrumbs: BreadcrumbsTheme;
     button: ButtonTheme;

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

@@ -0,0 +1,14 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+type AvatarVariationTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'color' | 'borderColor', OutputType>;
+type AvatarSizeTokens<OutputType> = DesignTokenProperties<'fontSize' | 'width' | 'height', OutputType>;
+type AvatarKey = 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'color' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'height' | 'textAlign' | 'width';
+export type AvatarTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<AvatarKey, OutputType> & {
+    large?: AvatarSizeTokens<OutputType>;
+    small?: AvatarSizeTokens<OutputType>;
+    error?: AvatarVariationTokens<OutputType>;
+    info?: AvatarVariationTokens<OutputType>;
+    success?: AvatarVariationTokens<OutputType>;
+    warning?: AvatarVariationTokens<OutputType>;
+};
+export declare const avatar: Required<AvatarTokens<'default'>>;
+export {};

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

@@ -1,6 +1,7 @@
 import { AlertTokens } from './alert';
 import { AutocompleteTokens } from './autocomplete';
 import { AuthenticatorTokens } from './authenticator';
+import { AvatarTokens } from './avatar';
 import { BadgeTokens } from './badge';
 import { BreadcrumbsTokens } from './breadcrumbs';
 import { ButtonTokens } from './button';
@@ -57,6 +58,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
     alert?: AlertTokens<Output>;
     authenticator?: AuthenticatorTokens<Output>;
     autocomplete?: AutocompleteTokens<Output>;
+    avatar?: AvatarTokens<Output>;
     badge?: BadgeTokens<Output>;
     breadcrumbs?: BreadcrumbsTokens<Output>;
     button?: ButtonTokens<Output>;

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

@@ -17,6 +17,31 @@ export declare const ComponentClassName: {
     readonly AutocompleteMenuLoading: "amplify-autocomplete__menu--loading";
     readonly AutocompleteMenuOption: "amplify-autocomplete__menu__option";
     readonly AutocompleteMenuOptions: "amplify-autocomplete__menu__options";
+    readonly Avatar: "amplify-avatar";
+    readonly AvatarIcon: "amplify-avatar__icon";
+    readonly AvatarImage: "amplify-avatar__image";
+    readonly AIConversation: "amplify-ai-conversation";
+    readonly AIConversationAttachment: "amplify-ai-conversation__attachment";
+    readonly AIConversationAttachmentList: "amplify-ai-conversation__attachment__list";
+    readonly AIConversationAttachmentImage: "amplify-ai-conversation__attachment__image";
+    readonly AIConversationAttachmentName: "amplify-ai-conversation__attachment__name";
+    readonly AIConversationAttachmentSize: "amplify-ai-conversation__attachment__size";
+    readonly AIConversationAttachmentRemove: "amplify-ai-conversation__attachment__remove";
+    readonly AIConversationForm: "amplify-ai-conversation__form";
+    readonly AIConversationFormAttach: "amplify-ai-conversation__form__attach";
+    readonly AIConversationFormSend: "amplify-ai-conversation__form__send";
+    readonly AIConversationFormField: "amplify-ai-conversation__form__field";
+    readonly AIConversationFormDropzone: "amplify-ai-conversation__form__dropzone";
+    readonly AIConversationMessage: "amplify-ai-conversation__message";
+    readonly AIConversationMessageAvatar: "amplify-ai-conversation__message__avatar";
+    readonly AIConversationMessageSender: "amplify-ai-conversation__message__sender";
+    readonly AIConversationMessageSenderUsername: "amplify-ai-conversation__message__sender__username";
+    readonly AIConversationMessageSenderTimestamp: "amplify-ai-conversation__message__sender__timestamp";
+    readonly AIConversationMessageBody: "amplify-ai-conversation__message__body";
+    readonly AIConversationMessageContent: "amplify-ai-conversation__message__content";
+    readonly AIConversationMessageActions: "amplify-ai-conversation__message__actions";
+    readonly AIConversationMessageList: "amplify-ai-conversation__message__list";
+    readonly AIConversationPrompt: "amplify-ai-conversation__prompt";
     readonly Badge: "amplify-badge";
     readonly Breadcrumbs: "amplify-breadcrumbs";
     readonly BreadcrumbsList: "amplify-breadcrumbs__list";
@@ -59,6 +84,25 @@ export declare const ComponentClassName: {
     readonly FieldGroupFieldWrapper: "amplify-field-group__field-wrapper";
     readonly Fieldset: "amplify-fieldset";
     readonly FieldsetLegend: "amplify-fieldset__legend";
+    readonly FileUploader: "amplify-fileuploader";
+    readonly FileUploaderDropZone: "amplify-fileuploader__dropzone";
+    readonly FileUploaderDropZoneIcon: "amplify-fileuploader__dropzone__icon";
+    readonly FileUploaderDropZoneText: "amplify-fileuploader__dropzone__text";
+    readonly FileUploaderFilePicker: "amplify-fileuploader__file__picker";
+    readonly FileUploaderFile: "amplify-fileuploader__file";
+    readonly FileUploaderFileWrapper: "amplify-fileuploader__file__wrapper";
+    readonly FileUploaderFileList: "amplify-fileuploader__file__list";
+    readonly FileUploaderFileName: "amplify-fileuploader__file__name";
+    readonly FileUploaderFileSize: "amplify-fileuploader__file__size";
+    readonly FileUploaderFileInfo: "amplify-fileuploader__file__info";
+    readonly FileUploaderFileImage: "amplify-fileuploader__file__image";
+    readonly FileUploaderFileMain: "amplify-fileuploader__file__main";
+    readonly FileUploaderFileStatus: "amplify-fileuploader__file__status";
+    readonly FileUploaderLoader: "amplify-fileuploader__loader";
+    readonly FileUploaderPreviewer: "amplify-fileuploader__previewer";
+    readonly FileUploaderPreviewerText: "amplify-fileuploader__previewer__text";
+    readonly FileUploaderPreviewerActions: "amplify-fileuploader__previewer__actions";
+    readonly FileUploaderPreviewerFooter: "amplify-fileuploader__previewer__footer";
     readonly Flex: "amplify-flex";
     readonly Grid: "amplify-grid";
     readonly Heading: "amplify-heading";

package/dist/types/utils/setUserAgent/constants.d.ts

@@ -1,6 +1,7 @@
 import { AuthUserAgentInput, GeoUserAgentInput, InAppMessagingUserAgentInput, StorageUserAgentInput } from '@aws-amplify/core/internals/utils';
 export declare const ACCOUNT_SETTINGS_INPUT_BASE: Omit<AuthUserAgentInput, 'additionalDetails'>;
 export declare const AUTHENTICATOR_INPUT_BASE: Omit<AuthUserAgentInput, 'additionalDetails'>;
+export declare const FILE_UPLOADER_BASE_INPUT: Omit<StorageUserAgentInput, 'additionalDetails'>;
 export declare const IN_APP_MESSAGING_INPUT_BASE: Omit<InAppMessagingUserAgentInput, 'additionalDetails'>;
 export declare const LOCATION_SEARCH_INPUT_BASE: Omit<GeoUserAgentInput, 'additionalDetails'>;
 export declare const MAP_VIEW_INPUT_BASE: Omit<GeoUserAgentInput, 'additionalDetails'>;

package/dist/types/utils/setUserAgent/setUserAgent.d.ts

@@ -1,5 +1,5 @@
 export type PackageName = 'angular' | 'react' | 'react-auth' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-native-auth' | 'react-notifications' | 'react-storage' | 'vue';
-export type ComponentName = 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageManager' | 'StorageImage';
+export type ComponentName = 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'FileUploader' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageManager' | 'StorageImage';
 export type Version = `${string}.${string}.${string}`;
 export interface SetUserAgentOptions {
     componentName: ComponentName;

package/package.json

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