@aws-amplify/ui 5.7.1 → 5.8.0

package/dist/theme.css

@@ -110,6 +110,7 @@
 --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
 --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
 --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+--amplify-components-button-background-color: transparent;
 --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
 --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
 --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -527,6 +528,40 @@
 --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
 --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
 --amplify-components-divider-opacity: var(--amplify-opacities-60);
+--amplify-components-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-dropzone-border-style: dashed;
+--amplify-components-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-dropzone-color: var(--amplify-colors-font-primary);
+--amplify-components-dropzone-gap: var(--amplify-space-small);
+--amplify-components-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-dropzone-text-align: center;
+--amplify-components-dropzone-active-background-color: var(--amplify-colors-brand-primary-10);
+--amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius);
+--amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style);
+--amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width);
+--amplify-components-dropzone-active-color: var(--amplify-colors-font-primary);
+--amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled);
+--amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius);
+--amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled);
+--amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style);
+--amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width);
+--amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled);
+--amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success);
+--amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius);
+--amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success);
+--amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style);
+--amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width);
+--amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success);
+--amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error);
+--amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius);
+--amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style);
+--amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width);
+--amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error);
 --amplify-components-expander-display: block;
 --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
 --amplify-components-expander-border-radius: var(--amplify-radii-medium);
@@ -621,6 +656,24 @@
 --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-fieldset-background-color: transparent;
+--amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
+--amplify-components-fieldset-flex-direction: column;
+--amplify-components-fieldset-gap: var(--amplify-components-field-gap);
+--amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
+--amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
+--amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
+--amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
+--amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
+--amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
+--amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
+--amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
+--amplify-components-fieldset-outlined-border-style: solid;
+--amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
+--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);
@@ -722,6 +775,10 @@
 --amplify-components-inappmessaging-dialog-width: 30vw;
 --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium);
 --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold);
+--amplify-components-input-color: var(--amplify-components-fieldcontrol-color);
+--amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color);
+--amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size);
+--amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
 --amplify-components-link-active-color: var(--amplify-colors-font-active);
 --amplify-components-link-color: var(--amplify-colors-font-interactive);
 --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
@@ -771,6 +828,66 @@
 --amplify-components-menu-item-min-height: 2.5rem;
 --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
 --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
+--amplify-components-message-align-items: center;
+--amplify-components-message-background-color: var(--amplify-colors-background-tertiary);
+--amplify-components-message-border-color: transparent;
+--amplify-components-message-border-style: solid;
+--amplify-components-message-border-width: var(--amplify-border-widths-small);
+--amplify-components-message-border-radius: var(--amplify-radii-xs);
+--amplify-components-message-color: var(--amplify-colors-font-primary);
+--amplify-components-message-justify-content: flex-start;
+--amplify-components-message-padding-block: var(--amplify-space-small);
+--amplify-components-message-padding-inline: var(--amplify-space-medium);
+--amplify-components-message-line-height: var(--amplify-line-heights-small);
+--amplify-components-message-icon-size: var(--amplify-font-sizes-xl);
+--amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-message-dismiss-gap: var(--amplify-space-xxs);
+--amplify-components-message-plain-color: var(--amplify-colors-font-primary);
+--amplify-components-message-plain-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-plain-border-color: transparent;
+--amplify-components-message-plain-info-color: var(--amplify-colors-font-info);
+--amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-plain-info-border-color: transparent;
+--amplify-components-message-plain-error-color: var(--amplify-colors-font-error);
+--amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-plain-error-border-color: transparent;
+--amplify-components-message-plain-success-color: var(--amplify-colors-font-success);
+--amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-plain-success-border-color: transparent;
+--amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning);
+--amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-plain-warning-border-color: transparent;
+--amplify-components-message-outlined-color: var(--amplify-colors-font-primary);
+--amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary);
+--amplify-components-message-outlined-info-color: var(--amplify-colors-font-info);
+--amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info);
+--amplify-components-message-outlined-error-color: var(--amplify-colors-font-error);
+--amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error);
+--amplify-components-message-outlined-success-color: var(--amplify-colors-font-success);
+--amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success);
+--amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning);
+--amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary);
+--amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning);
+--amplify-components-message-filled-color: var(--amplify-colors-font-primary);
+--amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-message-filled-border-color: transparent;
+--amplify-components-message-filled-info-color: var(--amplify-colors-font-info);
+--amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info);
+--amplify-components-message-filled-info-border-color: transparent;
+--amplify-components-message-filled-error-color: var(--amplify-colors-font-error);
+--amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error);
+--amplify-components-message-filled-error-border-color: transparent;
+--amplify-components-message-filled-success-color: var(--amplify-colors-font-success);
+--amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success);
+--amplify-components-message-filled-success-border-color: transparent;
+--amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning);
+--amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning);
+--amplify-components-message-filled-warning-border-color: transparent;
 --amplify-components-pagination-current-align-items: center;
 --amplify-components-pagination-current-justify-content: center;
 --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
@@ -1010,12 +1127,7 @@
 --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-previewer-footer-justify-content: flex-end;
 --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);
@@ -1275,10 +1387,10 @@
 --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
 --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
 --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
---amplify-colors-background-info: var(--amplify-colors-blue-20);
---amplify-colors-background-warning: var(--amplify-colors-orange-20);
---amplify-colors-background-error: var(--amplify-colors-red-20);
---amplify-colors-background-success: var(--amplify-colors-green-20);
+--amplify-colors-background-info: var(--amplify-colors-blue-10);
+--amplify-colors-background-warning: var(--amplify-colors-orange-10);
+--amplify-colors-background-error: var(--amplify-colors-red-10);
+--amplify-colors-background-success: var(--amplify-colors-green-10);
 --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
 --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
 --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
@@ -1286,6 +1398,9 @@
 --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
 --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
 --amplify-colors-border-error: var(--amplify-colors-red-80);
+--amplify-colors-border-info: var(--amplify-colors-blue-80);
+--amplify-colors-border-success: var(--amplify-colors-green-80);
+--amplify-colors-border-warning: var(--amplify-colors-orange-80);
 --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
 --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
 --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);

package/dist/types/theme/tokens/colors.d.ts

@@ -22,7 +22,7 @@ type StateVariantKey<Platform> = Platform extends 'react-native' ? ReactNativeSt
 type BrandVariantKey = Extract<OrderVariantKey, 'primary' | 'secondary'>;
 type FontVariantKey<Output, Platform> = 'inverse' | 'interactive' | Extract<StateVariantKey<Platform>, 'active' | 'disabled' | 'hover' | 'focus'> | OrderVariantKey<Output> | InformationVariantKey;
 type BackgroundColorKey<Platform> = Extract<StateVariantKey<Platform>, 'disabled'> | OrderVariantKey | InformationVariantKey | 'quaternary';
-type BorderColorKey<Output, Platform> = Extract<StateVariantKey<Platform>, 'disabled' | 'error'> | OrderVariantKey<Output> | (Output extends 'default' ? Exclude<StateVariantKey<Platform>, 'active' | 'hover'> : StateVariantKey<Platform>);
+type BorderColorKey<Output, Platform> = Extract<StateVariantKey<Platform>, 'disabled'> | OrderVariantKey<Output> | InformationVariantKey | (Output extends 'default' ? Exclude<StateVariantKey<Platform>, 'active' | 'hover'> : StateVariantKey<Platform>);
 type PaletteValues<Output, Platform> = ColorValueScale<ColorPaletteKey, Output, Platform>;
 type GreyscaleColors<Output, Platform> = ColorValues<GreyscalePaletteKey, Output, Platform>;
 type BaseColors<Output extends OutputVariantKey = unknown, Platform = unknown> = PaletteValues<Output, Platform> & GreyscaleColors<Output, Platform> & {

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

@@ -45,7 +45,7 @@ type OutlinedVariationTokens<Output> = {
     overlay?: ColorThemeTokens<Output>;
 };
 type ButtonSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
-export type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
+export type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'backgroundColor' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
     _hover?: StateTokens<Output>;
     _focus?: StateWithShadowTokens<Output>;
     _active?: StateTokens<Output>;

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

@@ -0,0 +1,10 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+type BaseDropZoneTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'borderStyle' | 'color', OutputType>;
+export type DropZoneTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign', OutputType> & BaseDropZoneTokens<OutputType> & {
+    _active?: BaseDropZoneTokens<OutputType>;
+    _disabled?: BaseDropZoneTokens<OutputType>;
+    accepted?: BaseDropZoneTokens<OutputType>;
+    rejected?: BaseDropZoneTokens<OutputType>;
+};
+export declare const dropzone: Required<DropZoneTokens<'default'>>;
+export {};

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

@@ -0,0 +1,17 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export type FieldsetSizeTokens<Output> = DesignTokenProperties<'gap', Output>;
+export type FieldsetOutlinedTokens<Output> = DesignTokenProperties<'padding' | 'borderColor' | 'borderWidth' | 'borderStyle', Output> & {
+    small?: DesignTokenProperties<'padding', Output>;
+    large?: DesignTokenProperties<'padding', Output>;
+};
+export type FieldsetLegendTokens<Output> = DesignTokenProperties<'fontSize' | 'color' | 'fontWeight' | 'lineHeight', Output> & {
+    small?: DesignTokenProperties<'fontSize', Output>;
+    large?: DesignTokenProperties<'fontSize', Output>;
+};
+export type FieldsetTokens<Output extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'gap' | 'flexDirection' | 'borderRadius', Output> & {
+    legend?: FieldsetLegendTokens<Output>;
+    outlined?: FieldsetOutlinedTokens<Output>;
+    small?: FieldsetSizeTokens<Output>;
+    large?: FieldsetSizeTokens<Output>;
+};
+export declare const fieldset: Required<FieldsetTokens<'default'>>;

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

@@ -11,22 +11,26 @@ import { CollectionTokens } from './collection';
 import { CopyTokens } from './copy';
 import { DialCodeSelectTokens } from './dialCodeSelect';
 import { DividerTokens } from './divider';
+import { DropZoneTokens } from './dropZone';
 import { ExpanderTokens } from './expander';
 import { FieldTokens } from './field';
 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';
 import { IconTokens } from './icon';
+import { InputTokens } from './input';
 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 { MessageTokens } from './message';
 import { PaginationTokens } from './pagination';
 import { PasswordFieldTokens } from './passwordField';
 import { PhoneNumberFieldTokens } from './phoneNumberField';
@@ -63,8 +67,10 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
     copy?: CopyTokens<Output>;
     countrycodeselect?: DialCodeSelectTokens<Output>;
     divider?: DividerTokens<Output>;
+    dropzone?: DropZoneTokens<Output>;
     expander?: ExpanderTokens<Output>;
     field?: FieldTokens<Output>;
+    fieldset?: FieldsetTokens<Output>;
     fieldcontrol?: FieldControlTokens<Output>;
     fieldgroup?: FieldGroupTokens<Output>;
     fieldmessages?: FieldMessagesTokens<Output>;
@@ -75,10 +81,12 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
     icon?: IconTokens<Output>;
     image?: ImageTokens<Output>;
     inappmessaging?: InAppMessagingTokens<Output>;
+    input?: InputTokens<Output>;
     link?: LinkTokens<Output>;
     liveness?: LivenessTokens<Output>;
     loader?: LoaderTokens<Output>;
     menu?: MenuTokens<Output>;
+    message?: MessageTokens<Output>;
     pagination?: PaginationTokens<Output>;
     passwordfield?: PasswordFieldTokens<Output>;
     phonenumberfield?: PhoneNumberFieldTokens<Output>;

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

@@ -0,0 +1,5 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export type InputTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'borderColor' | 'fontSize', Output> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+};
+export declare const input: Required<InputTokens<'default'>>;

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

@@ -0,0 +1,19 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+type MessageColorThemeTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'color' | 'borderColor', OutputType>;
+type MessageVariationTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'color' | 'borderColor', OutputType> & {
+    info?: MessageColorThemeTokens<OutputType>;
+    error?: MessageColorThemeTokens<OutputType>;
+    warning?: MessageColorThemeTokens<OutputType>;
+    success?: MessageColorThemeTokens<OutputType>;
+};
+type MessageTokenKey = 'alignItems' | 'justifyContent' | 'color' | 'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'lineHeight' | 'paddingBlock' | 'paddingInline';
+export type MessageTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<MessageTokenKey, OutputType> & {
+    icon?: DesignTokenProperties<'size', OutputType>;
+    heading?: DesignTokenProperties<'fontSize' | 'fontWeight', OutputType>;
+    dismiss?: DesignTokenProperties<'gap', OutputType>;
+    plain?: MessageVariationTokens<OutputType>;
+    outlined?: MessageVariationTokens<OutputType>;
+    filled?: MessageVariationTokens<OutputType>;
+};
+export declare const message: Required<MessageTokens<'default'>>;
+export {};

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

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

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

@@ -36,6 +36,7 @@ export declare enum ComponentClassName {
     DialCodeSelect = "amplify-dialcodeselect",
     Divider = "amplify-divider",
     DividerLabel = "amplify-divider--label",
+    DropZone = "amplify-dropzone",
     Expander = "amplify-expander",
     ExpanderContent = "amplify-expander__content",
     ExpanderContentText = "amplify-expander__content__text",
@@ -58,6 +59,8 @@ export declare enum ComponentClassName {
     FieldGroupHasInnerStart = "amplify-field-group--has-inner-start",
     FieldShowPassword = "amplify-field__show-password",
     FieldGroupFieldWrapper = "amplify-field-group__field-wrapper",
+    Fieldset = "amplify-fieldset",
+    FieldsetLegend = "amplify-fieldset__legend",
     FileUploaderDropZone = "amplify-fileuploader__dropzone",
     FileUploaderDropZoneIcon = "amplify-fileuploader__dropzone__icon",
     FileUploaderDropZoneText = "amplify-fileuploader__dropzone__text",
@@ -93,6 +96,12 @@ export declare enum ComponentClassName {
     MenuContentWrapper = "amplify-menu-content-wrapper",
     MenuItem = "amplify-menu-content__item",
     MenuTrigger = "amplify-menu-trigger",
+    Message = "amplify-message",
+    MessageIcon = "amplify-message__icon",
+    MessageHeading = "amplify-message__heading",
+    MessageBody = "amplify-message__body",
+    MessageContent = "amplify-message__content",
+    MessageDismiss = "amplify-message__dismiss",
     Pagination = "amplify-pagination",
     PaginationItemButton = "amplify-pagination__item-button",
     PaginationItemCurrent = "amplify-pagination__item-current",
@@ -144,6 +153,8 @@ export declare enum ComponentClassName {
     StorageManagerLoader = "amplify-storagemanager__loader",
     StorageManagerPreviewer = "amplify-storagemanager__previewer",
     StorageManagerPreviewerText = "amplify-storagemanager__previewer__text",
+    StorageManagerPreviewerActions = "amplify-storagemanager__previewer__actions",
+    StorageManagerPreviewerFooter = "amplify-storagemanager__previewer__footer",
     SwitchField = "amplify-switchfield",
     SwitchLabel = "amplify-switch-label",
     SwitchThumb = "amplify-switch-thumb",

package/package.json

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