@aws-amplify/ui 5.5.10 → 5.6.0

package/dist/styles.css

@@ -349,6 +349,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);
@@ -511,6 +512,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);
@@ -2620,6 +2622,7 @@ strong.amplify-text {
 .amplify-field {
   font-size: var(--amplify-components-field-font-size);
   gap: var(--amplify-components-field-gap);
+  flex-direction: var(--amplify-components-field-flex-direction);
 }
 .amplify-field--small {
   font-size: var(--amplify-components-field-small-font-size);
@@ -2768,6 +2771,405 @@ html[dir=rtl] .amplify-field-group__inner-start {
   height: 100%;
 }
 
+.amplify-liveness-cancel-container {
+  z-index: 2;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  right: var(--amplify-space-medium);
+}
+
+.amplify-liveness-cancel-button {
+  background-color: var(--amplify-colors-background-primary);
+}
+
+.amplify-liveness-fade-out {
+  animation-name: amplify-liveness-animation-fadeout;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes amplify-liveness-animation-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.amplify-liveness-camera-module {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--amplify-components-liveness-camera-module-background-color);
+  border: 1px solid var(--amplify-colors-neutral-40);
+  position: relative;
+}
+
+.amplify-liveness-camera-module--mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.amplify-liveness-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.amplify-liveness-freshness-canvas {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.amplify-liveness-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-oval-canvas {
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.amplify-liveness-oval-canvas--mobile {
+  position: fixed;
+}
+
+.amplify-liveness-video-anchor {
+  position: relative;
+  width: 100%;
+}
+
+.amplify-liveness-recording-icon-container {
+  z-index: 1;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  left: var(--amplify-space-medium);
+}
+
+.amplify-liveness-recording-icon {
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-xxs);
+  gap: var(--amplify-space-xxs);
+  border-radius: var(--amplify-radii-small);
+}
+
+.amplify-liveness-instruction-overlay {
+  z-index: 1;
+}
+
+.amplify-liveness-countdown-container {
+  background-color: var(--amplify-colors-background-primary);
+  border-radius: 100%;
+  padding: var(--amplify-space-xs);
+}
+
+.amplify-liveness-instruction-list {
+  flex-direction: column;
+}
+.amplify-liveness-instruction-list li {
+  display: flex;
+}
+
+.amplify-liveness-toast {
+  background-color: var(--amplify-colors-background-primary);
+}
+
+.amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-primary);
+}
+
+.amplify-liveness-toast--large {
+  font-size: var(--amplify-font-sizes-xl);
+}
+
+.amplify-liveness-toast--primary {
+  background-color: var(--amplify-colors-brand-primary-80);
+}
+.amplify-liveness-toast--primary .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+}
+
+.amplify-liveness-toast--error {
+  background-color: var(--amplify-colors-red-80);
+}
+.amplify-liveness-toast--error .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+}
+
+.amplify-liveness-match-indicator {
+  display: block;
+  width: min(70%, 200px);
+  position: relative;
+  --amplify-liveness-match-indicator-transition: transform 0.2s linear;
+}
+
+.amplify-liveness-match-indicator__bar {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  height: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-white);
+  position: relative;
+  overflow: hidden;
+  /* 
+    This translateZ transform fixes in issue in Safari where the bar::after
+    element doesn't appear clipped from overflow: hidden here */
+  transform: translateZ(0);
+  border: 1px solid var(--amplify-colors-border-tertiary);
+}
+
+.amplify-liveness-match-indicator__pin {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__bar:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: var(--amplify-colors-brand-primary-40);
+  left: -100%;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__pin:after {
+  --height: var(--amplify-space-xl);
+  position: absolute;
+  content: "";
+  width: var(--amplify-space-small);
+  height: var(--height);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-brand-primary-80);
+  left: 0;
+  top: 0;
+  transform: translate(-50%, calc(var(--height) / 2 * -1));
+}
+
+.amplify-liveness-figures {
+  flex-wrap: wrap;
+}
+
+.amplify-liveness-figure {
+  flex-direction: column;
+  gap: 0;
+}
+
+.amplify-liveness-figure__caption {
+  padding: var(--amplify-space-xxs);
+}
+
+.amplify-liveness-figure__caption--success {
+  background-color: var(--amplify-colors-background-success);
+  color: var(--amplify-colors-font-success);
+}
+
+.amplify-liveness-figure__caption--error {
+  background-color: var(--amplify-colors-background-error);
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-figure__image {
+  background-color: #fff;
+  border: 1px solid var(--amplify-colors-border-primary);
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.amplify-liveness-figure__image svg {
+  display: block;
+}
+
+.amplify-liveness-figure__image--success {
+  border-color: var(--amplify-colors-green-90);
+}
+
+.amplify-liveness-figure__image--error {
+  border-color: var(--amplify-colors-border-error);
+}
+
+.amplify-liveness-figure__icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.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: column;
+  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);
+}
+.amplify-fileuploader__file__wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  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;
 }
@@ -3812,7 +4214,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-textfield {
-  flex-direction: column;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-textfield-color
   );

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);

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';
@@ -73,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>;

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/package.json

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