@aws-amplify/ui 6.2.0 → 6.4.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.
Files changed (24) hide show
  1. package/dist/esm/theme/tokens/components/avatar.mjs +49 -0
  2. package/dist/esm/theme/tokens/components/index.mjs +2 -0
  3. package/dist/esm/types/primitives/componentClassName.mjs +44 -0
  4. package/dist/esm/utils/setUserAgent/constants.mjs +6 -2
  5. package/dist/esm/utils/setUserAgent/setUserAgent.mjs +8 -1
  6. package/dist/index.js +104 -0
  7. package/dist/styles/AIConversation.css +108 -0
  8. package/dist/styles/AIConversation.layer.css +110 -0
  9. package/dist/styles/avatar.css +111 -0
  10. package/dist/styles/avatar.layer.css +113 -0
  11. package/dist/styles/base.css +29 -0
  12. package/dist/styles/base.layer.css +29 -0
  13. package/dist/styles.css +250 -0
  14. package/dist/styles.layer.css +250 -0
  15. package/dist/theme.css +29 -0
  16. package/dist/types/theme/components/avatar.d.ts +5 -0
  17. package/dist/types/theme/components/fileUploader.d.ts +20 -0
  18. package/dist/types/theme/components/index.d.ts +3 -1
  19. package/dist/types/theme/tokens/components/avatar.d.ts +14 -0
  20. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  21. package/dist/types/types/primitives/componentClassName.d.ts +44 -0
  22. package/dist/types/utils/setUserAgent/constants.d.ts +1 -0
  23. package/dist/types/utils/setUserAgent/setUserAgent.d.ts +1 -1
  24. package/package.json +1 -1
package/dist/styles/avatar.layer.css ADDED
@@ -0,0 +1,113 @@
1
+ @layer amplify.components {
2
+ .amplify-avatar {
3
+ --avatar-color: var(--amplify-components-avatar-color);
4
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
5
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
6
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
7
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
8
+ --avatar-size: var(--amplify-components-avatar-width);
9
+ --amplify-components-icon-height: 100%;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ color: var(--avatar-color);
14
+ background-color: var(--avatar-background-color);
15
+ font-weight: var(--amplify-components-avatar-font-weight);
16
+ font-size: var(--amplify-components-avatar-font-size);
17
+ width: var(--amplify-components-avatar-width);
18
+ height: var(--amplify-components-avatar-height);
19
+ overflow: hidden;
20
+ border-radius: var(--amplify-components-avatar-border-radius);
21
+ }
22
+ .amplify-avatar--filled {
23
+ background-color: var(--avatar-filled-background-color);
24
+ color: var(--avatar-filled-color);
25
+ }
26
+ .amplify-avatar--outlined {
27
+ border-width: var(--amplify-components-avatar-border-width);
28
+ border-style: solid;
29
+ padding: var(--amplify-components-avatar-border-width);
30
+ border-color: var(--avatar-border-color);
31
+ background-color: transparent;
32
+ color: var(--avatar-color);
33
+ }
34
+ .amplify-avatar--small {
35
+ --avatar-size: var(--amplify-components-avatar-small-width);
36
+ width: var(--amplify-components-avatar-small-width);
37
+ height: var(--amplify-components-avatar-small-height);
38
+ font-size: var(--amplify-components-avatar-small-font-size);
39
+ }
40
+ .amplify-avatar--large {
41
+ --avatar-size: var(--amplify-components-avatar-large-width);
42
+ width: var(--amplify-components-avatar-large-width);
43
+ height: var(--amplify-components-avatar-large-height);
44
+ font-size: var(--amplify-components-avatar-large-font-size);
45
+ }
46
+ .amplify-avatar--warning {
47
+ --avatar-border-color: var(
48
+ --amplify-components-avatar-warning-border-color
49
+ );
50
+ --avatar-background-color: var(
51
+ --amplify-components-avatar-warning-background-color
52
+ );
53
+ --avatar-color: var(--amplify-components-avatar-warning-color);
54
+ --avatar-filled-background-color: var(
55
+ --amplify-components-avatar-warning-color
56
+ );
57
+ --avatar-filled-color: var(
58
+ --amplify-components-avatar-warning-background-color
59
+ );
60
+ }
61
+ .amplify-avatar--error {
62
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
63
+ --avatar-background-color: var(
64
+ --amplify-components-avatar-error-background-color
65
+ );
66
+ --avatar-color: var(--amplify-components-avatar-error-color);
67
+ --avatar-filled-background-color: var(
68
+ --amplify-components-avatar-error-color
69
+ );
70
+ --avatar-filled-color: var(
71
+ --amplify-components-avatar-error-background-color
72
+ );
73
+ }
74
+ .amplify-avatar--info {
75
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
76
+ --avatar-background-color: var(
77
+ --amplify-components-avatar-info-background-color
78
+ );
79
+ --avatar-color: var(--amplify-components-avatar-info-color);
80
+ --avatar-filled-background-color: var(
81
+ --amplify-components-avatar-info-color
82
+ );
83
+ --avatar-filled-color: var(
84
+ --amplify-components-avatar-info-background-color
85
+ );
86
+ }
87
+ .amplify-avatar--success {
88
+ --avatar-border-color: var(
89
+ --amplify-components-avatar-success-border-color
90
+ );
91
+ --avatar-background-color: var(
92
+ --amplify-components-avatar-success-background-color
93
+ );
94
+ --avatar-color: var(--amplify-components-avatar-success-color);
95
+ --avatar-filled-background-color: var(
96
+ --amplify-components-avatar-success-color
97
+ );
98
+ --avatar-filled-color: var(
99
+ --amplify-components-avatar-success-background-color
100
+ );
101
+ }
102
+ .amplify-avatar__icon {
103
+ display: flex;
104
+ font-size: calc(var(--avatar-size) * 0.6);
105
+ }
106
+ .amplify-avatar__image {
107
+ width: 100%;
108
+ height: 100%;
109
+ -o-object-fit: cover;
110
+ object-fit: cover;
111
+ display: block;
112
+ }
113
+ }
package/dist/styles/base.css CHANGED
@@ -83,6 +83,35 @@
83
83
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
84
84
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
86
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-avatar-line-height: 1;
88
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
89
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
90
+ --amplify-components-avatar-text-align: center;
91
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
92
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
94
+ --amplify-components-avatar-border-radius: 100%;
95
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
96
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
97
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
98
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
99
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
100
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
101
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
102
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
103
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
104
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
105
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
106
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
107
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
108
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
109
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
110
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
111
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
113
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
114
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
86
115
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
87
116
  --amplify-components-badge-line-height: 1;
88
117
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
package/dist/styles/base.layer.css CHANGED
@@ -84,6 +84,35 @@
84
84
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
86
86
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
87
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
88
+ --amplify-components-avatar-line-height: 1;
89
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
90
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
91
+ --amplify-components-avatar-text-align: center;
92
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
94
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
95
+ --amplify-components-avatar-border-radius: 100%;
96
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
97
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
98
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
99
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
100
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
101
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
102
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
103
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
104
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
105
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
106
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
107
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
108
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
109
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
110
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
111
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
113
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
114
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
115
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
87
116
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
88
117
  --amplify-components-badge-line-height: 1;
89
118
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
package/dist/styles.css CHANGED
@@ -83,6 +83,35 @@
83
83
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
84
84
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
86
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-avatar-line-height: 1;
88
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
89
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
90
+ --amplify-components-avatar-text-align: center;
91
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
92
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
94
+ --amplify-components-avatar-border-radius: 100%;
95
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
96
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
97
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
98
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
99
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
100
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
101
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
102
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
103
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
104
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
105
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
106
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
107
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
108
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
109
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
110
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
111
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
113
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
114
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
86
115
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
87
116
  --amplify-components-badge-line-height: 1;
88
117
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
@@ -3421,6 +3450,118 @@ strong.amplify-text {
3421
3450
  gap: var(--amplify-space-medium);
3422
3451
  }
3423
3452
 
3453
+ .amplify-avatar {
3454
+ --avatar-color: var(--amplify-components-avatar-color);
3455
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
3456
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
3457
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
3458
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
3459
+ --avatar-size: var(--amplify-components-avatar-width);
3460
+ --amplify-components-icon-height: 100%;
3461
+ display: inline-flex;
3462
+ align-items: center;
3463
+ justify-content: center;
3464
+ color: var(--avatar-color);
3465
+ background-color: var(--avatar-background-color);
3466
+ font-weight: var(--amplify-components-avatar-font-weight);
3467
+ font-size: var(--amplify-components-avatar-font-size);
3468
+ width: var(--amplify-components-avatar-width);
3469
+ height: var(--amplify-components-avatar-height);
3470
+ overflow: hidden;
3471
+ border-radius: var(--amplify-components-avatar-border-radius);
3472
+ }
3473
+ .amplify-avatar--filled {
3474
+ background-color: var(--avatar-filled-background-color);
3475
+ color: var(--avatar-filled-color);
3476
+ }
3477
+ .amplify-avatar--outlined {
3478
+ border-width: var(--amplify-components-avatar-border-width);
3479
+ border-style: solid;
3480
+ padding: var(--amplify-components-avatar-border-width);
3481
+ border-color: var(--avatar-border-color);
3482
+ background-color: transparent;
3483
+ color: var(--avatar-color);
3484
+ }
3485
+ .amplify-avatar--small {
3486
+ --avatar-size: var(--amplify-components-avatar-small-width);
3487
+ width: var(--amplify-components-avatar-small-width);
3488
+ height: var(--amplify-components-avatar-small-height);
3489
+ font-size: var(--amplify-components-avatar-small-font-size);
3490
+ }
3491
+ .amplify-avatar--large {
3492
+ --avatar-size: var(--amplify-components-avatar-large-width);
3493
+ width: var(--amplify-components-avatar-large-width);
3494
+ height: var(--amplify-components-avatar-large-height);
3495
+ font-size: var(--amplify-components-avatar-large-font-size);
3496
+ }
3497
+ .amplify-avatar--warning {
3498
+ --avatar-border-color: var(
3499
+ --amplify-components-avatar-warning-border-color
3500
+ );
3501
+ --avatar-background-color: var(
3502
+ --amplify-components-avatar-warning-background-color
3503
+ );
3504
+ --avatar-color: var(--amplify-components-avatar-warning-color);
3505
+ --avatar-filled-background-color: var(
3506
+ --amplify-components-avatar-warning-color
3507
+ );
3508
+ --avatar-filled-color: var(
3509
+ --amplify-components-avatar-warning-background-color
3510
+ );
3511
+ }
3512
+ .amplify-avatar--error {
3513
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
3514
+ --avatar-background-color: var(
3515
+ --amplify-components-avatar-error-background-color
3516
+ );
3517
+ --avatar-color: var(--amplify-components-avatar-error-color);
3518
+ --avatar-filled-background-color: var(
3519
+ --amplify-components-avatar-error-color
3520
+ );
3521
+ --avatar-filled-color: var(
3522
+ --amplify-components-avatar-error-background-color
3523
+ );
3524
+ }
3525
+ .amplify-avatar--info {
3526
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
3527
+ --avatar-background-color: var(
3528
+ --amplify-components-avatar-info-background-color
3529
+ );
3530
+ --avatar-color: var(--amplify-components-avatar-info-color);
3531
+ --avatar-filled-background-color: var(
3532
+ --amplify-components-avatar-info-color
3533
+ );
3534
+ --avatar-filled-color: var(
3535
+ --amplify-components-avatar-info-background-color
3536
+ );
3537
+ }
3538
+ .amplify-avatar--success {
3539
+ --avatar-border-color: var(
3540
+ --amplify-components-avatar-success-border-color
3541
+ );
3542
+ --avatar-background-color: var(
3543
+ --amplify-components-avatar-success-background-color
3544
+ );
3545
+ --avatar-color: var(--amplify-components-avatar-success-color);
3546
+ --avatar-filled-background-color: var(
3547
+ --amplify-components-avatar-success-color
3548
+ );
3549
+ --avatar-filled-color: var(
3550
+ --amplify-components-avatar-success-background-color
3551
+ );
3552
+ }
3553
+ .amplify-avatar__icon {
3554
+ display: flex;
3555
+ font-size: calc(var(--avatar-size) * 0.6);
3556
+ }
3557
+ .amplify-avatar__image {
3558
+ width: 100%;
3559
+ height: 100%;
3560
+ -o-object-fit: cover;
3561
+ object-fit: cover;
3562
+ display: block;
3563
+ }
3564
+
3424
3565
  .amplify-breadcrumbs__list {
3425
3566
  display: flex;
3426
3567
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -6184,6 +6325,115 @@ html[dir=rtl] .amplify-field-group__inner-start {
6184
6325
  gap: var(--amplify-space-small);
6185
6326
  }
6186
6327
 
6328
+ .amplify-ai-conversation {
6329
+ display: flex;
6330
+ flex-direction: column;
6331
+ height: 100%;
6332
+ }
6333
+ .amplify-ai-conversation__message {
6334
+ --content-bg: transparent;
6335
+ display: flex;
6336
+ flex-direction: var(--flex-direction);
6337
+ gap: var(--amplify-space-small);
6338
+ padding: var(--amplify-space-small);
6339
+ }
6340
+ .amplify-ai-conversation__message__list {
6341
+ display: flex;
6342
+ flex-direction: column;
6343
+ }
6344
+ .amplify-ai-conversation__message__avatar {
6345
+ flex-shrink: 0;
6346
+ }
6347
+ .amplify-ai-conversation__message__sender {
6348
+ display: flex;
6349
+ flex-direction: var(--flex-direction);
6350
+ align-items: center;
6351
+ height: var(--amplify-components-avatar-height);
6352
+ gap: var(--amplify-space-small);
6353
+ }
6354
+ .amplify-ai-conversation__message__sender__username {
6355
+ font-weight: bold;
6356
+ }
6357
+ .amplify-ai-conversation__message__sender__timestamp {
6358
+ color: var(--amplify-colors-font-tertiary);
6359
+ font-size: var(--amplify-font-sizes-small);
6360
+ }
6361
+ .amplify-ai-conversation__message__body {
6362
+ display: flex;
6363
+ flex-direction: column;
6364
+ align-items: var(--body-align-items);
6365
+ gap: var(--amplify-space-xs);
6366
+ }
6367
+ .amplify-ai-conversation__message__content {
6368
+ background-color: var(--content-bg);
6369
+ border-radius: var(--amplify-radii-medium);
6370
+ padding: var(--content-padding);
6371
+ }
6372
+ .amplify-ai-conversation__message__actions {
6373
+ display: flex;
6374
+ flex-direction: row;
6375
+ }
6376
+ .amplify-ai-conversation__message--bubble {
6377
+ --content-bg: var(--bg-color);
6378
+ --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
6379
+ --flex-direction: row-reverse;
6380
+ --body-align-items: flex-end;
6381
+ }
6382
+ .amplify-ai-conversation__message--user {
6383
+ --bg-color: var(--amplify-colors-background-secondary);
6384
+ }
6385
+ .amplify-ai-conversation__message--assistant {
6386
+ --bg-color: var(--amplify-colors-primary-10);
6387
+ --flex-direction: row;
6388
+ --body-align-items: flex-start;
6389
+ }
6390
+ .amplify-ai-conversation__form {
6391
+ display: flex;
6392
+ flex-direction: row;
6393
+ align-items: flex-start;
6394
+ gap: var(--amplify-space-small);
6395
+ }
6396
+ .amplify-ai-conversation__form__dropzone {
6397
+ text-align: initial;
6398
+ border: none;
6399
+ padding: var(--amplify-space-xs);
6400
+ }
6401
+ .amplify-ai-conversation__attachment {
6402
+ display: flex;
6403
+ flex-direction: row;
6404
+ padding-block: var(--amplify-space-xxxs);
6405
+ padding-inline: var(--amplify-space-xs);
6406
+ border-width: var(--amplify-border-widths-small);
6407
+ border-style: solid;
6408
+ border-color: var(--amplify-colors-border-secondary);
6409
+ border-radius: var(--amplify-radii-small);
6410
+ align-items: center;
6411
+ gap: var(--amplify-space-xs);
6412
+ font-size: var(--amplify-font-sizes-small);
6413
+ }
6414
+ .amplify-ai-conversation__attachment__list {
6415
+ display: flex;
6416
+ flex-direction: row;
6417
+ flex-wrap: wrap;
6418
+ gap: var(--amplify-space-small);
6419
+ padding-block-start: var(--amplify-space-small);
6420
+ }
6421
+ .amplify-ai-conversation__attachment__image {
6422
+ width: 1rem;
6423
+ height: 1rem;
6424
+ -o-object-fit: cover;
6425
+ object-fit: cover;
6426
+ }
6427
+ .amplify-ai-conversation__attachment__size {
6428
+ color: var(--amplify-colors-font-tertiary);
6429
+ }
6430
+ .amplify-ai-conversation__attachment__remove {
6431
+ padding: var(--amplify-space-xxs);
6432
+ }
6433
+ .amplify-ai-conversation__prompt {
6434
+ font-weight: normal;
6435
+ }
6436
+
6187
6437
  .amplify-label-start {
6188
6438
  flex-direction: row;
6189
6439
  }