@aws-amplify/ui 5.6.6 → 5.6.8

package/dist/styles.css

@@ -397,6 +397,7 @@
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldgroup-vertical-align-items: center;
@@ -806,7 +807,9 @@
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
-  --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-switchfield-thumb-border-color: transparent;
+  --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small);
+  --amplify-components-switchfield-thumb-border-style: solid;
   --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
   --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
   --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
@@ -1221,14 +1224,6 @@ select {
   display: block;
   overflow: auto;
 }
-.amplify-scrollview--horizontal {
-  overflow-x: scroll;
-  overflow-y: initial;
-}
-.amplify-scrollview--vertical {
-  overflow-x: initial;
-  overflow-y: scroll;
-}
 
 .amplify-text {
   display: block;
@@ -2893,10 +2888,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
 
 .amplify-liveness-toast {
   background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-small);
+  border-radius: var(--amplify-radii-medium);
 }
 
 .amplify-liveness-toast__message {
   color: var(--amplify-colors-font-primary);
+  text-align: center;
+  flex-direction: column;
 }
 
 .amplify-liveness-toast--large {
@@ -2908,6 +2907,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-liveness-toast--primary .amplify-liveness-toast__message {
   color: var(--amplify-colors-font-inverse);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast__container {
+  gap: var(--amplify-space-xs);
+  flex-direction: column;
+  align-items: center;
 }
 
 .amplify-liveness-toast--error {
@@ -3023,6 +3030,117 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
 }
 
+.amplify-liveness-landscape-error-modal {
+  background-color: var(--amplify-colors-background-primary);
+  direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.amplify-liveness-landscape-error-modal__header {
+  font-size: large;
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-landscape-error-modal__button {
+  justify-content: center;
+}
+
+.amplify-liveness-start-screen-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.amplify-liveness-start-screen-header__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-start-screen-header__body {
+  color: var(--amplify-colors-font-primary);
+}
+
+.amplify-liveness-start-screen-warning {
+  color: var(--amplify-colors-orange-80);
+  background-color: var(--amplify-colors-orange-20);
+  align-items: center;
+}
+
+.amplify-liveness-start-screen-instructions__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-overlay-opaque {
+  background-color: var(--amplify-colors-overlay-40);
+}
+
+.amplify-liveness-overlay {
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--amplify-space-xl);
+}
+
+.amplify-liveness-error-modal {
+  gap: var(--amplify-space-xs);
+  align-items: center;
+  justify-content: center;
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-error-modal__heading {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-hint__text {
+  align-items: center;
+  gap: var(--amplify-space-xs);
+}
+
+.amplify-liveness-popover {
+  position: relative;
+  cursor: pointer;
+}
+
+.amplify-liveness-popover__anchor {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+  z-index: 3;
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent var(--amplify-colors-background-primary) transparent;
+}
+
+.amplify-liveness-popover__anchor-secondary {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+  z-index: 2;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--amplify-colors-border-secondary) transparent;
+}
+
+.amplify-liveness-popover__container {
+  position: absolute;
+  background-color: var(--amplify-colors-background-primary);
+  color: var(--amplify-colors-font-primary);
+  flex-direction: row;
+  font-size: var(--amplify-font-sizes-xs);
+  padding: var(--amplify-space-small);
+  top: 33px;
+  width: 240px;
+  border: 1px solid var(--amplify-colors-border-secondary);
+  border-radius: 2px;
+}
+
 .amplify-fileuploader__dropzone {
   background-color: var(--amplify-components-fileuploader-dropzone-background-color);
   border-color: var(--amplify-components-fileuploader-dropzone-border-color);
@@ -3323,6 +3441,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   );
 }
 
+.amplify-field__show-password--error {
+  color: var(--amplify-components-fieldcontrol-error-color);
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+
 .amplify-phonenumberfield select:not(:focus) {
   border-right: none;
 }
@@ -3920,6 +4043,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-switchfield {
   display: inline-block;
   font-size: var(--amplify-components-switchfield-font-size);
+  cursor: pointer;
 }
 .amplify-switchfield--small {
   font-size: var(--amplify-components-switchfield-small-font-size);
@@ -3976,6 +4100,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-radius: var(--amplify-components-switchfield-thumb-border-radius);
   width: var(--amplify-components-switchfield-thumb-width);
   height: var(--amplify-components-switchfield-thumb-width);
+  border-width: var(--amplify-components-switchfield-thumb-border-width);
+  border-style: var(--amplify-components-switchfield-thumb-border-style);
   border-color: var(--amplify-components-switchfield-thumb-border-color);
   overflow-wrap: break-word;
 }

package/dist/theme.css

@@ -394,6 +394,7 @@
 --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
 --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
 --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
+--amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
 --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
 --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
 --amplify-components-fieldgroup-vertical-align-items: center;
@@ -803,7 +804,9 @@
 --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
 --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
 --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
---amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
+--amplify-components-switchfield-thumb-border-color: transparent;
+--amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small);
+--amplify-components-switchfield-thumb-border-style: solid;
 --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
 --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
 --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);

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

@@ -9,3 +9,9 @@ export declare const defaultFormFieldOptions: DefaultFormFieldOptions;
  * Adapted from https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-policies.html
  */
 export declare const ALLOWED_SPECIAL_CHARACTERS: string[];
+/**
+ * Email validation regex
+ *
+ * source: HTML5 spec https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
+ */
+export declare const emailRegex: RegExp;

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

@@ -45,4 +45,7 @@ export declare const authenticatorTextUtil: {
     readonly getVerifyText: () => string;
     readonly getVerifyContactText: () => string;
     readonly getAccountRecoveryInfoText: () => string;
+    /** Validations */
+    readonly getInvalidEmailText: () => string;
+    readonly getRequiredFieldText: () => string;
 };

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

@@ -27,4 +27,5 @@ export declare const listenToAuthHub: (service: AuthInterpreter, handler?: AuthM
 export declare const hasSpecialChars: (password: string) => boolean;
 export declare const getTotpCodeURL: (issuer: string, username: string, secret: string) => string;
 export declare function trimValues<T extends Record<string, string>>(values: T, ...ignored: string[]): T;
+export declare const isValidEmail: (value: string | undefined) => boolean;
 export {};

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

@@ -9,7 +9,7 @@ type ButtonToken<Output> = DesignTokenProperties<'position' | 'alignItems' | 'ju
         _focus?: DesignTokenProperties<'borderColor' | 'boxShadow', Output>;
     };
 };
-type IconCheckedStateToken<Output> = DesignTokenProperties<'opacity' | 'transform'> & {
+type IconCheckedStateToken<Output> = DesignTokenProperties<'opacity' | 'transform', Output> & {
     _disabled?: DesignTokenProperties<'backgroundColor', Output>;
 };
 type IconToken<Output> = DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'opacity' | 'transform' | 'transitionProperty' | 'transitionDuration' | 'transitionTimingFunction', Output> & {

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

@@ -2,7 +2,7 @@ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 type FieldControlSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
 type FieldControlFocusTokens<Output> = DesignTokenProperties<'borderColor' | 'boxShadow', Output>;
 type FieldControlDisabledTokens<Output> = DesignTokenProperties<'color' | 'cursor' | 'borderColor' | 'backgroundColor', Output>;
-type FieldControlErrorTokens<Output> = DesignTokenProperties<'borderColor', Output> & {
+type FieldControlErrorTokens<Output> = DesignTokenProperties<'borderColor' | 'color', Output> & {
     _focus?: DesignTokenProperties<'boxShadow', Output>;
 };
 type FieldControlQuietTokens<Output> = DesignTokenProperties<'borderStyle' | 'borderInlineStart' | 'borderInlineEnd' | 'borderBlockStart' | 'borderRadius', Output> & {

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

@@ -7,7 +7,7 @@ export type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignToken
     large?: SwitchFieldSizeTokens<OutputType>;
     small?: SwitchFieldSizeTokens<OutputType>;
     label?: DesignTokenProperties<'padding', OutputType>;
-    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'width', OutputType> & {
+    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'borderRadius' | 'width', OutputType> & {
         checked?: DesignTokenProperties<'transform', OutputType>;
         transition?: DesignTokenProperties<'duration', OutputType>;
     };

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

@@ -40,7 +40,7 @@ export type BorderColorValue = ColorValue;
 export type BorderCollapseValue = string;
 export type BorderRadiusValue = RadiusValue;
 export type BorderStyleValue = string;
-export type BorderWidthValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : SpaceValue : SpaceValue;
+export type BorderWidthValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : SpaceValue<Platform> : SpaceValue<Platform>;
 export type BorderValue = string;
 export type BoxSizingValue = string;
 export type BoxShadowValue = ShadowValue;

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

@@ -121,6 +121,7 @@ export declare enum ComponentClassName {
     StepperFieldButtonDecrease = "amplify-stepperfield__button--decrease",
     StepperFieldButtonIncrease = "amplify-stepperfield__button--increase",
     StepperFieldInput = "amplify-stepperfield__input",
+    StorageImage = "amplify-storageimage",
     StorageManager = "amplify-storagemanager",
     StorageManagerDropZone = "amplify-storagemanager__dropzone",
     StorageManagerDropZoneIcon = "amplify-storagemanager__dropzone__icon",

package/package.json

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