@aws-amplify/ui 6.11.0 → 6.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -66,6 +66,9 @@
66
66
  box-shadow: var(--amplify-shadows-small);
67
67
  z-index: 2;
68
68
  }
69
+ .amplify-storage-browser__table-row_active {
70
+ background-color: var(--amplify-colors-background-info);
71
+ }
69
72
  .amplify-storage-browser__table-header {
70
73
  border: none;
71
74
  padding: var(--amplify-space-xxxs);
@@ -147,4 +150,249 @@
147
150
  height: var(--amplify-border-widths-large);
148
151
  top: 0;
149
152
  z-index: 3;
153
+ }
154
+ .amplify-storage-browser__content-with-preview {
155
+ display: flex;
156
+ height: 100%;
157
+ }
158
+ .amplify-storage-browser__file-preview {
159
+ overflow: auto;
160
+ flex: 1;
161
+ width: 50%;
162
+ position: sticky;
163
+ top: 10px;
164
+ bottom: 10px;
165
+ height: -moz-fit-content;
166
+ height: fit-content;
167
+ max-height: calc(100svh - 20px);
168
+ padding: var(--amplify-space-medium);
169
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
170
+ border-radius: var(--amplify-radii-small);
171
+ margin-inline-start: var(--amplify-space-large);
172
+ padding-block-end: var(--amplify-space-large);
173
+ }
174
+ .amplify-storage-browser__file-preview-header {
175
+ margin-block-end: var(--amplify-space-medium);
176
+ display: flex;
177
+ justify-content: flex-end;
178
+ }
179
+ .amplify-storage-browser__file-preview-container {
180
+ display: flex;
181
+ flex-direction: column;
182
+ gap: var(--amplify-space-large);
183
+ }
184
+ .amplify-storage-browser__file-preview-content {
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: var(--amplify-space-large);
188
+ align-items: center;
189
+ }
190
+ .amplify-storage-browser__file-preview-section {
191
+ display: flex;
192
+ flex-direction: column;
193
+ min-height: 400px;
194
+ flex: 1;
195
+ }
196
+ .amplify-storage-browser__file-preview-title {
197
+ margin-block-end: var(--amplify-space-medium);
198
+ color: var(--amplify-colors-font-primary);
199
+ font-size: var(--amplify-font-sizes-large);
200
+ font-weight: var(--amplify-font-weights-semibold);
201
+ flex-shrink: 0;
202
+ }
203
+ .amplify-storage-browser__file-metadata {
204
+ display: grid;
205
+ gap: var(--amplify-space-small);
206
+ background-color: var(--amplify-colors-background-secondary);
207
+ padding: var(--amplify-space-medium);
208
+ border-radius: var(--amplify-radii-small);
209
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
210
+ }
211
+ .amplify-storage-browser__file-metadata-item {
212
+ display: flex;
213
+ justify-content: space-between;
214
+ align-items: center;
215
+ padding-block: var(--amplify-space-xs);
216
+ border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
217
+ }
218
+ .amplify-storage-browser__file-metadata-item:last-child {
219
+ border-block-end: none;
220
+ }
221
+ .amplify-storage-browser__file-metadata-label {
222
+ font-weight: var(--amplify-font-weights-medium);
223
+ color: var(--amplify-colors-font-primary);
224
+ margin: 0;
225
+ }
226
+ .amplify-storage-browser__file-metadata-value {
227
+ color: var(--amplify-colors-font-secondary);
228
+ margin: 0;
229
+ word-break: break-all;
230
+ text-align: end;
231
+ max-width: 60%;
232
+ }
233
+ .amplify-storage-browser__preview-fallback {
234
+ width: 100%;
235
+ height: 400px;
236
+ display: flex;
237
+ flex-direction: column;
238
+ align-items: center;
239
+ justify-content: center;
240
+ gap: var(--amplify-space-medium);
241
+ background-color: var(--amplify-colors-background-secondary);
242
+ border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
243
+ border-radius: var(--amplify-radii-small);
244
+ padding: var(--amplify-space-large);
245
+ text-align: center;
246
+ }
247
+ .amplify-storage-browser__preview-fallback--error {
248
+ color: var(--amplify-colors-font-error);
249
+ background-color: var(--amplify-colors-background-error);
250
+ border-color: var(--amplify-colors-border-error);
251
+ }
252
+ .amplify-storage-browser__preview-fallback--default {
253
+ color: var(--amplify-colors-font-secondary);
254
+ background-color: var(--amplify-colors-background-secondary);
255
+ border-color: var(--amplify-colors-border-secondary);
256
+ }
257
+ .amplify-storage-browser__preview-fallback-icon {
258
+ font-size: var(--amplify-font-sizes-xxxxl);
259
+ margin-block-end: var(--amplify-space-xs);
260
+ }
261
+ .amplify-storage-browser__preview-fallback-title {
262
+ font-weight: var(--amplify-font-weights-bold);
263
+ font-size: var(--amplify-font-sizes-large);
264
+ margin-block-end: var(--amplify-space-xs);
265
+ }
266
+ .amplify-storage-browser__preview-fallback-description {
267
+ font-size: var(--amplify-font-sizes-small);
268
+ margin-block-end: var(--amplify-space-xs);
269
+ }
270
+ .amplify-storage-browser__preview-fallback-filename {
271
+ font-size: var(--amplify-font-sizes-xs);
272
+ font-family: var(--amplify-fonts-monospace), monospace;
273
+ }
274
+ .amplify-storage-browser__preview-fallback-actions {
275
+ display: flex;
276
+ gap: var(--amplify-space-small);
277
+ flex-wrap: wrap;
278
+ justify-content: center;
279
+ }
280
+ .amplify-storage-browser__preview-placeholder {
281
+ display: flex;
282
+ flex-direction: column;
283
+ align-items: center;
284
+ justify-content: center;
285
+ gap: var(--amplify-space-medium);
286
+ height: 400px;
287
+ width: 100%;
288
+ }
289
+ .amplify-storage-browser__preview-placeholder-content {
290
+ display: flex;
291
+ flex-direction: column;
292
+ align-items: center;
293
+ gap: var(--amplify-space-small);
294
+ width: 100%;
295
+ }
296
+ .amplify-storage-browser__preview-placeholder-info {
297
+ color: var(--amplify-colors-font-secondary);
298
+ font-size: var(--amplify-font-sizes-small);
299
+ text-align: center;
300
+ }
301
+ .amplify-storage-browser__text-container {
302
+ display: flex;
303
+ flex-flow: column nowrap;
304
+ gap: 8px;
305
+ align-items: center;
306
+ }
307
+ .amplify-storage-browser__text-preview {
308
+ height: 400px;
309
+ width: 100%;
310
+ display: block;
311
+ background-color: var(--amplify-colors-background-secondary);
312
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
313
+ border-radius: var(--amplify-radii-small);
314
+ padding: var(--amplify-space-medium);
315
+ font-family: var(--amplify-fonts-monospace), monospace;
316
+ font-size: var(--amplify-font-sizes-small);
317
+ line-height: 1.5;
318
+ overflow-y: auto;
319
+ word-wrap: break-word;
320
+ white-space: pre-wrap;
321
+ word-break: break-word;
322
+ }
323
+ .amplify-storage-browser__video-container {
324
+ display: flex;
325
+ flex-flow: column nowrap;
326
+ gap: 8px;
327
+ align-items: center;
328
+ }
329
+ .amplify-storage-browser__video-preview {
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ width: 100%;
334
+ height: 400px;
335
+ border-radius: var(--amplify-radii-small);
336
+ background-color: var(--amplify-colors-background-secondary);
337
+ flex-shrink: 0;
338
+ }
339
+ .amplify-storage-browser__video-preview video {
340
+ max-width: 100%;
341
+ max-height: 100%;
342
+ width: auto;
343
+ height: auto;
344
+ -o-object-fit: contain;
345
+ object-fit: contain;
346
+ }
347
+ .amplify-storage-browser__image-container {
348
+ display: flex;
349
+ flex-flow: column nowrap;
350
+ gap: 8px;
351
+ align-items: center;
352
+ }
353
+ .amplify-storage-browser__image-preview {
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
357
+ height: 400px;
358
+ width: 100%;
359
+ background-color: var(--amplify-colors-background-secondary);
360
+ border-radius: var(--amplify-radii-small);
361
+ flex-shrink: 0;
362
+ flex-flow: column nowrap;
363
+ gap: 8px;
364
+ }
365
+ .amplify-storage-browser__image-preview img {
366
+ max-width: 100%;
367
+ max-height: 100%;
368
+ width: auto;
369
+ height: auto;
370
+ -o-object-fit: contain;
371
+ object-fit: contain;
372
+ border-radius: var(--amplify-radii-small);
373
+ }
374
+ .amplify-storage-browser__download-button {
375
+ display: flex;
376
+ flex-flow: row nowrap;
377
+ gap: 8px;
378
+ }
379
+ .amplify-storage-browser__download-button_icon {
380
+ animation-delay: 0s;
381
+ animation-direction: normal;
382
+ animation-duration: 1s;
383
+ animation-iteration-count: infinite;
384
+ animation-timing-function: linear;
385
+ animation-name: spin;
386
+ }
387
+
388
+ @keyframes spin {
389
+ 0% {
390
+ transform: rotate(0deg);
391
+ }
392
+ 50% {
393
+ transform: rotate(180deg);
394
+ }
395
+ 100% {
396
+ transform: rotate(360deg);
397
+ }
150
398
  }
@@ -67,6 +67,9 @@
67
67
  box-shadow: var(--amplify-shadows-small);
68
68
  z-index: 2;
69
69
  }
70
+ .amplify-storage-browser__table-row_active {
71
+ background-color: var(--amplify-colors-background-info);
72
+ }
70
73
  .amplify-storage-browser__table-header {
71
74
  border: none;
72
75
  padding: var(--amplify-space-xxxs);
@@ -149,4 +152,249 @@
149
152
  top: 0;
150
153
  z-index: 3;
151
154
  }
155
+ .amplify-storage-browser__content-with-preview {
156
+ display: flex;
157
+ height: 100%;
158
+ }
159
+ .amplify-storage-browser__file-preview {
160
+ overflow: auto;
161
+ flex: 1;
162
+ width: 50%;
163
+ position: sticky;
164
+ top: 10px;
165
+ bottom: 10px;
166
+ height: -moz-fit-content;
167
+ height: fit-content;
168
+ max-height: calc(100svh - 20px);
169
+ padding: var(--amplify-space-medium);
170
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
171
+ border-radius: var(--amplify-radii-small);
172
+ margin-inline-start: var(--amplify-space-large);
173
+ padding-block-end: var(--amplify-space-large);
174
+ }
175
+ .amplify-storage-browser__file-preview-header {
176
+ margin-block-end: var(--amplify-space-medium);
177
+ display: flex;
178
+ justify-content: flex-end;
179
+ }
180
+ .amplify-storage-browser__file-preview-container {
181
+ display: flex;
182
+ flex-direction: column;
183
+ gap: var(--amplify-space-large);
184
+ }
185
+ .amplify-storage-browser__file-preview-content {
186
+ display: flex;
187
+ flex-direction: column;
188
+ gap: var(--amplify-space-large);
189
+ align-items: center;
190
+ }
191
+ .amplify-storage-browser__file-preview-section {
192
+ display: flex;
193
+ flex-direction: column;
194
+ min-height: 400px;
195
+ flex: 1;
196
+ }
197
+ .amplify-storage-browser__file-preview-title {
198
+ margin-block-end: var(--amplify-space-medium);
199
+ color: var(--amplify-colors-font-primary);
200
+ font-size: var(--amplify-font-sizes-large);
201
+ font-weight: var(--amplify-font-weights-semibold);
202
+ flex-shrink: 0;
203
+ }
204
+ .amplify-storage-browser__file-metadata {
205
+ display: grid;
206
+ gap: var(--amplify-space-small);
207
+ background-color: var(--amplify-colors-background-secondary);
208
+ padding: var(--amplify-space-medium);
209
+ border-radius: var(--amplify-radii-small);
210
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
211
+ }
212
+ .amplify-storage-browser__file-metadata-item {
213
+ display: flex;
214
+ justify-content: space-between;
215
+ align-items: center;
216
+ padding-block: var(--amplify-space-xs);
217
+ border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
218
+ }
219
+ .amplify-storage-browser__file-metadata-item:last-child {
220
+ border-block-end: none;
221
+ }
222
+ .amplify-storage-browser__file-metadata-label {
223
+ font-weight: var(--amplify-font-weights-medium);
224
+ color: var(--amplify-colors-font-primary);
225
+ margin: 0;
226
+ }
227
+ .amplify-storage-browser__file-metadata-value {
228
+ color: var(--amplify-colors-font-secondary);
229
+ margin: 0;
230
+ word-break: break-all;
231
+ text-align: end;
232
+ max-width: 60%;
233
+ }
234
+ .amplify-storage-browser__preview-fallback {
235
+ width: 100%;
236
+ height: 400px;
237
+ display: flex;
238
+ flex-direction: column;
239
+ align-items: center;
240
+ justify-content: center;
241
+ gap: var(--amplify-space-medium);
242
+ background-color: var(--amplify-colors-background-secondary);
243
+ border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
244
+ border-radius: var(--amplify-radii-small);
245
+ padding: var(--amplify-space-large);
246
+ text-align: center;
247
+ }
248
+ .amplify-storage-browser__preview-fallback--error {
249
+ color: var(--amplify-colors-font-error);
250
+ background-color: var(--amplify-colors-background-error);
251
+ border-color: var(--amplify-colors-border-error);
252
+ }
253
+ .amplify-storage-browser__preview-fallback--default {
254
+ color: var(--amplify-colors-font-secondary);
255
+ background-color: var(--amplify-colors-background-secondary);
256
+ border-color: var(--amplify-colors-border-secondary);
257
+ }
258
+ .amplify-storage-browser__preview-fallback-icon {
259
+ font-size: var(--amplify-font-sizes-xxxxl);
260
+ margin-block-end: var(--amplify-space-xs);
261
+ }
262
+ .amplify-storage-browser__preview-fallback-title {
263
+ font-weight: var(--amplify-font-weights-bold);
264
+ font-size: var(--amplify-font-sizes-large);
265
+ margin-block-end: var(--amplify-space-xs);
266
+ }
267
+ .amplify-storage-browser__preview-fallback-description {
268
+ font-size: var(--amplify-font-sizes-small);
269
+ margin-block-end: var(--amplify-space-xs);
270
+ }
271
+ .amplify-storage-browser__preview-fallback-filename {
272
+ font-size: var(--amplify-font-sizes-xs);
273
+ font-family: var(--amplify-fonts-monospace), monospace;
274
+ }
275
+ .amplify-storage-browser__preview-fallback-actions {
276
+ display: flex;
277
+ gap: var(--amplify-space-small);
278
+ flex-wrap: wrap;
279
+ justify-content: center;
280
+ }
281
+ .amplify-storage-browser__preview-placeholder {
282
+ display: flex;
283
+ flex-direction: column;
284
+ align-items: center;
285
+ justify-content: center;
286
+ gap: var(--amplify-space-medium);
287
+ height: 400px;
288
+ width: 100%;
289
+ }
290
+ .amplify-storage-browser__preview-placeholder-content {
291
+ display: flex;
292
+ flex-direction: column;
293
+ align-items: center;
294
+ gap: var(--amplify-space-small);
295
+ width: 100%;
296
+ }
297
+ .amplify-storage-browser__preview-placeholder-info {
298
+ color: var(--amplify-colors-font-secondary);
299
+ font-size: var(--amplify-font-sizes-small);
300
+ text-align: center;
301
+ }
302
+ .amplify-storage-browser__text-container {
303
+ display: flex;
304
+ flex-flow: column nowrap;
305
+ gap: 8px;
306
+ align-items: center;
307
+ }
308
+ .amplify-storage-browser__text-preview {
309
+ height: 400px;
310
+ width: 100%;
311
+ display: block;
312
+ background-color: var(--amplify-colors-background-secondary);
313
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
314
+ border-radius: var(--amplify-radii-small);
315
+ padding: var(--amplify-space-medium);
316
+ font-family: var(--amplify-fonts-monospace), monospace;
317
+ font-size: var(--amplify-font-sizes-small);
318
+ line-height: 1.5;
319
+ overflow-y: auto;
320
+ word-wrap: break-word;
321
+ white-space: pre-wrap;
322
+ word-break: break-word;
323
+ }
324
+ .amplify-storage-browser__video-container {
325
+ display: flex;
326
+ flex-flow: column nowrap;
327
+ gap: 8px;
328
+ align-items: center;
329
+ }
330
+ .amplify-storage-browser__video-preview {
331
+ display: flex;
332
+ align-items: center;
333
+ justify-content: center;
334
+ width: 100%;
335
+ height: 400px;
336
+ border-radius: var(--amplify-radii-small);
337
+ background-color: var(--amplify-colors-background-secondary);
338
+ flex-shrink: 0;
339
+ }
340
+ .amplify-storage-browser__video-preview video {
341
+ max-width: 100%;
342
+ max-height: 100%;
343
+ width: auto;
344
+ height: auto;
345
+ -o-object-fit: contain;
346
+ object-fit: contain;
347
+ }
348
+ .amplify-storage-browser__image-container {
349
+ display: flex;
350
+ flex-flow: column nowrap;
351
+ gap: 8px;
352
+ align-items: center;
353
+ }
354
+ .amplify-storage-browser__image-preview {
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ height: 400px;
359
+ width: 100%;
360
+ background-color: var(--amplify-colors-background-secondary);
361
+ border-radius: var(--amplify-radii-small);
362
+ flex-shrink: 0;
363
+ flex-flow: column nowrap;
364
+ gap: 8px;
365
+ }
366
+ .amplify-storage-browser__image-preview img {
367
+ max-width: 100%;
368
+ max-height: 100%;
369
+ width: auto;
370
+ height: auto;
371
+ -o-object-fit: contain;
372
+ object-fit: contain;
373
+ border-radius: var(--amplify-radii-small);
374
+ }
375
+ .amplify-storage-browser__download-button {
376
+ display: flex;
377
+ flex-flow: row nowrap;
378
+ gap: 8px;
379
+ }
380
+ .amplify-storage-browser__download-button_icon {
381
+ animation-delay: 0s;
382
+ animation-direction: normal;
383
+ animation-duration: 1s;
384
+ animation-iteration-count: infinite;
385
+ animation-timing-function: linear;
386
+ animation-name: spin;
387
+ }
388
+
389
+ @keyframes spin {
390
+ 0% {
391
+ transform: rotate(0deg);
392
+ }
393
+ 50% {
394
+ transform: rotate(180deg);
395
+ }
396
+ 100% {
397
+ transform: rotate(360deg);
398
+ }
399
+ }
152
400
  }
@@ -83,6 +83,9 @@
83
83
  .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
84
84
  background-color: var(--amplify-components-table-row-striped-background-color);
85
85
  }
86
+ .amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
87
+ background-color: var(--amplify-colors-background-info);
88
+ }
86
89
  .amplify-table__caption {
87
90
  caption-side: var(--amplify-components-table-caption-caption-side);
88
91
  color: var(--amplify-components-table-caption-color);
@@ -84,6 +84,9 @@
84
84
  .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
85
85
  background-color: var(--amplify-components-table-row-striped-background-color);
86
86
  }
87
+ .amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
88
+ background-color: var(--amplify-colors-background-info);
89
+ }
87
90
  .amplify-table__caption {
88
91
  caption-side: var(--amplify-components-table-caption-caption-side);
89
92
  color: var(--amplify-components-table-caption-color);
package/dist/styles.css CHANGED
@@ -5668,6 +5668,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5668
5668
  .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5669
5669
  background-color: var(--amplify-components-table-row-striped-background-color);
5670
5670
  }
5671
+ .amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
5672
+ background-color: var(--amplify-colors-background-info);
5673
+ }
5671
5674
  .amplify-table__caption {
5672
5675
  caption-side: var(--amplify-components-table-caption-caption-side);
5673
5676
  color: var(--amplify-components-table-caption-color);
@@ -6686,6 +6689,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
6686
6689
  box-shadow: var(--amplify-shadows-small);
6687
6690
  z-index: 2;
6688
6691
  }
6692
+ .amplify-storage-browser__table-row_active {
6693
+ background-color: var(--amplify-colors-background-info);
6694
+ }
6689
6695
  .amplify-storage-browser__table-header {
6690
6696
  border: none;
6691
6697
  padding: var(--amplify-space-xxxs);
@@ -6768,7 +6774,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
6768
6774
  top: 0;
6769
6775
  z-index: 3;
6770
6776
  }
6777
+ .amplify-storage-browser__content-with-preview {
6778
+ display: flex;
6779
+ height: 100%;
6780
+ }
6781
+ .amplify-storage-browser__file-preview {
6782
+ overflow: auto;
6783
+ flex: 1;
6784
+ width: 50%;
6785
+ position: sticky;
6786
+ top: 10px;
6787
+ bottom: 10px;
6788
+ height: -moz-fit-content;
6789
+ height: fit-content;
6790
+ max-height: calc(100svh - 20px);
6791
+ padding: var(--amplify-space-medium);
6792
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
6793
+ border-radius: var(--amplify-radii-small);
6794
+ margin-inline-start: var(--amplify-space-large);
6795
+ padding-block-end: var(--amplify-space-large);
6796
+ }
6797
+ .amplify-storage-browser__file-preview-header {
6798
+ margin-block-end: var(--amplify-space-medium);
6799
+ display: flex;
6800
+ justify-content: flex-end;
6801
+ }
6802
+ .amplify-storage-browser__file-preview-container {
6803
+ display: flex;
6804
+ flex-direction: column;
6805
+ gap: var(--amplify-space-large);
6806
+ }
6807
+ .amplify-storage-browser__file-preview-content {
6808
+ display: flex;
6809
+ flex-direction: column;
6810
+ gap: var(--amplify-space-large);
6811
+ align-items: center;
6812
+ }
6813
+ .amplify-storage-browser__file-preview-section {
6814
+ display: flex;
6815
+ flex-direction: column;
6816
+ min-height: 400px;
6817
+ flex: 1;
6818
+ }
6819
+ .amplify-storage-browser__file-preview-title {
6820
+ margin-block-end: var(--amplify-space-medium);
6821
+ color: var(--amplify-colors-font-primary);
6822
+ font-size: var(--amplify-font-sizes-large);
6823
+ font-weight: var(--amplify-font-weights-semibold);
6824
+ flex-shrink: 0;
6825
+ }
6826
+ .amplify-storage-browser__file-metadata {
6827
+ display: grid;
6828
+ gap: var(--amplify-space-small);
6829
+ background-color: var(--amplify-colors-background-secondary);
6830
+ padding: var(--amplify-space-medium);
6831
+ border-radius: var(--amplify-radii-small);
6832
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6833
+ }
6834
+ .amplify-storage-browser__file-metadata-item {
6835
+ display: flex;
6836
+ justify-content: space-between;
6837
+ align-items: center;
6838
+ padding-block: var(--amplify-space-xs);
6839
+ border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6840
+ }
6841
+ .amplify-storage-browser__file-metadata-item:last-child {
6842
+ border-block-end: none;
6843
+ }
6844
+ .amplify-storage-browser__file-metadata-label {
6845
+ font-weight: var(--amplify-font-weights-medium);
6846
+ color: var(--amplify-colors-font-primary);
6847
+ margin: 0;
6848
+ }
6849
+ .amplify-storage-browser__file-metadata-value {
6850
+ color: var(--amplify-colors-font-secondary);
6851
+ margin: 0;
6852
+ word-break: break-all;
6853
+ text-align: end;
6854
+ max-width: 60%;
6855
+ }
6856
+ .amplify-storage-browser__preview-fallback {
6857
+ width: 100%;
6858
+ height: 400px;
6859
+ display: flex;
6860
+ flex-direction: column;
6861
+ align-items: center;
6862
+ justify-content: center;
6863
+ gap: var(--amplify-space-medium);
6864
+ background-color: var(--amplify-colors-background-secondary);
6865
+ border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
6866
+ border-radius: var(--amplify-radii-small);
6867
+ padding: var(--amplify-space-large);
6868
+ text-align: center;
6869
+ }
6870
+ .amplify-storage-browser__preview-fallback--error {
6871
+ color: var(--amplify-colors-font-error);
6872
+ background-color: var(--amplify-colors-background-error);
6873
+ border-color: var(--amplify-colors-border-error);
6874
+ }
6875
+ .amplify-storage-browser__preview-fallback--default {
6876
+ color: var(--amplify-colors-font-secondary);
6877
+ background-color: var(--amplify-colors-background-secondary);
6878
+ border-color: var(--amplify-colors-border-secondary);
6879
+ }
6880
+ .amplify-storage-browser__preview-fallback-icon {
6881
+ font-size: var(--amplify-font-sizes-xxxxl);
6882
+ margin-block-end: var(--amplify-space-xs);
6883
+ }
6884
+ .amplify-storage-browser__preview-fallback-title {
6885
+ font-weight: var(--amplify-font-weights-bold);
6886
+ font-size: var(--amplify-font-sizes-large);
6887
+ margin-block-end: var(--amplify-space-xs);
6888
+ }
6889
+ .amplify-storage-browser__preview-fallback-description {
6890
+ font-size: var(--amplify-font-sizes-small);
6891
+ margin-block-end: var(--amplify-space-xs);
6892
+ }
6893
+ .amplify-storage-browser__preview-fallback-filename {
6894
+ font-size: var(--amplify-font-sizes-xs);
6895
+ font-family: var(--amplify-fonts-monospace), monospace;
6896
+ }
6897
+ .amplify-storage-browser__preview-fallback-actions {
6898
+ display: flex;
6899
+ gap: var(--amplify-space-small);
6900
+ flex-wrap: wrap;
6901
+ justify-content: center;
6902
+ }
6903
+ .amplify-storage-browser__preview-placeholder {
6904
+ display: flex;
6905
+ flex-direction: column;
6906
+ align-items: center;
6907
+ justify-content: center;
6908
+ gap: var(--amplify-space-medium);
6909
+ height: 400px;
6910
+ width: 100%;
6911
+ }
6912
+ .amplify-storage-browser__preview-placeholder-content {
6913
+ display: flex;
6914
+ flex-direction: column;
6915
+ align-items: center;
6916
+ gap: var(--amplify-space-small);
6917
+ width: 100%;
6918
+ }
6919
+ .amplify-storage-browser__preview-placeholder-info {
6920
+ color: var(--amplify-colors-font-secondary);
6921
+ font-size: var(--amplify-font-sizes-small);
6922
+ text-align: center;
6923
+ }
6924
+ .amplify-storage-browser__text-container {
6925
+ display: flex;
6926
+ flex-flow: column nowrap;
6927
+ gap: 8px;
6928
+ align-items: center;
6929
+ }
6930
+ .amplify-storage-browser__text-preview {
6931
+ height: 400px;
6932
+ width: 100%;
6933
+ display: block;
6934
+ background-color: var(--amplify-colors-background-secondary);
6935
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6936
+ border-radius: var(--amplify-radii-small);
6937
+ padding: var(--amplify-space-medium);
6938
+ font-family: var(--amplify-fonts-monospace), monospace;
6939
+ font-size: var(--amplify-font-sizes-small);
6940
+ line-height: 1.5;
6941
+ overflow-y: auto;
6942
+ word-wrap: break-word;
6943
+ white-space: pre-wrap;
6944
+ word-break: break-word;
6945
+ }
6946
+ .amplify-storage-browser__video-container {
6947
+ display: flex;
6948
+ flex-flow: column nowrap;
6949
+ gap: 8px;
6950
+ align-items: center;
6951
+ }
6952
+ .amplify-storage-browser__video-preview {
6953
+ display: flex;
6954
+ align-items: center;
6955
+ justify-content: center;
6956
+ width: 100%;
6957
+ height: 400px;
6958
+ border-radius: var(--amplify-radii-small);
6959
+ background-color: var(--amplify-colors-background-secondary);
6960
+ flex-shrink: 0;
6961
+ }
6962
+ .amplify-storage-browser__video-preview video {
6963
+ max-width: 100%;
6964
+ max-height: 100%;
6965
+ width: auto;
6966
+ height: auto;
6967
+ -o-object-fit: contain;
6968
+ object-fit: contain;
6969
+ }
6970
+ .amplify-storage-browser__image-container {
6971
+ display: flex;
6972
+ flex-flow: column nowrap;
6973
+ gap: 8px;
6974
+ align-items: center;
6975
+ }
6976
+ .amplify-storage-browser__image-preview {
6977
+ display: flex;
6978
+ align-items: center;
6979
+ justify-content: center;
6980
+ height: 400px;
6981
+ width: 100%;
6982
+ background-color: var(--amplify-colors-background-secondary);
6983
+ border-radius: var(--amplify-radii-small);
6984
+ flex-shrink: 0;
6985
+ flex-flow: column nowrap;
6986
+ gap: 8px;
6987
+ }
6988
+ .amplify-storage-browser__image-preview img {
6989
+ max-width: 100%;
6990
+ max-height: 100%;
6991
+ width: auto;
6992
+ height: auto;
6993
+ -o-object-fit: contain;
6994
+ object-fit: contain;
6995
+ border-radius: var(--amplify-radii-small);
6996
+ }
6997
+ .amplify-storage-browser__download-button {
6998
+ display: flex;
6999
+ flex-flow: row nowrap;
7000
+ gap: 8px;
7001
+ }
7002
+ .amplify-storage-browser__download-button_icon {
7003
+ animation-delay: 0s;
7004
+ animation-direction: normal;
7005
+ animation-duration: 1s;
7006
+ animation-iteration-count: infinite;
7007
+ animation-timing-function: linear;
7008
+ animation-name: spin;
7009
+ }
6771
7010
 
7011
+ @keyframes spin {
7012
+ 0% {
7013
+ transform: rotate(0deg);
7014
+ }
7015
+ 50% {
7016
+ transform: rotate(180deg);
7017
+ }
7018
+ 100% {
7019
+ transform: rotate(360deg);
7020
+ }
7021
+ }
6772
7022
  .amplify-ai-conversation {
6773
7023
  display: flex;
6774
7024
  flex-direction: column;
@@ -5669,6 +5669,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5669
5669
  .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5670
5670
  background-color: var(--amplify-components-table-row-striped-background-color);
5671
5671
  }
5672
+ .amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
5673
+ background-color: var(--amplify-colors-background-info);
5674
+ }
5672
5675
  .amplify-table__caption {
5673
5676
  caption-side: var(--amplify-components-table-caption-caption-side);
5674
5677
  color: var(--amplify-components-table-caption-color);
@@ -6687,6 +6690,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
6687
6690
  box-shadow: var(--amplify-shadows-small);
6688
6691
  z-index: 2;
6689
6692
  }
6693
+ .amplify-storage-browser__table-row_active {
6694
+ background-color: var(--amplify-colors-background-info);
6695
+ }
6690
6696
  .amplify-storage-browser__table-header {
6691
6697
  border: none;
6692
6698
  padding: var(--amplify-space-xxxs);
@@ -6769,7 +6775,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
6769
6775
  top: 0;
6770
6776
  z-index: 3;
6771
6777
  }
6778
+ .amplify-storage-browser__content-with-preview {
6779
+ display: flex;
6780
+ height: 100%;
6781
+ }
6782
+ .amplify-storage-browser__file-preview {
6783
+ overflow: auto;
6784
+ flex: 1;
6785
+ width: 50%;
6786
+ position: sticky;
6787
+ top: 10px;
6788
+ bottom: 10px;
6789
+ height: -moz-fit-content;
6790
+ height: fit-content;
6791
+ max-height: calc(100svh - 20px);
6792
+ padding: var(--amplify-space-medium);
6793
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
6794
+ border-radius: var(--amplify-radii-small);
6795
+ margin-inline-start: var(--amplify-space-large);
6796
+ padding-block-end: var(--amplify-space-large);
6797
+ }
6798
+ .amplify-storage-browser__file-preview-header {
6799
+ margin-block-end: var(--amplify-space-medium);
6800
+ display: flex;
6801
+ justify-content: flex-end;
6802
+ }
6803
+ .amplify-storage-browser__file-preview-container {
6804
+ display: flex;
6805
+ flex-direction: column;
6806
+ gap: var(--amplify-space-large);
6807
+ }
6808
+ .amplify-storage-browser__file-preview-content {
6809
+ display: flex;
6810
+ flex-direction: column;
6811
+ gap: var(--amplify-space-large);
6812
+ align-items: center;
6813
+ }
6814
+ .amplify-storage-browser__file-preview-section {
6815
+ display: flex;
6816
+ flex-direction: column;
6817
+ min-height: 400px;
6818
+ flex: 1;
6819
+ }
6820
+ .amplify-storage-browser__file-preview-title {
6821
+ margin-block-end: var(--amplify-space-medium);
6822
+ color: var(--amplify-colors-font-primary);
6823
+ font-size: var(--amplify-font-sizes-large);
6824
+ font-weight: var(--amplify-font-weights-semibold);
6825
+ flex-shrink: 0;
6826
+ }
6827
+ .amplify-storage-browser__file-metadata {
6828
+ display: grid;
6829
+ gap: var(--amplify-space-small);
6830
+ background-color: var(--amplify-colors-background-secondary);
6831
+ padding: var(--amplify-space-medium);
6832
+ border-radius: var(--amplify-radii-small);
6833
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6834
+ }
6835
+ .amplify-storage-browser__file-metadata-item {
6836
+ display: flex;
6837
+ justify-content: space-between;
6838
+ align-items: center;
6839
+ padding-block: var(--amplify-space-xs);
6840
+ border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6841
+ }
6842
+ .amplify-storage-browser__file-metadata-item:last-child {
6843
+ border-block-end: none;
6844
+ }
6845
+ .amplify-storage-browser__file-metadata-label {
6846
+ font-weight: var(--amplify-font-weights-medium);
6847
+ color: var(--amplify-colors-font-primary);
6848
+ margin: 0;
6849
+ }
6850
+ .amplify-storage-browser__file-metadata-value {
6851
+ color: var(--amplify-colors-font-secondary);
6852
+ margin: 0;
6853
+ word-break: break-all;
6854
+ text-align: end;
6855
+ max-width: 60%;
6856
+ }
6857
+ .amplify-storage-browser__preview-fallback {
6858
+ width: 100%;
6859
+ height: 400px;
6860
+ display: flex;
6861
+ flex-direction: column;
6862
+ align-items: center;
6863
+ justify-content: center;
6864
+ gap: var(--amplify-space-medium);
6865
+ background-color: var(--amplify-colors-background-secondary);
6866
+ border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
6867
+ border-radius: var(--amplify-radii-small);
6868
+ padding: var(--amplify-space-large);
6869
+ text-align: center;
6870
+ }
6871
+ .amplify-storage-browser__preview-fallback--error {
6872
+ color: var(--amplify-colors-font-error);
6873
+ background-color: var(--amplify-colors-background-error);
6874
+ border-color: var(--amplify-colors-border-error);
6875
+ }
6876
+ .amplify-storage-browser__preview-fallback--default {
6877
+ color: var(--amplify-colors-font-secondary);
6878
+ background-color: var(--amplify-colors-background-secondary);
6879
+ border-color: var(--amplify-colors-border-secondary);
6880
+ }
6881
+ .amplify-storage-browser__preview-fallback-icon {
6882
+ font-size: var(--amplify-font-sizes-xxxxl);
6883
+ margin-block-end: var(--amplify-space-xs);
6884
+ }
6885
+ .amplify-storage-browser__preview-fallback-title {
6886
+ font-weight: var(--amplify-font-weights-bold);
6887
+ font-size: var(--amplify-font-sizes-large);
6888
+ margin-block-end: var(--amplify-space-xs);
6889
+ }
6890
+ .amplify-storage-browser__preview-fallback-description {
6891
+ font-size: var(--amplify-font-sizes-small);
6892
+ margin-block-end: var(--amplify-space-xs);
6893
+ }
6894
+ .amplify-storage-browser__preview-fallback-filename {
6895
+ font-size: var(--amplify-font-sizes-xs);
6896
+ font-family: var(--amplify-fonts-monospace), monospace;
6897
+ }
6898
+ .amplify-storage-browser__preview-fallback-actions {
6899
+ display: flex;
6900
+ gap: var(--amplify-space-small);
6901
+ flex-wrap: wrap;
6902
+ justify-content: center;
6903
+ }
6904
+ .amplify-storage-browser__preview-placeholder {
6905
+ display: flex;
6906
+ flex-direction: column;
6907
+ align-items: center;
6908
+ justify-content: center;
6909
+ gap: var(--amplify-space-medium);
6910
+ height: 400px;
6911
+ width: 100%;
6912
+ }
6913
+ .amplify-storage-browser__preview-placeholder-content {
6914
+ display: flex;
6915
+ flex-direction: column;
6916
+ align-items: center;
6917
+ gap: var(--amplify-space-small);
6918
+ width: 100%;
6919
+ }
6920
+ .amplify-storage-browser__preview-placeholder-info {
6921
+ color: var(--amplify-colors-font-secondary);
6922
+ font-size: var(--amplify-font-sizes-small);
6923
+ text-align: center;
6924
+ }
6925
+ .amplify-storage-browser__text-container {
6926
+ display: flex;
6927
+ flex-flow: column nowrap;
6928
+ gap: 8px;
6929
+ align-items: center;
6930
+ }
6931
+ .amplify-storage-browser__text-preview {
6932
+ height: 400px;
6933
+ width: 100%;
6934
+ display: block;
6935
+ background-color: var(--amplify-colors-background-secondary);
6936
+ border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
6937
+ border-radius: var(--amplify-radii-small);
6938
+ padding: var(--amplify-space-medium);
6939
+ font-family: var(--amplify-fonts-monospace), monospace;
6940
+ font-size: var(--amplify-font-sizes-small);
6941
+ line-height: 1.5;
6942
+ overflow-y: auto;
6943
+ word-wrap: break-word;
6944
+ white-space: pre-wrap;
6945
+ word-break: break-word;
6946
+ }
6947
+ .amplify-storage-browser__video-container {
6948
+ display: flex;
6949
+ flex-flow: column nowrap;
6950
+ gap: 8px;
6951
+ align-items: center;
6952
+ }
6953
+ .amplify-storage-browser__video-preview {
6954
+ display: flex;
6955
+ align-items: center;
6956
+ justify-content: center;
6957
+ width: 100%;
6958
+ height: 400px;
6959
+ border-radius: var(--amplify-radii-small);
6960
+ background-color: var(--amplify-colors-background-secondary);
6961
+ flex-shrink: 0;
6962
+ }
6963
+ .amplify-storage-browser__video-preview video {
6964
+ max-width: 100%;
6965
+ max-height: 100%;
6966
+ width: auto;
6967
+ height: auto;
6968
+ -o-object-fit: contain;
6969
+ object-fit: contain;
6970
+ }
6971
+ .amplify-storage-browser__image-container {
6972
+ display: flex;
6973
+ flex-flow: column nowrap;
6974
+ gap: 8px;
6975
+ align-items: center;
6976
+ }
6977
+ .amplify-storage-browser__image-preview {
6978
+ display: flex;
6979
+ align-items: center;
6980
+ justify-content: center;
6981
+ height: 400px;
6982
+ width: 100%;
6983
+ background-color: var(--amplify-colors-background-secondary);
6984
+ border-radius: var(--amplify-radii-small);
6985
+ flex-shrink: 0;
6986
+ flex-flow: column nowrap;
6987
+ gap: 8px;
6988
+ }
6989
+ .amplify-storage-browser__image-preview img {
6990
+ max-width: 100%;
6991
+ max-height: 100%;
6992
+ width: auto;
6993
+ height: auto;
6994
+ -o-object-fit: contain;
6995
+ object-fit: contain;
6996
+ border-radius: var(--amplify-radii-small);
6997
+ }
6998
+ .amplify-storage-browser__download-button {
6999
+ display: flex;
7000
+ flex-flow: row nowrap;
7001
+ gap: 8px;
7002
+ }
7003
+ .amplify-storage-browser__download-button_icon {
7004
+ animation-delay: 0s;
7005
+ animation-direction: normal;
7006
+ animation-duration: 1s;
7007
+ animation-iteration-count: infinite;
7008
+ animation-timing-function: linear;
7009
+ animation-name: spin;
7010
+ }
6772
7011
 
7012
+ @keyframes spin {
7013
+ 0% {
7014
+ transform: rotate(0deg);
7015
+ }
7016
+ 50% {
7017
+ transform: rotate(180deg);
7018
+ }
7019
+ 100% {
7020
+ transform: rotate(360deg);
7021
+ }
7022
+ }
6773
7023
  .amplify-ai-conversation {
6774
7024
  display: flex;
6775
7025
  flex-direction: column;
@@ -22,5 +22,19 @@ export type StorageBrowserTheme<Required extends boolean = false> = ComponentSty
22
22
  'table-body'?: ComponentStyles;
23
23
  'table-row'?: ComponentStyles;
24
24
  'table-data-cell'?: Modifiers<TableCellVariations, Required> & ComponentStyles;
25
+ 'content-with-preview'?: ComponentStyles;
26
+ 'file-preview'?: ComponentStyles;
27
+ 'file-preview-header'?: ComponentStyles;
28
+ 'file-preview-content'?: ComponentStyles;
29
+ 'file-preview-section'?: ComponentStyles;
30
+ 'file-preview-title'?: ComponentStyles;
31
+ 'file-metadata'?: ComponentStyles;
32
+ 'file-metadata-item'?: ComponentStyles;
33
+ 'file-metadata-label'?: ComponentStyles;
34
+ 'file-metadata-value'?: ComponentStyles;
35
+ 'preview-fallback'?: ComponentStyles;
36
+ 'preview-placeholder'?: ComponentStyles;
37
+ 'text-preview'?: ComponentStyles;
38
+ 'video-preview'?: ComponentStyles;
25
39
  }, Required>;
26
40
  export {};
@@ -1,4 +1,4 @@
1
- export type PackageName = 'angular' | 'react' | 'react-ai' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-notifications' | 'react-storage' | 'vue';
1
+ export type PackageName = 'angular' | 'react' | 'react-ai' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-notifications' | 'react-storage' | 'svelte' | 'vue';
2
2
  export type ComponentName = 'AIConversation' | 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'FileUploader' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageBrowser' | 'StorageManager' | 'StorageImage';
3
3
  export type Version = `${string}.${string}.${string}`;
4
4
  export interface SetUserAgentOptions {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.11.0",
3
+ "version": "6.12.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -70,4 +70,4 @@
70
70
  "sideEffects": [
71
71
  "dist/**/*.css"
72
72
  ]
73
- }
73
+ }