@strapi/upload 5.15.1 → 5.16.0

package/dist/admin/components/AssetCard/AssetCard.js

@@ -14,7 +14,7 @@ var DocAssetCard = require('./DocAssetCard.js');
 var ImageAssetCard = require('./ImageAssetCard.js');
 var VideoAssetCard = require('./VideoAssetCard.js');
 
-const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false, className })=>{
     const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
     const commonAssetCardProps = {
         id: asset.id,
@@ -27,7 +27,8 @@ const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size
         onSelect: handleSelect,
         onRemove: onRemove ? ()=>onRemove(asset) : undefined,
         selected: isSelected,
-        size
+        size,
+        className
     };
     if (asset.mime?.includes(constants.AssetType.Video)) {
         return /*#__PURE__*/ jsxRuntime.jsx(VideoAssetCard.VideoAssetCard, {

package/dist/admin/components/AssetCard/AssetCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,8BAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}
+{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n  className?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n  className,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n    className,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","className","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA2BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAO,GAAA,GAAG,EACVC,KAAQ,GAAA,KAAK,EACbC,SAAS,EACM,GAAA;AACf,IAAA,MAAMC,YAAeN,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASS,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIX,MAAMW,EAAE;AACZC,QAAAA,YAAAA,EAAcZ,MAAMY,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBd,MAAMe,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMhB,MAAMgB,IAAI;AAChBC,QAAAA,GAAAA,EAAKX,KAAQN,GAAAA,KAAAA,CAAMiB,GAAG,GAAIC,8BAAelB,KAAO,EAAA,IAAA,CAAA;AAChDmB,QAAAA,IAAAA,EAAMnB,MAAMmB,IAAI;QAChBhB,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASS,CAAAA,GAAAA,SAAAA;QACvCP,QAAUM,EAAAA,YAAAA;QACVJ,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASS,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUnB,EAAAA,UAAAA;AACVI,QAAAA,IAAAA;AACAE,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIP,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK5B,KAAM6B,CAAAA,eAAe,IAAI7B,KAAAA,CAAMgB,IAAI;AACxCc,YAAAA,MAAAA,EAAQ9B,MAAM8B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4BhC,KAAOiC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOjB,MAAMiB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOlC,MAAMkC,KAAK;AAClBC,YAAAA,SAAAA,EAAWnC,MAAMmC,SAAS;AAC1BC,YAAAA,WAAAA,EAAapC,OAAOoC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCard.mjs

@@ -12,7 +12,7 @@ import { DocAssetCard } from './DocAssetCard.mjs';
 import { ImageAssetCard } from './ImageAssetCard.mjs';
 import { VideoAssetCard } from './VideoAssetCard.mjs';
 
-const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false, className })=>{
     const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
     const commonAssetCardProps = {
         id: asset.id,
@@ -25,7 +25,8 @@ const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size
         onSelect: handleSelect,
         onRemove: onRemove ? ()=>onRemove(asset) : undefined,
         selected: isSelected,
-        size
+        size,
+        className
     };
     if (asset.mime?.includes(AssetType.Video)) {
         return /*#__PURE__*/ jsx(VideoAssetCard, {

package/dist/admin/components/AssetCard/AssetCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,eAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}
+{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n  className?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n  className,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n    className,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","className","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA2BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAO,GAAA,GAAG,EACVC,KAAQ,GAAA,KAAK,EACbC,SAAS,EACM,GAAA;AACf,IAAA,MAAMC,YAAeN,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASS,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIX,MAAMW,EAAE;AACZC,QAAAA,YAAAA,EAAcZ,MAAMY,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBd,MAAMe,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMhB,MAAMgB,IAAI;AAChBC,QAAAA,GAAAA,EAAKX,KAAQN,GAAAA,KAAAA,CAAMiB,GAAG,GAAIC,eAAelB,KAAO,EAAA,IAAA,CAAA;AAChDmB,QAAAA,IAAAA,EAAMnB,MAAMmB,IAAI;QAChBhB,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASS,CAAAA,GAAAA,SAAAA;QACvCP,QAAUM,EAAAA,YAAAA;QACVJ,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASS,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUnB,EAAAA,UAAAA;AACVI,QAAAA,IAAAA;AACAE,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIP,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK5B,KAAM6B,CAAAA,eAAe,IAAI7B,KAAAA,CAAMgB,IAAI;AACxCc,YAAAA,MAAAA,EAAQ9B,MAAM8B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4BhC,KAAOiC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOjB,MAAMiB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOlC,MAAMkC,KAAK;AAClBC,YAAAA,SAAAA,EAAWnC,MAAMmC,SAAS;AAC1BC,YAAAA,WAAAA,EAAapC,OAAOoC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCardBase.js

@@ -18,11 +18,15 @@ const Extension = styledComponents.styled.span`
 `;
 const CardActionsContainer = styledComponents.styled(designSystem.CardAction)`
   opacity: 0;
+  z-index: 1;
 
   &:focus-within {
     opacity: 1;
   }
 `;
+const CardCheckboxWrapper = styledComponents.styled.div`
+  z-index: 1;
+`;
 const CardContainer = styledComponents.styled(designSystem.Card)`
   cursor: pointer;
 
@@ -32,7 +36,7 @@ const CardContainer = styledComponents.styled(designSystem.Card)`
     }
   }
 `;
-const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image', className })=>{
     const { formatMessage } = reactIntl.useIntl();
     const handleClick = (e)=>{
         if (onEdit) {
@@ -47,6 +51,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         e.stopPropagation();
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+        className: className,
         role: "button",
         height: "100%",
         tabIndex: -1,
@@ -54,7 +59,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardHeader, {
                 children: [
-                    isSelectable && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    isSelectable && /*#__PURE__*/ jsxRuntime.jsx(CardCheckboxWrapper, {
                         onClick: handlePropagationClick,
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardCheckbox, {
                             checked: selected,

package/dist/admin/components/AssetCard/AssetCardBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCardBase.js","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}
+{"version":3,"file":"AssetCardBase.js","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n  z-index: 1;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardCheckboxWrapper = styled.div`\n  z-index: 1;\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n  className?: string;\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n  className,\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer\n      className={className}\n      role=\"button\"\n      height=\"100%\"\n      tabIndex={-1}\n      onClick={handleClick}\n    >\n      <CardHeader>\n        {isSelectable && (\n          <CardCheckboxWrapper onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </CardCheckboxWrapper>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardCheckboxWrapper","div","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","className","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}

package/dist/admin/components/AssetCard/AssetCardBase.mjs

@@ -16,11 +16,15 @@ const Extension = styled.span`
 `;
 const CardActionsContainer = styled(CardAction)`
   opacity: 0;
+  z-index: 1;
 
   &:focus-within {
     opacity: 1;
   }
 `;
+const CardCheckboxWrapper = styled.div`
+  z-index: 1;
+`;
 const CardContainer = styled(Card)`
   cursor: pointer;
 
@@ -30,7 +34,7 @@ const CardContainer = styled(Card)`
     }
   }
 `;
-const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image', className })=>{
     const { formatMessage } = useIntl();
     const handleClick = (e)=>{
         if (onEdit) {
@@ -45,6 +49,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         e.stopPropagation();
     };
     return /*#__PURE__*/ jsxs(CardContainer, {
+        className: className,
         role: "button",
         height: "100%",
         tabIndex: -1,
@@ -52,7 +57,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         children: [
             /*#__PURE__*/ jsxs(CardHeader, {
                 children: [
-                    isSelectable && /*#__PURE__*/ jsx("div", {
+                    isSelectable && /*#__PURE__*/ jsx(CardCheckboxWrapper, {
                         onClick: handlePropagationClick,
                         children: /*#__PURE__*/ jsx(CardCheckbox, {
                             checked: selected,

package/dist/admin/components/AssetCard/AssetCardBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCardBase.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}
+{"version":3,"file":"AssetCardBase.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n  z-index: 1;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardCheckboxWrapper = styled.div`\n  z-index: 1;\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n  className?: string;\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n  className,\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer\n      className={className}\n      role=\"button\"\n      height=\"100%\"\n      tabIndex={-1}\n      onClick={handleClick}\n    >\n      <CardHeader>\n        {isSelectable && (\n          <CardCheckboxWrapper onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </CardCheckboxWrapper>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardCheckboxWrapper","div","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","className","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}

package/dist/admin/components/AssetGridList/AssetGridList.js

@@ -2,10 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
 var AssetCard = require('../AssetCard/AssetCard.js');
 var Draggable = require('./Draggable.js');
 
 // TODO: find a better naming convention for the file that was an index file before
+const DraggableAssetCard = styledComponents.styled(AssetCard.AssetCard)`
+  && {
+    cursor: inherit;
+  }
+`;
 const AssetGridList = ({ allowedTypes = [
     'files',
     'images',
@@ -37,7 +43,7 @@ const AssetGridList = ({ allowedTypes = [
                                 index: index,
                                 moveItem: onReorderAsset,
                                 id: asset.id,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(DraggableAssetCard, {
                                     allowedTypes: allowedTypes,
                                     asset: asset,
                                     isSelected: isSelected,

package/dist/admin/components/AssetGridList/AssetGridList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetGridList.js","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <AssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","AssetCard","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;;AAAA;AAqBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,cAAA,CAACQ,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,cAAA,CAACQ,kBAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,cAACqB,CAAAA,mBAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,cAACuB,CAAAA,mBAAAA,EAAAA;oCACClC,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,cAAA,CAACQ,kBAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOO,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA5B,cAACuB,CAAAA,mBAAAA,EAAAA;4BAEClC,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}
+{"version":3,"file":"AssetGridList.js","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst DraggableAssetCard = styled(AssetCard)`\n  && {\n    cursor: inherit;\n  }\n`;\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <DraggableAssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["DraggableAssetCard","styled","AssetCard","AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;;;AAAA;AAWA,MAAMA,kBAAAA,GAAqBC,uBAAOC,CAAAA,mBAAAA,CAAU;;;;AAI5C,CAAC;AAaYC,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,cAAA,CAACQ,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,cAAA,CAACQ,kBAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,cAACqB,CAAAA,mBAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,cAACf,CAAAA,kBAAAA,EAAAA;oCACCI,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,cAAA,CAACQ,kBAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOM,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA3B,cAACb,CAAAA,mBAAAA,EAAAA;4BAECE,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/AssetGridList/AssetGridList.mjs

@@ -1,9 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { KeyboardNavigable, Box, Typography, Grid } from '@strapi/design-system';
+import { styled } from 'styled-components';
 import { AssetCard } from '../AssetCard/AssetCard.mjs';
 import { Draggable } from './Draggable.mjs';
 
 // TODO: find a better naming convention for the file that was an index file before
+const DraggableAssetCard = styled(AssetCard)`
+  && {
+    cursor: inherit;
+  }
+`;
 const AssetGridList = ({ allowedTypes = [
     'files',
     'images',
@@ -35,7 +41,7 @@ const AssetGridList = ({ allowedTypes = [
                                 index: index,
                                 moveItem: onReorderAsset,
                                 id: asset.id,
-                                children: /*#__PURE__*/ jsx(AssetCard, {
+                                children: /*#__PURE__*/ jsx(DraggableAssetCard, {
                                     allowedTypes: allowedTypes,
                                     asset: asset,
                                     isSelected: isSelected,

package/dist/admin/components/AssetGridList/AssetGridList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetGridList.mjs","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <AssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","AssetCard","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;AAAA;AAqBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,IAACC,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,GAACC,CAAAA,GAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,GAAA,CAACQ,KAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,GAAA,CAACQ,KAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,GAACqB,CAAAA,SAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,GAACuB,CAAAA,SAAAA,EAAAA;oCACClC,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,GAAA,CAACQ,KAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOO,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA5B,GAACuB,CAAAA,SAAAA,EAAAA;4BAEClC,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}
+{"version":3,"file":"AssetGridList.mjs","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst DraggableAssetCard = styled(AssetCard)`\n  && {\n    cursor: inherit;\n  }\n`;\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <DraggableAssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["DraggableAssetCard","styled","AssetCard","AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;AAAA;AAWA,MAAMA,kBAAAA,GAAqBC,MAAOC,CAAAA,SAAAA,CAAU;;;;AAI5C,CAAC;AAaYC,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,IAACC,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,GAACC,CAAAA,GAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,GAAA,CAACQ,KAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,GAAA,CAACQ,KAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,GAACqB,CAAAA,SAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,GAACf,CAAAA,kBAAAA,EAAAA;oCACCI,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,GAAA,CAACQ,KAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOM,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA3B,GAACb,CAAAA,SAAAA,EAAAA;4BAECE,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAsset.js

@@ -49,11 +49,15 @@ const CarouselAsset = ({ asset })=>{
         });
     }
     if (asset.mime?.includes(constants.AssetType.Image)) {
+        const assetUrl = createAssetUrl.createAssetUrl(asset, true);
+        if (!assetUrl) return null;
+        // Adding a param to the url to bust the cache and force the refresh of the image when replaced
+        const cacheBustedUrl = `${assetUrl}${assetUrl.includes('?') ? '&' : '?'}updatedAt=${asset.updatedAt}`;
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
             tag: "img",
             maxHeight: "100%",
             maxWidth: "100%",
-            src: createAssetUrl.createAssetUrl(asset, true),
+            src: cacheBustedUrl,
             alt: asset.alternativeText || asset.name
         });
     }

package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAsset.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAsset.js","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx"],"sourcesContent":["import { Box, Flex } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { createAssetUrl } from '../../../utils';\nimport { AudioPreview } from '../../AssetCard/AudioPreview';\nimport { VideoPreview } from '../../AssetCard/VideoPreview';\n\nimport type { File as FileAsset } from '../../../../../shared/contracts/files';\n\nconst DocAsset = styled(Flex)`\n  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);\n`;\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    max-width: 100%;\n    height: 124px;\n  }\n`;\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    max-width: 100%;\n  }\n`;\n\nexport const CarouselAsset = ({ asset }: { asset: FileAsset }) => {\n  if (asset.mime?.includes(AssetType.Video)) {\n    return (\n      <VideoPreviewWrapper height=\"100%\">\n        <VideoPreview\n          url={createAssetUrl(asset, true)!}\n          mime={asset.mime}\n          alt={asset.alternativeText || asset.name}\n        />\n      </VideoPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return (\n      <AudioPreviewWrapper>\n        <AudioPreview\n          url={createAssetUrl(asset, true)!}\n          alt={asset.alternativeText || asset.name}\n        />\n      </AudioPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <Box\n        tag=\"img\"\n        maxHeight=\"100%\"\n        maxWidth=\"100%\"\n        src={createAssetUrl(asset, true)}\n        alt={asset.alternativeText || asset.name}\n      />\n    );\n  }\n\n  return (\n    <DocAsset width=\"100%\" height=\"100%\" justifyContent=\"center\" hasRadius>\n      {asset.ext?.includes('pdf') ? (\n        <FilePdf aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      ) : (\n        <File aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      )}\n    </DocAsset>\n  );\n};\n"],"names":["DocAsset","styled","Flex","VideoPreviewWrapper","Box","AudioPreviewWrapper","CarouselAsset","asset","mime","includes","AssetType","Video","_jsx","height","VideoPreview","url","createAssetUrl","alt","alternativeText","name","Audio","AudioPreview","Image","tag","maxHeight","maxWidth","src","width","justifyContent","hasRadius","ext","FilePdf","aria-label","File"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAMA,QAAAA,GAAWC,uBAAOC,CAAAA,iBAAAA,CAAK;;AAE7B,CAAC;AAED,MAAMC,mBAAAA,GAAsBF,uBAAOG,CAAAA,gBAAAA,CAAI;;;;;;AAMvC,CAAC;AAED,MAAMC,mBAAAA,GAAsBJ,uBAAOG,CAAAA,gBAAAA,CAAI;;;;;AAKvC,CAAC;AAEYE,MAAAA,aAAAA,GAAgB,CAAC,EAAEC,KAAK,EAAwB,GAAA;AAC3D,IAAA,IAAIA,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEC,cAACT,CAAAA,mBAAAA,EAAAA;YAAoBU,MAAO,EAAA,MAAA;AAC1B,YAAA,QAAA,gBAAAD,cAACE,CAAAA,yBAAAA,EAAAA;AACCC,gBAAAA,GAAAA,EAAKC,8BAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BC,gBAAAA,IAAAA,EAAMD,MAAMC,IAAI;AAChBS,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUU,KAAK,CAAG,EAAA;AACzC,QAAA,qBACER,cAACP,CAAAA,mBAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAO,cAACS,CAAAA,yBAAAA,EAAAA;AACCN,gBAAAA,GAAAA,EAAKC,8BAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUY,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEV,cAACR,CAAAA,gBAAAA,EAAAA;YACCmB,GAAI,EAAA,KAAA;YACJC,SAAU,EAAA,MAAA;YACVC,QAAS,EAAA,MAAA;AACTC,YAAAA,GAAAA,EAAKV,8BAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,YAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;AAG1C;AAEA,IAAA,qBACEP,cAACZ,CAAAA,QAAAA,EAAAA;QAAS2B,KAAM,EAAA,MAAA;QAAOd,MAAO,EAAA,MAAA;QAAOe,cAAe,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;AACnEtB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMuB,GAAG,EAAErB,QAAS,CAAA,KAAA,CAAA,iBACnBG,cAACmB,CAAAA,aAAAA,EAAAA;AAAQC,YAAAA,YAAAA,EAAYzB,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEQ,KAAM,EAAA,MAAA;YAAOd,MAAO,EAAA;2BAE9ED,cAACqB,CAAAA,UAAAA,EAAAA;AAAKD,YAAAA,YAAAA,EAAYzB,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEQ,KAAM,EAAA,MAAA;YAAOd,MAAO,EAAA;;;AAInF;;;;"}
+{"version":3,"file":"CarouselAsset.js","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx"],"sourcesContent":["import { Box, Flex } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { createAssetUrl } from '../../../utils';\nimport { AudioPreview } from '../../AssetCard/AudioPreview';\nimport { VideoPreview } from '../../AssetCard/VideoPreview';\n\nimport type { File as FileAsset } from '../../../../../shared/contracts/files';\n\nconst DocAsset = styled(Flex)`\n  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);\n`;\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    max-width: 100%;\n    height: 124px;\n  }\n`;\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    max-width: 100%;\n  }\n`;\n\nexport const CarouselAsset = ({ asset }: { asset: FileAsset }) => {\n  if (asset.mime?.includes(AssetType.Video)) {\n    return (\n      <VideoPreviewWrapper height=\"100%\">\n        <VideoPreview\n          url={createAssetUrl(asset, true)!}\n          mime={asset.mime}\n          alt={asset.alternativeText || asset.name}\n        />\n      </VideoPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return (\n      <AudioPreviewWrapper>\n        <AudioPreview\n          url={createAssetUrl(asset, true)!}\n          alt={asset.alternativeText || asset.name}\n        />\n      </AudioPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    const assetUrl = createAssetUrl(asset, true);\n    if (!assetUrl) return null;\n\n    // Adding a param to the url to bust the cache and force the refresh of the image when replaced\n    const cacheBustedUrl = `${assetUrl}${assetUrl.includes('?') ? '&' : '?'}updatedAt=${asset.updatedAt}`;\n\n    return (\n      <Box\n        tag=\"img\"\n        maxHeight=\"100%\"\n        maxWidth=\"100%\"\n        src={cacheBustedUrl}\n        alt={asset.alternativeText || asset.name}\n      />\n    );\n  }\n\n  return (\n    <DocAsset width=\"100%\" height=\"100%\" justifyContent=\"center\" hasRadius>\n      {asset.ext?.includes('pdf') ? (\n        <FilePdf aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      ) : (\n        <File aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      )}\n    </DocAsset>\n  );\n};\n"],"names":["DocAsset","styled","Flex","VideoPreviewWrapper","Box","AudioPreviewWrapper","CarouselAsset","asset","mime","includes","AssetType","Video","_jsx","height","VideoPreview","url","createAssetUrl","alt","alternativeText","name","Audio","AudioPreview","Image","assetUrl","cacheBustedUrl","updatedAt","tag","maxHeight","maxWidth","src","width","justifyContent","hasRadius","ext","FilePdf","aria-label","File"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAMA,QAAAA,GAAWC,uBAAOC,CAAAA,iBAAAA,CAAK;;AAE7B,CAAC;AAED,MAAMC,mBAAAA,GAAsBF,uBAAOG,CAAAA,gBAAAA,CAAI;;;;;;AAMvC,CAAC;AAED,MAAMC,mBAAAA,GAAsBJ,uBAAOG,CAAAA,gBAAAA,CAAI;;;;;AAKvC,CAAC;AAEYE,MAAAA,aAAAA,GAAgB,CAAC,EAAEC,KAAK,EAAwB,GAAA;AAC3D,IAAA,IAAIA,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEC,cAACT,CAAAA,mBAAAA,EAAAA;YAAoBU,MAAO,EAAA,MAAA;AAC1B,YAAA,QAAA,gBAAAD,cAACE,CAAAA,yBAAAA,EAAAA;AACCC,gBAAAA,GAAAA,EAAKC,8BAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BC,gBAAAA,IAAAA,EAAMD,MAAMC,IAAI;AAChBS,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUU,KAAK,CAAG,EAAA;AACzC,QAAA,qBACER,cAACP,CAAAA,mBAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAO,cAACS,CAAAA,yBAAAA,EAAAA;AACCN,gBAAAA,GAAAA,EAAKC,8BAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,mBAAAA,CAAUY,KAAK,CAAG,EAAA;QACzC,MAAMC,QAAAA,GAAWP,8BAAeT,KAAO,EAAA,IAAA,CAAA;QACvC,IAAI,CAACgB,UAAU,OAAO,IAAA;;AAGtB,QAAA,MAAMC,iBAAiB,CAAC,EAAED,QAAS,CAAA,EAAEA,SAASd,QAAQ,CAAC,GAAO,CAAA,GAAA,GAAA,GAAM,IAAI,UAAU,EAAEF,KAAMkB,CAAAA,SAAS,CAAC,CAAC;AAErG,QAAA,qBACEb,cAACR,CAAAA,gBAAAA,EAAAA;YACCsB,GAAI,EAAA,KAAA;YACJC,SAAU,EAAA,MAAA;YACVC,QAAS,EAAA,MAAA;YACTC,GAAKL,EAAAA,cAAAA;AACLP,YAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;AAG1C;AAEA,IAAA,qBACEP,cAACZ,CAAAA,QAAAA,EAAAA;QAAS8B,KAAM,EAAA,MAAA;QAAOjB,MAAO,EAAA,MAAA;QAAOkB,cAAe,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;AACnEzB,QAAAA,QAAAA,EAAAA,KAAAA,CAAM0B,GAAG,EAAExB,QAAS,CAAA,KAAA,CAAA,iBACnBG,cAACsB,CAAAA,aAAAA,EAAAA;AAAQC,YAAAA,YAAAA,EAAY5B,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEW,KAAM,EAAA,MAAA;YAAOjB,MAAO,EAAA;2BAE9ED,cAACwB,CAAAA,UAAAA,EAAAA;AAAKD,YAAAA,YAAAA,EAAY5B,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEW,KAAM,EAAA,MAAA;YAAOjB,MAAO,EAAA;;;AAInF;;;;"}

package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAsset.mjs

@@ -47,11 +47,15 @@ const CarouselAsset = ({ asset })=>{
         });
     }
     if (asset.mime?.includes(AssetType.Image)) {
+        const assetUrl = createAssetUrl(asset, true);
+        if (!assetUrl) return null;
+        // Adding a param to the url to bust the cache and force the refresh of the image when replaced
+        const cacheBustedUrl = `${assetUrl}${assetUrl.includes('?') ? '&' : '?'}updatedAt=${asset.updatedAt}`;
         return /*#__PURE__*/ jsx(Box, {
             tag: "img",
             maxHeight: "100%",
             maxWidth: "100%",
-            src: createAssetUrl(asset, true),
+            src: cacheBustedUrl,
             alt: asset.alternativeText || asset.name
         });
     }

package/dist/admin/components/MediaLibraryInput/Carousel/CarouselAsset.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAsset.mjs","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx"],"sourcesContent":["import { Box, Flex } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { createAssetUrl } from '../../../utils';\nimport { AudioPreview } from '../../AssetCard/AudioPreview';\nimport { VideoPreview } from '../../AssetCard/VideoPreview';\n\nimport type { File as FileAsset } from '../../../../../shared/contracts/files';\n\nconst DocAsset = styled(Flex)`\n  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);\n`;\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    max-width: 100%;\n    height: 124px;\n  }\n`;\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    max-width: 100%;\n  }\n`;\n\nexport const CarouselAsset = ({ asset }: { asset: FileAsset }) => {\n  if (asset.mime?.includes(AssetType.Video)) {\n    return (\n      <VideoPreviewWrapper height=\"100%\">\n        <VideoPreview\n          url={createAssetUrl(asset, true)!}\n          mime={asset.mime}\n          alt={asset.alternativeText || asset.name}\n        />\n      </VideoPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return (\n      <AudioPreviewWrapper>\n        <AudioPreview\n          url={createAssetUrl(asset, true)!}\n          alt={asset.alternativeText || asset.name}\n        />\n      </AudioPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <Box\n        tag=\"img\"\n        maxHeight=\"100%\"\n        maxWidth=\"100%\"\n        src={createAssetUrl(asset, true)}\n        alt={asset.alternativeText || asset.name}\n      />\n    );\n  }\n\n  return (\n    <DocAsset width=\"100%\" height=\"100%\" justifyContent=\"center\" hasRadius>\n      {asset.ext?.includes('pdf') ? (\n        <FilePdf aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      ) : (\n        <File aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      )}\n    </DocAsset>\n  );\n};\n"],"names":["DocAsset","styled","Flex","VideoPreviewWrapper","Box","AudioPreviewWrapper","CarouselAsset","asset","mime","includes","AssetType","Video","_jsx","height","VideoPreview","url","createAssetUrl","alt","alternativeText","name","Audio","AudioPreview","Image","tag","maxHeight","maxWidth","src","width","justifyContent","hasRadius","ext","FilePdf","aria-label","File"],"mappings":";;;;;;;;;;;;;AAWA,MAAMA,QAAAA,GAAWC,MAAOC,CAAAA,IAAAA,CAAK;;AAE7B,CAAC;AAED,MAAMC,mBAAAA,GAAsBF,MAAOG,CAAAA,GAAAA,CAAI;;;;;;AAMvC,CAAC;AAED,MAAMC,mBAAAA,GAAsBJ,MAAOG,CAAAA,GAAAA,CAAI;;;;;AAKvC,CAAC;AAEYE,MAAAA,aAAAA,GAAgB,CAAC,EAAEC,KAAK,EAAwB,GAAA;AAC3D,IAAA,IAAIA,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEC,GAACT,CAAAA,mBAAAA,EAAAA;YAAoBU,MAAO,EAAA,MAAA;AAC1B,YAAA,QAAA,gBAAAD,GAACE,CAAAA,YAAAA,EAAAA;AACCC,gBAAAA,GAAAA,EAAKC,eAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BC,gBAAAA,IAAAA,EAAMD,MAAMC,IAAI;AAChBS,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUU,KAAK,CAAG,EAAA;AACzC,QAAA,qBACER,GAACP,CAAAA,mBAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAO,GAACS,CAAAA,YAAAA,EAAAA;AACCN,gBAAAA,GAAAA,EAAKC,eAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUY,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEV,GAACR,CAAAA,GAAAA,EAAAA;YACCmB,GAAI,EAAA,KAAA;YACJC,SAAU,EAAA,MAAA;YACVC,QAAS,EAAA,MAAA;AACTC,YAAAA,GAAAA,EAAKV,eAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,YAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;AAG1C;AAEA,IAAA,qBACEP,GAACZ,CAAAA,QAAAA,EAAAA;QAAS2B,KAAM,EAAA,MAAA;QAAOd,MAAO,EAAA,MAAA;QAAOe,cAAe,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;AACnEtB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMuB,GAAG,EAAErB,QAAS,CAAA,KAAA,CAAA,iBACnBG,GAACmB,CAAAA,OAAAA,EAAAA;AAAQC,YAAAA,YAAAA,EAAYzB,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEQ,KAAM,EAAA,MAAA;YAAOd,MAAO,EAAA;2BAE9ED,GAACqB,CAAAA,IAAAA,EAAAA;AAAKD,YAAAA,YAAAA,EAAYzB,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEQ,KAAM,EAAA,MAAA;YAAOd,MAAO,EAAA;;;AAInF;;;;"}
+{"version":3,"file":"CarouselAsset.mjs","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.tsx"],"sourcesContent":["import { Box, Flex } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { createAssetUrl } from '../../../utils';\nimport { AudioPreview } from '../../AssetCard/AudioPreview';\nimport { VideoPreview } from '../../AssetCard/VideoPreview';\n\nimport type { File as FileAsset } from '../../../../../shared/contracts/files';\n\nconst DocAsset = styled(Flex)`\n  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);\n`;\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    max-width: 100%;\n    height: 124px;\n  }\n`;\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    max-width: 100%;\n  }\n`;\n\nexport const CarouselAsset = ({ asset }: { asset: FileAsset }) => {\n  if (asset.mime?.includes(AssetType.Video)) {\n    return (\n      <VideoPreviewWrapper height=\"100%\">\n        <VideoPreview\n          url={createAssetUrl(asset, true)!}\n          mime={asset.mime}\n          alt={asset.alternativeText || asset.name}\n        />\n      </VideoPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return (\n      <AudioPreviewWrapper>\n        <AudioPreview\n          url={createAssetUrl(asset, true)!}\n          alt={asset.alternativeText || asset.name}\n        />\n      </AudioPreviewWrapper>\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    const assetUrl = createAssetUrl(asset, true);\n    if (!assetUrl) return null;\n\n    // Adding a param to the url to bust the cache and force the refresh of the image when replaced\n    const cacheBustedUrl = `${assetUrl}${assetUrl.includes('?') ? '&' : '?'}updatedAt=${asset.updatedAt}`;\n\n    return (\n      <Box\n        tag=\"img\"\n        maxHeight=\"100%\"\n        maxWidth=\"100%\"\n        src={cacheBustedUrl}\n        alt={asset.alternativeText || asset.name}\n      />\n    );\n  }\n\n  return (\n    <DocAsset width=\"100%\" height=\"100%\" justifyContent=\"center\" hasRadius>\n      {asset.ext?.includes('pdf') ? (\n        <FilePdf aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      ) : (\n        <File aria-label={asset.alternativeText || asset.name} width=\"24px\" height=\"32px\" />\n      )}\n    </DocAsset>\n  );\n};\n"],"names":["DocAsset","styled","Flex","VideoPreviewWrapper","Box","AudioPreviewWrapper","CarouselAsset","asset","mime","includes","AssetType","Video","_jsx","height","VideoPreview","url","createAssetUrl","alt","alternativeText","name","Audio","AudioPreview","Image","assetUrl","cacheBustedUrl","updatedAt","tag","maxHeight","maxWidth","src","width","justifyContent","hasRadius","ext","FilePdf","aria-label","File"],"mappings":";;;;;;;;;;;;;AAWA,MAAMA,QAAAA,GAAWC,MAAOC,CAAAA,IAAAA,CAAK;;AAE7B,CAAC;AAED,MAAMC,mBAAAA,GAAsBF,MAAOG,CAAAA,GAAAA,CAAI;;;;;;AAMvC,CAAC;AAED,MAAMC,mBAAAA,GAAsBJ,MAAOG,CAAAA,GAAAA,CAAI;;;;;AAKvC,CAAC;AAEYE,MAAAA,aAAAA,GAAgB,CAAC,EAAEC,KAAK,EAAwB,GAAA;AAC3D,IAAA,IAAIA,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEC,GAACT,CAAAA,mBAAAA,EAAAA;YAAoBU,MAAO,EAAA,MAAA;AAC1B,YAAA,QAAA,gBAAAD,GAACE,CAAAA,YAAAA,EAAAA;AACCC,gBAAAA,GAAAA,EAAKC,eAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BC,gBAAAA,IAAAA,EAAMD,MAAMC,IAAI;AAChBS,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUU,KAAK,CAAG,EAAA;AACzC,QAAA,qBACER,GAACP,CAAAA,mBAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAO,GAACS,CAAAA,YAAAA,EAAAA;AACCN,gBAAAA,GAAAA,EAAKC,eAAeT,KAAO,EAAA,IAAA,CAAA;AAC3BU,gBAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;;AAI5C;AAEA,IAAA,IAAIZ,MAAMC,IAAI,EAAEC,QAASC,CAAAA,SAAAA,CAAUY,KAAK,CAAG,EAAA;QACzC,MAAMC,QAAAA,GAAWP,eAAeT,KAAO,EAAA,IAAA,CAAA;QACvC,IAAI,CAACgB,UAAU,OAAO,IAAA;;AAGtB,QAAA,MAAMC,iBAAiB,CAAC,EAAED,QAAS,CAAA,EAAEA,SAASd,QAAQ,CAAC,GAAO,CAAA,GAAA,GAAA,GAAM,IAAI,UAAU,EAAEF,KAAMkB,CAAAA,SAAS,CAAC,CAAC;AAErG,QAAA,qBACEb,GAACR,CAAAA,GAAAA,EAAAA;YACCsB,GAAI,EAAA,KAAA;YACJC,SAAU,EAAA,MAAA;YACVC,QAAS,EAAA,MAAA;YACTC,GAAKL,EAAAA,cAAAA;AACLP,YAAAA,GAAAA,EAAKV,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY;;AAG1C;AAEA,IAAA,qBACEP,GAACZ,CAAAA,QAAAA,EAAAA;QAAS8B,KAAM,EAAA,MAAA;QAAOjB,MAAO,EAAA,MAAA;QAAOkB,cAAe,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;AACnEzB,QAAAA,QAAAA,EAAAA,KAAAA,CAAM0B,GAAG,EAAExB,QAAS,CAAA,KAAA,CAAA,iBACnBG,GAACsB,CAAAA,OAAAA,EAAAA;AAAQC,YAAAA,YAAAA,EAAY5B,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEW,KAAM,EAAA,MAAA;YAAOjB,MAAO,EAAA;2BAE9ED,GAACwB,CAAAA,IAAAA,EAAAA;AAAKD,YAAAA,YAAAA,EAAY5B,KAAMW,CAAAA,eAAe,IAAIX,KAAAA,CAAMY,IAAI;YAAEW,KAAM,EAAA,MAAA;YAAOjB,MAAO,EAAA;;;AAInF;;;;"}

package/dist/admin/package.json.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var name = "@strapi/upload";
-var version = "5.15.0";
+var version = "5.15.1";
 var description = "Makes it easy to upload images and files to your Strapi Application.";
 var license = "SEE LICENSE IN LICENSE";
 var author = {
@@ -64,10 +64,10 @@ var scripts = {
 };
 var dependencies = {
     "@mux/mux-player-react": "3.1.0",
-    "@strapi/design-system": "2.0.0-rc.25",
-    "@strapi/icons": "2.0.0-rc.25",
-    "@strapi/provider-upload-local": "5.15.0",
-    "@strapi/utils": "5.15.0",
+    "@strapi/design-system": "2.0.0-rc.26",
+    "@strapi/icons": "2.0.0-rc.26",
+    "@strapi/provider-upload-local": "5.15.1",
+    "@strapi/utils": "5.15.1",
     "byte-size": "8.1.1",
     cropperjs: "1.6.1",
     "date-fns": "2.30.0",
@@ -89,8 +89,8 @@ var dependencies = {
     yup: "0.32.9"
 };
 var devDependencies = {
-    "@strapi/admin": "5.15.0",
-    "@strapi/types": "5.15.0",
+    "@strapi/admin": "5.15.1",
+    "@strapi/types": "5.15.1",
     "@testing-library/dom": "10.1.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
@@ -99,7 +99,7 @@ var devDependencies = {
     "@types/koa": "2.13.4",
     "@types/koa-range": "0.3.5",
     "@types/koa-static": "4.0.2",
-    formidable: "3.5.1",
+    formidable: "3.5.4",
     koa: "2.16.1",
     "koa-body": "6.0.1",
     msw: "1.3.0",

package/dist/admin/package.json.mjs

@@ -1,5 +1,5 @@
 var name = "@strapi/upload";
-var version = "5.15.0";
+var version = "5.15.1";
 var description = "Makes it easy to upload images and files to your Strapi Application.";
 var license = "SEE LICENSE IN LICENSE";
 var author = {
@@ -60,10 +60,10 @@ var scripts = {
 };
 var dependencies = {
     "@mux/mux-player-react": "3.1.0",
-    "@strapi/design-system": "2.0.0-rc.25",
-    "@strapi/icons": "2.0.0-rc.25",
-    "@strapi/provider-upload-local": "5.15.0",
-    "@strapi/utils": "5.15.0",
+    "@strapi/design-system": "2.0.0-rc.26",
+    "@strapi/icons": "2.0.0-rc.26",
+    "@strapi/provider-upload-local": "5.15.1",
+    "@strapi/utils": "5.15.1",
     "byte-size": "8.1.1",
     cropperjs: "1.6.1",
     "date-fns": "2.30.0",
@@ -85,8 +85,8 @@ var dependencies = {
     yup: "0.32.9"
 };
 var devDependencies = {
-    "@strapi/admin": "5.15.0",
-    "@strapi/types": "5.15.0",
+    "@strapi/admin": "5.15.1",
+    "@strapi/types": "5.15.1",
     "@testing-library/dom": "10.1.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
@@ -95,7 +95,7 @@ var devDependencies = {
     "@types/koa": "2.13.4",
     "@types/koa-range": "0.3.5",
     "@types/koa-static": "4.0.2",
-    formidable: "3.5.1",
+    formidable: "3.5.4",
     koa: "2.16.1",
     "koa-body": "6.0.1",
     msw: "1.3.0",

package/dist/admin/src/components/AssetCard/AssetCard.d.ts

@@ -13,6 +13,7 @@ interface AssetCardProps {
     size?: 'S' | 'M';
     allowedTypes?: AllowedTypes[];
     alt?: string;
+    className?: string;
 }
-export declare const AssetCard: ({ asset, isSelected, onSelect, onEdit, onRemove, size, local, }: AssetCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AssetCard: ({ asset, isSelected, onSelect, onEdit, onRemove, size, local, className, }: AssetCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/admin/src/components/AssetCard/AssetCardBase.d.ts

@@ -10,5 +10,6 @@ export interface AssetCardBaseProps {
     selected?: boolean;
     subtitle?: string;
     variant: 'Image' | 'Video' | 'Audio' | 'Doc';
+    className?: string;
 }
-export declare const AssetCardBase: ({ children, extension, isSelectable, name, onSelect, onRemove, onEdit, selected, subtitle, variant, }: AssetCardBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AssetCardBase: ({ children, extension, isSelectable, name, onSelect, onRemove, onEdit, selected, subtitle, variant, className, }: AssetCardBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.d.ts

@@ -1,4 +1,4 @@
 import type { File as FileAsset } from '../../../../../shared/contracts/files';
 export declare const CarouselAsset: ({ asset }: {
     asset: FileAsset;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/upload",
-  "version": "5.15.1",
+  "version": "5.16.0",
   "description": "Makes it easy to upload images and files to your Strapi Application.",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
@@ -61,10 +61,10 @@
   },
   "dependencies": {
     "@mux/mux-player-react": "3.1.0",
-    "@strapi/design-system": "2.0.0-rc.25",
-    "@strapi/icons": "2.0.0-rc.25",
-    "@strapi/provider-upload-local": "5.15.1",
-    "@strapi/utils": "5.15.1",
+    "@strapi/design-system": "2.0.0-rc.26",
+    "@strapi/icons": "2.0.0-rc.26",
+    "@strapi/provider-upload-local": "5.16.0",
+    "@strapi/utils": "5.16.0",
     "byte-size": "8.1.1",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
@@ -86,8 +86,8 @@
     "yup": "0.32.9"
   },
   "devDependencies": {
-    "@strapi/admin": "5.15.1",
-    "@strapi/types": "5.15.1",
+    "@strapi/admin": "5.16.0",
+    "@strapi/types": "5.16.0",
     "@testing-library/dom": "10.1.0",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
@@ -96,7 +96,7 @@
     "@types/koa": "2.13.4",
     "@types/koa-range": "0.3.5",
     "@types/koa-static": "4.0.2",
-    "formidable": "3.5.1",
+    "formidable": "3.5.4",
     "koa": "2.16.1",
     "koa-body": "6.0.1",
     "msw": "1.3.0",