@aws-amplify/ui 6.2.0 → 6.4.0

package/dist/esm/theme/tokens/components/avatar.mjs

@@ -0,0 +1,49 @@
+const avatar = {
+    // Default styles
+    color: { value: '{colors.font.tertiary.value}' },
+    lineHeight: { value: 1 },
+    fontWeight: { value: '{fontWeights.semibold.value}' },
+    fontSize: { value: '{fontSizes.small.value}' },
+    textAlign: { value: 'center' },
+    width: { value: '{fontSizes.xxl.value}' },
+    height: { value: '{fontSizes.xxl.value}' },
+    backgroundColor: { value: '{colors.background.tertiary}' },
+    borderRadius: { value: '100%' },
+    borderColor: { value: '{colors.border.primary.value}' },
+    borderWidth: { value: '{borderWidths.medium.value}' },
+    // Color Theme Variations
+    info: {
+        color: { value: '{colors.font.info.value}' },
+        backgroundColor: { value: '{colors.background.info.value}' },
+        borderColor: { value: '{colors.border.info.value}' },
+    },
+    warning: {
+        color: { value: '{colors.font.warning.value}' },
+        backgroundColor: { value: '{colors.background.warning.value}' },
+        borderColor: { value: '{colors.border.warning.value}' },
+    },
+    success: {
+        color: { value: '{colors.font.success.value}' },
+        backgroundColor: { value: '{colors.background.success.value}' },
+        borderColor: { value: '{colors.border.success.value}' },
+    },
+    error: {
+        color: { value: '{colors.font.error.value}' },
+        backgroundColor: { value: '{colors.background.error.value}' },
+        borderColor: { value: '{colors.border.error.value}' },
+    },
+    // Sizes
+    small: {
+        fontSize: { value: '{fontSizes.xs.value}' },
+        width: { value: '{fontSizes.xl.value}' },
+        height: { value: '{fontSizes.xl.value}' },
+    },
+    // medium is the default size
+    large: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        width: { value: '{fontSizes.xxxl.value}' },
+        height: { value: '{fontSizes.xxxl.value}' },
+    },
+};
+
+export { avatar };

package/dist/esm/theme/tokens/components/index.mjs

@@ -1,6 +1,7 @@
 import { alert } from './alert.mjs';
 import { autocomplete } from './autocomplete.mjs';
 import { authenticator } from './authenticator.mjs';
+import { avatar } from './avatar.mjs';
 import { badge } from './badge.mjs';
 import { breadcrumbs } from './breadcrumbs.mjs';
 import { button } from './button.mjs';
@@ -57,6 +58,7 @@ const components = {
     alert,
     authenticator,
     autocomplete,
+    avatar,
     badge,
     breadcrumbs,
     button,

package/dist/esm/types/primitives/componentClassName.mjs

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

package/dist/esm/utils/setUserAgent/constants.mjs

@@ -1,4 +1,4 @@
-import { AuthAction, Category, InAppMessagingAction, GeoAction, StorageAction } from '@aws-amplify/core/internals/utils';
+import { AuthAction, Category, StorageAction, InAppMessagingAction, GeoAction } from '@aws-amplify/core/internals/utils';
 
 const ACCOUNT_SETTINGS_INPUT_BASE = {
     apis: [AuthAction.DeleteUser, AuthAction.UpdatePassword],
@@ -19,6 +19,10 @@ const AUTHENTICATOR_INPUT_BASE = {
     ],
     category: Category.Auth,
 };
+const FILE_UPLOADER_BASE_INPUT = {
+    apis: [StorageAction.UploadData],
+    category: Category.Storage,
+};
 const IN_APP_MESSAGING_INPUT_BASE = {
     apis: [InAppMessagingAction.NotifyMessageInteraction],
     category: Category.InAppMessaging,
@@ -40,4 +44,4 @@ const STORAGE_MANAGER_INPUT_BASE = {
     category: Category.Storage,
 };
 
-export { ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE, IN_APP_MESSAGING_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, MAP_VIEW_INPUT_BASE, STORAGE_MANAGER_INPUT_BASE };
+export { ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, IN_APP_MESSAGING_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, MAP_VIEW_INPUT_BASE, STORAGE_MANAGER_INPUT_BASE };

package/dist/esm/utils/setUserAgent/setUserAgent.mjs

@@ -1,5 +1,5 @@
 import { setCustomUserAgent } from '@aws-amplify/core/internals/utils';
-import { STORAGE_MANAGER_INPUT_BASE, MAP_VIEW_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, IN_APP_MESSAGING_INPUT_BASE, ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE } from './constants.mjs';
+import { STORAGE_MANAGER_INPUT_BASE, MAP_VIEW_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, IN_APP_MESSAGING_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE } from './constants.mjs';
 import { noop } from '../utils.mjs';
 
 /**
@@ -30,6 +30,13 @@ const setUserAgent = ({ componentName, packageName, version, }) => {
             });
             break;
         }
+        case 'FileUploader': {
+            setCustomUserAgent({
+                ...FILE_UPLOADER_BASE_INPUT,
+                additionalDetails: [[componentName], packageData],
+            });
+            break;
+        }
         case 'InAppMessaging': {
             setCustomUserAgent({
                 ...IN_APP_MESSAGING_INPUT_BASE,

package/dist/index.js

@@ -55,6 +55,10 @@ const AUTHENTICATOR_INPUT_BASE = {
     ],
     category: utils.Category.Auth,
 };
+const FILE_UPLOADER_BASE_INPUT = {
+    apis: [utils.StorageAction.UploadData],
+    category: utils.Category.Storage,
+};
 const IN_APP_MESSAGING_INPUT_BASE = {
     apis: [utils.InAppMessagingAction.NotifyMessageInteraction],
     category: utils.Category.InAppMessaging,
@@ -350,6 +354,13 @@ const setUserAgent = ({ componentName, packageName, version, }) => {
             });
             break;
         }
+        case 'FileUploader': {
+            utils.setCustomUserAgent({
+                ...FILE_UPLOADER_BASE_INPUT,
+                additionalDetails: [[componentName], packageData],
+            });
+            break;
+        }
         case 'InAppMessaging': {
             utils.setCustomUserAgent({
                 ...IN_APP_MESSAGING_INPUT_BASE,
@@ -2857,6 +2868,31 @@ const ComponentClassName = {
     AutocompleteMenuLoading: 'amplify-autocomplete__menu--loading',
     AutocompleteMenuOption: 'amplify-autocomplete__menu__option',
     AutocompleteMenuOptions: 'amplify-autocomplete__menu__options',
+    Avatar: 'amplify-avatar',
+    AvatarIcon: 'amplify-avatar__icon',
+    AvatarImage: 'amplify-avatar__image',
+    AIConversation: 'amplify-ai-conversation',
+    AIConversationAttachment: 'amplify-ai-conversation__attachment',
+    AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
+    AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
+    AIConversationAttachmentName: 'amplify-ai-conversation__attachment__name',
+    AIConversationAttachmentSize: 'amplify-ai-conversation__attachment__size',
+    AIConversationAttachmentRemove: 'amplify-ai-conversation__attachment__remove',
+    AIConversationForm: 'amplify-ai-conversation__form',
+    AIConversationFormAttach: 'amplify-ai-conversation__form__attach',
+    AIConversationFormSend: 'amplify-ai-conversation__form__send',
+    AIConversationFormField: 'amplify-ai-conversation__form__field',
+    AIConversationFormDropzone: 'amplify-ai-conversation__form__dropzone',
+    AIConversationMessage: 'amplify-ai-conversation__message',
+    AIConversationMessageAvatar: 'amplify-ai-conversation__message__avatar',
+    AIConversationMessageSender: 'amplify-ai-conversation__message__sender',
+    AIConversationMessageSenderUsername: 'amplify-ai-conversation__message__sender__username',
+    AIConversationMessageSenderTimestamp: 'amplify-ai-conversation__message__sender__timestamp',
+    AIConversationMessageBody: 'amplify-ai-conversation__message__body',
+    AIConversationMessageContent: 'amplify-ai-conversation__message__content',
+    AIConversationMessageActions: 'amplify-ai-conversation__message__actions',
+    AIConversationMessageList: 'amplify-ai-conversation__message__list',
+    AIConversationPrompt: 'amplify-ai-conversation__prompt',
     Badge: 'amplify-badge',
     Breadcrumbs: 'amplify-breadcrumbs',
     BreadcrumbsList: 'amplify-breadcrumbs__list',
@@ -2899,6 +2935,25 @@ const ComponentClassName = {
     FieldGroupFieldWrapper: 'amplify-field-group__field-wrapper',
     Fieldset: 'amplify-fieldset',
     FieldsetLegend: 'amplify-fieldset__legend',
+    FileUploader: 'amplify-fileuploader',
+    FileUploaderDropZone: 'amplify-fileuploader__dropzone',
+    FileUploaderDropZoneIcon: 'amplify-fileuploader__dropzone__icon',
+    FileUploaderDropZoneText: 'amplify-fileuploader__dropzone__text',
+    FileUploaderFilePicker: 'amplify-fileuploader__file__picker',
+    FileUploaderFile: 'amplify-fileuploader__file',
+    FileUploaderFileWrapper: 'amplify-fileuploader__file__wrapper',
+    FileUploaderFileList: 'amplify-fileuploader__file__list',
+    FileUploaderFileName: 'amplify-fileuploader__file__name',
+    FileUploaderFileSize: 'amplify-fileuploader__file__size',
+    FileUploaderFileInfo: 'amplify-fileuploader__file__info',
+    FileUploaderFileImage: 'amplify-fileuploader__file__image',
+    FileUploaderFileMain: 'amplify-fileuploader__file__main',
+    FileUploaderFileStatus: 'amplify-fileuploader__file__status',
+    FileUploaderLoader: 'amplify-fileuploader__loader',
+    FileUploaderPreviewer: 'amplify-fileuploader__previewer',
+    FileUploaderPreviewerText: 'amplify-fileuploader__previewer__text',
+    FileUploaderPreviewerActions: 'amplify-fileuploader__previewer__actions',
+    FileUploaderPreviewerFooter: 'amplify-fileuploader__previewer__footer',
     Flex: 'amplify-flex',
     Grid: 'amplify-grid',
     Heading: 'amplify-heading',
@@ -5533,6 +5588,54 @@ const authenticator = {
     },
 };
 
+const avatar = {
+    // Default styles
+    color: { value: '{colors.font.tertiary.value}' },
+    lineHeight: { value: 1 },
+    fontWeight: { value: '{fontWeights.semibold.value}' },
+    fontSize: { value: '{fontSizes.small.value}' },
+    textAlign: { value: 'center' },
+    width: { value: '{fontSizes.xxl.value}' },
+    height: { value: '{fontSizes.xxl.value}' },
+    backgroundColor: { value: '{colors.background.tertiary}' },
+    borderRadius: { value: '100%' },
+    borderColor: { value: '{colors.border.primary.value}' },
+    borderWidth: { value: '{borderWidths.medium.value}' },
+    // Color Theme Variations
+    info: {
+        color: { value: '{colors.font.info.value}' },
+        backgroundColor: { value: '{colors.background.info.value}' },
+        borderColor: { value: '{colors.border.info.value}' },
+    },
+    warning: {
+        color: { value: '{colors.font.warning.value}' },
+        backgroundColor: { value: '{colors.background.warning.value}' },
+        borderColor: { value: '{colors.border.warning.value}' },
+    },
+    success: {
+        color: { value: '{colors.font.success.value}' },
+        backgroundColor: { value: '{colors.background.success.value}' },
+        borderColor: { value: '{colors.border.success.value}' },
+    },
+    error: {
+        color: { value: '{colors.font.error.value}' },
+        backgroundColor: { value: '{colors.background.error.value}' },
+        borderColor: { value: '{colors.border.error.value}' },
+    },
+    // Sizes
+    small: {
+        fontSize: { value: '{fontSizes.xs.value}' },
+        width: { value: '{fontSizes.xl.value}' },
+        height: { value: '{fontSizes.xl.value}' },
+    },
+    // medium is the default size
+    large: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        width: { value: '{fontSizes.xxxl.value}' },
+        height: { value: '{fontSizes.xxxl.value}' },
+    },
+};
+
 const badge = {
     // Default styles
     color: { value: '{colors.font.primary.value}' },
@@ -7953,6 +8056,7 @@ const components = {
     alert,
     authenticator,
     autocomplete,
+    avatar,
     badge,
     breadcrumbs,
     button,

package/dist/styles/AIConversation.css

@@ -0,0 +1,108 @@
+.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;
+}

package/dist/styles/AIConversation.layer.css

@@ -0,0 +1,110 @@
+@layer amplify.components {
+.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;
+}
+}

package/dist/styles/avatar.css

@@ -0,0 +1,111 @@
+.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;
+}