@aws-amplify/ui-react 6.12.0 → 6.13.0

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.
@@ -63,6 +63,24 @@ const STORAGE_BROWSER_ICON_PATHS = {
63
63
  'vertical-kebab': 'M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z',
64
64
  // "Warning" icon
65
65
  warning: 'm40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z',
66
+ // File with image/picture icon
67
+ 'file-image': 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
68
+ // File with video/play icon
69
+ 'file-video': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM380-280l200-120-200-120v240Zm-140 40v-640 640Z',
70
+ // File with audio/music note icon
71
+ 'file-audio': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM420-200q33 0 56.5-23.5T500-280v-160l80-40v-80l-120 60v180q-13-9-28.5-14.5T400-340q-33 0-56.5 23.5T320-260q0 33 23.5 56.5T400-180h20Zm-180 40v-640 640Z',
72
+ // File with text lines
73
+ 'file-text': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-240h320v-80H320v80Zm0-120h320v-80H320v80Zm0-120h200v-80H320v80Zm-80 240v-640 640Z',
74
+ // File with PDF text
75
+ 'file-pdf': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-60h40q17 0 28.5-11.5T460-380v-60q0-17-11.5-28.5T420-480h-100v200Zm60-120v-40h40v40h-40Zm80 120h80q17 0 28.5-11.5T580-320v-120q0-17-11.5-28.5T540-480h-80v200Zm60-60v-80h20v80h-20Zm80 60h60v-60h40v-40h-40v-40h40v-60h-100v200Zm-360 40v-640 640Z',
76
+ // File with Excel grid
77
+ 'file-excel': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm-320 200v-640 640Z',
78
+ // File with Word document icon
79
+ 'file-word': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM340-280h40l20-80h80l20 80h40l-70-200h-60l-70 200Zm70-120l26-84h4l26 84h-56Zm-170 160v-640 640Z',
80
+ // File with PowerPoint presentation icon
81
+ 'file-powerpoint': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-40h60q17 0 28.5-11.5T480-360v-80q0-17-11.5-28.5T440-480h-120v200Zm60-100v-60h60v60h-60Zm-140 140v-640 640Z',
82
+ // File with archive/zip icon
83
+ 'file-archive': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM400-240q33 0 56.5-23.5T480-320q0-33-23.5-56.5T400-400q-33 0-56.5 23.5T320-320q0 33 23.5 56.5T400-240Zm-40-200h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-20-40h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-140 360v-640 640Z',
66
84
  };
67
85
 
68
86
  export { STORAGE_BROWSER_ICON_PATHS };
@@ -1,3 +1,3 @@
1
- const VERSION = '6.12.0';
1
+ const VERSION = '6.13.0';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -2472,7 +2472,7 @@ const defaultDeleteUserDisplayText = {
2472
2472
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2473
2473
  };
2474
2474
 
2475
- const VERSION = '6.12.0';
2475
+ const VERSION = '6.13.0';
2476
2476
 
2477
2477
  const logger$2 = ui.getLogger('AccountSettings');
2478
2478
  const getIsDisabled = (formValues, validationError) => {
package/dist/internal.js CHANGED
@@ -229,6 +229,24 @@ const STORAGE_BROWSER_ICON_PATHS = {
229
229
  'vertical-kebab': 'M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z',
230
230
  // "Warning" icon
231
231
  warning: 'm40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z',
232
+ // File with image/picture icon
233
+ 'file-image': 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
234
+ // File with video/play icon
235
+ 'file-video': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM380-280l200-120-200-120v240Zm-140 40v-640 640Z',
236
+ // File with audio/music note icon
237
+ 'file-audio': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM420-200q33 0 56.5-23.5T500-280v-160l80-40v-80l-120 60v180q-13-9-28.5-14.5T400-340q-33 0-56.5 23.5T320-260q0 33 23.5 56.5T400-180h20Zm-180 40v-640 640Z',
238
+ // File with text lines
239
+ 'file-text': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-240h320v-80H320v80Zm0-120h320v-80H320v80Zm0-120h200v-80H320v80Zm-80 240v-640 640Z',
240
+ // File with PDF text
241
+ 'file-pdf': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-60h40q17 0 28.5-11.5T460-380v-60q0-17-11.5-28.5T420-480h-100v200Zm60-120v-40h40v40h-40Zm80 120h80q17 0 28.5-11.5T580-320v-120q0-17-11.5-28.5T540-480h-80v200Zm60-60v-80h20v80h-20Zm80 60h60v-60h40v-40h-40v-40h40v-60h-100v200Zm-360 40v-640 640Z',
242
+ // File with Excel grid
243
+ 'file-excel': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm-320 200v-640 640Z',
244
+ // File with Word document icon
245
+ 'file-word': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM340-280h40l20-80h80l20 80h40l-70-200h-60l-70 200Zm70-120l26-84h4l26 84h-56Zm-170 160v-640 640Z',
246
+ // File with PowerPoint presentation icon
247
+ 'file-powerpoint': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-40h60q17 0 28.5-11.5T480-360v-80q0-17-11.5-28.5T440-480h-120v200Zm60-100v-60h60v60h-60Zm-140 140v-640 640Z',
248
+ // File with archive/zip icon
249
+ 'file-archive': 'M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM400-240q33 0 56.5-23.5T480-320q0-33-23.5-56.5T400-400q-33 0-56.5 23.5T320-320q0 33 23.5 56.5T400-240Zm-40-200h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-20-40h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-140 360v-640 640Z',
232
250
  };
233
251
 
234
252
  const PrimitiveCatalog = {
@@ -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;
@@ -1,4 +1,4 @@
1
- export type StorageBrowserIconType = 'action-queued' | 'action-progress' | 'action-canceled' | 'action-success' | 'action-error' | 'action-initial' | 'action-info' | 'cancel' | 'create-folder' | 'copy-file' | 'delete-file' | 'dismiss' | 'download' | 'error' | 'exit' | 'info' | 'file' | 'folder' | 'loading' | 'menu' | `paginate-${'next' | 'previous'}` | 'refresh' | 'search' | 'sort-ascending' | 'sort-descending' | 'sort-indeterminate' | 'success' | 'upload-file' | 'upload-folder' | 'vertical-kebab' | 'warning';
1
+ export type StorageBrowserIconType = 'action-queued' | 'action-progress' | 'action-canceled' | 'action-success' | 'action-error' | 'action-initial' | 'action-info' | 'cancel' | 'create-folder' | 'copy-file' | 'delete-file' | 'dismiss' | 'download' | 'error' | 'exit' | 'info' | 'file' | 'folder' | 'loading' | 'menu' | `paginate-${'next' | 'previous'}` | 'refresh' | 'search' | 'sort-ascending' | 'sort-descending' | 'sort-indeterminate' | 'success' | 'upload-file' | 'upload-folder' | 'vertical-kebab' | 'warning' | 'file-image' | 'file-video' | 'file-audio' | 'file-text' | 'file-pdf' | 'file-excel' | 'file-word' | 'file-powerpoint' | 'file-archive';
2
2
  export declare const STORAGE_BROWSER_ICON_PATHS: {
3
3
  readonly 'action-canceled': "M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z";
4
4
  readonly 'action-error': "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z";
@@ -32,4 +32,13 @@ export declare const STORAGE_BROWSER_ICON_PATHS: {
32
32
  readonly 'upload-folder': "M440-280h80v-168l64 64 56-56-160-160-160 160 56 56 64-64v168ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z";
33
33
  readonly 'vertical-kebab': "M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z";
34
34
  readonly warning: "m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z";
35
+ readonly 'file-image': "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z";
36
+ readonly 'file-video': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM380-280l200-120-200-120v240Zm-140 40v-640 640Z";
37
+ readonly 'file-audio': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM420-200q33 0 56.5-23.5T500-280v-160l80-40v-80l-120 60v180q-13-9-28.5-14.5T400-340q-33 0-56.5 23.5T320-260q0 33 23.5 56.5T400-180h20Zm-180 40v-640 640Z";
38
+ readonly 'file-text': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-240h320v-80H320v80Zm0-120h320v-80H320v80Zm0-120h200v-80H320v80Zm-80 240v-640 640Z";
39
+ readonly 'file-pdf': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-60h40q17 0 28.5-11.5T460-380v-60q0-17-11.5-28.5T420-480h-100v200Zm60-120v-40h40v40h-40Zm80 120h80q17 0 28.5-11.5T580-320v-120q0-17-11.5-28.5T540-480h-80v200Zm60-60v-80h20v80h-20Zm80 60h60v-60h40v-40h-40v-40h40v-60h-100v200Zm-360 40v-640 640Z";
40
+ readonly 'file-excel': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm120 160h80v-40h-80v40Zm0-80h80v-40h-80v40Zm0-80h80v-40h-80v40Zm-320 200v-640 640Z";
41
+ readonly 'file-word': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM340-280h40l20-80h80l20 80h40l-70-200h-60l-70 200Zm70-120l26-84h4l26 84h-56Zm-170 160v-640 640Z";
42
+ readonly 'file-powerpoint': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM320-280h60v-40h60q17 0 28.5-11.5T480-360v-80q0-17-11.5-28.5T440-480h-120v200Zm60-100v-60h60v60h-60Zm-140 140v-640 640Z";
43
+ readonly 'file-archive': "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM400-240q33 0 56.5-23.5T480-320q0-33-23.5-56.5T400-400q-33 0-56.5 23.5T320-320q0 33 23.5 56.5T400-240Zm-40-200h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-20-40h20v-20h-20v20Zm20-40h20v-20h-20v20Zm-140 360v-640 640Z";
35
44
  };
@@ -1 +1 @@
1
- export declare const VERSION = "6.12.0";
1
+ export declare const VERSION = "6.13.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.12.0",
3
+ "version": "6.13.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -56,8 +56,8 @@
56
56
  "typecheck": "tsc --noEmit"
57
57
  },
58
58
  "dependencies": {
59
- "@aws-amplify/ui": "6.10.3",
60
- "@aws-amplify/ui-react-core": "3.4.3",
59
+ "@aws-amplify/ui": "6.12.0",
60
+ "@aws-amplify/ui-react-core": "3.4.5",
61
61
  "@radix-ui/react-direction": "^1.1.0",
62
62
  "@radix-ui/react-dropdown-menu": "^2.1.10",
63
63
  "@radix-ui/react-slider": "^1.3.2",