@aws-amplify/ui 5.2.0 → 5.3.0

package/dist/styles.css

@@ -163,6 +163,47 @@
   --amplify-components-button-link-loading-border-color: transparent;
   --amplify-components-button-link-loading-background-color: transparent;
   --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-warning-background-color: transparent;
+  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
+  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
+  --amplify-components-button-warning-color: var(--amplify-colors-red-60);
+  --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
+  --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
+  --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
+  --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
+  --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
+  --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
+  --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+  --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
+  --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
+  --amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
+  --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-button-warning-disabled-background-color: transparent;
+  --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-button-warning-loading-background-color: transparent;
+  --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-destructive-border-color: transparent;
+  --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
+  --amplify-components-button-destructive-border-style: solid;
+  --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
+  --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
+  --amplify-components-button-destructive-disabled-border-color: transparent;
+  --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-destructive-loading-border-color: transparent;
+  --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
+  --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
+  --amplify-components-button-destructive-hover-border-color: transparent;
+  --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
+  --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
+  --amplify-components-button-destructive-focus-border-color: transparent;
+  --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
+  --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
+  --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+  --amplify-components-button-destructive-active-border-color: transparent;
+  --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
+  --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
   --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
   --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
   --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
@@ -1369,6 +1410,88 @@ strong.amplify-text {
   border-color: var(--amplify-components-button-link-active-border-color);
   color: var(--amplify-components-button-link-active-color);
 }
+.amplify-button--destructive {
+  border-width: var(--amplify-components-button-destructive-border-width);
+  background-color: var(--amplify-components-button-destructive-background-color);
+  border-color: var(--amplify-components-button-destructive-border-color);
+  color: var(--amplify-components-button-destructive-color);
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-destructive-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-destructive-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-destructive-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-destructive-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-destructive-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-destructive-loading-color
+  );
+}
+.amplify-button--destructive:hover {
+  background-color: var(--amplify-components-button-destructive-hover-background-color);
+  border-color: var(--amplify-components-button-destructive-hover-border-color);
+  color: var(--amplify-components-button-destructive-hover-color);
+}
+.amplify-button--destructive:focus {
+  background-color: var(--amplify-components-button-destructive-focus-background-color);
+  border-color: var(--amplify-components-button-destructive-focus-border-color);
+  color: var(--amplify-components-button-destructive-focus-color);
+  box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
+}
+.amplify-button--destructive:active {
+  background-color: var(--amplify-components-button-destructive-active-background-color);
+  border-color: var(--amplify-components-button-destructive-active-border-color);
+  color: var(--amplify-components-button-destructive-active-color);
+}
+.amplify-button--warning {
+  background-color: var(--amplify-components-button-warning-background-color);
+  border-color: var(--amplify-components-button-warning-border-color);
+  border-width: var(--amplify-components-button-warning-border-width);
+  color: var(--amplify-components-button-warning-color);
+  --amplify-internal-button-disabled-text-decoration: none;
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-warning-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-warning-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-warning-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-warning-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-warning-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-warning-loading-color
+  );
+  --amplify-internal-button-loading-text-decoration: none;
+}
+.amplify-button--warning:hover {
+  background-color: var(--amplify-components-button-warning-hover-background-color);
+  border-color: var(--amplify-components-button-warning-hover-border-color);
+  color: var(--amplify-components-button-warning-hover-color);
+}
+.amplify-button--warning:focus {
+  background-color: var(--amplify-components-button-warning-focus-background-color);
+  border-color: var(--amplify-components-button-warning-focus-border-color);
+  color: var(--amplify-components-button-warning-focus-color);
+  box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
+}
+.amplify-button--warning:active {
+  background-color: var(--amplify-components-button-warning-active-background-color);
+  border-color: var(--amplify-components-button-warning-active-border-color);
+  color: var(--amplify-components-button-warning-active-color);
+}
 .amplify-button--small {
   font-size: var(--amplify-components-button-small-font-size);
   -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
@@ -1908,6 +2031,7 @@ strong.amplify-text {
 .amplify-alert {
   align-items: var(--amplify-components-alert-align-items);
   background-color: var(--amplify-components-alert-background-color);
+  color: var(--amplify-components-alert-color);
   justify-content: var(--amplify-components-alert-justify-content);
   padding-block: var(--amplify-components-alert-padding-block);
   padding-inline: var(--amplify-components-alert-padding-inline);
@@ -1980,6 +2104,7 @@ strong.amplify-text {
 }
 .amplify-autocomplete__menu__options {
   position: relative;
+  overscroll-behavior: contain;
   display: var(--amplify-components-autocomplete-menu-options-display);
   flex-direction: var(--amplify-components-autocomplete-menu-options-flex-direction);
   max-height: var(--amplify-components-autocomplete-menu-options-max-height);

package/dist/theme.css

@@ -160,6 +160,47 @@
 --amplify-components-button-link-loading-border-color: transparent;
 --amplify-components-button-link-loading-background-color: transparent;
 --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-warning-background-color: transparent;
+--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
+--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
+--amplify-components-button-warning-color: var(--amplify-colors-red-60);
+--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
+--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
+--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
+--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
+--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
+--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
+--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
+--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
+--amplify-components-button-warning-disabled-background-color: transparent;
+--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
+--amplify-components-button-warning-loading-background-color: transparent;
+--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-destructive-border-color: transparent;
+--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
+--amplify-components-button-destructive-border-style: solid;
+--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
+--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-destructive-disabled-border-color: transparent;
+--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
+--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-destructive-loading-border-color: transparent;
+--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
+--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-destructive-hover-border-color: transparent;
+--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
+--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-destructive-focus-border-color: transparent;
+--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
+--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+--amplify-components-button-destructive-active-border-color: transparent;
+--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
+--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
 --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
 --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
 --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);

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

@@ -0,0 +1,2 @@
+export * from './utils';
+export { getDefaultConfirmPasswordValidators, getDefaultPasswordValidators, runFieldValidators, } from './validator';

package/dist/types/helpers/accountSettings/utils.d.ts

@@ -0,0 +1,9 @@
+import { AmplifyUser } from '../../types';
+declare type ChangePasswordInput = {
+    user: AmplifyUser;
+    currentPassword: string;
+    newPassword: string;
+};
+export declare const changePassword: ({ user, currentPassword, newPassword, }: ChangePasswordInput) => Promise<void>;
+export declare const deleteUser: () => Promise<void>;
+export {};

package/dist/types/helpers/accountSettings/validator.d.ts

@@ -0,0 +1,21 @@
+import { ValidatorOptions, PasswordRequirement, ValidationMode, InputEventType } from '../../types';
+export declare const getPasswordRequirement: () => PasswordRequirement;
+export declare const getHasMinLength: (minLength: number) => ValidatorOptions;
+export declare const hasLowerCase: ValidatorOptions;
+export declare const hasUpperCase: ValidatorOptions;
+export declare const hasNumber: ValidatorOptions;
+export declare const hasSpecialChar: ValidatorOptions;
+export declare const getMatchesConfirmPassword: (password: string) => ValidatorOptions;
+export declare const getDefaultPasswordValidators: () => ValidatorOptions[];
+export declare const getDefaultConfirmPasswordValidators: (password: string) => ValidatorOptions[];
+export declare const shouldValidate: ({ validationMode, eventType, hasBlurred, }: {
+    validationMode: ValidationMode;
+    eventType: InputEventType;
+    hasBlurred: boolean;
+}) => boolean;
+export declare const runFieldValidators: ({ value, validators, eventType, hasBlurred, }: {
+    value: string;
+    validators: ValidatorOptions[];
+    eventType: InputEventType;
+    hasBlurred: boolean;
+}) => string[];

package/dist/types/helpers/authenticator/textUtil.d.ts

@@ -30,7 +30,7 @@ export declare const authenticatorTextUtil: {
     readonly getDeliveryMessageText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
     readonly getDeliveryMethodText: (codeDeliveryDetails: CodeDeliveryDetails) => string;
     /** ConfirmSignIn */
-    readonly getChallengeText: (challengeName: AuthChallengeName) => string;
+    readonly getChallengeText: (challengeName?: AuthChallengeName) => string;
     /** ResetPassword */
     readonly getResetYourPasswordText: () => string;
     /** SetupTOTP */

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

@@ -1,2 +1,4 @@
 export * from './authenticator';
+export * from './accountSettings';
 export * from './storage';
+export { getLogger } from './utils';

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

@@ -0,0 +1,4 @@
+import { Logger } from 'aws-amplify';
+declare type LoggerCategory = 'Auth' | 'Geo' | 'Notifications' | 'Storage';
+export declare const getLogger: (category: LoggerCategory) => Logger;
+export {};

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

@@ -23,18 +23,20 @@ declare type LinkVariationTokens<Output> = DesignTokenProperties<'backgroundColo
     _loading?: StateTokens<Output>;
 };
 declare type ButtonSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
-export declare type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color'> & {
+export declare type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
     _hover?: StateTokens<Output>;
     _focus?: StateWithShadowTokens<Output>;
     _active?: StateTokens<Output>;
     _loading?: StateTokens<Output>;
     _disabled?: StateTokens<Output>;
     primary?: PrimaryVariationTokens<Output>;
+    warning?: LinkVariationTokens<Output>;
+    destructive?: PrimaryVariationTokens<Output>;
     menu?: MenuVariationTokens<Output>;
     link?: LinkVariationTokens<Output>;
     small?: ButtonSizeTokens<Output>;
     large?: ButtonSizeTokens<Output>;
-    loaderWrapper: DesignTokenProperties<'alignItems' | 'gap', Output>;
+    loaderWrapper?: DesignTokenProperties<'alignItems' | 'gap', Output>;
 };
 export declare const button: Required<ButtonTokens<'default'>>;
 export {};

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

@@ -8,17 +8,17 @@ declare type PaginationTokens<Output> = {
     };
 };
 declare type SearchTokens<Output> = {
-    input: DesignTokenProperties<'color', Output>;
-    button: DesignTokenProperties<'color', Output> & {
-        _active: StateTokens<Output>;
-        _disabled: StateTokens<Output>;
-        _focus: StateTokens<Output>;
-        _hover: StateTokens<Output>;
+    input?: DesignTokenProperties<'color', Output>;
+    button?: DesignTokenProperties<'color', Output> & {
+        _active?: StateTokens<Output>;
+        _disabled?: StateTokens<Output>;
+        _focus?: StateTokens<Output>;
+        _hover?: StateTokens<Output>;
     };
 };
 export interface CollectionTokens<Output extends OutputVariantKey> {
-    pagination: PaginationTokens<Output>;
-    search: SearchTokens<Output>;
+    pagination?: PaginationTokens<Output>;
+    search?: SearchTokens<Output>;
 }
 export declare const collection: Required<CollectionTokens<'default'>>;
 export {};

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

@@ -2,21 +2,21 @@ 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>;
+    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>;
+    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>;
+    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'>>;

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

@@ -1,6 +1,6 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type HeadingLevelTokens<Output> = DesignTokenProperties<'fontSize' | 'fontWeight', Output>;
 declare type Level = 1 | 2 | 3 | 4 | 5 | 6;
-export declare type HeadingTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'lineHeight'> & Record<Level, HeadingLevelTokens<Output>>;
+export declare type HeadingTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'lineHeight', Output> & Partial<Record<Level, HeadingLevelTokens<Output>>>;
 export declare const heading: Required<HeadingTokens<'default'>>;
 export {};

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

@@ -1,5 +1,5 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type LinkState = 'active' | 'focus' | 'hover' | 'visited';
-export declare type LinkTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color'> & Record<LinkState, DesignTokenProperties<'color', Output>>;
+export declare type LinkTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color', Output> & Partial<Record<LinkState, DesignTokenProperties<'color', Output>>>;
 export declare const link: Required<LinkTokens<'default'>>;
 export {};

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

@@ -1,8 +1,8 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 export declare type RatingTokens<Output extends OutputVariantKey> = {
-    large: DesignTokenProperties<'size', Output>;
-    default: DesignTokenProperties<'size', Output>;
-    small: DesignTokenProperties<'size', Output>;
+    large?: DesignTokenProperties<'size', Output>;
+    default?: DesignTokenProperties<'size', Output>;
+    small?: DesignTokenProperties<'size', Output>;
     filled?: DesignTokenProperties<'color', Output>;
     empty?: DesignTokenProperties<'color', Output>;
 };

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

@@ -1,10 +1,10 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
-export declare type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth'> & {
-    wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position'>;
-    iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents'>;
-    option?: DesignTokenProperties<'backgroundColor' | 'color'> & {
-        _disabled?: DesignTokenProperties<'color'>;
+export declare type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth', Output> & {
+    wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position', Output>;
+    iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output>;
+    option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
+        _disabled?: DesignTokenProperties<'color', Output>;
     };
     small?: SelectSizeTokens<Output>;
     large?: SelectSizeTokens<Output>;

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

@@ -1,6 +1,6 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type ButtonStateColorTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color', Output>;
-export declare type StepperFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'flexDirection'> & {
+export declare type StepperFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'flexDirection', Output> & {
     input?: DesignTokenProperties<'textAlign' | 'color' | 'fontSize', Output>;
     button?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
         _active?: ButtonStateColorTokens<Output>;

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

@@ -1,20 +1,20 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type SwitchFieldSizeTokens<OutputType> = DesignTokenProperties<'fontSize', OutputType>;
 declare type SwitchFieldTrackCheckedTokens<OutputType> = DesignTokenProperties<'backgroundColor', OutputType>;
-export declare type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'fontSize'> & {
+export declare type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'fontSize', OutputType> & {
     _disabled?: DesignTokenProperties<'opacity', OutputType>;
     _focused?: DesignTokenProperties<'shadow', OutputType>;
     large?: SwitchFieldSizeTokens<OutputType>;
     small?: SwitchFieldSizeTokens<OutputType>;
     label?: DesignTokenProperties<'padding', OutputType>;
     thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'width', OutputType> & {
-        checked: DesignTokenProperties<'transform', OutputType>;
-        transition: DesignTokenProperties<'duration', OutputType>;
+        checked?: DesignTokenProperties<'transform', OutputType>;
+        transition?: DesignTokenProperties<'duration', OutputType>;
     };
     track?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'height' | 'width' | 'padding', OutputType> & {
-        checked: SwitchFieldTrackCheckedTokens<OutputType>;
-        transition: DesignTokenProperties<'duration', OutputType>;
-        _error: SwitchFieldTrackCheckedTokens<OutputType>;
+        checked?: SwitchFieldTrackCheckedTokens<OutputType>;
+        transition?: DesignTokenProperties<'duration', OutputType>;
+        _error?: SwitchFieldTrackCheckedTokens<OutputType>;
     };
 };
 export declare const switchfield: Required<SwitchFieldTokens<'default'>>;

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

@@ -14,8 +14,8 @@ export declare type TableTokens<Output extends OutputVariantKey> = DesignTokenPr
         hover?: DesignTokenProperties<'backgroundColor', Output>;
         striped?: DesignTokenProperties<'backgroundColor', Output>;
     };
-    header: TableCellTokens<Output>;
-    data: TableCellTokens<Output>;
+    header?: TableCellTokens<Output>;
+    data?: TableCellTokens<Output>;
     caption?: DesignTokenProperties<'captionSide' | 'color' | 'display' | 'fontSize' | 'textAlign' | 'wordBreak', Output> & {
         large?: TableCaptionSizeTokens<Output>;
         small?: TableCaptionSizeTokens<Output>;

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

@@ -2,6 +2,6 @@ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 declare type OrderVariantKey = 'primary' | 'secondary' | 'tertiary';
 declare type InformationVariantKey = 'info' | 'warning' | 'error' | 'success';
 declare type BaseTextTokens<Output> = DesignTokenProperties<'color', Output>;
-export declare type TextTokens<Output extends OutputVariantKey> = BaseTextTokens<Output> & Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>;
+export declare type TextTokens<Output extends OutputVariantKey> = BaseTextTokens<Output> & Partial<Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>>;
 export declare const text: Required<TextTokens<'default'>>;
 export {};

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

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

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

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

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

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

package/dist/types/types/accountSettings/validator.d.ts

@@ -0,0 +1,14 @@
+export declare type InputEventType = 'blur' | 'change';
+export declare type ValidationMode = 'onBlur' | 'onChange' | 'onTouched';
+export interface ValidatorOptions {
+    validationMode: ValidationMode;
+    validator: (value: string) => boolean;
+    message: string;
+}
+export interface PasswordRequirement {
+    minLength?: number;
+    needsLowerCase?: boolean;
+    needsUpperCase?: boolean;
+    needsSpecialChar?: boolean;
+    needsNumber?: boolean;
+}

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

@@ -1,3 +1,4 @@
+export * from './accountSettings';
 export * from './authenticator';
 export * from './primitives';
 export * from './util';

package/package.json

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