@aws-amplify/ui 5.5.9 → 5.6.0

package/dist/theme.css

@@ -346,6 +346,7 @@
 --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
 --amplify-components-field-gap: var(--amplify-space-xs);
 --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-field-flex-direction: column;
 --amplify-components-field-small-gap: var(--amplify-space-xxxs);
 --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
 --amplify-components-field-large-gap: var(--amplify-space-small);
@@ -508,6 +509,7 @@
 --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
 --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
 --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
+--amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
 --amplify-components-loader-width: var(--amplify-font-sizes-medium);
 --amplify-components-loader-height: var(--amplify-font-sizes-medium);
 --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
@@ -728,6 +730,72 @@
 --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
 --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
+--amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-dropzone-border-style: dashed;
+--amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-storagemanager-dropzone-text-align: center;
+--amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+--amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-file-border-style: solid;
+--amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs);
+--amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small);
+--amplify-components-storagemanager-file-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-file-align-items: baseline;
+--amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl);
+--amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl);
+--amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-loader-stroke-linecap: round;
+--amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-storagemanager-previewer-border-style: solid;
+--amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-storagemanager-previewer-max-height: 40rem;
+--amplify-components-storagemanager-previewer-max-width: auto;
+--amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-storagemanager-previewer-footer-border-color: var(--amplify-colors-border-secondary);
+--amplify-components-storagemanager-previewer-footer-border-style: solid;
+--amplify-components-storagemanager-previewer-footer-border-width: var(--amplify-border-widths-small);
+--amplify-components-storagemanager-previewer-footer-padding-block: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-footer-padding-inline: var(--amplify-space-medium);
+--amplify-components-storagemanager-previewer-footer-justify-content: space-between;
+--amplify-components-storagemanager-filelist-flex-direction: column;
+--amplify-components-storagemanager-filelist-gap: var(--amplify-space-small);
 --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
 --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
 --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);

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

@@ -1,5 +1,5 @@
-import { StorageAccessLevel } from '@aws-amplify/storage';
-export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, ...rest }: {
+import { StorageAccessLevel, PutResult } from '@aws-amplify/storage';
+export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, provider, ...rest }: {
     file: File;
     fileName: string;
     level: StorageAccessLevel;
@@ -8,11 +8,10 @@ export declare function uploadFile({ file, fileName, level, progressCallback, er
         loaded: number;
         total: number;
     }) => void;
-    errorCallback: (err: string) => void;
-    completeCallback: (event: {
-        key?: string;
-    }) => void;
-}): Promise<void> | import("@aws-amplify/storage").UploadTask;
+    errorCallback: (error: string) => void;
+    completeCallback: (event: PutResult) => void;
+    provider?: string;
+}): Promise<any>;
 /**
  * Format bytes as human-readable text.
  *

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

@@ -1,6 +1,6 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type FieldSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'gap', Output>;
-export declare type FieldTokens<Output extends OutputVariantKey> = FieldSizeTokens<Output> & {
+export declare type FieldTokens<Output extends OutputVariantKey> = FieldSizeTokens<Output> & DesignTokenProperties<'flexDirection', Output> & {
     small?: FieldSizeTokens<Output>;
     large?: FieldSizeTokens<Output>;
     label?: DesignTokenProperties<'color', Output>;

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

@@ -23,6 +23,7 @@ import { IconTokens } from './icon';
 import { ImageTokens } from './image';
 import { InAppMessagingTokens } from './inAppMessaging';
 import { LinkTokens } from './link';
+import { LivenessTokens } from './liveness';
 import { LoaderTokens } from './loader';
 import { MenuTokens } from './menu';
 import { PaginationTokens } from './pagination';
@@ -37,6 +38,7 @@ import { SelectTokens } from './select';
 import { SelectFieldTokens } from './selectField';
 import { SliderFieldTokens } from './sliderField';
 import { StepperFieldTokens } from './stepperField';
+import { StorageManagerTokens } from './storagemanager';
 import { SwitchFieldTokens } from './switchField';
 import { TableTokens } from './table';
 import { TabsTokens } from './tabs';
@@ -72,6 +74,7 @@ declare type BaseComponentTokens<Output extends OutputVariantKey> = {
     image?: ImageTokens<Output>;
     inappmessaging?: InAppMessagingTokens<Output>;
     link?: LinkTokens<Output>;
+    liveness?: LivenessTokens<Output>;
     loader?: LoaderTokens<Output>;
     menu?: MenuTokens<Output>;
     pagination?: PaginationTokens<Output>;
@@ -86,6 +89,7 @@ declare type BaseComponentTokens<Output extends OutputVariantKey> = {
     selectfield?: SelectFieldTokens<Output>;
     sliderfield?: SliderFieldTokens<Output>;
     stepperfield?: StepperFieldTokens<Output>;
+    storagemanager?: StorageManagerTokens<Output>;
     switchfield?: SwitchFieldTokens<Output>;
     table?: TableTokens<Output>;
     tabs?: TabsTokens<Output>;

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

@@ -0,0 +1,8 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ModalTokenKey = 'backgroundColor';
+declare type LivenessModalTokens<OutputType> = DesignTokenProperties<ModalTokenKey, OutputType>;
+export declare type LivenessTokens<OutputType extends OutputVariantKey> = {
+    cameraModule?: LivenessModalTokens<OutputType>;
+};
+export declare const liveness: Required<LivenessTokens<'default'>>;
+export {};

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

@@ -0,0 +1,6 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+import { FileUploaderTokens } from './fileUploader';
+export interface StorageManagerTokens<OutputType extends OutputVariantKey> extends Omit<FileUploaderTokens<OutputType>, 'body' | 'footer'> {
+    filelist?: DesignTokenProperties<'flexDirection' | 'gap'>;
+}
+export declare const storagemanager: Required<StorageManagerTokens<'default'>>;

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

@@ -121,6 +121,23 @@ export declare enum ComponentClassName {
     StepperFieldButtonDecrease = "amplify-stepperfield__button--decrease",
     StepperFieldButtonIncrease = "amplify-stepperfield__button--increase",
     StepperFieldInput = "amplify-stepperfield__input",
+    StorageManager = "amplify-storagemanager",
+    StorageManagerDropZone = "amplify-storagemanager__dropzone",
+    StorageManagerDropZoneIcon = "amplify-storagemanager__dropzone__icon",
+    StorageManagerDropZoneText = "amplify-storagemanager__dropzone__text",
+    StorageManagerFilePicker = "amplify-storagemanager__file__picker",
+    StorageManagerFile = "amplify-storagemanager__file",
+    StorageManagerFileWrapper = "amplify-storagemanager__file__wrapper",
+    StorageManagerFileList = "amplify-storagemanager__file__list",
+    StorageManagerFileName = "amplify-storagemanager__file__name",
+    StorageManagerFileSize = "amplify-storagemanager__file__size",
+    StorageManagerFileInfo = "amplify-storagemanager__file__info",
+    StorageManagerFileImage = "amplify-storagemanager__file__image",
+    StorageManagerFileMain = "amplify-storagemanager__file__main",
+    StorageManagerFileStatus = "amplify-storagemanager__file__status",
+    StorageManagerLoader = "amplify-storagemanager__loader",
+    StorageManagerPreviewer = "amplify-storagemanager__previewer",
+    StorageManagerPreviewerText = "amplify-storagemanager__previewer__text",
     SwitchField = "amplify-switchfield",
     SwitchLabel = "amplify-switch-label",
     SwitchThumb = "amplify-switch-thumb",

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

@@ -0,0 +1,19 @@
+import { ComponentClassName } from '../types';
+export declare type Modifiers = string | number | null;
+/**
+ * This helper function creates modifier class names that are used for our flat BEM styling
+ * it takes in a base and modifier and returns the modified class if a modifier was passed in and null otherwise
+ * @param base The base class of the output
+ * @param modifier The modifier to add onto the base
+ * @returns the modified class name or empty string
+ */
+export declare const classNameModifier: (base: ComponentClassName, modifier?: Modifiers) => string;
+/**
+ * This helper function creates modified class names that are used for our flat BEM styling
+ * it takes in a base, modifier, and flag and returns the modified class name if the flag is true and null if the flag is false
+ * @param base
+ * @param modifier
+ * @param flag
+ * @returns the modified class name or empty string
+ */
+export declare const classNameModifierByFlag: (base: ComponentClassName, modifier: Modifiers, flag?: boolean) => string;

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

@@ -92,3 +92,4 @@ export declare function has(value: unknown, key: string): boolean;
  * @returns {boolean} whether `value` is a function
  */
 export declare function isFunction(value: unknown): value is Function;
+export { classNameModifier, classNameModifierByFlag } from './classname';

package/package.json

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