@aws-amplify/ui 5.1.1 → 5.2.0

package/dist/styles.css

@@ -364,6 +364,70 @@
   --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
   --amplify-components-fieldmessages-description-font-style: italic;
   --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
+  --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-brand-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: center;
+  --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-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-border-color: var(--amplify-colors-border-secondary);
+  --amplify-components-fileuploader-previewer-footer-border-style: solid;
+  --amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
+  --amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
+  --amplify-components-fileuploader-previewer-footer-justify-content: space-between;
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-flex-justify-content: normal;
   --amplify-components-flex-align-items: stretch;
@@ -845,7 +909,7 @@
   --amplify-colors-neutral-10: hsl(210, 5%, 98%);
   --amplify-colors-neutral-20: hsl(210, 5%, 94%);
   --amplify-colors-neutral-40: hsl(210, 5%, 87%);
-  --amplify-colors-neutral-60: hsl(210, 8%, 55%);
+  --amplify-colors-neutral-60: hsl(210, 10%, 58%);
   --amplify-colors-neutral-80: hsl(210, 10%, 40%);
   --amplify-colors-neutral-90: hsl(210, 25%, 25%);
   --amplify-colors-neutral-100: hsl(210, 50%, 10%);
@@ -2510,6 +2574,147 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
+.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 {
+  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: row;
+  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);
+  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: block;
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  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);
+  padding-inline: var(--amplify-components-fileuploader-previewer-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-padding-block);
+}
+.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__body {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--amplify-components-fileuploader-previewer-max-height);
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  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);
+}
+.amplify-fileuploader__previewer__footer {
+  max-width: var(--amplify-components-fileuploader-previewer-max-width);
+  border-top-width: var(--amplify-components-fileuploader-previewer-footer-border-width);
+  border-top-style: var(--amplify-components-fileuploader-previewer-footer-border-style);
+  border-top-color: var(--amplify-components-fileuploader-previewer-footer-border-color);
+  padding-inline: var(--amplify-components-fileuploader-previewer-footer-padding-inline);
+  padding-block: var(--amplify-components-fileuploader-previewer-footer-padding-block);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
+}
+.amplify-fileuploader__previewer__footer__actions {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
+
 .amplify-menu-content-wrapper {
   z-index: 999999;
 }
@@ -2761,6 +2966,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-radio__button {
+  flex-shrink: 0;
   align-items: var(--amplify-components-radio-button-align-items);
   justify-content: var(--amplify-components-radio-button-justify-content);
   padding: var(--amplify-components-radio-button-padding);

package/dist/theme.css

@@ -361,6 +361,70 @@
 --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
 --amplify-components-fieldmessages-description-font-style: italic;
 --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
+--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-brand-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: center;
+--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-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-border-color: var(--amplify-colors-border-secondary);
+--amplify-components-fileuploader-previewer-footer-border-style: solid;
+--amplify-components-fileuploader-previewer-footer-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-previewer-footer-padding-block: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-footer-padding-inline: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-footer-justify-content: space-between;
 --amplify-components-flex-gap: var(--amplify-space-medium);
 --amplify-components-flex-justify-content: normal;
 --amplify-components-flex-align-items: stretch;
@@ -842,7 +906,7 @@
 --amplify-colors-neutral-10: hsl(210, 5%, 98%);
 --amplify-colors-neutral-20: hsl(210, 5%, 94%);
 --amplify-colors-neutral-40: hsl(210, 5%, 87%);
---amplify-colors-neutral-60: hsl(210, 8%, 55%);
+--amplify-colors-neutral-60: hsl(210, 10%, 58%);
 --amplify-colors-neutral-80: hsl(210, 10%, 40%);
 --amplify-colors-neutral-90: hsl(210, 25%, 25%);
 --amplify-colors-neutral-100: hsl(210, 50%, 10%);

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

@@ -1 +1,2 @@
 export * from './authenticator';
+export * from './storage';

package/dist/types/helpers/storage/fileUploader/index.d.ts

@@ -0,0 +1 @@
+export * from './utils';

package/dist/types/helpers/storage/fileUploader/utils/index.d.ts

@@ -0,0 +1 @@
+export { uploadFile, humanFileSize, checkMaxSize, returnAcceptedFiles, isValidExtension, } from './uploader';

package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts

@@ -0,0 +1,27 @@
+import { StorageAccessLevel } from '@aws-amplify/storage';
+export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, ...rest }: {
+    file: File;
+    fileName: string;
+    level: StorageAccessLevel;
+    isResumable?: boolean;
+    progressCallback: (progress: {
+        loaded: number;
+        total: number;
+    }) => void;
+    errorCallback: (err: string) => void;
+    completeCallback: (event: any) => void;
+}): Promise<void> | import("@aws-amplify/storage").UploadTask;
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+export declare function humanFileSize(bytes: any, si?: boolean, dp?: number): string;
+export declare const checkMaxSize: (maxSize: number, file: File) => string | null;
+export declare const returnAcceptedFiles: (files: File[], acceptedFileTypes: string[]) => File[];
+export declare const isValidExtension: (fileName: string, fileName2: string) => boolean;

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

@@ -0,0 +1 @@
+export * from './fileUploader';

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

@@ -0,0 +1,23 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+import { TypographyTokens } from '../types/typography';
+declare type BaseDropZoneTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'borderRadius', OutputType>;
+export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
+    dropzone: DesignTokenProperties<'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign'> & 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>;
+    };
+    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<'borderColor' | 'borderStyle' | 'borderWidth' | 'justifyContent' | 'paddingBlock' | 'paddingInline', OutputType>;
+    };
+}
+export declare const fileuploader: Required<FileUploaderTokens<'default'>>;
+export {};

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

@@ -15,6 +15,7 @@ import { FieldTokens } from './field';
 import { FieldControlTokens } from './fieldControl';
 import { FieldGroupTokens } from './fieldGroup';
 import { FieldMessagesTokens } from './fieldMessages';
+import { FileUploaderTokens } from './fileUploader';
 import { FlexTokens } from './flex';
 import { HeadingTokens } from './heading';
 import { HighlightMatchTokens } from './highlightMatch';
@@ -63,6 +64,7 @@ declare 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/theme/tokens/types/typography.d.ts

@@ -0,0 +1,2 @@
+import { DesignTokenProperties } from './designToken';
+export declare type TypographyTokens<OutputType> = DesignTokenProperties<'fontSize' | 'fontWeight' | 'color', OutputType>;

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

@@ -53,6 +53,23 @@ export declare enum ComponentClassName {
     FieldGroupHasInnerStart = "amplify-field-group--has-inner-start",
     FieldShowPassword = "amplify-field__show-password",
     FieldGroupFieldWrapper = "amplify-field-group__field-wrapper",
+    FileUploaderDropZone = "amplify-fileuploader__dropzone",
+    FileUploaderDropZoneIcon = "amplify-fileuploader__dropzone__icon",
+    FileUploaderDropZoneText = "amplify-fileuploader__dropzone__text",
+    FileUploaderDropZoneButton = "amplify-fileuploader__dropzone__button",
+    FileUploaderFile = "amplify-fileuploader__file",
+    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",
+    FileUploaderPreviewerBody = "amplify-fileuploader__previewer__body",
+    FileUploaderPreviewerFooter = "amplify-fileuploader__previewer__footer",
+    FileUploaderPreviewerFooterActions = "amplify-fileuploader__previewer__footer__actions",
     Flex = "amplify-flex",
     Grid = "amplify-grid",
     Heading = "amplify-heading",

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
     "./package.json": "./package.json",
     "./styles.css": "./dist/styles.css",
+    "./dist/styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css",
     "./tokens.ts": "./dist/react-native/tokens.ts"
   },