From 5a6bc81f3d33af2bbc51ef377b8251be22d26c20 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Mon, 7 Feb 2022 21:53:57 +0100
Subject: [PATCH 1/8] UploadDialog: allow removing assets before uploading

---
 .../src/components/AssetCard/AssetCard.js     | 16 +++++++-
 .../components/AssetCard/ImageAssetCard.js    | 41 +++++++++++++++----
 .../AssetCard/UploadingAssetCard.js           |  2 +-
 .../PendingAssetStep/PendingAssetStep.js      |  3 ++
 .../UploadAssetDialog/UploadAssetDialog.js    |  6 +++
 5 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
index c83b85313c..07872196c4 100644
--- a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
@@ -8,7 +8,16 @@ import { AssetType, AssetDefinition } from '../../constants';
 import { createAssetUrl } from '../../utils/createAssetUrl';
 import toSingularTypes from '../../utils/toSingularTypes';
 
-export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, size, local }) => {
+export const AssetCard = ({
+  allowedTypes,
+  asset,
+  isSelected,
+  onSelect,
+  onEdit,
+  onRemove,
+  size,
+  local,
+}) => {
   const singularTypes = toSingularTypes(allowedTypes);
 
   let handleSelect = onSelect ? () => onSelect(asset) : undefined;
@@ -31,6 +40,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
         mime={asset.mime}
         onEdit={onEdit ? () => onEdit(asset) : undefined}
         onSelect={handleSelect}
+        onRemove={onRemove ? () => onRemove(asset) : undefined}
         selected={isSelected}
         size={size}
       />
@@ -56,6 +66,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
         thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
         onEdit={onEdit ? () => onEdit(asset) : undefined}
         onSelect={handleSelect}
+        onRemove={onRemove ? () => onRemove(asset) : undefined}
         selected={isSelected}
         size={size}
       />
@@ -76,6 +87,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
       extension={getFileExtension(asset.ext)}
       onEdit={onEdit ? () => onEdit(asset) : undefined}
       onSelect={handleSelect}
+      onRemove={onRemove ? () => onRemove(asset) : undefined}
       selected={isSelected}
       size={size}
     />
@@ -89,6 +101,7 @@ AssetCard.defaultProps = {
   local: false,
   onSelect: undefined,
   onEdit: undefined,
+  onRemove: undefined,
   size: 'M',
 };
 
@@ -98,6 +111,7 @@ AssetCard.propTypes = {
   local: PropTypes.bool,
   onSelect: PropTypes.func,
   onEdit: PropTypes.func,
+  onRemove: PropTypes.func,
   isSelected: PropTypes.bool,
   size: PropTypes.oneOf(['S', 'M']),
 };
diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
index cd7459af77..eb84818b39 100644
--- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
@@ -16,6 +16,7 @@ import {
 } from '@strapi/design-system/Card';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Pencil from '@strapi/icons/Pencil';
+import Trash from '@strapi/icons/Trash';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 
@@ -23,6 +24,14 @@ const Extension = styled.span`
   text-transform: uppercase;
 `;
 
+const CardActions = styled(CardAction)`
+  display: flex;
+
+  > * + * {
+    margin-left: ${6.4 / 16}rem;
+  }
+`;
+
 export const ImageAssetCard = ({
   name,
   extension,
@@ -32,6 +41,7 @@ export const ImageAssetCard = ({
   selected,
   onSelect,
   onEdit,
+  onRemove,
   size,
   alt,
 }) => {
@@ -46,14 +56,27 @@ export const ImageAssetCard = ({
     <Card>
       <CardHeader>
         {onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
-        {onEdit && (
-          <CardAction position="end">
-            <IconButton
-              label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
-              icon={<Pencil />}
-              onClick={onEdit}
-            />
-          </CardAction>
+        {(onRemove || onEdit) && (
+          <CardActions position="end">
+            {onRemove && (
+              <IconButton
+                label={formatMessage({
+                  id: getTrad('control-card.remove-selection'),
+                  defaultMessage: 'Remove from selection',
+                })}
+                icon={<Trash />}
+                onClick={onRemove}
+              />
+            )}
+
+            {onEdit && (
+              <IconButton
+                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
+                icon={<Pencil />}
+                onClick={onEdit}
+              />
+            )}
+          </CardActions>
         )}
         <CardAsset src={optimizedCachingThumbnail} size={size} alt={alt} />
       </CardHeader>
@@ -81,6 +104,7 @@ ImageAssetCard.defaultProps = {
   selected: false,
   onEdit: undefined,
   onSelect: undefined,
+  onRemove: undefined,
   size: 'M',
 };
 
@@ -91,6 +115,7 @@ ImageAssetCard.propTypes = {
   name: PropTypes.string.isRequired,
   onEdit: PropTypes.func,
   onSelect: PropTypes.func,
+  onRemove: PropTypes.func,
   width: PropTypes.number,
   thumbnail: PropTypes.string.isRequired,
   selected: PropTypes.bool,
diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
index bc9fbfc5fd..a1ee03c8c3 100644
--- a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
@@ -84,7 +84,7 @@ export const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploade
         <CardBody>
           <CardContent>
             <Box paddingTop={1}>
-              <CardTitle as="h2">{asset.name}</CardTitle>
+              <CardTitle as="h2">{asset.name} lol</CardTitle>
             </Box>
             <CardSubtitle>
               <Extension>{asset.ext}</Extension>
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
index d9b2ac7990..dff857cd13 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
@@ -23,6 +23,7 @@ export const PendingAssetStep = ({
   addUploadedFiles,
   onClose,
   onEditAsset,
+  onRemoveAsset,
   assets,
   onClickAddAsset,
   onCancelUpload,
@@ -126,6 +127,7 @@ export const PendingAssetStep = ({
                       local
                       alt={asset.name}
                       onEdit={onEditAsset}
+                      onRemove={onRemoveAsset}
                     />
                   </GridItem>
                 );
@@ -168,6 +170,7 @@ PendingAssetStep.propTypes = {
   assets: PropTypes.arrayOf(AssetDefinition).isRequired,
   onClose: PropTypes.func.isRequired,
   onEditAsset: PropTypes.func.isRequired,
+  onRemoveAsset: PropTypes.func.isRequired,
   onClickAddAsset: PropTypes.func.isRequired,
   onUploadSucceed: PropTypes.func.isRequired,
   onCancelUpload: PropTypes.func.isRequired,
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js
index 0c33a31032..60535fded4 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js
@@ -78,6 +78,11 @@ export const UploadAssetDialog = ({
     }
   };
 
+  const handleRemoveAsset = assetToRemove => {
+    const nextAssets = assets.filter(asset => asset !== assetToRemove);
+    setAssets(nextAssets);
+  };
+
   return (
     <ModalLayout onClose={handleClose} labelledBy="title">
       {step === Steps.AddAsset && (
@@ -93,6 +98,7 @@ export const UploadAssetDialog = ({
           onClose={handleClose}
           assets={assets}
           onEditAsset={setAssetToEdit}
+          onRemoveAsset={handleRemoveAsset}
           onClickAddAsset={moveToAddAsset}
           onCancelUpload={handleCancelUpload}
           onUploadSucceed={handleUploadSuccess}

From 7cba515655a96faa5fc73620159207f3f76fd9a0 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Mon, 7 Feb 2022 21:58:23 +0100
Subject: [PATCH 2/8] UploadDialog: User proper design-system spacing

---
 .../upload/admin/src/components/AssetCard/ImageAssetCard.js     | 2 +-
 .../upload/admin/src/components/AssetCard/UploadingAssetCard.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
index eb84818b39..4d25fc531f 100644
--- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
@@ -28,7 +28,7 @@ const CardActions = styled(CardAction)`
   display: flex;
 
   > * + * {
-    margin-left: ${6.4 / 16}rem;
+    margin-left: ${({ theme }) => theme.spaces[2]};
   }
 `;
 
diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
index a1ee03c8c3..bc9fbfc5fd 100644
--- a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
@@ -84,7 +84,7 @@ export const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploade
         <CardBody>
           <CardContent>
             <Box paddingTop={1}>
-              <CardTitle as="h2">{asset.name} lol</CardTitle>
+              <CardTitle as="h2">{asset.name}</CardTitle>
             </Box>
             <CardSubtitle>
               <Extension>{asset.ext}</Extension>

From 7ec1e978b1a2e426a6dd760f1e39e917032dc33f Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Mon, 7 Feb 2022 22:07:03 +0100
Subject: [PATCH 3/8] AssetCard: simplify common props

---
 .../src/components/AssetCard/AssetCard.js     | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
index 07872196c4..ea86c14ccf 100644
--- a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
@@ -22,6 +22,18 @@ export const AssetCard = ({
 
   let handleSelect = onSelect ? () => onSelect(asset) : undefined;
   const fileType = asset.mime.split('/')[0];
+  const commonAssetCardProps = {
+    id: asset.id,
+    key: asset.id,
+    name: asset.name,
+    url: local ? asset.url : createAssetUrl(asset, true),
+    mime: asset.mime,
+    onEdit: onEdit ? () => onEdit(asset) : undefined,
+    onSelect: handleSelect,
+    onRemove: onRemove ? () => onRemove(asset) : undefined,
+    selected: isSelected,
+    size,
+  };
 
   if (asset.mime.includes(AssetType.Video)) {
     const canSelectAsset = singularTypes.includes(fileType);
@@ -30,21 +42,7 @@ export const AssetCard = ({
       handleSelect = undefined;
     }
 
-    return (
-      <VideoAssetCard
-        id={asset.id}
-        key={asset.id}
-        name={asset.name}
-        extension={getFileExtension(asset.ext)}
-        url={local ? asset.url : createAssetUrl(asset, true)}
-        mime={asset.mime}
-        onEdit={onEdit ? () => onEdit(asset) : undefined}
-        onSelect={handleSelect}
-        onRemove={onRemove ? () => onRemove(asset) : undefined}
-        selected={isSelected}
-        size={size}
-      />
-    );
+    return <VideoAssetCard {...commonAssetCardProps} extension={getFileExtension(asset.ext)} />;
   }
 
   if (asset.mime.includes(AssetType.Image)) {
@@ -56,19 +54,11 @@ export const AssetCard = ({
 
     return (
       <ImageAssetCard
-        id={asset.id}
-        key={asset.id}
-        name={asset.name}
+        {...commonAssetCardProps}
         alt={asset.alternativeText || asset.name}
-        extension={getFileExtension(asset.ext)}
         height={asset.height}
-        width={asset.width}
         thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
-        onEdit={onEdit ? () => onEdit(asset) : undefined}
-        onSelect={handleSelect}
-        onRemove={onRemove ? () => onRemove(asset) : undefined}
-        selected={isSelected}
-        size={size}
+        width={asset.width}
       />
     );
   }
@@ -79,19 +69,7 @@ export const AssetCard = ({
     handleSelect = undefined;
   }
 
-  return (
-    <DocAssetCard
-      id={asset.id}
-      key={asset.id}
-      name={asset.name}
-      extension={getFileExtension(asset.ext)}
-      onEdit={onEdit ? () => onEdit(asset) : undefined}
-      onSelect={handleSelect}
-      onRemove={onRemove ? () => onRemove(asset) : undefined}
-      selected={isSelected}
-      size={size}
-    />
-  );
+  return <DocAssetCard {...commonAssetCardProps} extension={getFileExtension(asset.ext)} />;
 };
 
 AssetCard.defaultProps = {

From 0e97b4cb902ac02f555def13242a0a7989aa7d4b Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Tue, 8 Feb 2022 10:48:36 +0100
Subject: [PATCH 4/8] AssetCard: move extension prop into commonProps

---
 .../core/upload/admin/src/components/AssetCard/AssetCard.js  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
index ea86c14ccf..a05529b97d 100644
--- a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js
@@ -24,6 +24,7 @@ export const AssetCard = ({
   const fileType = asset.mime.split('/')[0];
   const commonAssetCardProps = {
     id: asset.id,
+    extension: getFileExtension(asset.ext),
     key: asset.id,
     name: asset.name,
     url: local ? asset.url : createAssetUrl(asset, true),
@@ -42,7 +43,7 @@ export const AssetCard = ({
       handleSelect = undefined;
     }
 
-    return <VideoAssetCard {...commonAssetCardProps} extension={getFileExtension(asset.ext)} />;
+    return <VideoAssetCard {...commonAssetCardProps} />;
   }
 
   if (asset.mime.includes(AssetType.Image)) {
@@ -69,7 +70,7 @@ export const AssetCard = ({
     handleSelect = undefined;
   }
 
-  return <DocAssetCard {...commonAssetCardProps} extension={getFileExtension(asset.ext)} />;
+  return <DocAssetCard {...commonAssetCardProps} />;
 };
 
 AssetCard.defaultProps = {

From 44511e62323c4c25cca41af2000ae8b7703e23c3 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Tue, 8 Feb 2022 12:51:40 +0100
Subject: [PATCH 5/8] AssetCard: Update snapshot test

---
 .../tests/__snapshots__/index.test.js.snap    |  12 -
 .../tests/__snapshots__/index.test.js.snap    |   4 -
 .../components/Register/tests/index.test.js   |   1 -
 .../src/pages/HomePage/tests/index.test.js    |   3 -
 .../src/pages/ProfilePage/tests/index.test.js |   1 -
 .../ApplicationInfosPage/tests/index.test.js  |   1 -
 .../tests/__snapshots__/index.test.js.snap    |   1 -
 .../SingleSignOn/tests/index.test.js          |   1 -
 .../tests/__snapshots__/index.test.js.snap    |   1 -
 .../src/pages/Settings/tests/index.test.js    |   2 -
 .../AssetCard/tests/DocAssetCard.test.js      | 175 ++---
 .../AssetCard/tests/ImageAssetCard.test.js    | 182 ++---
 .../tests/ImageAssetCard.test.js.orig         | 702 ++++++++++++++++++
 .../AssetList/tests/AssetList.test.js         | 213 +++---
 .../EditAssetDialog.test.js.snap              |   1 -
 .../tests/__snapshots__/index.test.js.snap    |   1 -
 .../MediaLibraryInput.test.js.snap            | 165 ++--
 .../PendingAssetStep.test.js.snap             |   1 -
 .../pages/SettingsPage/tests/index.test.js    |   1 -
 .../AdvancedSettings/tests/index.test.js      |   3 -
 .../Roles/CreatePage/tests/index.test.js      |   3 -
 .../pages/Roles/EditPage/tests/index.test.js  |   3 -
 22 files changed, 1026 insertions(+), 451 deletions(-)
 create mode 100644 packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
index a58a94ec62..5af23af0e6 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
@@ -799,22 +799,18 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
 
 .c23 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
-  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
-  max-width: 100%;
 }
 
 .c38 {
@@ -2669,22 +2665,18 @@ exports[`EditSettingsView should add field 1`] = `
 
 .c23 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
-  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
-  max-width: 100%;
 }
 
 .c38 {
@@ -5032,22 +5024,18 @@ exports[`EditSettingsView should add relation 1`] = `
 
 .c23 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
-  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
-  max-width: 100%;
 }
 
 .c38 {
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
index 933b5cb429..290c76b780 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
@@ -838,12 +838,10 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
 
 .c46 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c60 {
   grid-column: span 3;
-  max-width: 100%;
 }
 
 .c28 {
@@ -2644,12 +2642,10 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
 
 .c46 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c60 {
   grid-column: span 3;
-  max-width: 100%;
 }
 
 .c28 {
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
index 45abca5162..2bd494de29 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
@@ -556,7 +556,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
 
       .c23 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c17 {
diff --git a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
index 4278cd8fb2..b8528b41ac 100644
--- a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
@@ -372,17 +372,14 @@ describe('Homepage', () => {
 
       .c7 {
         grid-column: span 8;
-        max-width: 100%;
       }
 
       .c33 {
         grid-column: span 4;
-        max-width: 100%;
       }
 
       .c43 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c50 {
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
index e93404ac27..74488efda5 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
@@ -700,7 +700,6 @@ describe('ADMIN | Pages | Profile page', () => {
 
       .c20 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c30::-ms-reveal {
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index d971195f10..0708c64e7c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -174,7 +174,6 @@ describe('Application page', () => {
 
       .c15 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c19 {
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index 733a4a8678..6025252531 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -767,7 +767,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 
 .c27 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
index 4c0515308c..7f03f6a8fa 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
@@ -598,7 +598,6 @@ describe('Admin | ee | SettingsPage | SSO', () => {
 
       .c21 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index 1a374a10e5..6f47446fa0 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -683,7 +683,6 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 
 .c27 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c0:focus-visible {
diff --git a/packages/core/email/admin/src/pages/Settings/tests/index.test.js b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
index 6192c3cce8..2409149dd2 100644
--- a/packages/core/email/admin/src/pages/Settings/tests/index.test.js
+++ b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
@@ -668,12 +668,10 @@ describe('Email | Pages | Settings', () => {
 
       .c14 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c35 {
         grid-column: span 7;
-        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
index 69fae232a2..4a5f4edd5c 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c28 {
+      .c24 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -47,28 +47,32 @@ describe('DocAssetCard', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c3 {
-        position: start;
-      }
-
-      .c8 {
-        position: end;
-      }
-
-      .c16 {
+      .c12 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c24 {
+      .c20 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
+      .c3 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c5 {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
       .c1 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -87,21 +91,7 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c4 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c17 {
+      .c13 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -115,7 +105,7 @@ describe('DocAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c25 {
+      .c21 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -133,41 +123,20 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c5 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c5 > * + * {
-        margin-left: 8px;
-      }
-
-      .c6 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c9 {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-      }
-
-      .c20 {
+      .c16 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c21 {
+      .c17 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c27 {
+      .c23 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -175,18 +144,18 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c23 {
+      .c19 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c26 {
+      .c22 {
         margin-left: 4px;
       }
 
-      .c7 {
+      .c4 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -197,12 +166,12 @@ describe('DocAssetCard', () => {
         cursor: pointer;
       }
 
-      .c7:checked {
+      .c4:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c7:checked:after {
+      .c4:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -216,21 +185,21 @@ describe('DocAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c7:checked:disabled:after {
+      .c4:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c7:disabled {
+      .c4:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c7:indeterminate {
+      .c4:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c7:indeterminate:after {
+      .c4:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -245,16 +214,16 @@ describe('DocAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c7:indeterminate:disabled {
+      .c4:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c7:indeterminate:disabled:after {
+      .c4:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c18 {
+      .c14 {
         word-break: break-all;
       }
 
@@ -263,16 +232,16 @@ describe('DocAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c19 {
+      .c15 {
         padding-top: 4px;
       }
 
-      .c12 {
+      .c8 {
         width: 100%;
         height: 5.5rem;
       }
 
-      .c13 {
+      .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -290,7 +259,7 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c10 {
+      .c6 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -304,21 +273,21 @@ describe('DocAssetCard', () => {
         outline: none;
       }
 
-      .c10 svg {
+      .c6 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c10 svg > g,
-      .c10 svg path {
+      .c6 svg > g,
+      .c6 svg path {
         fill: #ffffff;
       }
 
-      .c10[aria-disabled='true'] {
+      .c6[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c10:after {
+      .c6:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -333,11 +302,11 @@ describe('DocAssetCard', () => {
         border: 2px solid transparent;
       }
 
-      .c10:focus-visible {
+      .c6:focus-visible {
         outline: none;
       }
 
-      .c10:focus-visible:after {
+      .c6:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -348,7 +317,7 @@ describe('DocAssetCard', () => {
         border: 2px solid #4945ff;
       }
 
-      .c11 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -365,38 +334,38 @@ describe('DocAssetCard', () => {
         width: 2rem;
       }
 
-      .c11 svg > g,
-      .c11 svg path {
+      .c7 svg > g,
+      .c7 svg path {
         fill: #8e8ea9;
       }
 
-      .c11:hover svg > g,
-      .c11:hover svg path {
+      .c7:hover svg > g,
+      .c7:hover svg path {
         fill: #666687;
       }
 
-      .c11:active svg > g,
-      .c11:active svg path {
+      .c7:active svg > g,
+      .c7:active svg path {
         fill: #a5a5ba;
       }
 
-      .c11[aria-disabled='true'] {
+      .c7[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c11[aria-disabled='true'] svg path {
+      .c7[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c22 {
+      .c18 {
         text-transform: uppercase;
       }
 
-      .c15 svg {
+      .c11 svg {
         font-size: 3rem;
       }
 
-      .c14 {
+      .c10 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -411,22 +380,22 @@ describe('DocAssetCard', () => {
             class="c1 c2"
           >
             <div
-              class="c3 c4 c5 c6"
+              class="c3"
             >
               <input
                 aria-labelledby="card-1-title"
-                class="c7"
+                class="c4"
                 type="checkbox"
               />
             </div>
             <div
-              class="c8 c4 c5 c9"
+              class="c5"
             >
               <span>
                 <button
                   aria-disabled="false"
                   aria-labelledby="tooltip-1"
-                  class="c10 c11"
+                  class="c6 c7"
                   tabindex="0"
                   type="button"
                 >
@@ -448,12 +417,12 @@ describe('DocAssetCard', () => {
               </span>
             </div>
             <div
-              class="c12 c13 c14"
+              class="c8 c9 c10"
               height="5.5rem"
               width="100%"
             >
               <span
-                class="c15"
+                class="c11"
               >
                 <svg
                   aria-label="hello.png"
@@ -474,42 +443,42 @@ describe('DocAssetCard', () => {
             </div>
           </div>
           <div
-            class="c16"
+            class="c12"
           >
             <div
-              class="c17"
+              class="c13"
             >
               <div
-                class="c18"
+                class="c14"
               >
                 <div
-                  class="c19"
+                  class="c15"
                 >
                   <h2
-                    class="c20"
+                    class="c16"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c21"
+                  class="c17"
                 >
                   <span
-                    class="c22"
+                    class="c18"
                   >
                     png
                   </span>
                 </div>
               </div>
               <div
-                class="c23"
+                class="c19"
               >
                 <div
-                  class="c24 c25 c26"
+                  class="c20 c21 c22"
                 >
                   <span
-                    class="c27"
+                    class="c23"
                   >
                     Doc
                   </span>
@@ -519,7 +488,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c28"
+          class="c24"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
index 8a7d56c3ec..2ff6176d69 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
@@ -31,7 +31,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c26 {
+      .c23 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -43,7 +43,7 @@ describe('ImageAssetCard', () => {
         width: 1px;
       }
 
-      .c17 {
+      .c14 {
         padding-top: 4px;
       }
 
@@ -53,28 +53,32 @@ describe('ImageAssetCard', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c3 {
-        position: start;
-      }
-
-      .c8 {
-        position: end;
-      }
-
-      .c14 {
+      .c11 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c22 {
+      .c19 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
+      .c3 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c5 {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
       .c1 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -93,21 +97,7 @@ describe('ImageAssetCard', () => {
         align-items: center;
       }
 
-      .c4 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c15 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -121,7 +111,7 @@ describe('ImageAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c23 {
+      .c20 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -139,35 +129,14 @@ describe('ImageAssetCard', () => {
         align-items: center;
       }
 
-      .c5 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c5 > * + * {
-        margin-left: 8px;
-      }
-
-      .c6 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c9 {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-      }
-
-      .c13 {
+      .c10 {
         margin: 0;
         padding: 0;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .c12 {
+      .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -181,20 +150,20 @@ describe('ImageAssetCard', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c18 {
+      .c15 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c19 {
+      .c16 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c25 {
+      .c22 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -202,18 +171,18 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c21 {
+      .c18 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c24 {
+      .c21 {
         margin-left: 4px;
       }
 
-      .c7 {
+      .c4 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -224,12 +193,12 @@ describe('ImageAssetCard', () => {
         cursor: pointer;
       }
 
-      .c7:checked {
+      .c4:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c7:checked:after {
+      .c4:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -243,21 +212,21 @@ describe('ImageAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c7:checked:disabled:after {
+      .c4:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c7:disabled {
+      .c4:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c7:indeterminate {
+      .c4:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c7:indeterminate:after {
+      .c4:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -272,16 +241,16 @@ describe('ImageAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c7:indeterminate:disabled {
+      .c4:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c7:indeterminate:disabled:after {
+      .c4:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c16 {
+      .c13 {
         word-break: break-all;
       }
 
@@ -290,7 +259,7 @@ describe('ImageAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c10 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -304,21 +273,21 @@ describe('ImageAssetCard', () => {
         outline: none;
       }
 
-      .c10 svg {
+      .c7 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c10 svg > g,
-      .c10 svg path {
+      .c7 svg > g,
+      .c7 svg path {
         fill: #ffffff;
       }
 
-      .c10[aria-disabled='true'] {
+      .c7[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c10:after {
+      .c7:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -333,11 +302,11 @@ describe('ImageAssetCard', () => {
         border: 2px solid transparent;
       }
 
-      .c10:focus-visible {
+      .c7:focus-visible {
         outline: none;
       }
 
-      .c10:focus-visible:after {
+      .c7:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -348,7 +317,7 @@ describe('ImageAssetCard', () => {
         border: 2px solid #4945ff;
       }
 
-      .c11 {
+      .c8 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -365,33 +334,44 @@ describe('ImageAssetCard', () => {
         width: 2rem;
       }
 
-      .c11 svg > g,
-      .c11 svg path {
+      .c8 svg > g,
+      .c8 svg path {
         fill: #8e8ea9;
       }
 
-      .c11:hover svg > g,
-      .c11:hover svg path {
+      .c8:hover svg > g,
+      .c8:hover svg path {
         fill: #666687;
       }
 
-      .c11:active svg > g,
-      .c11:active svg path {
+      .c8:active svg > g,
+      .c8:active svg path {
         fill: #a5a5ba;
       }
 
-      .c11[aria-disabled='true'] {
+      .c8[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c11[aria-disabled='true'] svg path {
+      .c8[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c20 {
+      .c17 {
         text-transform: uppercase;
       }
 
+      .c6 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+
+      .c6 > * + * {
+        margin-left: 8px;
+      }
+
       <div>
         <article
           aria-labelledby="card-1-title"
@@ -402,22 +382,22 @@ describe('ImageAssetCard', () => {
             class="c1 c2"
           >
             <div
-              class="c3 c4 c5 c6"
+              class="c3"
             >
               <input
                 aria-labelledby="card-1-title"
-                class="c7"
+                class="c4"
                 type="checkbox"
               />
             </div>
             <div
-              class="c8 c4 c5 c9"
+              class="c5 c6"
             >
               <span>
                 <button
                   aria-disabled="false"
                   aria-labelledby="tooltip-1"
-                  class="c10 c11"
+                  class="c7 c8"
                   tabindex="0"
                   type="button"
                 >
@@ -439,39 +419,39 @@ describe('ImageAssetCard', () => {
               </span>
             </div>
             <div
-              class="c12"
+              class="c9"
             >
               <img
                 aria-hidden="true"
-                class="c13"
+                class="c10"
                 src="http://somewhere.com/hello.png?width=40&height=40"
               />
             </div>
           </div>
           <div
-            class="c14"
+            class="c11"
           >
             <div
-              class="c15"
+              class="c12"
             >
               <div
-                class="c16"
+                class="c13"
               >
                 <div
-                  class="c17"
+                  class="c14"
                 >
                   <h2
-                    class="c18"
+                    class="c15"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c19"
+                  class="c16"
                 >
                   <span
-                    class="c20"
+                    class="c17"
                   >
                     png
                   </span>
@@ -479,13 +459,13 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c21"
+                class="c18"
               >
                 <div
-                  class="c22 c23 c24"
+                  class="c19 c20 c21"
                 >
                   <span
-                    class="c25"
+                    class="c22"
                   >
                     Image
                   </span>
@@ -495,7 +475,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c26"
+          class="c23"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig
new file mode 100644
index 0000000000..26f4e7d4c6
--- /dev/null
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig
@@ -0,0 +1,702 @@
+import React from 'react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { render as renderTL } from '@testing-library/react';
+import { ImageAssetCard } from '../ImageAssetCard';
+import en from '../../../translations/en.json';
+
+jest.mock('../../../utils', () => ({
+  ...jest.requireActual('../../../utils'),
+  getTrad: x => x,
+}));
+
+jest.mock('react-intl', () => ({
+  useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
+}));
+
+describe('ImageAssetCard', () => {
+  it('snapshots the component', () => {
+    const { container } = renderTL(
+      <ThemeProvider theme={lightTheme}>
+        <ImageAssetCard
+          name="hello.png"
+          extension="png"
+          height={40}
+          width={40}
+          thumbnail="http://somewhere.com/hello.png"
+          selected={false}
+          onSelect={jest.fn()}
+          onEdit={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+<<<<<<< HEAD
+      .c26 {
+=======
+      .c23 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+<<<<<<< HEAD
+      .c17 {
+=======
+      .c14 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        padding-top: 4px;
+      }
+
+      .c0 {
+        background: #ffffff;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+      }
+
+<<<<<<< HEAD
+      .c3 {
+        position: start;
+      }
+
+      .c8 {
+        position: end;
+      }
+
+      .c14 {
+=======
+      .c11 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        padding-top: 8px;
+        padding-right: 12px;
+        padding-bottom: 8px;
+        padding-left: 12px;
+      }
+
+<<<<<<< HEAD
+      .c22 {
+=======
+      .c19 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        background: #f6f6f9;
+        padding: 4px;
+        border-radius: 4px;
+        min-width: 20px;
+      }
+
+      .c1 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+<<<<<<< HEAD
+      .c4 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c15 {
+=======
+      .c12 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: flex-start;
+        -webkit-box-align: flex-start;
+        -ms-flex-align: flex-start;
+        align-items: flex-start;
+      }
+
+<<<<<<< HEAD
+      .c23 {
+=======
+      .c20 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        display: -webkit-inline-box;
+        display: -webkit-inline-flex;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+<<<<<<< HEAD
+      .c5 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c5 > * + * {
+        margin-left: 8px;
+      }
+
+      .c6 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c9 {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
+      .c13 {
+=======
+      .c10 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        margin: 0;
+        padding: 0;
+        max-height: 100%;
+        max-width: 100%;
+      }
+
+<<<<<<< HEAD
+      .c12 {
+=======
+      .c9 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        height: 10.25rem;
+        width: 100%;
+        background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
+      }
+
+<<<<<<< HEAD
+      .c18 {
+=======
+      .c15 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        font-weight: 600;
+        color: #32324d;
+        font-size: 0.75rem;
+        line-height: 1.33;
+      }
+
+<<<<<<< HEAD
+      .c19 {
+=======
+      .c16 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        color: #666687;
+        font-size: 0.75rem;
+        line-height: 1.33;
+      }
+
+<<<<<<< HEAD
+      .c25 {
+=======
+      .c22 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        color: #666687;
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+      }
+
+<<<<<<< HEAD
+      .c21 {
+=======
+      .c18 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        margin-left: auto;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+      }
+
+<<<<<<< HEAD
+      .c24 {
+=======
+      .c21 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        margin-left: 4px;
+      }
+
+      .c7 {
+        margin: 0;
+        height: 18px;
+        min-width: 18px;
+        border-radius: 4px;
+        border: 1px solid #c0c0cf;
+        -webkit-appearance: none;
+        background-color: #ffffff;
+        cursor: pointer;
+      }
+
+      .c7:checked {
+        background-color: #4945ff;
+        border: 1px solid #4945ff;
+      }
+
+      .c7:checked:after {
+        content: '';
+        display: block;
+        position: relative;
+        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
+        width: 10px;
+        height: 10px;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        -ms-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+      }
+
+      .c7:checked:disabled:after {
+        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
+      }
+
+      .c7:disabled {
+        background-color: #dcdce4;
+        border: 1px solid #c0c0cf;
+      }
+
+      .c7:indeterminate {
+        background-color: #4945ff;
+        border: 1px solid #4945ff;
+      }
+
+      .c7:indeterminate:after {
+        content: '';
+        display: block;
+        position: relative;
+        color: white;
+        height: 2px;
+        width: 10px;
+        background-color: #ffffff;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        -ms-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+      }
+
+      .c7:indeterminate:disabled {
+        background-color: #dcdce4;
+        border: 1px solid #c0c0cf;
+      }
+
+      .c7:indeterminate:disabled:after {
+        background-color: #8e8ea9;
+      }
+
+<<<<<<< HEAD
+      .c16 {
+=======
+      .c13 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        word-break: break-all;
+      }
+
+      .c2 {
+        position: relative;
+        border-bottom: 1px solid #eaeaef;
+      }
+
+<<<<<<< HEAD
+      .c10 {
+=======
+      .c7 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+        position: relative;
+        outline: none;
+      }
+
+<<<<<<< HEAD
+      .c10 svg {
+=======
+      .c7 svg {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        height: 12px;
+        width: 12px;
+      }
+
+<<<<<<< HEAD
+      .c10 svg > g,
+      .c10 svg path {
+        fill: #ffffff;
+      }
+
+      .c10[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c10:after {
+=======
+      .c7 svg > g,
+      .c7 svg path {
+        fill: #ffffff;
+      }
+
+      .c7[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c7:after {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+<<<<<<< HEAD
+      .c10:focus-visible {
+        outline: none;
+      }
+
+      .c10:focus-visible:after {
+=======
+      .c7:focus-visible {
+        outline: none;
+      }
+
+      .c7:focus-visible:after {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+<<<<<<< HEAD
+      .c11 {
+=======
+      .c8 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        height: 2rem;
+        width: 2rem;
+      }
+
+<<<<<<< HEAD
+      .c11 svg > g,
+      .c11 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c11:hover svg > g,
+      .c11:hover svg path {
+        fill: #666687;
+      }
+
+      .c11:active svg > g,
+      .c11:active svg path {
+        fill: #a5a5ba;
+      }
+
+      .c11[aria-disabled='true'] {
+        background-color: #eaeaef;
+      }
+
+      .c11[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c20 {
+=======
+      .c8 svg > g,
+      .c8 svg path {
+        fill: #8e8ea9;
+      }
+
+      .c8:hover svg > g,
+      .c8:hover svg path {
+        fill: #666687;
+      }
+
+      .c8:active svg > g,
+      .c8:active svg path {
+        fill: #a5a5ba;
+      }
+
+      .c8[aria-disabled='true'] {
+        background-color: #eaeaef;
+      }
+
+      .c8[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c17 {
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        text-transform: uppercase;
+      }
+
+      .c6 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+
+      .c6 > * + * {
+        margin-left: 8px;
+      }
+
+      <div>
+        <article
+          aria-labelledby="card-1-title"
+          class="c0"
+          tabindex="0"
+        >
+          <div
+            class="c1 c2"
+          >
+            <div
+              class="c3 c4 c5 c6"
+            >
+              <input
+                aria-labelledby="card-1-title"
+                class="c7"
+                type="checkbox"
+              />
+            </div>
+            <div
+<<<<<<< HEAD
+              class="c8 c4 c5 c9"
+=======
+              class="c5 c6"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+            >
+              <span>
+                <button
+                  aria-disabled="false"
+                  aria-labelledby="tooltip-1"
+<<<<<<< HEAD
+                  class="c10 c11"
+=======
+                  class="c7 c8"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M23.605 3.514c.527.528.527 1.36 0 1.887l-2.623 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.119 3.118zM0 24v-4.989l14.2-14.2L19.19 9.8 4.99 24H0z"
+                      fill="#212134"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+<<<<<<< HEAD
+              class="c12"
+            >
+              <img
+                aria-hidden="true"
+                class="c13"
+=======
+              class="c9"
+            >
+              <img
+                aria-hidden="true"
+                class="c10"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+                src="http://somewhere.com/hello.png?width=40&height=40"
+              />
+            </div>
+          </div>
+          <div
+<<<<<<< HEAD
+            class="c14"
+          >
+            <div
+              class="c15"
+            >
+              <div
+                class="c16"
+              >
+                <div
+                  class="c17"
+                >
+                  <h2
+                    class="c18"
+=======
+            class="c11"
+          >
+            <div
+              class="c12"
+            >
+              <div
+                class="c13"
+              >
+                <div
+                  class="c14"
+                >
+                  <h2
+                    class="c15"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+                    id="card-1-title"
+                  >
+                    hello.png
+                  </h2>
+                </div>
+                <div
+<<<<<<< HEAD
+                  class="c19"
+                >
+                  <span
+                    class="c20"
+=======
+                  class="c16"
+                >
+                  <span
+                    class="c17"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+                  >
+                    png
+                  </span>
+                   - 40✕40
+                </div>
+              </div>
+              <div
+<<<<<<< HEAD
+                class="c21"
+              >
+                <div
+                  class="c22 c23 c24"
+                >
+                  <span
+                    class="c25"
+=======
+                class="c18"
+              >
+                <div
+                  class="c19 c20 c21"
+                >
+                  <span
+                    class="c22"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+                  >
+                    Image
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </article>
+        <div
+<<<<<<< HEAD
+          class="c26"
+=======
+          class="c23"
+>>>>>>> 196012728 (AssetCard: Update snapshot test)
+        >
+          <p
+            aria-live="polite"
+            aria-relevant="all"
+            id="live-region-log"
+            role="log"
+          />
+          <p
+            aria-live="polite"
+            aria-relevant="all"
+            id="live-region-status"
+            role="status"
+          />
+          <p
+            aria-live="assertive"
+            aria-relevant="all"
+            id="live-region-alert"
+            role="alert"
+          />
+        </div>
+      </div>
+    `);
+  });
+});
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js b/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
index 13b1583e21..bea00c3501 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
+++ b/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
@@ -130,7 +130,7 @@ describe('MediaLibrary / AssetList', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c34 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -142,16 +142,16 @@ describe('MediaLibrary / AssetList', () => {
         width: 1px;
       }
 
-      .c14 {
+      .c11 {
         padding-top: 4px;
       }
 
-      .c29 {
+      .c27 {
         width: 100%;
         height: 10.25rem;
       }
 
-      .c30 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -169,7 +169,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c24 {
+      .c22 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -187,31 +187,33 @@ describe('MediaLibrary / AssetList', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c4 {
-        position: start;
-      }
-
-      .c11 {
+      .c8 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c19 {
+      .c16 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
-      .c25 {
+      .c23 {
         background: #32324d;
         color: #ffffff;
         padding: 4px;
         border-radius: 4px;
       }
 
+      .c4 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
       .c2 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -230,21 +232,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c5 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c12 {
+      .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -258,7 +246,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: flex-start;
       }
 
-      .c20 {
+      .c17 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -276,29 +264,28 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c6 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c6 > * + * {
-        margin-left: 8px;
+      .c20 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
       }
 
       .c7 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c10 {
         margin: 0;
         padding: 0;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .c9 {
+      .c6 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -312,20 +299,20 @@ describe('MediaLibrary / AssetList', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c15 {
+      .c12 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c16 {
+      .c13 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c22 {
+      .c19 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -333,24 +320,24 @@ describe('MediaLibrary / AssetList', () => {
         text-transform: uppercase;
       }
 
-      .c27 {
+      .c25 {
         color: #ffffff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c18 {
+      .c15 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c21 {
+      .c18 {
         margin-left: 4px;
       }
 
-      .c8 {
+      .c5 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -361,12 +348,12 @@ describe('MediaLibrary / AssetList', () => {
         cursor: pointer;
       }
 
-      .c8:checked {
+      .c5:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c8:checked:after {
+      .c5:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -380,21 +367,21 @@ describe('MediaLibrary / AssetList', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c8:checked:disabled:after {
+      .c5:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c8:disabled {
+      .c5:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c8:indeterminate {
+      .c5:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c8:indeterminate:after {
+      .c5:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -409,16 +396,16 @@ describe('MediaLibrary / AssetList', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c8:indeterminate:disabled {
+      .c5:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c8:indeterminate:disabled:after {
+      .c5:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c13 {
+      .c10 {
         word-break: break-all;
       }
 
@@ -427,36 +414,36 @@ describe('MediaLibrary / AssetList', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c26 {
+      .c24 {
         position: absolute;
         bottom: 4px;
         right: 4px;
       }
 
-      .c17 {
+      .c14 {
         text-transform: uppercase;
       }
 
-      .c28 {
+      .c26 {
         text-transform: uppercase;
       }
 
-      .c23 canvas,
-      .c23 video {
+      .c21 canvas,
+      .c21 video {
         display: block;
         max-width: 100%;
         max-height: 10.25rem;
       }
 
-      .c33 {
+      .c31 {
         text-transform: uppercase;
       }
 
-      .c32 svg {
+      .c30 svg {
         font-size: 3rem;
       }
 
-      .c31 {
+      .c29 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -483,49 +470,49 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4 c5 c6 c7"
+                  class="c4"
                 >
                   <input
                     aria-labelledby="card-1-title"
-                    class="c8"
+                    class="c5"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c9"
+                  class="c6"
                 >
                   <img
                     alt="strapi-cover_1fabc982ce.png"
                     aria-hidden="true"
-                    class="c10"
+                    class="c7"
                     src="http://localhost:1337/uploads/thumbnail_strapi_cover_1fabc982ce_5b43615ed5.png?width=1066&height=551"
                   />
                 </div>
               </div>
               <div
-                class="c11"
+                class="c8"
               >
                 <div
-                  class="c12"
+                  class="c9"
                 >
                   <div
-                    class="c13"
+                    class="c10"
                   >
                     <div
-                      class="c14"
+                      class="c11"
                     >
                       <h2
-                        class="c15"
+                        class="c12"
                         id="card-1-title"
                       >
                         strapi-cover_1fabc982ce.png
                       </h2>
                     </div>
                     <div
-                      class="c16"
+                      class="c13"
                     >
                       <span
-                        class="c17"
+                        class="c14"
                       >
                         png
                       </span>
@@ -533,13 +520,13 @@ describe('MediaLibrary / AssetList', () => {
                     </div>
                   </div>
                   <div
-                    class="c18"
+                    class="c15"
                   >
                     <div
-                      class="c19 c20 c21"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c22"
+                        class="c19"
                       >
                         Image
                       </span>
@@ -557,22 +544,22 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4 c5 c6 c7"
+                  class="c4"
                 >
                   <input
                     aria-labelledby="card-2-title"
-                    class="c8"
+                    class="c5"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c9"
+                  class="c6"
                 >
                   <div
-                    class="c5"
+                    class="c20"
                   >
                     <div
-                      class="c23"
+                      class="c21"
                     >
                       <figure
                         class=""
@@ -586,7 +573,7 @@ describe('MediaLibrary / AssetList', () => {
                           />
                         </video>
                         <figcaption
-                          class="c24"
+                          class="c22"
                         >
                           mov_bbb.mp4
                         </figcaption>
@@ -595,52 +582,52 @@ describe('MediaLibrary / AssetList', () => {
                   </div>
                 </div>
                 <time
-                  class="c25 c26"
+                  class="c23 c24"
                 >
                   <span
-                    class="c27"
+                    class="c25"
                   >
                     ...
                   </span>
                 </time>
               </div>
               <div
-                class="c11"
+                class="c8"
               >
                 <div
-                  class="c12"
+                  class="c9"
                 >
                   <div
-                    class="c13"
+                    class="c10"
                   >
                     <div
-                      class="c14"
+                      class="c11"
                     >
                       <h2
-                        class="c15"
+                        class="c12"
                         id="card-2-title"
                       >
                         mov_bbb.mp4
                       </h2>
                     </div>
                     <div
-                      class="c16"
+                      class="c13"
                     >
                       <span
-                        class="c28"
+                        class="c26"
                       >
                         mp4
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c18"
+                    class="c15"
                   >
                     <div
-                      class="c19 c20 c21"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c22"
+                        class="c19"
                       >
                         Video
                       </span>
@@ -658,21 +645,21 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4 c5 c6 c7"
+                  class="c4"
                 >
                   <input
                     aria-labelledby="card-3-title"
-                    class="c8"
+                    class="c5"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c29 c30 c31"
+                  class="c27 c28 c29"
                   height="10.25rem"
                   width="100%"
                 >
                   <span
-                    class="c32"
+                    class="c30"
                   >
                     <svg
                       aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -697,42 +684,42 @@ describe('MediaLibrary / AssetList', () => {
                 </div>
               </div>
               <div
-                class="c11"
+                class="c8"
               >
                 <div
-                  class="c12"
+                  class="c9"
                 >
                   <div
-                    class="c13"
+                    class="c10"
                   >
                     <div
-                      class="c14"
+                      class="c11"
                     >
                       <h2
-                        class="c15"
+                        class="c12"
                         id="card-3-title"
                       >
                         CARTE MARIAGE AVS - Printemps.pdf
                       </h2>
                     </div>
                     <div
-                      class="c16"
+                      class="c13"
                     >
                       <span
-                        class="c33"
+                        class="c31"
                       >
                         pdf
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c18"
+                    class="c15"
                   >
                     <div
-                      class="c19 c20 c21"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c22"
+                        class="c19"
                       >
                         Doc
                       </span>
@@ -762,7 +749,7 @@ describe('MediaLibrary / AssetList', () => {
           </div>
         </div>
         <div
-          class="c34"
+          class="c32"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
index 1c64ca081d..5175cf89b7 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
@@ -887,7 +887,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 
 .c13 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c15 {
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
index 1c64ca081d..5175cf89b7 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
@@ -887,7 +887,6 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 
 .c13 {
   grid-column: span 6;
-  max-width: 100%;
 }
 
 .c15 {
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
index 6ab664ba77..d368d8daef 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
-.c16 {
+.c15 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,12 +13,12 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c10 {
+.c9 {
   width: 100%;
   height: 100%;
 }
 
-.c11 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,25 +36,25 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c12 {
+.c11 {
   color: #4945ff;
   margin-bottom: 12px;
   width: 30px;
   height: 24px;
 }
 
-.c13 path {
+.c12 path {
   fill: #4945ff;
 }
 
-.c14 {
+.c13 {
   font-weight: 600;
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c2 {
+.c1 {
   background: #f6f6f9;
   padding: 8px;
   border-radius: 4px;
@@ -62,28 +62,28 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   border: 1px solid #dcdce4;
 }
 
-.c3 {
+.c2 {
   position: relative;
 }
 
-.c5 {
+.c4 {
   padding-right: 8px;
   padding-left: 8px;
   width: 100%;
 }
 
-.c7 {
+.c6 {
   height: 124px;
 }
 
-.c1 {
+.c0 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -101,43 +101,24 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c3 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
 }
 
-.c6 {
+.c5 {
   grid-area: slides;
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c0 > * + * {
-  margin-top: 4px;
-}
-
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c15 {
+.c14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -146,80 +127,76 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
 
 <body>
   <div>
-    <div
+    <label
       class="c0"
+      for="carouselinput-1"
+    >
+      default
+    </label>
+    <div
+      class=""
+      id="carouselinput-1"
     >
-      <label
-        class="c1"
-        for="carouselinput-1"
-      >
-        default
-      </label>
       <div
-        class=""
-        id="carouselinput-1"
+        class="c1"
       >
-        <div
-          class="c2"
+        <section
+          aria-label="default"
+          aria-roledescription="carousel"
+          class="c2 c3"
         >
-          <section
-            aria-label="default"
-            aria-roledescription="carousel"
-            class="c3 c4"
+          <div
+            aria-live="polite"
+            class="c4 c5"
+            width="100%"
           >
             <div
-              aria-live="polite"
-              class="c5 c6"
-              width="100%"
+              aria-label="upload.mediaLibraryInput.slideCount"
+              aria-roledescription="slide"
+              class="c6 c7 c8"
+              height="124px"
+              role="group"
             >
-              <div
-                aria-label="upload.mediaLibraryInput.slideCount"
-                aria-roledescription="slide"
-                class="c7 c8 c9"
-                height="124px"
-                role="group"
+              <button
+                class="c9 c10"
+                height="100%"
+                style="cursor: pointer;"
+                type="button"
+                width="100%"
               >
-                <button
-                  class="c10 c11"
-                  height="100%"
-                  style="cursor: pointer;"
-                  type="button"
-                  width="100%"
+                <svg
+                  aria-hidden="true"
+                  class="c11 c12"
+                  fill="none"
+                  height="24px"
+                  viewBox="0 0 24 20"
+                  width="30px"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="c12 c13"
-                    fill="none"
-                    height="24px"
-                    viewBox="0 0 24 20"
-                    width="30px"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M21.525 2.394H7.814v1.582h13.711c.47 0 .824.498.824 1.091v9.834l-2.785-3.165c-.2-.233-.453-.42-.738-.549a2.21 2.21 0 00-.91-.194 2.209 2.209 0 00-.91.19 2.126 2.126 0 00-.739.545l-2.925 3.378-2.967-3.354a2.143 2.143 0 00-.739-.543 2.226 2.226 0 00-.909-.193c-.315.002-.626.07-.911.2-.285.13-.536.318-.737.552l-2.925 3.425V7.637H2.505v9.874c.023.153.059.304.107.451v.127l.042.095c.056.142.125.28.206.411l.099.15c.074.106.157.207.247.301l.123.119c.13.118.274.221.429.308h.025c.358.214.772.327 1.195.325h16.481a2.47 2.47 0 001.037-.239c.322-.153.605-.375.826-.648.222-.263.392-.564.502-.886.067-.216.108-.439.124-.664V5.067a2.493 2.493 0 00-.65-1.805 2.7 2.7 0 00-1.773-.868z"
-                      fill="#32324D"
-                    />
-                    <path
-                      d="M12.526 9.18c.91 0 1.648-.708 1.648-1.582 0-.874-.738-1.582-1.648-1.582-.91 0-1.648.708-1.648 1.582 0 .874.738 1.582 1.648 1.582zM3.297 6.395h.823V3.988h2.473v-.79-.792H4.12V0h-.823c-.219 0-.849.002-.825 0v2.406H0v1.582h2.472v2.407h.825z"
-                      fill="#32324D"
-                    />
-                  </svg>
-                  <span
-                    class="c14 c15"
-                    style="text-align: center;"
-                  >
-                    upload.mediaLibraryInput.placeholder
-                  </span>
-                </button>
-              </div>
+                  <path
+                    d="M21.525 2.394H7.814v1.582h13.711c.47 0 .824.498.824 1.091v9.834l-2.785-3.165c-.2-.233-.453-.42-.738-.549a2.21 2.21 0 00-.91-.194 2.209 2.209 0 00-.91.19 2.126 2.126 0 00-.739.545l-2.925 3.378-2.967-3.354a2.143 2.143 0 00-.739-.543 2.226 2.226 0 00-.909-.193c-.315.002-.626.07-.911.2-.285.13-.536.318-.737.552l-2.925 3.425V7.637H2.505v9.874c.023.153.059.304.107.451v.127l.042.095c.056.142.125.28.206.411l.099.15c.074.106.157.207.247.301l.123.119c.13.118.274.221.429.308h.025c.358.214.772.327 1.195.325h16.481a2.47 2.47 0 001.037-.239c.322-.153.605-.375.826-.648.222-.263.392-.564.502-.886.067-.216.108-.439.124-.664V5.067a2.493 2.493 0 00-.65-1.805 2.7 2.7 0 00-1.773-.868z"
+                    fill="#32324D"
+                  />
+                  <path
+                    d="M12.526 9.18c.91 0 1.648-.708 1.648-1.582 0-.874-.738-1.582-1.648-1.582-.91 0-1.648.708-1.648 1.582 0 .874.738 1.582 1.648 1.582zM3.297 6.395h.823V3.988h2.473v-.79-.792H4.12V0h-.823c-.219 0-.849.002-.825 0v2.406H0v1.582h2.472v2.407h.825z"
+                    fill="#32324D"
+                  />
+                </svg>
+                <span
+                  class="c13 c14"
+                  style="text-align: center;"
+                >
+                  upload.mediaLibraryInput.placeholder
+                </span>
+              </button>
             </div>
-          </section>
-        </div>
+          </div>
+        </section>
       </div>
     </div>
   </div>
   <div
-    class="c16"
+    class="c15"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
index 045a71f8ad..e52328892b 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
@@ -486,7 +486,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
 
 .c18 {
   grid-column: span 4;
-  max-width: 100%;
 }
 
 .c27 {
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
index 0205837e28..55dc5009af 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
@@ -420,7 +420,6 @@ describe('Upload | SettingsPage', () => {
 
       .c23 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c1 {
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index e0acc4c418..7c1656843a 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -783,17 +783,14 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
 
       .c18 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c32 {
         grid-column: span 12;
-        max-width: 100%;
       }
 
       .c48 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index 17d936e519..630042125a 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -665,17 +665,14 @@ describe('Admin | containers | RoleCreatePage', () => {
 
       .c19 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c34 {
         grid-column: span 7;
-        max-width: 100%;
       }
 
       .c59 {
         grid-column: span 5;
-        max-width: 100%;
       }
 
       .c51 {
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index 08494a258a..fecb418c70 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -737,17 +737,14 @@ describe('Admin | containers | RoleEditPage', () => {
 
       .c24 {
         grid-column: span 6;
-        max-width: 100%;
       }
 
       .c39 {
         grid-column: span 7;
-        max-width: 100%;
       }
 
       .c64 {
         grid-column: span 5;
-        max-width: 100%;
       }
 
       .c56 {

From 57eedcdc982add10b5a2743205478929b11f2a58 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Fri, 11 Feb 2022 13:29:50 +0100
Subject: [PATCH 6/8] AssetCard: update card actions to use the latest
 design-system

---
 .../admin/src/components/AssetCard/ImageAssetCard.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
index 4d25fc531f..97d1cf0ca4 100644
--- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
@@ -24,14 +24,6 @@ const Extension = styled.span`
   text-transform: uppercase;
 `;
 
-const CardActions = styled(CardAction)`
-  display: flex;
-
-  > * + * {
-    margin-left: ${({ theme }) => theme.spaces[2]};
-  }
-`;
-
 export const ImageAssetCard = ({
   name,
   extension,
@@ -57,7 +49,7 @@ export const ImageAssetCard = ({
       <CardHeader>
         {onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
         {(onRemove || onEdit) && (
-          <CardActions position="end">
+          <CardAction position="end">
             {onRemove && (
               <IconButton
                 label={formatMessage({
@@ -76,7 +68,7 @@ export const ImageAssetCard = ({
                 onClick={onEdit}
               />
             )}
-          </CardActions>
+          </CardAction>
         )}
         <CardAsset src={optimizedCachingThumbnail} size={size} alt={alt} />
       </CardHeader>

From 150a7b94cc2438771d9df5670ae3cabb77998d5e Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Fri, 11 Feb 2022 14:34:34 +0100
Subject: [PATCH 7/8] AssetCard: Update snapshot tests

---
 .../tests/__snapshots__/index.test.js.snap    |  12 +
 .../tests/__snapshots__/index.test.js.snap    |   4 +
 .../components/Register/tests/index.test.js   |   1 +
 .../src/pages/HomePage/tests/index.test.js    |   3 +
 .../src/pages/ProfilePage/tests/index.test.js |   1 +
 .../ApplicationInfosPage/tests/index.test.js  |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   1 +
 .../SingleSignOn/tests/index.test.js          |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   1 +
 .../src/pages/Settings/tests/index.test.js    |   2 +
 .../AssetCard/tests/DocAssetCard.test.js      | 175 ++++++++------
 .../AssetCard/tests/ImageAssetCard.test.js    | 182 ++++++++-------
 .../AssetList/tests/AssetList.test.js         | 213 ++++++++++--------
 .../EditAssetDialog.test.js.snap              |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   1 +
 .../MediaLibraryInput.test.js.snap            | 165 ++++++++------
 .../PendingAssetStep.test.js.snap             |   1 +
 .../pages/SettingsPage/tests/index.test.js    |   1 +
 .../AdvancedSettings/tests/index.test.js      |   3 +
 .../Roles/CreatePage/tests/index.test.js      |   3 +
 .../pages/Roles/EditPage/tests/index.test.js  |   3 +
 21 files changed, 451 insertions(+), 324 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
index 5af23af0e6..a58a94ec62 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
@@ -799,18 +799,22 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
 
 .c23 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
+  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
+  max-width: 100%;
 }
 
 .c38 {
@@ -2665,18 +2669,22 @@ exports[`EditSettingsView should add field 1`] = `
 
 .c23 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
+  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
+  max-width: 100%;
 }
 
 .c38 {
@@ -5024,18 +5032,22 @@ exports[`EditSettingsView should add relation 1`] = `
 
 .c23 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c41 {
   grid-column: span 8;
+  max-width: 100%;
 }
 
 .c53 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c70 {
   grid-column: span 4;
+  max-width: 100%;
 }
 
 .c38 {
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
index 290c76b780..933b5cb429 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
@@ -838,10 +838,12 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
 
 .c46 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c60 {
   grid-column: span 3;
+  max-width: 100%;
 }
 
 .c28 {
@@ -2642,10 +2644,12 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
 
 .c46 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c60 {
   grid-column: span 3;
+  max-width: 100%;
 }
 
 .c28 {
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
index 2bd494de29..45abca5162 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
@@ -556,6 +556,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
 
       .c23 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c17 {
diff --git a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
index b8528b41ac..4278cd8fb2 100644
--- a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
@@ -372,14 +372,17 @@ describe('Homepage', () => {
 
       .c7 {
         grid-column: span 8;
+        max-width: 100%;
       }
 
       .c33 {
         grid-column: span 4;
+        max-width: 100%;
       }
 
       .c43 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c50 {
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
index 74488efda5..e93404ac27 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
@@ -700,6 +700,7 @@ describe('ADMIN | Pages | Profile page', () => {
 
       .c20 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c30::-ms-reveal {
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index 0708c64e7c..d971195f10 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -174,6 +174,7 @@ describe('Application page', () => {
 
       .c15 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c19 {
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index 6025252531..733a4a8678 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -767,6 +767,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 
 .c27 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
index 7f03f6a8fa..4c0515308c 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
@@ -598,6 +598,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
 
       .c21 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index 6f47446fa0..1a374a10e5 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -683,6 +683,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 
 .c27 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c0:focus-visible {
diff --git a/packages/core/email/admin/src/pages/Settings/tests/index.test.js b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
index 2409149dd2..6192c3cce8 100644
--- a/packages/core/email/admin/src/pages/Settings/tests/index.test.js
+++ b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
@@ -668,10 +668,12 @@ describe('Email | Pages | Settings', () => {
 
       .c14 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c35 {
         grid-column: span 7;
+        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
index 4a5f4edd5c..69fae232a2 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c24 {
+      .c28 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -47,32 +47,28 @@ describe('DocAssetCard', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c12 {
+      .c3 {
+        position: start;
+      }
+
+      .c8 {
+        position: end;
+      }
+
+      .c16 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c20 {
+      .c24 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
-      .c3 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c5 {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-      }
-
       .c1 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -91,7 +87,21 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c13 {
+      .c4 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c17 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -105,7 +115,7 @@ describe('DocAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c21 {
+      .c25 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -123,20 +133,41 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c16 {
+      .c5 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c5 > * + * {
+        margin-left: 8px;
+      }
+
+      .c6 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c9 {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
+      .c20 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c17 {
+      .c21 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c23 {
+      .c27 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -144,18 +175,18 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c19 {
+      .c23 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c22 {
+      .c26 {
         margin-left: 4px;
       }
 
-      .c4 {
+      .c7 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -166,12 +197,12 @@ describe('DocAssetCard', () => {
         cursor: pointer;
       }
 
-      .c4:checked {
+      .c7:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c4:checked:after {
+      .c7:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -185,21 +216,21 @@ describe('DocAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c4:checked:disabled:after {
+      .c7:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c4:disabled {
+      .c7:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c4:indeterminate {
+      .c7:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c4:indeterminate:after {
+      .c7:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -214,16 +245,16 @@ describe('DocAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c4:indeterminate:disabled {
+      .c7:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c4:indeterminate:disabled:after {
+      .c7:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c14 {
+      .c18 {
         word-break: break-all;
       }
 
@@ -232,16 +263,16 @@ describe('DocAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c15 {
+      .c19 {
         padding-top: 4px;
       }
 
-      .c8 {
+      .c12 {
         width: 100%;
         height: 5.5rem;
       }
 
-      .c9 {
+      .c13 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -259,7 +290,7 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c6 {
+      .c10 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -273,21 +304,21 @@ describe('DocAssetCard', () => {
         outline: none;
       }
 
-      .c6 svg {
+      .c10 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c6 svg > g,
-      .c6 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c6[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c6:after {
+      .c10:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -302,11 +333,11 @@ describe('DocAssetCard', () => {
         border: 2px solid transparent;
       }
 
-      .c6:focus-visible {
+      .c10:focus-visible {
         outline: none;
       }
 
-      .c6:focus-visible:after {
+      .c10:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -317,7 +348,7 @@ describe('DocAssetCard', () => {
         border: 2px solid #4945ff;
       }
 
-      .c7 {
+      .c11 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -334,38 +365,38 @@ describe('DocAssetCard', () => {
         width: 2rem;
       }
 
-      .c7 svg > g,
-      .c7 svg path {
+      .c11 svg > g,
+      .c11 svg path {
         fill: #8e8ea9;
       }
 
-      .c7:hover svg > g,
-      .c7:hover svg path {
+      .c11:hover svg > g,
+      .c11:hover svg path {
         fill: #666687;
       }
 
-      .c7:active svg > g,
-      .c7:active svg path {
+      .c11:active svg > g,
+      .c11:active svg path {
         fill: #a5a5ba;
       }
 
-      .c7[aria-disabled='true'] {
+      .c11[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c7[aria-disabled='true'] svg path {
+      .c11[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c18 {
+      .c22 {
         text-transform: uppercase;
       }
 
-      .c11 svg {
+      .c15 svg {
         font-size: 3rem;
       }
 
-      .c10 {
+      .c14 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -380,22 +411,22 @@ describe('DocAssetCard', () => {
             class="c1 c2"
           >
             <div
-              class="c3"
+              class="c3 c4 c5 c6"
             >
               <input
                 aria-labelledby="card-1-title"
-                class="c4"
+                class="c7"
                 type="checkbox"
               />
             </div>
             <div
-              class="c5"
+              class="c8 c4 c5 c9"
             >
               <span>
                 <button
                   aria-disabled="false"
                   aria-labelledby="tooltip-1"
-                  class="c6 c7"
+                  class="c10 c11"
                   tabindex="0"
                   type="button"
                 >
@@ -417,12 +448,12 @@ describe('DocAssetCard', () => {
               </span>
             </div>
             <div
-              class="c8 c9 c10"
+              class="c12 c13 c14"
               height="5.5rem"
               width="100%"
             >
               <span
-                class="c11"
+                class="c15"
               >
                 <svg
                   aria-label="hello.png"
@@ -443,42 +474,42 @@ describe('DocAssetCard', () => {
             </div>
           </div>
           <div
-            class="c12"
+            class="c16"
           >
             <div
-              class="c13"
+              class="c17"
             >
               <div
-                class="c14"
+                class="c18"
               >
                 <div
-                  class="c15"
+                  class="c19"
                 >
                   <h2
-                    class="c16"
+                    class="c20"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c17"
+                  class="c21"
                 >
                   <span
-                    class="c18"
+                    class="c22"
                   >
                     png
                   </span>
                 </div>
               </div>
               <div
-                class="c19"
+                class="c23"
               >
                 <div
-                  class="c20 c21 c22"
+                  class="c24 c25 c26"
                 >
                   <span
-                    class="c23"
+                    class="c27"
                   >
                     Doc
                   </span>
@@ -488,7 +519,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c24"
+          class="c28"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
index 2ff6176d69..8a7d56c3ec 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
@@ -31,7 +31,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c23 {
+      .c26 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -43,7 +43,7 @@ describe('ImageAssetCard', () => {
         width: 1px;
       }
 
-      .c14 {
+      .c17 {
         padding-top: 4px;
       }
 
@@ -53,32 +53,28 @@ describe('ImageAssetCard', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c11 {
+      .c3 {
+        position: start;
+      }
+
+      .c8 {
+        position: end;
+      }
+
+      .c14 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c19 {
+      .c22 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
-      .c3 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c5 {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-      }
-
       .c1 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -97,7 +93,21 @@ describe('ImageAssetCard', () => {
         align-items: center;
       }
 
-      .c12 {
+      .c4 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c15 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -111,7 +121,7 @@ describe('ImageAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c20 {
+      .c23 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -129,14 +139,35 @@ describe('ImageAssetCard', () => {
         align-items: center;
       }
 
-      .c10 {
+      .c5 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c5 > * + * {
+        margin-left: 8px;
+      }
+
+      .c6 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c9 {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
+      .c13 {
         margin: 0;
         padding: 0;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .c9 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -150,20 +181,20 @@ describe('ImageAssetCard', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c15 {
+      .c18 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c16 {
+      .c19 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c22 {
+      .c25 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -171,18 +202,18 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c18 {
+      .c21 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c21 {
+      .c24 {
         margin-left: 4px;
       }
 
-      .c4 {
+      .c7 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -193,12 +224,12 @@ describe('ImageAssetCard', () => {
         cursor: pointer;
       }
 
-      .c4:checked {
+      .c7:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c4:checked:after {
+      .c7:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -212,21 +243,21 @@ describe('ImageAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c4:checked:disabled:after {
+      .c7:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c4:disabled {
+      .c7:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c4:indeterminate {
+      .c7:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c4:indeterminate:after {
+      .c7:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -241,16 +272,16 @@ describe('ImageAssetCard', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c4:indeterminate:disabled {
+      .c7:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c4:indeterminate:disabled:after {
+      .c7:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c13 {
+      .c16 {
         word-break: break-all;
       }
 
@@ -259,7 +290,7 @@ describe('ImageAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c7 {
+      .c10 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -273,21 +304,21 @@ describe('ImageAssetCard', () => {
         outline: none;
       }
 
-      .c7 svg {
+      .c10 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c7 svg > g,
-      .c7 svg path {
+      .c10 svg > g,
+      .c10 svg path {
         fill: #ffffff;
       }
 
-      .c7[aria-disabled='true'] {
+      .c10[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c7:after {
+      .c10:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -302,11 +333,11 @@ describe('ImageAssetCard', () => {
         border: 2px solid transparent;
       }
 
-      .c7:focus-visible {
+      .c10:focus-visible {
         outline: none;
       }
 
-      .c7:focus-visible:after {
+      .c10:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -317,7 +348,7 @@ describe('ImageAssetCard', () => {
         border: 2px solid #4945ff;
       }
 
-      .c8 {
+      .c11 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -334,44 +365,33 @@ describe('ImageAssetCard', () => {
         width: 2rem;
       }
 
-      .c8 svg > g,
-      .c8 svg path {
+      .c11 svg > g,
+      .c11 svg path {
         fill: #8e8ea9;
       }
 
-      .c8:hover svg > g,
-      .c8:hover svg path {
+      .c11:hover svg > g,
+      .c11:hover svg path {
         fill: #666687;
       }
 
-      .c8:active svg > g,
-      .c8:active svg path {
+      .c11:active svg > g,
+      .c11:active svg path {
         fill: #a5a5ba;
       }
 
-      .c8[aria-disabled='true'] {
+      .c11[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c8[aria-disabled='true'] svg path {
+      .c11[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c17 {
+      .c20 {
         text-transform: uppercase;
       }
 
-      .c6 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-      }
-
-      .c6 > * + * {
-        margin-left: 8px;
-      }
-
       <div>
         <article
           aria-labelledby="card-1-title"
@@ -382,22 +402,22 @@ describe('ImageAssetCard', () => {
             class="c1 c2"
           >
             <div
-              class="c3"
+              class="c3 c4 c5 c6"
             >
               <input
                 aria-labelledby="card-1-title"
-                class="c4"
+                class="c7"
                 type="checkbox"
               />
             </div>
             <div
-              class="c5 c6"
+              class="c8 c4 c5 c9"
             >
               <span>
                 <button
                   aria-disabled="false"
                   aria-labelledby="tooltip-1"
-                  class="c7 c8"
+                  class="c10 c11"
                   tabindex="0"
                   type="button"
                 >
@@ -419,39 +439,39 @@ describe('ImageAssetCard', () => {
               </span>
             </div>
             <div
-              class="c9"
+              class="c12"
             >
               <img
                 aria-hidden="true"
-                class="c10"
+                class="c13"
                 src="http://somewhere.com/hello.png?width=40&height=40"
               />
             </div>
           </div>
           <div
-            class="c11"
+            class="c14"
           >
             <div
-              class="c12"
+              class="c15"
             >
               <div
-                class="c13"
+                class="c16"
               >
                 <div
-                  class="c14"
+                  class="c17"
                 >
                   <h2
-                    class="c15"
+                    class="c18"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
                 </div>
                 <div
-                  class="c16"
+                  class="c19"
                 >
                   <span
-                    class="c17"
+                    class="c20"
                   >
                     png
                   </span>
@@ -459,13 +479,13 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c18"
+                class="c21"
               >
                 <div
-                  class="c19 c20 c21"
+                  class="c22 c23 c24"
                 >
                   <span
-                    class="c22"
+                    class="c25"
                   >
                     Image
                   </span>
@@ -475,7 +495,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c23"
+          class="c26"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js b/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
index bea00c3501..13b1583e21 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
+++ b/packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js
@@ -130,7 +130,7 @@ describe('MediaLibrary / AssetList', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c32 {
+      .c34 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -142,16 +142,16 @@ describe('MediaLibrary / AssetList', () => {
         width: 1px;
       }
 
-      .c11 {
+      .c14 {
         padding-top: 4px;
       }
 
-      .c27 {
+      .c29 {
         width: 100%;
         height: 10.25rem;
       }
 
-      .c28 {
+      .c30 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -169,7 +169,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c22 {
+      .c24 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -187,33 +187,31 @@ describe('MediaLibrary / AssetList', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c8 {
+      .c4 {
+        position: start;
+      }
+
+      .c11 {
         padding-top: 8px;
         padding-right: 12px;
         padding-bottom: 8px;
         padding-left: 12px;
       }
 
-      .c16 {
+      .c19 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
-      .c23 {
+      .c25 {
         background: #32324d;
         color: #ffffff;
         padding: 4px;
         border-radius: 4px;
       }
 
-      .c4 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
       .c2 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -232,7 +230,21 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c9 {
+      .c5 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -246,7 +258,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: flex-start;
       }
 
-      .c17 {
+      .c20 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -264,28 +276,29 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c20 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
+      .c6 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c6 > * + * {
+        margin-left: 8px;
       }
 
       .c7 {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+      }
+
+      .c10 {
         margin: 0;
         padding: 0;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .c6 {
+      .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -299,20 +312,20 @@ describe('MediaLibrary / AssetList', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c12 {
+      .c15 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c13 {
+      .c16 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c19 {
+      .c22 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -320,24 +333,24 @@ describe('MediaLibrary / AssetList', () => {
         text-transform: uppercase;
       }
 
-      .c25 {
+      .c27 {
         color: #ffffff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c15 {
+      .c18 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c18 {
+      .c21 {
         margin-left: 4px;
       }
 
-      .c5 {
+      .c8 {
         margin: 0;
         height: 18px;
         min-width: 18px;
@@ -348,12 +361,12 @@ describe('MediaLibrary / AssetList', () => {
         cursor: pointer;
       }
 
-      .c5:checked {
+      .c8:checked {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c5:checked:after {
+      .c8:checked:after {
         content: '';
         display: block;
         position: relative;
@@ -367,21 +380,21 @@ describe('MediaLibrary / AssetList', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c5:checked:disabled:after {
+      .c8:checked:disabled:after {
         background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
       }
 
-      .c5:disabled {
+      .c8:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c5:indeterminate {
+      .c8:indeterminate {
         background-color: #4945ff;
         border: 1px solid #4945ff;
       }
 
-      .c5:indeterminate:after {
+      .c8:indeterminate:after {
         content: '';
         display: block;
         position: relative;
@@ -396,16 +409,16 @@ describe('MediaLibrary / AssetList', () => {
         transform: translateX(-50%) translateY(-50%);
       }
 
-      .c5:indeterminate:disabled {
+      .c8:indeterminate:disabled {
         background-color: #dcdce4;
         border: 1px solid #c0c0cf;
       }
 
-      .c5:indeterminate:disabled:after {
+      .c8:indeterminate:disabled:after {
         background-color: #8e8ea9;
       }
 
-      .c10 {
+      .c13 {
         word-break: break-all;
       }
 
@@ -414,36 +427,36 @@ describe('MediaLibrary / AssetList', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c24 {
+      .c26 {
         position: absolute;
         bottom: 4px;
         right: 4px;
       }
 
-      .c14 {
+      .c17 {
         text-transform: uppercase;
       }
 
-      .c26 {
+      .c28 {
         text-transform: uppercase;
       }
 
-      .c21 canvas,
-      .c21 video {
+      .c23 canvas,
+      .c23 video {
         display: block;
         max-width: 100%;
         max-height: 10.25rem;
       }
 
-      .c31 {
+      .c33 {
         text-transform: uppercase;
       }
 
-      .c30 svg {
+      .c32 svg {
         font-size: 3rem;
       }
 
-      .c29 {
+      .c31 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -470,49 +483,49 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4"
+                  class="c4 c5 c6 c7"
                 >
                   <input
                     aria-labelledby="card-1-title"
-                    class="c5"
+                    class="c8"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c6"
+                  class="c9"
                 >
                   <img
                     alt="strapi-cover_1fabc982ce.png"
                     aria-hidden="true"
-                    class="c7"
+                    class="c10"
                     src="http://localhost:1337/uploads/thumbnail_strapi_cover_1fabc982ce_5b43615ed5.png?width=1066&height=551"
                   />
                 </div>
               </div>
               <div
-                class="c8"
+                class="c11"
               >
                 <div
-                  class="c9"
+                  class="c12"
                 >
                   <div
-                    class="c10"
+                    class="c13"
                   >
                     <div
-                      class="c11"
+                      class="c14"
                     >
                       <h2
-                        class="c12"
+                        class="c15"
                         id="card-1-title"
                       >
                         strapi-cover_1fabc982ce.png
                       </h2>
                     </div>
                     <div
-                      class="c13"
+                      class="c16"
                     >
                       <span
-                        class="c14"
+                        class="c17"
                       >
                         png
                       </span>
@@ -520,13 +533,13 @@ describe('MediaLibrary / AssetList', () => {
                     </div>
                   </div>
                   <div
-                    class="c15"
+                    class="c18"
                   >
                     <div
-                      class="c16 c17 c18"
+                      class="c19 c20 c21"
                     >
                       <span
-                        class="c19"
+                        class="c22"
                       >
                         Image
                       </span>
@@ -544,22 +557,22 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4"
+                  class="c4 c5 c6 c7"
                 >
                   <input
                     aria-labelledby="card-2-title"
-                    class="c5"
+                    class="c8"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c6"
+                  class="c9"
                 >
                   <div
-                    class="c20"
+                    class="c5"
                   >
                     <div
-                      class="c21"
+                      class="c23"
                     >
                       <figure
                         class=""
@@ -573,7 +586,7 @@ describe('MediaLibrary / AssetList', () => {
                           />
                         </video>
                         <figcaption
-                          class="c22"
+                          class="c24"
                         >
                           mov_bbb.mp4
                         </figcaption>
@@ -582,52 +595,52 @@ describe('MediaLibrary / AssetList', () => {
                   </div>
                 </div>
                 <time
-                  class="c23 c24"
+                  class="c25 c26"
                 >
                   <span
-                    class="c25"
+                    class="c27"
                   >
                     ...
                   </span>
                 </time>
               </div>
               <div
-                class="c8"
+                class="c11"
               >
                 <div
-                  class="c9"
+                  class="c12"
                 >
                   <div
-                    class="c10"
+                    class="c13"
                   >
                     <div
-                      class="c11"
+                      class="c14"
                     >
                       <h2
-                        class="c12"
+                        class="c15"
                         id="card-2-title"
                       >
                         mov_bbb.mp4
                       </h2>
                     </div>
                     <div
-                      class="c13"
+                      class="c16"
                     >
                       <span
-                        class="c26"
+                        class="c28"
                       >
                         mp4
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c15"
+                    class="c18"
                   >
                     <div
-                      class="c16 c17 c18"
+                      class="c19 c20 c21"
                     >
                       <span
-                        class="c19"
+                        class="c22"
                       >
                         Video
                       </span>
@@ -645,21 +658,21 @@ describe('MediaLibrary / AssetList', () => {
                 class="c2 c3"
               >
                 <div
-                  class="c4"
+                  class="c4 c5 c6 c7"
                 >
                   <input
                     aria-labelledby="card-3-title"
-                    class="c5"
+                    class="c8"
                     type="checkbox"
                   />
                 </div>
                 <div
-                  class="c27 c28 c29"
+                  class="c29 c30 c31"
                   height="10.25rem"
                   width="100%"
                 >
                   <span
-                    class="c30"
+                    class="c32"
                   >
                     <svg
                       aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -684,42 +697,42 @@ describe('MediaLibrary / AssetList', () => {
                 </div>
               </div>
               <div
-                class="c8"
+                class="c11"
               >
                 <div
-                  class="c9"
+                  class="c12"
                 >
                   <div
-                    class="c10"
+                    class="c13"
                   >
                     <div
-                      class="c11"
+                      class="c14"
                     >
                       <h2
-                        class="c12"
+                        class="c15"
                         id="card-3-title"
                       >
                         CARTE MARIAGE AVS - Printemps.pdf
                       </h2>
                     </div>
                     <div
-                      class="c13"
+                      class="c16"
                     >
                       <span
-                        class="c31"
+                        class="c33"
                       >
                         pdf
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c15"
+                    class="c18"
                   >
                     <div
-                      class="c16 c17 c18"
+                      class="c19 c20 c21"
                     >
                       <span
-                        class="c19"
+                        class="c22"
                       >
                         Doc
                       </span>
@@ -749,7 +762,7 @@ describe('MediaLibrary / AssetList', () => {
           </div>
         </div>
         <div
-          class="c32"
+          class="c34"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
index 5175cf89b7..1c64ca081d 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
@@ -887,6 +887,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 
 .c13 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c15 {
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
index 5175cf89b7..1c64ca081d 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
@@ -887,6 +887,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
 
 .c13 {
   grid-column: span 6;
+  max-width: 100%;
 }
 
 .c15 {
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
index d368d8daef..6ab664ba77 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/__snapshots__/MediaLibraryInput.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
-.c15 {
+.c16 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,12 +13,12 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c9 {
+.c10 {
   width: 100%;
   height: 100%;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,25 +36,25 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c11 {
+.c12 {
   color: #4945ff;
   margin-bottom: 12px;
   width: 30px;
   height: 24px;
 }
 
-.c12 path {
+.c13 path {
   fill: #4945ff;
 }
 
-.c13 {
+.c14 {
   font-weight: 600;
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c1 {
+.c2 {
   background: #f6f6f9;
   padding: 8px;
   border-radius: 4px;
@@ -62,28 +62,28 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   border: 1px solid #dcdce4;
 }
 
-.c2 {
+.c3 {
   position: relative;
 }
 
-.c4 {
+.c5 {
   padding-right: 8px;
   padding-left: 8px;
   width: 100%;
 }
 
-.c6 {
+.c7 {
   height: 124px;
 }
 
-.c0 {
+.c1 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -101,24 +101,43 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c3 {
+.c4 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
 }
 
-.c5 {
+.c6 {
   grid-area: slides;
 }
 
-.c8 {
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c0 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c0 > * + * {
+  margin-top: 4px;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -127,76 +146,80 @@ exports[`<MediaLibraryInput /> renders and matches the snapshot 1`] = `
 
 <body>
   <div>
-    <label
-      class="c0"
-      for="carouselinput-1"
-    >
-      default
-    </label>
     <div
-      class=""
-      id="carouselinput-1"
+      class="c0"
     >
-      <div
+      <label
         class="c1"
+        for="carouselinput-1"
       >
-        <section
-          aria-label="default"
-          aria-roledescription="carousel"
-          class="c2 c3"
+        default
+      </label>
+      <div
+        class=""
+        id="carouselinput-1"
+      >
+        <div
+          class="c2"
         >
-          <div
-            aria-live="polite"
-            class="c4 c5"
-            width="100%"
+          <section
+            aria-label="default"
+            aria-roledescription="carousel"
+            class="c3 c4"
           >
             <div
-              aria-label="upload.mediaLibraryInput.slideCount"
-              aria-roledescription="slide"
-              class="c6 c7 c8"
-              height="124px"
-              role="group"
+              aria-live="polite"
+              class="c5 c6"
+              width="100%"
             >
-              <button
-                class="c9 c10"
-                height="100%"
-                style="cursor: pointer;"
-                type="button"
-                width="100%"
+              <div
+                aria-label="upload.mediaLibraryInput.slideCount"
+                aria-roledescription="slide"
+                class="c7 c8 c9"
+                height="124px"
+                role="group"
               >
-                <svg
-                  aria-hidden="true"
-                  class="c11 c12"
-                  fill="none"
-                  height="24px"
-                  viewBox="0 0 24 20"
-                  width="30px"
-                  xmlns="http://www.w3.org/2000/svg"
+                <button
+                  class="c10 c11"
+                  height="100%"
+                  style="cursor: pointer;"
+                  type="button"
+                  width="100%"
                 >
-                  <path
-                    d="M21.525 2.394H7.814v1.582h13.711c.47 0 .824.498.824 1.091v9.834l-2.785-3.165c-.2-.233-.453-.42-.738-.549a2.21 2.21 0 00-.91-.194 2.209 2.209 0 00-.91.19 2.126 2.126 0 00-.739.545l-2.925 3.378-2.967-3.354a2.143 2.143 0 00-.739-.543 2.226 2.226 0 00-.909-.193c-.315.002-.626.07-.911.2-.285.13-.536.318-.737.552l-2.925 3.425V7.637H2.505v9.874c.023.153.059.304.107.451v.127l.042.095c.056.142.125.28.206.411l.099.15c.074.106.157.207.247.301l.123.119c.13.118.274.221.429.308h.025c.358.214.772.327 1.195.325h16.481a2.47 2.47 0 001.037-.239c.322-.153.605-.375.826-.648.222-.263.392-.564.502-.886.067-.216.108-.439.124-.664V5.067a2.493 2.493 0 00-.65-1.805 2.7 2.7 0 00-1.773-.868z"
-                    fill="#32324D"
-                  />
-                  <path
-                    d="M12.526 9.18c.91 0 1.648-.708 1.648-1.582 0-.874-.738-1.582-1.648-1.582-.91 0-1.648.708-1.648 1.582 0 .874.738 1.582 1.648 1.582zM3.297 6.395h.823V3.988h2.473v-.79-.792H4.12V0h-.823c-.219 0-.849.002-.825 0v2.406H0v1.582h2.472v2.407h.825z"
-                    fill="#32324D"
-                  />
-                </svg>
-                <span
-                  class="c13 c14"
-                  style="text-align: center;"
-                >
-                  upload.mediaLibraryInput.placeholder
-                </span>
-              </button>
+                  <svg
+                    aria-hidden="true"
+                    class="c12 c13"
+                    fill="none"
+                    height="24px"
+                    viewBox="0 0 24 20"
+                    width="30px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M21.525 2.394H7.814v1.582h13.711c.47 0 .824.498.824 1.091v9.834l-2.785-3.165c-.2-.233-.453-.42-.738-.549a2.21 2.21 0 00-.91-.194 2.209 2.209 0 00-.91.19 2.126 2.126 0 00-.739.545l-2.925 3.378-2.967-3.354a2.143 2.143 0 00-.739-.543 2.226 2.226 0 00-.909-.193c-.315.002-.626.07-.911.2-.285.13-.536.318-.737.552l-2.925 3.425V7.637H2.505v9.874c.023.153.059.304.107.451v.127l.042.095c.056.142.125.28.206.411l.099.15c.074.106.157.207.247.301l.123.119c.13.118.274.221.429.308h.025c.358.214.772.327 1.195.325h16.481a2.47 2.47 0 001.037-.239c.322-.153.605-.375.826-.648.222-.263.392-.564.502-.886.067-.216.108-.439.124-.664V5.067a2.493 2.493 0 00-.65-1.805 2.7 2.7 0 00-1.773-.868z"
+                      fill="#32324D"
+                    />
+                    <path
+                      d="M12.526 9.18c.91 0 1.648-.708 1.648-1.582 0-.874-.738-1.582-1.648-1.582-.91 0-1.648.708-1.648 1.582 0 .874.738 1.582 1.648 1.582zM3.297 6.395h.823V3.988h2.473v-.79-.792H4.12V0h-.823c-.219 0-.849.002-.825 0v2.406H0v1.582h2.472v2.407h.825z"
+                      fill="#32324D"
+                    />
+                  </svg>
+                  <span
+                    class="c14 c15"
+                    style="text-align: center;"
+                  >
+                    upload.mediaLibraryInput.placeholder
+                  </span>
+                </button>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
       </div>
     </div>
   </div>
   <div
-    class="c15"
+    class="c16"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
index e52328892b..045a71f8ad 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
@@ -486,6 +486,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
 
 .c18 {
   grid-column: span 4;
+  max-width: 100%;
 }
 
 .c27 {
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
index 55dc5009af..0205837e28 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
@@ -420,6 +420,7 @@ describe('Upload | SettingsPage', () => {
 
       .c23 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c1 {
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index 7c1656843a..e0acc4c418 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -783,14 +783,17 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
 
       .c18 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c32 {
         grid-column: span 12;
+        max-width: 100%;
       }
 
       .c48 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index 630042125a..17d936e519 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -665,14 +665,17 @@ describe('Admin | containers | RoleCreatePage', () => {
 
       .c19 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c34 {
         grid-column: span 7;
+        max-width: 100%;
       }
 
       .c59 {
         grid-column: span 5;
+        max-width: 100%;
       }
 
       .c51 {
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index fecb418c70..08494a258a 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -737,14 +737,17 @@ describe('Admin | containers | RoleEditPage', () => {
 
       .c24 {
         grid-column: span 6;
+        max-width: 100%;
       }
 
       .c39 {
         grid-column: span 7;
+        max-width: 100%;
       }
 
       .c64 {
         grid-column: span 5;
+        max-width: 100%;
       }
 
       .c56 {

From 48e60db5c36b7bc0225a39363928021ab25bccee Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gu@stav.dev>
Date: Tue, 15 Feb 2022 12:29:52 +0100
Subject: [PATCH 8/8] chore: Remove bad merge leftover

---
 .../tests/ImageAssetCard.test.js.orig         | 702 ------------------
 1 file changed, 702 deletions(-)
 delete mode 100644 packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig

diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig
deleted file mode 100644
index 26f4e7d4c6..0000000000
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js.orig
+++ /dev/null
@@ -1,702 +0,0 @@
-import React from 'react';
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
-import { render as renderTL } from '@testing-library/react';
-import { ImageAssetCard } from '../ImageAssetCard';
-import en from '../../../translations/en.json';
-
-jest.mock('../../../utils', () => ({
-  ...jest.requireActual('../../../utils'),
-  getTrad: x => x,
-}));
-
-jest.mock('react-intl', () => ({
-  useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
-}));
-
-describe('ImageAssetCard', () => {
-  it('snapshots the component', () => {
-    const { container } = renderTL(
-      <ThemeProvider theme={lightTheme}>
-        <ImageAssetCard
-          name="hello.png"
-          extension="png"
-          height={40}
-          width={40}
-          thumbnail="http://somewhere.com/hello.png"
-          selected={false}
-          onSelect={jest.fn()}
-          onEdit={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-<<<<<<< HEAD
-      .c26 {
-=======
-      .c23 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        border: 0;
-        -webkit-clip: rect(0 0 0 0);
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-      }
-
-<<<<<<< HEAD
-      .c17 {
-=======
-      .c14 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        padding-top: 4px;
-      }
-
-      .c0 {
-        background: #ffffff;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-<<<<<<< HEAD
-      .c3 {
-        position: start;
-      }
-
-      .c8 {
-        position: end;
-      }
-
-      .c14 {
-=======
-      .c11 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        padding-top: 8px;
-        padding-right: 12px;
-        padding-bottom: 8px;
-        padding-left: 12px;
-      }
-
-<<<<<<< HEAD
-      .c22 {
-=======
-      .c19 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        background: #f6f6f9;
-        padding: 4px;
-        border-radius: 4px;
-        min-width: 20px;
-      }
-
-      .c1 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-<<<<<<< HEAD
-      .c4 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c15 {
-=======
-      .c12 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: flex-start;
-        -webkit-box-align: flex-start;
-        -ms-flex-align: flex-start;
-        align-items: flex-start;
-      }
-
-<<<<<<< HEAD
-      .c23 {
-=======
-      .c20 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        display: -webkit-inline-box;
-        display: -webkit-inline-flex;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-<<<<<<< HEAD
-      .c5 > * {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      .c5 > * + * {
-        margin-left: 8px;
-      }
-
-      .c6 {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-      }
-
-      .c9 {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-      }
-
-      .c13 {
-=======
-      .c10 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        margin: 0;
-        padding: 0;
-        max-height: 100%;
-        max-width: 100%;
-      }
-
-<<<<<<< HEAD
-      .c12 {
-=======
-      .c9 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        height: 10.25rem;
-        width: 100%;
-        background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
-      }
-
-<<<<<<< HEAD
-      .c18 {
-=======
-      .c15 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        font-weight: 600;
-        color: #32324d;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-<<<<<<< HEAD
-      .c19 {
-=======
-      .c16 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        color: #666687;
-        font-size: 0.75rem;
-        line-height: 1.33;
-      }
-
-<<<<<<< HEAD
-      .c25 {
-=======
-      .c22 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        color: #666687;
-        font-weight: 600;
-        font-size: 0.6875rem;
-        line-height: 1.45;
-        text-transform: uppercase;
-      }
-
-<<<<<<< HEAD
-      .c21 {
-=======
-      .c18 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        margin-left: auto;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-      }
-
-<<<<<<< HEAD
-      .c24 {
-=======
-      .c21 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        margin-left: 4px;
-      }
-
-      .c7 {
-        margin: 0;
-        height: 18px;
-        min-width: 18px;
-        border-radius: 4px;
-        border: 1px solid #c0c0cf;
-        -webkit-appearance: none;
-        background-color: #ffffff;
-        cursor: pointer;
-      }
-
-      .c7:checked {
-        background-color: #4945ff;
-        border: 1px solid #4945ff;
-      }
-
-      .c7:checked:after {
-        content: '';
-        display: block;
-        position: relative;
-        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
-        width: 10px;
-        height: 10px;
-        left: 50%;
-        top: 50%;
-        -webkit-transform: translateX(-50%) translateY(-50%);
-        -ms-transform: translateX(-50%) translateY(-50%);
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .c7:checked:disabled:after {
-        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
-      }
-
-      .c7:disabled {
-        background-color: #dcdce4;
-        border: 1px solid #c0c0cf;
-      }
-
-      .c7:indeterminate {
-        background-color: #4945ff;
-        border: 1px solid #4945ff;
-      }
-
-      .c7:indeterminate:after {
-        content: '';
-        display: block;
-        position: relative;
-        color: white;
-        height: 2px;
-        width: 10px;
-        background-color: #ffffff;
-        left: 50%;
-        top: 50%;
-        -webkit-transform: translateX(-50%) translateY(-50%);
-        -ms-transform: translateX(-50%) translateY(-50%);
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .c7:indeterminate:disabled {
-        background-color: #dcdce4;
-        border: 1px solid #c0c0cf;
-      }
-
-      .c7:indeterminate:disabled:after {
-        background-color: #8e8ea9;
-      }
-
-<<<<<<< HEAD
-      .c16 {
-=======
-      .c13 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        word-break: break-all;
-      }
-
-      .c2 {
-        position: relative;
-        border-bottom: 1px solid #eaeaef;
-      }
-
-<<<<<<< HEAD
-      .c10 {
-=======
-      .c7 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        cursor: pointer;
-        padding: 8px;
-        border-radius: 4px;
-        background: #ffffff;
-        border: 1px solid #dcdce4;
-        position: relative;
-        outline: none;
-      }
-
-<<<<<<< HEAD
-      .c10 svg {
-=======
-      .c7 svg {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        height: 12px;
-        width: 12px;
-      }
-
-<<<<<<< HEAD
-      .c10 svg > g,
-      .c10 svg path {
-        fill: #ffffff;
-      }
-
-      .c10[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c10:after {
-=======
-      .c7 svg > g,
-      .c7 svg path {
-        fill: #ffffff;
-      }
-
-      .c7[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c7:after {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-<<<<<<< HEAD
-      .c10:focus-visible {
-        outline: none;
-      }
-
-      .c10:focus-visible:after {
-=======
-      .c7:focus-visible {
-        outline: none;
-      }
-
-      .c7:focus-visible:after {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-<<<<<<< HEAD
-      .c11 {
-=======
-      .c8 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        height: 2rem;
-        width: 2rem;
-      }
-
-<<<<<<< HEAD
-      .c11 svg > g,
-      .c11 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c11:hover svg > g,
-      .c11:hover svg path {
-        fill: #666687;
-      }
-
-      .c11:active svg > g,
-      .c11:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c11[aria-disabled='true'] {
-        background-color: #eaeaef;
-      }
-
-      .c11[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c20 {
-=======
-      .c8 svg > g,
-      .c8 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c8:hover svg > g,
-      .c8:hover svg path {
-        fill: #666687;
-      }
-
-      .c8:active svg > g,
-      .c8:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c8[aria-disabled='true'] {
-        background-color: #eaeaef;
-      }
-
-      .c8[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c17 {
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        text-transform: uppercase;
-      }
-
-      .c6 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-      }
-
-      .c6 > * + * {
-        margin-left: 8px;
-      }
-
-      <div>
-        <article
-          aria-labelledby="card-1-title"
-          class="c0"
-          tabindex="0"
-        >
-          <div
-            class="c1 c2"
-          >
-            <div
-              class="c3 c4 c5 c6"
-            >
-              <input
-                aria-labelledby="card-1-title"
-                class="c7"
-                type="checkbox"
-              />
-            </div>
-            <div
-<<<<<<< HEAD
-              class="c8 c4 c5 c9"
-=======
-              class="c5 c6"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-            >
-              <span>
-                <button
-                  aria-disabled="false"
-                  aria-labelledby="tooltip-1"
-<<<<<<< HEAD
-                  class="c10 c11"
-=======
-                  class="c7 c8"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M23.605 3.514c.527.528.527 1.36 0 1.887l-2.623 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.119 3.118zM0 24v-4.989l14.2-14.2L19.19 9.8 4.99 24H0z"
-                      fill="#212134"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-            <div
-<<<<<<< HEAD
-              class="c12"
-            >
-              <img
-                aria-hidden="true"
-                class="c13"
-=======
-              class="c9"
-            >
-              <img
-                aria-hidden="true"
-                class="c10"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-                src="http://somewhere.com/hello.png?width=40&height=40"
-              />
-            </div>
-          </div>
-          <div
-<<<<<<< HEAD
-            class="c14"
-          >
-            <div
-              class="c15"
-            >
-              <div
-                class="c16"
-              >
-                <div
-                  class="c17"
-                >
-                  <h2
-                    class="c18"
-=======
-            class="c11"
-          >
-            <div
-              class="c12"
-            >
-              <div
-                class="c13"
-              >
-                <div
-                  class="c14"
-                >
-                  <h2
-                    class="c15"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-                    id="card-1-title"
-                  >
-                    hello.png
-                  </h2>
-                </div>
-                <div
-<<<<<<< HEAD
-                  class="c19"
-                >
-                  <span
-                    class="c20"
-=======
-                  class="c16"
-                >
-                  <span
-                    class="c17"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-                  >
-                    png
-                  </span>
-                   - 40✕40
-                </div>
-              </div>
-              <div
-<<<<<<< HEAD
-                class="c21"
-              >
-                <div
-                  class="c22 c23 c24"
-                >
-                  <span
-                    class="c25"
-=======
-                class="c18"
-              >
-                <div
-                  class="c19 c20 c21"
-                >
-                  <span
-                    class="c22"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-                  >
-                    Image
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </article>
-        <div
-<<<<<<< HEAD
-          class="c26"
-=======
-          class="c23"
->>>>>>> 196012728 (AssetCard: Update snapshot test)
-        >
-          <p
-            aria-live="polite"
-            aria-relevant="all"
-            id="live-region-log"
-            role="log"
-          />
-          <p
-            aria-live="polite"
-            aria-relevant="all"
-            id="live-region-status"
-            role="status"
-          />
-          <p
-            aria-live="assertive"
-            aria-relevant="all"
-            id="live-region-alert"
-            role="alert"
-          />
-        </div>
-      </div>
-    `);
-  });
-});