@aws-amplify/ui 6.10.3 → 6.12.0

package/dist/styles.css

@@ -4250,11 +4250,26 @@ html[dir=rtl] .amplify-field-group__inner-start {
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {
@@ -5653,6 +5668,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
   background-color: var(--amplify-components-table-row-striped-background-color);
 }
+.amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -6671,6 +6689,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   box-shadow: var(--amplify-shadows-small);
   z-index: 2;
 }
+.amplify-storage-browser__table-row_active {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-storage-browser__table-header {
   border: none;
   padding: var(--amplify-space-xxxs);
@@ -6753,7 +6774,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
   z-index: 3;
 }
+.amplify-storage-browser__content-with-preview {
+  display: flex;
+  height: 100%;
+}
+.amplify-storage-browser__file-preview {
+  overflow: auto;
+  flex: 1;
+  width: 50%;
+  position: sticky;
+  top: 10px;
+  bottom: 10px;
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100svh - 20px);
+  padding: var(--amplify-space-medium);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
+  border-radius: var(--amplify-radii-small);
+  margin-inline-start: var(--amplify-space-large);
+  padding-block-end: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-header {
+  margin-block-end: var(--amplify-space-medium);
+  display: flex;
+  justify-content: flex-end;
+}
+.amplify-storage-browser__file-preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+  align-items: center;
+}
+.amplify-storage-browser__file-preview-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+  flex: 1;
+}
+.amplify-storage-browser__file-preview-title {
+  margin-block-end: var(--amplify-space-medium);
+  color: var(--amplify-colors-font-primary);
+  font-size: var(--amplify-font-sizes-large);
+  font-weight: var(--amplify-font-weights-semibold);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__file-metadata {
+  display: grid;
+  gap: var(--amplify-space-small);
+  background-color: var(--amplify-colors-background-secondary);
+  padding: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-small);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--amplify-space-xs);
+  border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item:last-child {
+  border-block-end: none;
+}
+.amplify-storage-browser__file-metadata-label {
+  font-weight: var(--amplify-font-weights-medium);
+  color: var(--amplify-colors-font-primary);
+  margin: 0;
+}
+.amplify-storage-browser__file-metadata-value {
+  color: var(--amplify-colors-font-secondary);
+  margin: 0;
+  word-break: break-all;
+  text-align: end;
+  max-width: 60%;
+}
+.amplify-storage-browser__preview-fallback {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-large);
+  text-align: center;
+}
+.amplify-storage-browser__preview-fallback--error {
+  color: var(--amplify-colors-font-error);
+  background-color: var(--amplify-colors-background-error);
+  border-color: var(--amplify-colors-border-error);
+}
+.amplify-storage-browser__preview-fallback--default {
+  color: var(--amplify-colors-font-secondary);
+  background-color: var(--amplify-colors-background-secondary);
+  border-color: var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__preview-fallback-icon {
+  font-size: var(--amplify-font-sizes-xxxxl);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-title {
+  font-weight: var(--amplify-font-weights-bold);
+  font-size: var(--amplify-font-sizes-large);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-description {
+  font-size: var(--amplify-font-sizes-small);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-filename {
+  font-size: var(--amplify-font-sizes-xs);
+  font-family: var(--amplify-fonts-monospace), monospace;
+}
+.amplify-storage-browser__preview-fallback-actions {
+  display: flex;
+  gap: var(--amplify-space-small);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.amplify-storage-browser__preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  height: 400px;
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-space-small);
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-info {
+  color: var(--amplify-colors-font-secondary);
+  font-size: var(--amplify-font-sizes-small);
+  text-align: center;
+}
+.amplify-storage-browser__text-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__text-preview {
+  height: 400px;
+  width: 100%;
+  display: block;
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-medium);
+  font-family: var(--amplify-fonts-monospace), monospace;
+  font-size: var(--amplify-font-sizes-small);
+  line-height: 1.5;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.amplify-storage-browser__video-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__video-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 400px;
+  border-radius: var(--amplify-radii-small);
+  background-color: var(--amplify-colors-background-secondary);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__video-preview video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.amplify-storage-browser__image-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__image-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  width: 100%;
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+  flex-shrink: 0;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: var(--amplify-radii-small);
+}
+.amplify-storage-browser__download-button {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__download-button_icon {
+  animation-delay: 0s;
+  animation-direction: normal;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: spin;
+}
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .amplify-ai-conversation {
   display: flex;
   flex-direction: column;

package/dist/styles.layer.css

@@ -4251,11 +4251,26 @@ html[dir=rtl] .amplify-field-group__inner-start {
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {
@@ -5654,6 +5669,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
   background-color: var(--amplify-components-table-row-striped-background-color);
 }
+.amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -6672,6 +6690,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   box-shadow: var(--amplify-shadows-small);
   z-index: 2;
 }
+.amplify-storage-browser__table-row_active {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-storage-browser__table-header {
   border: none;
   padding: var(--amplify-space-xxxs);
@@ -6754,7 +6775,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
   z-index: 3;
 }
+.amplify-storage-browser__content-with-preview {
+  display: flex;
+  height: 100%;
+}
+.amplify-storage-browser__file-preview {
+  overflow: auto;
+  flex: 1;
+  width: 50%;
+  position: sticky;
+  top: 10px;
+  bottom: 10px;
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100svh - 20px);
+  padding: var(--amplify-space-medium);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
+  border-radius: var(--amplify-radii-small);
+  margin-inline-start: var(--amplify-space-large);
+  padding-block-end: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-header {
+  margin-block-end: var(--amplify-space-medium);
+  display: flex;
+  justify-content: flex-end;
+}
+.amplify-storage-browser__file-preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+  align-items: center;
+}
+.amplify-storage-browser__file-preview-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+  flex: 1;
+}
+.amplify-storage-browser__file-preview-title {
+  margin-block-end: var(--amplify-space-medium);
+  color: var(--amplify-colors-font-primary);
+  font-size: var(--amplify-font-sizes-large);
+  font-weight: var(--amplify-font-weights-semibold);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__file-metadata {
+  display: grid;
+  gap: var(--amplify-space-small);
+  background-color: var(--amplify-colors-background-secondary);
+  padding: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-small);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--amplify-space-xs);
+  border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item:last-child {
+  border-block-end: none;
+}
+.amplify-storage-browser__file-metadata-label {
+  font-weight: var(--amplify-font-weights-medium);
+  color: var(--amplify-colors-font-primary);
+  margin: 0;
+}
+.amplify-storage-browser__file-metadata-value {
+  color: var(--amplify-colors-font-secondary);
+  margin: 0;
+  word-break: break-all;
+  text-align: end;
+  max-width: 60%;
+}
+.amplify-storage-browser__preview-fallback {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-large);
+  text-align: center;
+}
+.amplify-storage-browser__preview-fallback--error {
+  color: var(--amplify-colors-font-error);
+  background-color: var(--amplify-colors-background-error);
+  border-color: var(--amplify-colors-border-error);
+}
+.amplify-storage-browser__preview-fallback--default {
+  color: var(--amplify-colors-font-secondary);
+  background-color: var(--amplify-colors-background-secondary);
+  border-color: var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__preview-fallback-icon {
+  font-size: var(--amplify-font-sizes-xxxxl);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-title {
+  font-weight: var(--amplify-font-weights-bold);
+  font-size: var(--amplify-font-sizes-large);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-description {
+  font-size: var(--amplify-font-sizes-small);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-filename {
+  font-size: var(--amplify-font-sizes-xs);
+  font-family: var(--amplify-fonts-monospace), monospace;
+}
+.amplify-storage-browser__preview-fallback-actions {
+  display: flex;
+  gap: var(--amplify-space-small);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.amplify-storage-browser__preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  height: 400px;
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-space-small);
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-info {
+  color: var(--amplify-colors-font-secondary);
+  font-size: var(--amplify-font-sizes-small);
+  text-align: center;
+}
+.amplify-storage-browser__text-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__text-preview {
+  height: 400px;
+  width: 100%;
+  display: block;
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-medium);
+  font-family: var(--amplify-fonts-monospace), monospace;
+  font-size: var(--amplify-font-sizes-small);
+  line-height: 1.5;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.amplify-storage-browser__video-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__video-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 400px;
+  border-radius: var(--amplify-radii-small);
+  background-color: var(--amplify-colors-background-secondary);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__video-preview video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.amplify-storage-browser__image-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__image-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  width: 100%;
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+  flex-shrink: 0;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: var(--amplify-radii-small);
+}
+.amplify-storage-browser__download-button {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__download-button_icon {
+  animation-delay: 0s;
+  animation-direction: normal;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: spin;
+}
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .amplify-ai-conversation {
   display: flex;
   flex-direction: column;

package/dist/types/i18n/dictionaries/authenticator/hu.d.ts

@@ -0,0 +1,2 @@
+import type { AuthenticatorDictionary } from './types';
+export declare const huDict: AuthenticatorDictionary;

package/dist/types/i18n/dictionaries/authenticator/index.d.ts

@@ -2,6 +2,7 @@ export { deDict } from './de';
 export { enDict } from './en';
 export { esDict } from './es';
 export { frDict } from './fr';
+export { huDict } from './hu';
 export { itDict } from './it';
 export { jaDict } from './ja';
 export { krDict } from './kr';

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

@@ -206,6 +206,58 @@ export declare const frDict: {
     "Verify Contact": string;
     Verify: string;
 };
+export declare const huDict: {
+    [x: string]: string;
+    Email: string;
+    "Phone Number": string;
+    "Account recovery requires verified contact information": string;
+    "Back to Sign In": string;
+    "Change Password": string;
+    Changing: string;
+    Code: string;
+    "Confirm Password": string;
+    "Confirm Sign Up": string;
+    "Confirm SMS Code": string;
+    "Confirm TOTP Code": string;
+    Confirm: string;
+    "Confirmation Code": string;
+    Confirming: string;
+    "Create a new account": string;
+    "Create Account": string;
+    "Creating Account": string;
+    "Dismiss alert": string;
+    "Enter your code": string;
+    "Enter your Email": string;
+    "Enter your phone number": string;
+    "Enter your username": string;
+    "Forgot your password?": string;
+    "Hide password": string;
+    Loading: string;
+    "New password": string;
+    Password: string;
+    "Resend Code": string;
+    "Reset your password": string;
+    "Reset your Password": string;
+    "Send code": string;
+    "Send Code": string;
+    Sending: string;
+    "Setup TOTP": string;
+    "Show password": string;
+    "Sign in to your account": string;
+    "Sign In with Amazon": string;
+    "Sign In with Apple": string;
+    "Sign In with Facebook": string;
+    "Sign In with Google": string;
+    "Sign in": string;
+    "Sign In": string;
+    "Signing in": string;
+    Skip: string;
+    Submit: string;
+    Submitting: string;
+    Username: string;
+    "Verify Contact": string;
+    Verify: string;
+};
 export declare const itDict: {
     [x: string]: string;
     Email: string;

package/dist/types/theme/components/storageBrowser.d.ts

@@ -22,5 +22,19 @@ export type StorageBrowserTheme<Required extends boolean = false> = ComponentSty
     'table-body'?: ComponentStyles;
     'table-row'?: ComponentStyles;
     'table-data-cell'?: Modifiers<TableCellVariations, Required> & ComponentStyles;
+    'content-with-preview'?: ComponentStyles;
+    'file-preview'?: ComponentStyles;
+    'file-preview-header'?: ComponentStyles;
+    'file-preview-content'?: ComponentStyles;
+    'file-preview-section'?: ComponentStyles;
+    'file-preview-title'?: ComponentStyles;
+    'file-metadata'?: ComponentStyles;
+    'file-metadata-item'?: ComponentStyles;
+    'file-metadata-label'?: ComponentStyles;
+    'file-metadata-value'?: ComponentStyles;
+    'preview-fallback'?: ComponentStyles;
+    'preview-placeholder'?: ComponentStyles;
+    'text-preview'?: ComponentStyles;
+    'video-preview'?: ComponentStyles;
 }, Required>;
 export {};

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

@@ -1,4 +1,4 @@
-export type PackageName = 'angular' | 'react' | 'react-ai' | 'react-auth' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-native-auth' | 'react-notifications' | 'react-storage' | 'vue';
+export type PackageName = 'angular' | 'react' | 'react-ai' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-notifications' | 'react-storage' | 'vue';
 export type ComponentName = 'AIConversation' | 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'FileUploader' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageBrowser' | 'StorageManager' | 'StorageImage';
 export type Version = `${string}.${string}.${string}`;
 export interface SetUserAgentOptions {