@strapi/upload 5.15.1 → 5.16.1

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/EditAssetDialog/PreviewBox/PreviewBox.js

@@ -5,7 +5,9 @@ var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
+var cropperjscss = require('cropperjs/dist/cropper.css?raw');
 var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
 var constants = require('../../../constants.js');
 var useCropImg = require('../../../hooks/useCropImg.js');
 var useEditAsset = require('../../../hooks/useEditAsset.js');
@@ -23,7 +25,6 @@ var RemoveAssetDialog = require('../RemoveAssetDialog.js');
 var AssetPreview = require('./AssetPreview.js');
 var CroppingActions = require('./CroppingActions.js');
 var PreviewComponents = require('./PreviewComponents.js');
-require('cropperjs/dist/cropper.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -46,6 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 // TODO: find a better naming convention for the file that was an index file before
 const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
+    const CropperjsStyle = styledComponents.createGlobalStyle`${cropperjscss}`;
     const { trackUsage } = strapiAdmin.useTracking();
     const previewRef = React__namespace.useRef(null);
     const [isCropImageReady, setIsCropImageReady] = React__namespace.useState(false);
@@ -155,6 +157,7 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
+            /*#__PURE__*/ jsxRuntime.jsx(CropperjsStyle, {}),
             /*#__PURE__*/ jsxRuntime.jsxs(PreviewComponents.RelativeBox, {
                 hasRadius: true,
                 background: "neutral150",

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\nimport 'cropperjs/dist/cropper.css';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","RelativeBox","hasRadius","background","borderColor","_jsx","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}
+{"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <CropperjsStyle />\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs

@@ -3,7 +3,9 @@ import * as React from 'react';
 import { useTracking } from '@strapi/admin/strapi-admin';
 import { Flex, IconButton } from '@strapi/design-system';
 import { Trash, Download, Crop } from '@strapi/icons';
+import cropperjscss from 'cropperjs/dist/cropper.css?raw';
 import { useIntl } from 'react-intl';
+import { createGlobalStyle } from 'styled-components';
 import { AssetType } from '../../../constants.mjs';
 import { useCropImg } from '../../../hooks/useCropImg.mjs';
 import { useEditAsset } from '../../../hooks/useEditAsset.mjs';
@@ -21,10 +23,10 @@ import { RemoveAssetDialog } from '../RemoveAssetDialog.mjs';
 import { AssetPreview } from './AssetPreview.mjs';
 import { CroppingActions } from './CroppingActions.mjs';
 import { RelativeBox, ActionRow, Wrapper, UploadProgressWrapper, BadgeOverride } from './PreviewComponents.mjs';
-import 'cropperjs/dist/cropper.css';
 
 // TODO: find a better naming convention for the file that was an index file before
 const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
+    const CropperjsStyle = createGlobalStyle`${cropperjscss}`;
     const { trackUsage } = useTracking();
     const previewRef = React.useRef(null);
     const [isCropImageReady, setIsCropImageReady] = React.useState(false);
@@ -134,6 +136,7 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
+            /*#__PURE__*/ jsx(CropperjsStyle, {}),
             /*#__PURE__*/ jsxs(RelativeBox, {
                 hasRadius: true,
                 background: "neutral150",

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewBox.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\nimport 'cropperjs/dist/cropper.css';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","RelativeBox","hasRadius","background","borderColor","_jsx","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}
+{"version":3,"file":"PreviewBox.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <CropperjsStyle />\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}

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.16.0";
 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.27",
+    "@strapi/icons": "2.0.0-rc.27",
+    "@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",
@@ -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.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",
@@ -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.16.0";
 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.27",
+    "@strapi/icons": "2.0.0-rc.27",
+    "@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",
@@ -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.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",
@@ -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/EditAssetDialog/PreviewBox/PreviewBox.d.ts

@@ -1,5 +1,4 @@
 import type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';
-import 'cropperjs/dist/cropper.css';
 interface Asset extends Omit<FileDefinition, 'folder'> {
     isLocal?: boolean;
     rawFile?: RawFile;

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.1",
   "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.27",
+    "@strapi/icons": "2.0.0-rc.27",
+    "@strapi/provider-upload-local": "5.16.1",
+    "@strapi/utils": "5.16.1",
     "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.1",
+    "@strapi/types": "5.16.1",
     "@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",