Add select only when multiple is not set (#11375)

packages/core/helper-plugin/lib/src/hooks/useSelectionState/index.js

@@ -26,5 +26,13 @@ export const useSelectionState = (key, initialValue) => {
     }
   };
 
-  return [selections, { selectOne, selectAll }];
+  const selectOnly = nextSelection => {
+    if (selections.indexOf(nextSelection) > -1) {
+      setSelections([]);
+    } else {
+      setSelections([nextSelection]);
+    }
+  };
+
+  return [selections, { selectOne, selectAll, selectOnly }];
 };

packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js

@@ -1,3 +1,3 @@
-const getFileExtension = ext => (ext ? ext.substr(1) : null);
+const getFileExtension = ext => (ext && ext[0] === '.' ? ext.substr(1) : ext);
 
 export default getFileExtension;

packages/core/upload/admin/src/components/AssetCard/AssetCard.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin';
+import { ImageAssetCard } from './ImageAssetCard';
+import { VideoAssetCard } from './VideoAssetCard';
+import { DocAssetCard } from './DocAssetCard';
+import { AssetType } from '../../constants';
+
+export const AssetCard = ({ asset, isSelected, onSelect, onEdit, size }) => {
+  if (asset.mime.includes(AssetType.Video)) {
+    return (
+      <VideoAssetCard
+        id={asset.id}
+        key={asset.id}
+        name={asset.name}
+        extension={getFileExtension(asset.ext)}
+        url={prefixFileUrlWithBackendUrl(asset.url)}
+        mime={asset.mime}
+        onEdit={() => onEdit(asset)}
+        onSelect={() => onSelect(asset)}
+        selected={isSelected}
+        size={size}
+      />
+    );
+  }
+
+  if (asset.mime.includes(AssetType.Image)) {
+    return (
+      <ImageAssetCard
+        id={asset.id}
+        key={asset.id}
+        name={asset.name}
+        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(asset)}
+        onSelect={() => onSelect(asset)}
+        selected={isSelected}
+        size={size}
+      />
+    );
+  }
+
+  return (
+    <DocAssetCard
+      id={asset.id}
+      key={asset.id}
+      name={asset.name}
+      extension={getFileExtension(asset.ext)}
+      onEdit={() => onEdit(asset)}
+      onSelect={() => onSelect(asset)}
+      selected={isSelected}
+      size={size}
+    />
+  );
+};
+
+AssetCard.defaultProps = {
+  isSelected: false,
+  onSelect: undefined,
+  onEdit: undefined,
+  size: 'M',
+};
+
+AssetCard.propTypes = {
+  asset: PropTypes.shape({
+    id: PropTypes.number,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    size: PropTypes.number,
+    createdAt: PropTypes.string,
+    ext: PropTypes.string,
+    mime: PropTypes.string,
+    name: PropTypes.string,
+    url: PropTypes.string,
+    alternativeText: PropTypes.string,
+    caption: PropTypes.string,
+    formats: PropTypes.shape({
+      thumbnail: PropTypes.shape({
+        url: PropTypes.string,
+      }),
+    }),
+  }).isRequired,
+  onSelect: PropTypes.func,
+  onEdit: PropTypes.func,
+  isSelected: PropTypes.bool,
+  size: PropTypes.oneOf(['S', 'M']),
+};

packages/core/upload/admin/src/components/AssetCard/VideoPreview.js

@@ -57,11 +57,12 @@ export const VideoPreview = ({ url, mime, onLoadDuration, size }) => {
 
 VideoPreview.defaultProps = {
   size: 'M',
+  onLoadDuration: () => {},
 };
 
 VideoPreview.propTypes = {
   url: PropTypes.string.isRequired,
   mime: PropTypes.string.isRequired,
-  onLoadDuration: PropTypes.func.isRequired,
+  onLoadDuration: PropTypes.func,
   size: PropTypes.oneOf(['S', 'M']),
 };

packages/core/upload/admin/src/components/AssetList/index.js

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
 import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
-import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin';
+import { AssetCard } from '../AssetCard/AssetCard';
-import { ImageAssetCard } from '../AssetCard/ImageAssetCard';
-import { VideoAssetCard } from '../AssetCard/VideoAssetCard';
-import { DocAssetCard } from '../AssetCard/DocAssetCard';
-import { AssetType } from '../../constants';
 
 const GridColSize = {
   S: 180,
@@ -27,51 +23,13 @@ export const AssetList = ({ assets, onEditAsset, onSelectAsset, selectedAssets,
         {assets.map(asset => {
           const isSelected = selectedAssets.indexOf(asset) > -1;
 
-          if (asset.mime.includes(AssetType.Video)) {
-            return (
-              <VideoAssetCard
-                id={asset.id}
-                key={asset.id}
-                name={asset.name}
-                extension={getFileExtension(asset.ext)}
-                url={prefixFileUrlWithBackendUrl(asset.url)}
-                mime={asset.mime}
-                onEdit={() => onEditAsset(asset)}
-                onSelect={() => onSelectAsset(asset)}
-                selected={isSelected}
-                size={size}
-              />
-            );
-          }
-
-          if (asset.mime.includes(AssetType.Image)) {
-            return (
-              <ImageAssetCard
-                id={asset.id}
-                key={asset.id}
-                name={asset.name}
-                alt={asset.alternativeText || asset.name}
-                extension={getFileExtension(asset.ext)}
-                height={asset.height}
-                width={asset.width}
-                thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
-                onEdit={() => onEditAsset(asset)}
-                onSelect={() => onSelectAsset(asset)}
-                selected={isSelected}
-                size={size}
-              />
-            );
-          }
-
           return (
-            <DocAssetCard
+            <AssetCard
-              id={asset.id}
               key={asset.id}
-              name={asset.name}
+              asset={asset}
-              extension={getFileExtension(asset.ext)}
+              isSelected={isSelected}
               onEdit={() => onEditAsset(asset)}
               onSelect={() => onSelectAsset(asset)}
-              selected={isSelected}
               size={size}
             />
           );

packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js

@@ -51,10 +51,14 @@ export const BrowseStep = ({
   );
 };
 
+BrowseStep.defaultProps = {
+  onSelectAllAsset: undefined,
+};
+
 BrowseStep.propTypes = {
   assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   onEditAsset: PropTypes.func.isRequired,
   onSelectAsset: PropTypes.func.isRequired,
-  onSelectAllAsset: PropTypes.func.isRequired,
+  onSelectAllAsset: PropTypes.func,
   selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };

packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js

@@ -22,17 +22,22 @@ import { BrowseStep } from './BrowseStep';
 import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';
 import { useAssets } from '../../../hooks/useAssets';
 
-// TODO: this will move when "multiple" will be used for real
+export const AssetDialog = ({ onClose, onValidate, multiple }) => {
-// eslint-disable-next-line no-unused-vars
-export const AssetDialog = ({ onClose, multiple }) => {
   const { formatMessage } = useIntl();
-  const [selectedAssets, { selectOne, selectAll }] = useSelectionState('id', []);
+  const [selectedAssets, { selectOne, selectAll, selectOnly }] = useSelectionState('id', []);
-
   const { canRead, canCreate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();
   const { data, isLoading, error } = useAssets({
     skipWhen: !canRead,
   });
 
+  const handleSelectAsset = asset => {
+    if (multiple) {
+      selectOne(asset);
+    } else {
+      selectOnly(asset);
+    }
+  };
+
   const loading = isLoadingPermissions || isLoading;
   const assets = data?.results;
 
@@ -116,16 +121,16 @@ export const AssetDialog = ({ onClose, multiple }) => {
               <ModalBody>
                 <BrowseStep
                   assets={assets}
-                  onSelectAsset={selectOne}
+                  onSelectAsset={handleSelectAsset}
                   selectedAssets={selectedAssets}
-                  onSelectAllAsset={() => selectAll(assets)}
+                  onSelectAllAsset={multiple ? () => selectAll(assets) : undefined}
                   onEditAsset={() => {}}
                 />
               </ModalBody>
             </TabPanel>
             <TabPanel>
               <ModalBody>
-                <SelectedStep selectedAssets={selectedAssets} onSelectAsset={selectOne} />
+                <SelectedStep selectedAssets={selectedAssets} onSelectAsset={handleSelectAsset} />
               </ModalBody>
             </TabPanel>
           </TabPanels>
@@ -140,7 +145,7 @@ export const AssetDialog = ({ onClose, multiple }) => {
         }
         endActions={
           <>
-            <Button onClick={() => {}}>
+            <Button onClick={() => onValidate(selectedAssets)}>
               {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
             </Button>
           </>
@@ -157,4 +162,5 @@ AssetDialog.defaultProps = {
 AssetDialog.propTypes = {
   multiple: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
+  onValidate: PropTypes.func.isRequired,
 };

packages/core/upload/admin/src/components/MediaLibraryInput/CarouselAsset.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+import IconDocumentation from '@strapi/icons/IconDocumentation';
+import { Icon } from '@strapi/parts/Icon';
+import { Box } from '@strapi/parts/Box';
+import { AssetType } from '../../constants';
+import { VideoPreview } from '../AssetCard/VideoPreview';
+
+export const CarouselAsset = ({ asset }) => {
+  if (asset.mime.includes(AssetType.Video)) {
+    return <VideoPreview url={prefixFileUrlWithBackendUrl(asset.url)} mime={asset.mime} />;
+  }
+
+  if (asset.mime.includes(AssetType.Image)) {
+    return (
+      <Box
+        as="img"
+        maxHeight="100%"
+        maxWidth="100%"
+        src={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
+        alt={asset.alternativeText || asset.name}
+      />
+    );
+  }
+
+  return <Icon as={IconDocumentation} />;
+};
+
+CarouselAsset.propTypes = {
+  asset: PropTypes.shape({
+    id: PropTypes.number,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    size: PropTypes.number,
+    createdAt: PropTypes.string,
+    ext: PropTypes.string,
+    mime: PropTypes.string,
+    name: PropTypes.string,
+    url: PropTypes.string,
+    alternativeText: PropTypes.string,
+    caption: PropTypes.string,
+    formats: PropTypes.shape({
+      thumbnail: PropTypes.shape({
+        url: PropTypes.string,
+      }),
+    }),
+  }).isRequired,
+};

packages/core/upload/admin/src/components/MediaLibraryInput/index.js

@@ -5,18 +5,25 @@ import { Carousel, CarouselSlide } from '@strapi/parts/Carousel';
 import getTrad from '../../utils/getTrad';
 import { EmptyStateAsset } from './EmptyStateAsset';
 import { AssetDialog } from './AssetDialog';
+import { CarouselAsset } from './CarouselAsset';
 
 export const MediaLibraryInput = ({ intlLabel, description, disabled, error, multiple }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedAssets, setSelectedAssets] = useState([]);
   const [isAssetDialogOpen, setIsAssetDialogOpen] = useState(false);
   const { formatMessage } = useIntl();
 
   const handleNext = () => {
-    setSelectedIndex(current => (current < 2 ? current + 1 : 0));
+    setSelectedIndex(current => (current < selectedAssets.length - 1 ? current + 1 : 0));
   };
 
   const handlePrevious = () => {
-    setSelectedIndex(current => (current > 0 ? current - 1 : 2));
+    setSelectedIndex(current => (current > 0 ? current - 1 : selectedAssets.length - 1));
+  };
+
+  const handleValidation = nextSelectedAssets => {
+    setSelectedAssets(nextSelectedAssets);
+    setIsAssetDialogOpen(false);
   };
 
   const hint = description
@@ -47,17 +54,38 @@ export const MediaLibraryInput = ({ intlLabel, description, disabled, error, mul
         hint={hint}
         error={errorMessage}
       >
-        <CarouselSlide
+        {selectedAssets.length === 0 ? (
-          label={formatMessage(
+          <CarouselSlide
-            { id: getTrad('mediaLibraryInput.slideCount'), defaultMessage: '{n} of {m} slides' },
+            label={formatMessage(
-            { n: 1, m: 1 }
+              { id: getTrad('mediaLibraryInput.slideCount'), defaultMessage: '{n} of {m} slides' },
-          )}
+              { n: 1, m: 1 }
-        >
+            )}
-          <EmptyStateAsset disabled={disabled} onClick={() => setIsAssetDialogOpen(true)} />
+          >
-        </CarouselSlide>
+            <EmptyStateAsset disabled={disabled} onClick={() => setIsAssetDialogOpen(true)} />
+          </CarouselSlide>
+        ) : (
+          selectedAssets.map((asset, index) => (
+            <CarouselSlide
+              key={asset.id}
+              label={formatMessage(
+                {
+                  id: getTrad('mediaLibraryInput.slideCount'),
+                  defaultMessage: '{n} of {m} slides',
+                },
+                { n: index + 1, m: selectedAssets.length }
+              )}
+            >
+              <CarouselAsset asset={asset} />
+            </CarouselSlide>
+          ))
+        )}
       </Carousel>
       {isAssetDialogOpen && (
-        <AssetDialog onClose={() => setIsAssetDialogOpen(false)} multiple={multiple} />
+        <AssetDialog
+          onClose={() => setIsAssetDialogOpen(false)}
+          onValidate={handleValidation}
+          multiple={multiple}
+        />
       )}
     </>
   );

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js

@@ -8,9 +8,7 @@ import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
-import { DocAssetCard } from '../../AssetCard/DocAssetCard';
+import { AssetCard } from '../../AssetCard/AssetCard';
-import { ImageAssetCard } from '../../AssetCard/ImageAssetCard';
-import { VideoAssetCard } from '../../AssetCard/VideoAssetCard';
 import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
 import { getTrad } from '../../../utils';
 import { AssetType, AssetSource } from '../../../constants';
@@ -117,41 +115,9 @@ export const PendingAssetStep = ({
                   );
                 }
 
-                if (asset.type === AssetType.Image) {
-                  return (
-                    <GridItem col={4} key={assetKey}>
-                      <ImageAssetCard
-                        id={assetKey}
-                        name={asset.name}
-                        extension={asset.ext}
-                        height={asset.height}
-                        width={asset.width}
-                        thumbnail={asset.url}
-                        size="S"
-                        alt={asset.name}
-                      />
-                    </GridItem>
-                  );
-                }
-
-                if (asset.type === AssetType.Video) {
-                  return (
-                    <GridItem col={4} key={assetKey}>
-                      <VideoAssetCard
-                        id={assetKey}
-                        name={asset.name}
-                        extension={asset.ext}
-                        url={asset.url}
-                        mime={asset.mime}
-                        size="S"
-                      />
-                    </GridItem>
-                  );
-                }
-
                 return (
                   <GridItem col={4} key={assetKey}>
-                    <DocAssetCard name={asset.name} extension={asset.ext} size="S" />
+                    <AssetCard asset={asset} size="S" key={assetKey} />
                   </GridItem>
                 );
               })}

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js

@@ -46,12 +46,6 @@ describe('PendingAssetStep', () => {
         ext: 'mp4',
         mime: 'video/mp4',
       },
-      {
-        source: 'url',
-        type: 'unknown',
-        url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-        ext: 'mp4',
-      },
     ];
 
     const { container } = renderTL(

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c50 {
+.c55 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -46,7 +46,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c47 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,11 +162,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c46 {
+.c51 {
   border-top: 1px solid #eaeaef;
 }
 
-.c48 > * + * {
+.c53 > * + * {
   margin-left: 8px;
 }
 
@@ -331,7 +331,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #4945ff;
 }
 
-.c49 {
+.c54 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -343,7 +343,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-fFYUIl {
+.c54 .sc-fFYUIl {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -354,52 +354,52 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c49 .c16 {
+.c54 .c16 {
   color: #ffffff;
 }
 
-.c49[aria-disabled='true'] {
+.c54[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true'] .c16 {
+.c54[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c49[aria-disabled='true'] svg > g,
+.c54[aria-disabled='true'] svg > g,
-.c49[aria-disabled='true'] svg path {
+.c54[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c49[aria-disabled='true']:active {
+.c54[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c49[aria-disabled='true']:active .c16 {
+.c54[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c49[aria-disabled='true']:active svg > g,
+.c54[aria-disabled='true']:active svg > g,
-.c49[aria-disabled='true']:active svg path {
+.c54[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c49:hover {
+.c54:hover {
   background-color: #f6f6f9;
 }
 
-.c49:active {
+.c54:active {
   background-color: #eaeaef;
 }
 
-.c49 .c16 {
+.c54 .c16 {
   color: #32324d;
 }
 
-.c49 svg > g,
+.c54 svg > g,
-.c49 svg path {
+.c54 svg path {
   fill: #32324d;
 }
 
@@ -469,33 +469,143 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   grid-column: span 4;
 }
 
+.c26 {
+  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;
+}
+
+.c26 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c26 svg > g,
+.c26 svg path {
+  fill: #ffffff;
+}
+
+.c26[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c26:after {
+  -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;
+}
+
+.c26:focus-visible {
+  outline: none;
+}
+
+.c26:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c27 {
+  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;
+}
+
+.c27 svg > g,
+.c27 svg path {
+  fill: #8e8ea9;
+}
+
+.c27:hover svg > g,
+.c27:hover svg path {
+  fill: #666687;
+}
+
+.c27:active svg > g,
+.c27:active svg path {
+  fill: #a5a5ba;
+}
+
+.c27[aria-disabled='true'] {
+  background-color: #eaeaef;
+}
+
+.c27[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
 .c20 {
   background: #ffffff;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c25 {
+.c30 {
   padding-top: 8px;
   padding-right: 12px;
   padding-bottom: 8px;
   padding-left: 12px;
 }
 
-.c32 {
+.c37 {
   background: #f6f6f9;
   color: #666687;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c42 {
+.c47 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
+.c23 {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.c25 {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
 .c21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -514,7 +624,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c26 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -528,7 +638,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: flex-start;
 }
 
-.c38 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -542,14 +652,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c29 {
   margin: 0;
   padding: 0;
   max-height: 100%;
   max-width: 100%;
 }
 
-.c23 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -563,62 +673,129 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
 }
 
-.c28 {
+.c33 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c29 {
+.c34 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
 }
 
-.c35 {
+.c40 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c44 {
+.c49 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
 }
 
-.c36 {
+.c41 {
   font-weight: 600;
   line-height: 1.14;
 }
 
-.c37 {
+.c42 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
   text-transform: uppercase;
 }
 
-.c33 {
+.c38 {
   display: inline-block;
 }
 
-.c31 {
+.c36 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c34 {
+.c39 {
   margin-left: 4px;
 }
 
-.c27 {
+.c24 {
+  margin: 0;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 4px;
+  border: 1px solid #c0c0cf;
+  -webkit-appearance: none;
+  background-color: #ffffff;
+}
+
+.c24:checked {
+  background-color: #4945ff;
+  border: 1px solid #4945ff;
+}
+
+.c24: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%);
+}
+
+.c24:checked:disabled:after {
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
+}
+
+.c24:disabled {
+  background-color: #dcdce4;
+  border: 1px solid #c0c0cf;
+}
+
+.c24:indeterminate {
+  background-color: #4945ff;
+  border: 1px solid #4945ff;
+}
+
+.c24: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%);
+}
+
+.c24:indeterminate:disabled {
+  background-color: #dcdce4;
+  border: 1px solid #c0c0cf;
+}
+
+.c24:indeterminate:disabled:after {
+  background-color: #8e8ea9;
+}
+
+.c32 {
   word-break: break-all;
 }
 
@@ -627,35 +804,35 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c43 {
+.c48 {
   position: absolute;
   bottom: 4px;
   right: 4px;
 }
 
-.c40 {
+.c35 {
   text-transform: uppercase;
 }
 
-.c39 svg {
+.c46 canvas,
-  font-size: 3rem;
+.c46 video {
-}
-
-.c30 {
-  text-transform: uppercase;
-}
-
-.c41 canvas,
-.c41 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
+.c50 {
+  text-transform: uppercase;
+}
+
 .c45 {
   text-transform: uppercase;
 }
 
+.c44 svg {
+  font-size: 3rem;
+}
+
 @media (max-width:68.75rem) {
   .c19 {
     grid-column: span;
@@ -760,45 +937,82 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                   >
                     <div
                       class="c23"
+                    >
+                      <input
+                        aria-labelledby="card-1-title"
+                        class="c24"
+                        type="checkbox"
+                      />
+                    </div>
+                    <div
+                      class="c25"
+                    >
+                      <span>
+                        <button
+                          aria-disabled="false"
+                          aria-labelledby="tooltip-1"
+                          class="c26 c27"
+                          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.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
+                              fill="#212134"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                    </div>
+                    <div
+                      class="c28"
                     >
                       <img
                         aria-hidden="true"
-                        class="c24"
+                        class="c29"
                         src="http://localhost:5000/CPAM.jpg"
                       />
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c30"
                   >
                     <div
-                      class="c26"
+                      class="c31"
                     >
                       <div
-                        class="c27"
+                        class="c32"
                       >
                         <h2
-                          class="c28"
+                          class="c33"
                           id="card-1-title"
                         />
                         <div
-                          class="c29"
+                          class="c34"
                         >
                           <span
-                            class="c30"
+                            class="c35"
                           >
                             jpg
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c31"
+                        class="c36"
                       >
                         <div
-                          class="c32 c33 c34"
+                          class="c37 c38 c39"
                         >
                           <span
-                            class="c35 c36 c37"
+                            class="c40 c41 c42"
                           >
                             Image
                           </span>
@@ -825,12 +1039,49 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                   >
                     <div
                       class="c23"
+                    >
+                      <input
+                        aria-labelledby="card-2-title"
+                        class="c24"
+                        type="checkbox"
+                      />
+                    </div>
+                    <div
+                      class="c25"
+                    >
+                      <span>
+                        <button
+                          aria-disabled="false"
+                          aria-labelledby="tooltip-3"
+                          class="c26 c27"
+                          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.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
+                              fill="#212134"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                    </div>
+                    <div
+                      class="c28"
                     >
                       <div
-                        class="c38"
+                        class="c43"
                       >
                         <span
-                          class="c39"
+                          class="c44"
                         >
                           <svg
                             fill="none"
@@ -849,36 +1100,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                     </div>
                   </div>
                   <div
-                    class="c25"
+                    class="c30"
                   >
                     <div
-                      class="c26"
+                      class="c31"
                     >
                       <div
-                        class="c27"
+                        class="c32"
                       >
                         <h2
-                          class="c28"
+                          class="c33"
                           id="card-2-title"
                         />
                         <div
-                          class="c29"
+                          class="c34"
                         >
                           <span
-                            class="c40"
+                            class="c45"
                           >
                             pdf
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c31"
+                        class="c36"
                       >
                         <div
-                          class="c32 c33 c34"
+                          class="c37 c38 c39"
                         >
                           <span
-                            class="c35 c36 c37"
+                            class="c40 c41 c42"
                           >
                             Doc
                           </span>
@@ -905,12 +1156,49 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                   >
                     <div
                       class="c23"
+                    >
+                      <input
+                        aria-labelledby="card-3-title"
+                        class="c24"
+                        type="checkbox"
+                      />
+                    </div>
+                    <div
+                      class="c25"
+                    >
+                      <span>
+                        <button
+                          aria-disabled="false"
+                          aria-labelledby="tooltip-5"
+                          class="c26 c27"
+                          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.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
+                              fill="#212134"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                    </div>
+                    <div
+                      class="c28"
                     >
                       <div
-                        class="c38"
+                        class="c43"
                       >
                         <div
-                          class="c41"
+                          class="c46"
                         >
                           <video
                             crossorigin="anonymous"
@@ -924,46 +1212,46 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c42 c43"
+                      class="c47 c48"
                     >
                       <span
-                        class="c44"
+                        class="c49"
                       >
                         ...
                       </span>
                     </time>
                   </div>
                   <div
-                    class="c25"
+                    class="c30"
                   >
                     <div
-                      class="c26"
+                      class="c31"
                     >
                       <div
-                        class="c27"
+                        class="c32"
                       >
                         <h2
-                          class="c28"
+                          class="c33"
                           id="card-3-title"
                         />
                         <div
-                          class="c29"
+                          class="c34"
                         >
                           <span
-                            class="c45"
+                            class="c50"
                           >
                             mp4
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c31"
+                        class="c36"
                       >
                         <div
-                          class="c32 c33 c34"
+                          class="c37 c38 c39"
                         >
                           <span
-                            class="c35 c36 c37"
+                            class="c40 c41 c42"
                           >
                             Video
                           </span>
@@ -974,102 +1262,22 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                 </article>
               </div>
             </div>
-            <div
-              class="c19"
-            >
-              <div
-                class=""
-              >
-                <article
-                  aria-labelledby="card-4-title"
-                  class="c20"
-                  tabindex="0"
-                >
-                  <div
-                    class="c21 c22"
-                  >
-                    <div
-                      class="c23"
-                    >
-                      <div
-                        class="c38"
-                      >
-                        <span
-                          class="c39"
-                        >
-                          <svg
-                            fill="none"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
-                              fill="#8E8EA9"
-                            />
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="c25"
-                  >
-                    <div
-                      class="c26"
-                    >
-                      <div
-                        class="c27"
-                      >
-                        <h2
-                          class="c28"
-                          id="card-4-title"
-                        />
-                        <div
-                          class="c29"
-                        >
-                          <span
-                            class="c40"
-                          >
-                            mp4
-                          </span>
-                        </div>
-                      </div>
-                      <div
-                        class="c31"
-                      >
-                        <div
-                          class="c32 c33 c34"
-                        >
-                          <span
-                            class="c35 c36 c37"
-                          >
-                            Doc
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </article>
-              </div>
-            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="c0 c46"
+      class="c0 c51"
     >
       <div
         class="c2"
       >
         <div
-          class="c47 c48"
+          class="c52 c53"
         >
           <button
             aria-disabled="false"
-            class="c14 c49"
+            class="c14 c54"
             type="button"
           >
             <span
@@ -1078,7 +1286,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           </button>
         </div>
         <div
-          class="c47 c48"
+          class="c52 c53"
         >
           <button
             aria-disabled="false"
@@ -1096,7 +1304,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c50"
+    class="c55"
   >
     <p
       aria-live="polite"