@aws-amplify/ui 6.4.0 → 6.5.0

package/dist/styles.layer.css

@@ -702,6 +702,67 @@
   --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
   --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
   --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+  --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-dropzone-border-style: dashed;
+  --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+  --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+  --amplify-components-fileuploader-dropzone-text-align: center;
+  --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+  --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+  --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+  --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-file-border-style: solid;
+  --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+  --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+  --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-file-align-items: baseline;
+  --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+  --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+  --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+  --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+  --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-filelist-flex-direction: column;
+  --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-loader-stroke-linecap: round;
+  --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+  --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+  --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+  --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-fileuploader-previewer-border-style: solid;
+  --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+  --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+  --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+  --amplify-components-fileuploader-previewer-max-height: 40rem;
+  --amplify-components-fileuploader-previewer-max-width: auto;
+  --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+  --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+  --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+  --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-flex-justify-content: normal;
   --amplify-components-flex-align-items: stretch;
@@ -3459,6 +3520,7 @@ strong.amplify-text {
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3509,6 +3571,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3522,6 +3587,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3535,6 +3603,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -3550,6 +3621,9 @@ strong.amplify-text {
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -3562,6 +3636,13 @@ strong.amplify-text {
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 
 .amplify-breadcrumbs__list {
   display: flex;
@@ -6007,6 +6088,145 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
+.amplify-fileuploader__dropzone {
+  background-color: var(--amplify-components-fileuploader-dropzone-background-color);
+  border-color: var(--amplify-components-fileuploader-dropzone-border-color);
+  border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+  border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+  border-width: var(--amplify-components-fileuploader-dropzone-border-width);
+  text-align: var(--amplify-components-fileuploader-dropzone-text-align);
+  padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
+  padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-dropzone-gap);
+}
+.amplify-fileuploader__dropzone--small {
+  flex-direction: row;
+  justify-content: center;
+}
+.amplify-fileuploader__dropzone--active {
+  border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
+  border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
+  background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
+}
+.amplify-fileuploader__dropzone__icon {
+  font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
+  color: var(--amplify-components-fileuploader-dropzone-icon-color);
+}
+.amplify-fileuploader__dropzone__text {
+  color: var(--amplify-components-fileuploader-dropzone-text-color);
+  font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
+  font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
+}
+.amplify-fileuploader__file__list {
+  display: flex;
+  flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
+  gap: var(--amplify-components-fileuploader-filelist-gap);
+}
+.amplify-fileuploader__file {
+  position: relative;
+  border-width: var(--amplify-components-fileuploader-file-border-width);
+  border-style: var(--amplify-components-fileuploader-file-border-style);
+  border-color: var(--amplify-components-fileuploader-file-border-color);
+  border-radius: var(--amplify-components-fileuploader-file-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-file-padding-block);
+  align-items: var(--amplify-components-fileuploader-file-align-items);
+}
+.amplify-fileuploader__file__wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--amplify-components-fileuploader-file-gap);
+}
+.amplify-fileuploader__file__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-name-font-size);
+  color: var(--amplify-components-fileuploader-file-name-color);
+}
+.amplify-fileuploader__file__size {
+  font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+  color: var(--amplify-components-fileuploader-file-size-color);
+}
+.amplify-fileuploader__file__main {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.amplify-fileuploader__file__image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--amplify-components-fileuploader-file-image-width);
+  height: var(--amplify-components-fileuploader-file-image-height);
+  background-color: var(--amplify-components-fileuploader-file-image-background-color);
+  border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
+  color: var(--amplify-components-fileuploader-file-image-color);
+}
+.amplify-fileuploader__file__image img {
+  max-height: 100%;
+}
+.amplify-fileuploader__file__status--error {
+  color: var(--amplify-colors-font-error);
+  font-size: var(--amplify-components-fileuploader-file-size-font-size);
+}
+.amplify-fileuploader__file__status--success {
+  color: var(--amplify-colors-font-success);
+}
+.amplify-fileuploader__loader {
+  stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
+  stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
+  stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
+  height: var(--amplify-components-fileuploader-loader-stroke-width);
+  --amplify-components-loader-linear-stroke-filled: var(
+    --amplify-components-fileuploader-loader-stroke-filled
+  );
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.amplify-fileuploader__previewer {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  max-height: var(--amplify-components-fileuploader-previewer-max-height);
+  overflow: auto;
+  gap: var(--amplify-components-fileuploader-previewer-body-gap);
+  padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
+  background-color: var(--amplify-components-fileuploader-previewer-background-color);
+  border-width: var(--amplify-components-fileuploader-previewer-border-width);
+  border-style: var(--amplify-components-fileuploader-previewer-border-style);
+  border-color: var(--amplify-components-fileuploader-previewer-border-color);
+  border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
+}
+.amplify-fileuploader__previewer__text {
+  font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
+  font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
+  color: var(--amplify-components-fileuploader-previewer-text-color);
+}
+.amplify-fileuploader__previewer__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
+}
+.amplify-fileuploader__previewer__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
+
 .amplify-inappmessaging-backdrop {
   background-color: var(--amplify-colors-overlay-50);
   inset: 0;

package/dist/theme.css

@@ -698,6 +698,67 @@
 --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
 --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
 --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-border-style: dashed;
+--amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-fileuploader-dropzone-text-align: center;
+--amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+--amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-file-border-style: solid;
+--amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+--amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+--amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-file-align-items: baseline;
+--amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-filelist-flex-direction: column;
+--amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-loader-stroke-linecap: round;
+--amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-previewer-border-style: solid;
+--amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-max-height: 40rem;
+--amplify-components-fileuploader-previewer-max-width: auto;
+--amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
 --amplify-components-flex-gap: var(--amplify-space-medium);
 --amplify-components-flex-justify-content: normal;
 --amplify-components-flex-align-items: stretch;

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

@@ -2,4 +2,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;
+    loader?: ComponentStyles;
 }, Required>;

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

@@ -16,6 +16,7 @@ import { DropZoneTheme } from './dropZone';
 import { FieldTheme } from './field';
 import { FieldGroupTheme } from './fieldGroup';
 import { FieldsetTheme } from './fieldset';
+import { FileUploaderTheme } from './fileUploader';
 import { HeadingTheme } from './heading';
 import { HighlightMatchTheme } from './highlightMatch';
 import { InputTheme } from './input';
@@ -44,7 +45,7 @@ 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<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 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<FileUploaderTheme, 'fileuploader', 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;
@@ -63,6 +64,7 @@ export type AllComponentThemes = {
     field: FieldTheme;
     'field-group': FieldGroupTheme;
     fieldset: FieldsetTheme;
+    fileuploader: FileUploaderTheme;
     heading: HeadingTheme;
     highlightmatch: HighlightMatchTheme;
     input: InputTheme;

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

@@ -0,0 +1,24 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+import { TypographyTokens } from '../types/typography';
+type BaseDropZoneTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'borderRadius', OutputType>;
+export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
+    dropzone?: DesignTokenProperties<'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign', OutputType> & BaseDropZoneTokens<OutputType> & {
+        _active?: BaseDropZoneTokens<OutputType>;
+        icon?: DesignTokenProperties<'fontSize' | 'color', OutputType>;
+        text?: TypographyTokens<OutputType>;
+    };
+    file?: DesignTokenProperties<'alignItems' | 'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'gap' | 'paddingBlock' | 'paddingInline', OutputType> & {
+        name?: TypographyTokens<OutputType>;
+        size?: TypographyTokens<OutputType>;
+        image?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'color' | 'height' | 'width', OutputType>;
+    };
+    filelist?: DesignTokenProperties<'flexDirection' | 'gap'>;
+    loader?: DesignTokenProperties<'strokeWidth' | 'strokeFilled' | 'strokeEmpty' | 'strokeLinecap', OutputType>;
+    previewer?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'maxHeight' | 'maxWidth' | 'paddingBlock' | 'paddingInline', OutputType> & {
+        text?: TypographyTokens<OutputType>;
+        body?: DesignTokenProperties<'gap' | 'paddingInline' | 'paddingBlock', OutputType>;
+        footer?: DesignTokenProperties<'justifyContent', OutputType>;
+    };
+}
+export declare const fileuploader: Required<FileUploaderTokens<'default'>>;
+export {};

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

@@ -19,6 +19,7 @@ import { FieldControlTokens } from './fieldControl';
 import { FieldGroupTokens } from './fieldGroup';
 import { FieldsetTokens } from './fieldset';
 import { FieldMessagesTokens } from './fieldMessages';
+import { FileUploaderTokens } from './fileuploader';
 import { FlexTokens } from './flex';
 import { HeadingTokens } from './heading';
 import { HighlightMatchTokens } from './highlightMatch';
@@ -75,6 +76,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
     fieldcontrol?: FieldControlTokens<Output>;
     fieldgroup?: FieldGroupTokens<Output>;
     fieldmessages?: FieldMessagesTokens<Output>;
+    fileuploader?: FileUploaderTokens<Output>;
     flex?: FlexTokens<Output>;
     heading?: HeadingTokens<Output>;
     highlightmatch?: HighlightMatchTokens<Output>;

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

@@ -20,6 +20,7 @@ export declare const ComponentClassName: {
     readonly Avatar: "amplify-avatar";
     readonly AvatarIcon: "amplify-avatar__icon";
     readonly AvatarImage: "amplify-avatar__image";
+    readonly AvatarLoader: "amplify-avatar__loader";
     readonly AIConversation: "amplify-ai-conversation";
     readonly AIConversationAttachment: "amplify-ai-conversation__attachment";
     readonly AIConversationAttachmentList: "amplify-ai-conversation__attachment__list";

package/package.json

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