@strapi/upload 5.12.1 → 5.12.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocAssetCard.js","sources":["../../../../admin/src/components/AssetCard/DocAssetCard.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\nconst CardAsset = styled(Flex)`\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface DocAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  size?: 'S' | 'M';\n  extension: string;\n}\n\nexport const DocAssetCard = ({\n  name,\n  extension,\n  size = 'M',\n  selected = false,\n  ...restProps\n}: DocAssetCardProps) => {\n  const { formatMessage } = useIntl();\n  return (\n    <AssetCardBase\n      name={name}\n      extension={extension}\n      selected={selected}\n      {...restProps}\n      variant=\"Doc\"\n    >\n      <CardAsset width=\"100%\" height={size === 'S' ? `8.8rem` : `16.4rem`} justifyContent=\"center\">\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          {extension === 'pdf' ? (\n            <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          ) : (\n            <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          )}\n\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    </AssetCardBase>\n  );\n};\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","DocAssetCard","name","extension","size","selected","restProps","formatMessage","useIntl","_jsx","AssetCardBase","variant","width","height","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","File","Typography","textColor","id","defaultMessage"],"mappings":";;;;;;;;;AAOA,MAAMA,SAAAA,GAAYC,uBAAOC,CAAAA,iBAAAA,CAAK;AACb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AAOYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,IAAI,EACJC,SAAS,EACTC,IAAAA,GAAO,GAAG,EACVC,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACe,EAAA,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;QACCR,IAAMA,EAAAA,IAAAA;QACNC,SAAWA,EAAAA,SAAAA;QACXE,QAAUA,EAAAA,QAAAA;AACT,QAAA,GAAGC,SAAS;QACbK,OAAQ,EAAA,KAAA;AAER,QAAA,QAAA,gBAAAF,cAAChB,CAAAA,SAAAA,EAAAA;YAAUmB,KAAM,EAAA,MAAA;YAAOC,MAAQT,EAAAA,IAAAA,KAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;YAAEU,cAAe,EAAA,QAAA;AAClF,YAAA,QAAA,gBAAAC,eAACpB,CAAAA,iBAAAA,EAAAA;gBAAKqB,GAAK,EAAA,CAAA;gBAAGC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,QAAA;;AACzCf,oBAAAA,SAAAA,KAAc,sBACbM,cAACU,CAAAA,aAAAA,EAAAA;wBAAQC,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;uCAEhEJ,cAACa,CAAAA,UAAAA,EAAAA;wBAAKF,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;;kCAG/DJ,cAACc,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAab,OAAQ,EAAA,IAAA;kCACxCJ,aAAc,CAAA;4BACbkB,EAAI,EAAA,WAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAMZ;;;;"}

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Flex, Typography } from '@strapi/design-system';
+import { FilePdf, File } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { AssetCardBase } from './AssetCardBase.mjs';
+
+const CardAsset = styled(Flex)`
+  border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
+  background: linear-gradient(
+    180deg,
+    ${({ theme })=>theme.colors.neutral0} 0%,
+    ${({ theme })=>theme.colors.neutral100} 121.48%
+  );
+`;
+const DocAssetCard = ({ name, extension, size = 'M', selected = false, ...restProps })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(AssetCardBase, {
+        name: name,
+        extension: extension,
+        selected: selected,
+        ...restProps,
+        variant: "Doc",
+        children: /*#__PURE__*/ jsx(CardAsset, {
+            width: "100%",
+            height: size === 'S' ? `8.8rem` : `16.4rem`,
+            justifyContent: "center",
+            children: /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                direction: "column",
+                alignItems: "center",
+                children: [
+                    extension === 'pdf' ? /*#__PURE__*/ jsx(FilePdf, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }) : /*#__PURE__*/ jsx(File, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral500",
+                        variant: "pi",
+                        children: formatMessage({
+                            id: 'noPreview',
+                            defaultMessage: 'No preview available'
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { DocAssetCard };
+//# sourceMappingURL=DocAssetCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/DocAssetCard.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\nconst CardAsset = styled(Flex)`\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface DocAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  size?: 'S' | 'M';\n  extension: string;\n}\n\nexport const DocAssetCard = ({\n  name,\n  extension,\n  size = 'M',\n  selected = false,\n  ...restProps\n}: DocAssetCardProps) => {\n  const { formatMessage } = useIntl();\n  return (\n    <AssetCardBase\n      name={name}\n      extension={extension}\n      selected={selected}\n      {...restProps}\n      variant=\"Doc\"\n    >\n      <CardAsset width=\"100%\" height={size === 'S' ? `8.8rem` : `16.4rem`} justifyContent=\"center\">\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          {extension === 'pdf' ? (\n            <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          ) : (\n            <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          )}\n\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    </AssetCardBase>\n  );\n};\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","DocAssetCard","name","extension","size","selected","restProps","formatMessage","useIntl","_jsx","AssetCardBase","variant","width","height","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","File","Typography","textColor","id","defaultMessage"],"mappings":";;;;;;;AAOA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,IAAAA,CAAK;AACb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AAOYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,IAAI,EACJC,SAAS,EACTC,IAAAA,GAAO,GAAG,EACVC,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACe,EAAA,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;QACCR,IAAMA,EAAAA,IAAAA;QACNC,SAAWA,EAAAA,SAAAA;QACXE,QAAUA,EAAAA,QAAAA;AACT,QAAA,GAAGC,SAAS;QACbK,OAAQ,EAAA,KAAA;AAER,QAAA,QAAA,gBAAAF,GAAChB,CAAAA,SAAAA,EAAAA;YAAUmB,KAAM,EAAA,MAAA;YAAOC,MAAQT,EAAAA,IAAAA,KAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;YAAEU,cAAe,EAAA,QAAA;AAClF,YAAA,QAAA,gBAAAC,IAACpB,CAAAA,IAAAA,EAAAA;gBAAKqB,GAAK,EAAA,CAAA;gBAAGC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,QAAA;;AACzCf,oBAAAA,SAAAA,KAAc,sBACbM,GAACU,CAAAA,OAAAA,EAAAA;wBAAQC,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;uCAEhEJ,GAACa,CAAAA,IAAAA,EAAAA;wBAAKF,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;;kCAG/DJ,GAACc,CAAAA,UAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAab,OAAQ,EAAA,IAAA;kCACxCJ,aAAc,CAAA;4BACbkB,EAAI,EAAA,WAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAMZ;;;;"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var appendSearchParamsToUrl = require('../../utils/appendSearchParamsToUrl.js');
+require('byte-size');
+require('date-fns');
+require('qs');
+require('../../constants.js');
+require('../../utils/urlYupSchema.js');
+var AssetCardBase = require('./AssetCardBase.js');
+
+const ImageAssetCard = ({ height, width, thumbnail, size = 'M', alt, isUrlSigned, selected = false, ...props })=>{
+    // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)
+    // applied only if the url is not signed to prevent the signature from being invalidated
+    const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl.appendSearchParamsToUrl({
+        url: thumbnail,
+        params: {
+            updatedAt: props.updatedAt
+        }
+    });
+    const subtitle = height && width ? ` - ${width}✕${height}` : undefined;
+    return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
+        ...props,
+        selected: selected,
+        subtitle: subtitle,
+        variant: "Image",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
+            src: thumbnailUrl,
+            size: size,
+            alt: alt
+        })
+    });
+};
+
+exports.ImageAssetCard = ImageAssetCard;
+//# sourceMappingURL=ImageAssetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAssetCard.js","sources":["../../../../admin/src/components/AssetCard/ImageAssetCard.tsx"],"sourcesContent":["import { CardAsset } from '@strapi/design-system';\n\nimport { appendSearchParamsToUrl } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\ninterface ImageAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  height?: number;\n  width?: number;\n  size?: 'S' | 'M';\n  thumbnail: string;\n  alt: string;\n  updatedAt?: string;\n  isUrlSigned: boolean;\n}\n\nexport const ImageAssetCard = ({\n  height,\n  width,\n  thumbnail,\n  size = 'M',\n  alt,\n  isUrlSigned,\n  selected = false,\n  ...props\n}: ImageAssetCardProps) => {\n  // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)\n  // applied only if the url is not signed to prevent the signature from being invalidated\n  const thumbnailUrl = isUrlSigned\n    ? thumbnail\n    : appendSearchParamsToUrl({\n        url: thumbnail,\n        params: { updatedAt: props.updatedAt },\n      });\n  const subtitle = height && width ? ` - ${width}✕${height}` : undefined;\n\n  return (\n    <AssetCardBase {...props} selected={selected} subtitle={subtitle} variant=\"Image\">\n      <CardAsset src={thumbnailUrl} size={size} alt={alt} />\n    </AssetCardBase>\n  );\n};\n"],"names":["ImageAssetCard","height","width","thumbnail","size","alt","isUrlSigned","selected","props","thumbnailUrl","appendSearchParamsToUrl","url","params","updatedAt","subtitle","undefined","_jsx","AssetCardBase","variant","CardAsset","src"],"mappings":";;;;;;;;;;;;AAgBO,MAAMA,iBAAiB,CAAC,EAC7BC,MAAM,EACNC,KAAK,EACLC,SAAS,EACTC,OAAO,GAAG,EACVC,GAAG,EACHC,WAAW,EACXC,QAAW,GAAA,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;;;IAGpB,MAAMC,YAAAA,GAAeH,WACjBH,GAAAA,SAAAA,GACAO,+CAAwB,CAAA;QACtBC,GAAKR,EAAAA,SAAAA;QACLS,MAAQ,EAAA;AAAEC,YAAAA,SAAAA,EAAWL,MAAMK;AAAU;AACvC,KAAA,CAAA;IACJ,MAAMC,QAAAA,GAAWb,MAAUC,IAAAA,KAAAA,GAAQ,CAAC,GAAG,EAAEA,KAAAA,CAAM,CAAC,EAAED,MAAO,CAAA,CAAC,GAAGc,SAAAA;AAE7D,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;AAAe,QAAA,GAAGT,KAAK;QAAED,QAAUA,EAAAA,QAAAA;QAAUO,QAAUA,EAAAA,QAAAA;QAAUI,OAAQ,EAAA,OAAA;AACxE,QAAA,QAAA,gBAAAF,cAACG,CAAAA,sBAAAA,EAAAA;YAAUC,GAAKX,EAAAA,YAAAA;YAAcL,IAAMA,EAAAA,IAAAA;YAAMC,GAAKA,EAAAA;;;AAGrD;;;;"}

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

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { CardAsset } from '@strapi/design-system';
+import { appendSearchParamsToUrl } from '../../utils/appendSearchParamsToUrl.mjs';
+import 'byte-size';
+import 'date-fns';
+import 'qs';
+import '../../constants.mjs';
+import '../../utils/urlYupSchema.mjs';
+import { AssetCardBase } from './AssetCardBase.mjs';
+
+const ImageAssetCard = ({ height, width, thumbnail, size = 'M', alt, isUrlSigned, selected = false, ...props })=>{
+    // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)
+    // applied only if the url is not signed to prevent the signature from being invalidated
+    const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl({
+        url: thumbnail,
+        params: {
+            updatedAt: props.updatedAt
+        }
+    });
+    const subtitle = height && width ? ` - ${width}✕${height}` : undefined;
+    return /*#__PURE__*/ jsx(AssetCardBase, {
+        ...props,
+        selected: selected,
+        subtitle: subtitle,
+        variant: "Image",
+        children: /*#__PURE__*/ jsx(CardAsset, {
+            src: thumbnailUrl,
+            size: size,
+            alt: alt
+        })
+    });
+};
+
+export { ImageAssetCard };
+//# sourceMappingURL=ImageAssetCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/ImageAssetCard.tsx"],"sourcesContent":["import { CardAsset } from '@strapi/design-system';\n\nimport { appendSearchParamsToUrl } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\ninterface ImageAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  height?: number;\n  width?: number;\n  size?: 'S' | 'M';\n  thumbnail: string;\n  alt: string;\n  updatedAt?: string;\n  isUrlSigned: boolean;\n}\n\nexport const ImageAssetCard = ({\n  height,\n  width,\n  thumbnail,\n  size = 'M',\n  alt,\n  isUrlSigned,\n  selected = false,\n  ...props\n}: ImageAssetCardProps) => {\n  // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)\n  // applied only if the url is not signed to prevent the signature from being invalidated\n  const thumbnailUrl = isUrlSigned\n    ? thumbnail\n    : appendSearchParamsToUrl({\n        url: thumbnail,\n        params: { updatedAt: props.updatedAt },\n      });\n  const subtitle = height && width ? ` - ${width}✕${height}` : undefined;\n\n  return (\n    <AssetCardBase {...props} selected={selected} subtitle={subtitle} variant=\"Image\">\n      <CardAsset src={thumbnailUrl} size={size} alt={alt} />\n    </AssetCardBase>\n  );\n};\n"],"names":["ImageAssetCard","height","width","thumbnail","size","alt","isUrlSigned","selected","props","thumbnailUrl","appendSearchParamsToUrl","url","params","updatedAt","subtitle","undefined","_jsx","AssetCardBase","variant","CardAsset","src"],"mappings":";;;;;;;;;;AAgBO,MAAMA,iBAAiB,CAAC,EAC7BC,MAAM,EACNC,KAAK,EACLC,SAAS,EACTC,OAAO,GAAG,EACVC,GAAG,EACHC,WAAW,EACXC,QAAW,GAAA,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;;;IAGpB,MAAMC,YAAAA,GAAeH,WACjBH,GAAAA,SAAAA,GACAO,uBAAwB,CAAA;QACtBC,GAAKR,EAAAA,SAAAA;QACLS,MAAQ,EAAA;AAAEC,YAAAA,SAAAA,EAAWL,MAAMK;AAAU;AACvC,KAAA,CAAA;IACJ,MAAMC,QAAAA,GAAWb,MAAUC,IAAAA,KAAAA,GAAQ,CAAC,GAAG,EAAEA,KAAAA,CAAM,CAAC,EAAED,MAAO,CAAA,CAAC,GAAGc,SAAAA;AAE7D,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;AAAe,QAAA,GAAGT,KAAK;QAAED,QAAUA,EAAAA,QAAAA;QAAUO,QAAUA,EAAAA,QAAAA;QAAUI,OAAQ,EAAA,OAAA;AACxE,QAAA,QAAA,gBAAAF,GAACG,CAAAA,SAAAA,EAAAA;YAAUC,GAAKX,EAAAA,YAAAA;YAAcL,IAAMA,EAAAA,IAAAA;YAAMC,GAAKA,EAAAA;;;AAGrD;;;;"}

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

@@ -0,0 +1,152 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var constants = require('../../constants.js');
+var useUpload = require('../../hooks/useUpload.js');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../utils/getTrad.js');
+require('qs');
+require('../../utils/urlYupSchema.js');
+var UploadProgress = require('../UploadProgress/UploadProgress.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const UploadProgressWrapper = styledComponents.styled.div`
+  height: 8.8rem;
+  width: 100%;
+`;
+const Extension = styledComponents.styled.span`
+  text-transform: uppercase;
+`;
+const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles, folderId = null })=>{
+    const { upload, cancel, error, progress, status } = useUpload.useUpload();
+    const { formatMessage } = reactIntl.useIntl();
+    let badgeContent = formatMessage({
+        id: getTrad.getTrad('settings.section.doc.label'),
+        defaultMessage: 'Doc'
+    });
+    if (asset.type === constants.AssetType.Image) {
+        badgeContent = formatMessage({
+            id: getTrad.getTrad('settings.section.image.label'),
+            defaultMessage: 'Image'
+        });
+    } else if (asset.type === constants.AssetType.Video) {
+        badgeContent = formatMessage({
+            id: getTrad.getTrad('settings.section.video.label'),
+            defaultMessage: 'Video'
+        });
+    } else if (asset.type === constants.AssetType.Audio) {
+        badgeContent = formatMessage({
+            id: getTrad.getTrad('settings.section.audio.label'),
+            defaultMessage: 'Audio'
+        });
+    }
+    React__namespace.useEffect(()=>{
+        const uploadFile = async ()=>{
+            const files = await upload(asset, folderId ? Number(folderId) : null);
+            if (addUploadedFiles) {
+                addUploadedFiles(files);
+            }
+        };
+        uploadFile();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React__namespace.useEffect(()=>{
+        onStatusChange(status);
+    }, [
+        status,
+        onStatusChange
+    ]);
+    const handleCancel = ()=>{
+        cancel();
+        onCancel(asset.rawFile);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Card, {
+                borderColor: error ? 'danger600' : 'neutral150',
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardHeader, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgressWrapper, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
+                                error: error || undefined,
+                                onCancel: handleCancel,
+                                progress: progress
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardBody, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardContent, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingTop: 1,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            tag: "h2",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTitle, {
+                                                tag: "span",
+                                                children: asset.name
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardSubtitle, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(Extension, {
+                                            children: asset.ext
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                paddingTop: 1,
+                                grow: 1,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBadge, {
+                                    children: badgeContent
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                fontWeight: "bold",
+                textColor: "danger600",
+                children: formatMessage(error?.message ? {
+                    id: getTrad.getTrad(`apiError.${error.message}`),
+                    defaultMessage: error.message
+                } : {
+                    id: getTrad.getTrad('upload.generic-error'),
+                    defaultMessage: 'An error occured while uploading the file.'
+                })
+            }) : undefined
+        ]
+    });
+};
+
+exports.UploadingAssetCard = UploadingAssetCard;
+//# sourceMappingURL=UploadingAssetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadingAssetCard.js","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardBadge,\n  CardBody,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../constants';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n  height: 8.8rem;\n  width: 100%;\n`;\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n  onCancel: (rawFile: RawFile) => void;\n  onStatusChange: (status: string) => void;\n  addUploadedFiles: (files: File[]) => void;\n  folderId?: string | number | null;\n  asset: Asset;\n  id?: string;\n  size?: 'S' | 'M';\n}\n\ninterface Asset extends File {\n  rawFile?: RawFile;\n  type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n  asset,\n  onCancel,\n  onStatusChange,\n  addUploadedFiles,\n  folderId = null,\n}: UploadingAssetCardProps) => {\n  const { upload, cancel, error, progress, status } = useUpload();\n  const { formatMessage } = useIntl();\n\n  let badgeContent = formatMessage({\n    id: getTrad('settings.section.doc.label'),\n    defaultMessage: 'Doc',\n  });\n\n  if (asset.type === AssetType.Image) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.image.label'),\n      defaultMessage: 'Image',\n    });\n  } else if (asset.type === AssetType.Video) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.video.label'),\n      defaultMessage: 'Video',\n    });\n  } else if (asset.type === AssetType.Audio) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.audio.label'),\n      defaultMessage: 'Audio',\n    });\n  }\n\n  React.useEffect(() => {\n    const uploadFile = async () => {\n      const files = await upload(asset, folderId ? Number(folderId) : null);\n\n      if (addUploadedFiles) {\n        addUploadedFiles(files);\n      }\n    };\n\n    uploadFile();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  React.useEffect(() => {\n    onStatusChange(status);\n  }, [status, onStatusChange]);\n\n  const handleCancel = () => {\n    cancel();\n    onCancel(asset.rawFile!);\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Card borderColor={error ? 'danger600' : 'neutral150'}>\n        <CardHeader>\n          <UploadProgressWrapper>\n            <UploadProgress\n              error={error || undefined}\n              onCancel={handleCancel}\n              progress={progress}\n            />\n          </UploadProgressWrapper>\n        </CardHeader>\n        <CardBody>\n          <CardContent>\n            <Box paddingTop={1}>\n              <Typography tag=\"h2\">\n                <CardTitle tag=\"span\">{asset.name}</CardTitle>\n              </Typography>\n            </Box>\n            <CardSubtitle>\n              <Extension>{asset.ext}</Extension>\n            </CardSubtitle>\n          </CardContent>\n          <Flex paddingTop={1} grow={1}>\n            <CardBadge>{badgeContent}</CardBadge>\n          </Flex>\n        </CardBody>\n      </Card>\n      {error ? (\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n          {formatMessage(\n            error?.message\n              ? {\n                  id: getTrad(`apiError.${error.message}`),\n                  defaultMessage: error.message,\n                  /* See issue: https://github.com/strapi/strapi/issues/13867\n             A proxy might return an error, before the request reaches Strapi\n             and therefore we need to handle errors gracefully.\n          */\n                }\n              : {\n                  id: getTrad('upload.generic-error'),\n                  defaultMessage: 'An error occured while uploading the file.',\n                }\n          )}\n        </Typography>\n      ) : undefined}\n    </Flex>\n  );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":"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"}

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

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Card, CardHeader, CardBody, CardContent, Box, Typography, CardTitle, CardSubtitle, CardBadge } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { AssetType } from '../../constants.mjs';
+import { useUpload } from '../../hooks/useUpload.mjs';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../utils/getTrad.mjs';
+import 'qs';
+import '../../utils/urlYupSchema.mjs';
+import { UploadProgress } from '../UploadProgress/UploadProgress.mjs';
+
+const UploadProgressWrapper = styled.div`
+  height: 8.8rem;
+  width: 100%;
+`;
+const Extension = styled.span`
+  text-transform: uppercase;
+`;
+const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles, folderId = null })=>{
+    const { upload, cancel, error, progress, status } = useUpload();
+    const { formatMessage } = useIntl();
+    let badgeContent = formatMessage({
+        id: getTrad('settings.section.doc.label'),
+        defaultMessage: 'Doc'
+    });
+    if (asset.type === AssetType.Image) {
+        badgeContent = formatMessage({
+            id: getTrad('settings.section.image.label'),
+            defaultMessage: 'Image'
+        });
+    } else if (asset.type === AssetType.Video) {
+        badgeContent = formatMessage({
+            id: getTrad('settings.section.video.label'),
+            defaultMessage: 'Video'
+        });
+    } else if (asset.type === AssetType.Audio) {
+        badgeContent = formatMessage({
+            id: getTrad('settings.section.audio.label'),
+            defaultMessage: 'Audio'
+        });
+    }
+    React.useEffect(()=>{
+        const uploadFile = async ()=>{
+            const files = await upload(asset, folderId ? Number(folderId) : null);
+            if (addUploadedFiles) {
+                addUploadedFiles(files);
+            }
+        };
+        uploadFile();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(()=>{
+        onStatusChange(status);
+    }, [
+        status,
+        onStatusChange
+    ]);
+    const handleCancel = ()=>{
+        cancel();
+        onCancel(asset.rawFile);
+    };
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsxs(Card, {
+                borderColor: error ? 'danger600' : 'neutral150',
+                children: [
+                    /*#__PURE__*/ jsx(CardHeader, {
+                        children: /*#__PURE__*/ jsx(UploadProgressWrapper, {
+                            children: /*#__PURE__*/ jsx(UploadProgress, {
+                                error: error || undefined,
+                                onCancel: handleCancel,
+                                progress: progress
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(CardBody, {
+                        children: [
+                            /*#__PURE__*/ jsxs(CardContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Box, {
+                                        paddingTop: 1,
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            tag: "h2",
+                                            children: /*#__PURE__*/ jsx(CardTitle, {
+                                                tag: "span",
+                                                children: asset.name
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(CardSubtitle, {
+                                        children: /*#__PURE__*/ jsx(Extension, {
+                                            children: asset.ext
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Flex, {
+                                paddingTop: 1,
+                                grow: 1,
+                                children: /*#__PURE__*/ jsx(CardBadge, {
+                                    children: badgeContent
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(Typography, {
+                variant: "pi",
+                fontWeight: "bold",
+                textColor: "danger600",
+                children: formatMessage(error?.message ? {
+                    id: getTrad(`apiError.${error.message}`),
+                    defaultMessage: error.message
+                } : {
+                    id: getTrad('upload.generic-error'),
+                    defaultMessage: 'An error occured while uploading the file.'
+                })
+            }) : undefined
+        ]
+    });
+};
+
+export { UploadingAssetCard };
+//# sourceMappingURL=UploadingAssetCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadingAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardBadge,\n  CardBody,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../constants';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n  height: 8.8rem;\n  width: 100%;\n`;\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n  onCancel: (rawFile: RawFile) => void;\n  onStatusChange: (status: string) => void;\n  addUploadedFiles: (files: File[]) => void;\n  folderId?: string | number | null;\n  asset: Asset;\n  id?: string;\n  size?: 'S' | 'M';\n}\n\ninterface Asset extends File {\n  rawFile?: RawFile;\n  type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n  asset,\n  onCancel,\n  onStatusChange,\n  addUploadedFiles,\n  folderId = null,\n}: UploadingAssetCardProps) => {\n  const { upload, cancel, error, progress, status } = useUpload();\n  const { formatMessage } = useIntl();\n\n  let badgeContent = formatMessage({\n    id: getTrad('settings.section.doc.label'),\n    defaultMessage: 'Doc',\n  });\n\n  if (asset.type === AssetType.Image) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.image.label'),\n      defaultMessage: 'Image',\n    });\n  } else if (asset.type === AssetType.Video) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.video.label'),\n      defaultMessage: 'Video',\n    });\n  } else if (asset.type === AssetType.Audio) {\n    badgeContent = formatMessage({\n      id: getTrad('settings.section.audio.label'),\n      defaultMessage: 'Audio',\n    });\n  }\n\n  React.useEffect(() => {\n    const uploadFile = async () => {\n      const files = await upload(asset, folderId ? Number(folderId) : null);\n\n      if (addUploadedFiles) {\n        addUploadedFiles(files);\n      }\n    };\n\n    uploadFile();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  React.useEffect(() => {\n    onStatusChange(status);\n  }, [status, onStatusChange]);\n\n  const handleCancel = () => {\n    cancel();\n    onCancel(asset.rawFile!);\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Card borderColor={error ? 'danger600' : 'neutral150'}>\n        <CardHeader>\n          <UploadProgressWrapper>\n            <UploadProgress\n              error={error || undefined}\n              onCancel={handleCancel}\n              progress={progress}\n            />\n          </UploadProgressWrapper>\n        </CardHeader>\n        <CardBody>\n          <CardContent>\n            <Box paddingTop={1}>\n              <Typography tag=\"h2\">\n                <CardTitle tag=\"span\">{asset.name}</CardTitle>\n              </Typography>\n            </Box>\n            <CardSubtitle>\n              <Extension>{asset.ext}</Extension>\n            </CardSubtitle>\n          </CardContent>\n          <Flex paddingTop={1} grow={1}>\n            <CardBadge>{badgeContent}</CardBadge>\n          </Flex>\n        </CardBody>\n      </Card>\n      {error ? (\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n          {formatMessage(\n            error?.message\n              ? {\n                  id: getTrad(`apiError.${error.message}`),\n                  defaultMessage: error.message,\n                  /* See issue: https://github.com/strapi/strapi/issues/13867\n             A proxy might return an error, before the request reaches Strapi\n             and therefore we need to handle errors gracefully.\n          */\n                }\n              : {\n                  id: getTrad('upload.generic-error'),\n                  defaultMessage: 'An error occured while uploading the file.',\n                }\n          )}\n        </Typography>\n      ) : undefined}\n    </Flex>\n  );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+require('byte-size');
+var formatDuration = require('../../utils/formatDuration.js');
+require('qs');
+require('../../constants.js');
+require('../../utils/urlYupSchema.js');
+var AssetCardBase = require('./AssetCardBase.js');
+var VideoPreview = require('./VideoPreview.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const VideoPreviewWrapper = styledComponents.styled(designSystem.Box)`
+  canvas,
+  video {
+    display: block;
+    pointer-events: none;
+    max-width: 100%;
+    max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
+  }
+`;
+const VideoAssetCard = ({ name, url, mime, size = 'M', selected = false, ...props })=>{
+    const [duration, setDuration] = React__namespace.useState();
+    const formattedDuration = duration && formatDuration.formatDuration(duration);
+    return /*#__PURE__*/ jsxRuntime.jsxs(AssetCardBase.AssetCardBase, {
+        selected: selected,
+        name: name,
+        ...props,
+        variant: "Video",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
+                size: size,
+                children: /*#__PURE__*/ jsxRuntime.jsx(VideoPreviewWrapper, {
+                    size: size,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(VideoPreview.VideoPreview, {
+                        url: url,
+                        mime: mime,
+                        onLoadDuration: setDuration,
+                        alt: name
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTimer, {
+                children: formattedDuration || '...'
+            })
+        ]
+    });
+};
+
+exports.VideoAssetCard = VideoAssetCard;
+//# sourceMappingURL=VideoAssetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoAssetCard.js","sources":["../../../../admin/src/components/AssetCard/VideoAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, CardAsset, CardTimer } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { formatDuration } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { VideoPreview } from './VideoPreview';\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    display: block;\n    pointer-events: none;\n    max-width: 100%;\n    max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n  }\n`;\n\ninterface VideoAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  mime: string;\n  url: string;\n  size?: 'S' | 'M';\n}\n\nexport const VideoAssetCard = ({\n  name,\n  url,\n  mime,\n  size = 'M',\n  selected = false,\n  ...props\n}: VideoAssetCardProps) => {\n  const [duration, setDuration] = React.useState<number>();\n\n  const formattedDuration = duration && formatDuration(duration);\n\n  return (\n    <AssetCardBase selected={selected} name={name} {...props} variant=\"Video\">\n      <CardAsset size={size}>\n        <VideoPreviewWrapper size={size}>\n          <VideoPreview url={url} mime={mime} onLoadDuration={setDuration} alt={name} />\n        </VideoPreviewWrapper>\n      </CardAsset>\n      <CardTimer>{formattedDuration || '...'}</CardTimer>\n    </AssetCardBase>\n  );\n};\n"],"names":["VideoPreviewWrapper","styled","Box","size","VideoAssetCard","name","url","mime","selected","props","duration","setDuration","React","useState","formattedDuration","formatDuration","_jsxs","AssetCardBase","variant","_jsx","CardAsset","VideoPreview","onLoadDuration","alt","CardTimer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,mBAAAA,GAAsBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;gBAMvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;MAQYC,cAAiB,GAAA,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJJ,OAAO,GAAG,EACVK,WAAW,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;AACpB,IAAA,MAAM,CAACC,QAAAA,EAAUC,WAAY,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IAE9C,MAAMC,iBAAAA,GAAoBJ,YAAYK,6BAAeL,CAAAA,QAAAA,CAAAA;AAErD,IAAA,qBACEM,eAACC,CAAAA,2BAAAA,EAAAA;QAAcT,QAAUA,EAAAA,QAAAA;QAAUH,IAAMA,EAAAA,IAAAA;AAAO,QAAA,GAAGI,KAAK;QAAES,OAAQ,EAAA,OAAA;;0BAChEC,cAACC,CAAAA,sBAAAA,EAAAA;gBAAUjB,IAAMA,EAAAA,IAAAA;AACf,gBAAA,QAAA,gBAAAgB,cAACnB,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAgB,cAACE,CAAAA,yBAAAA,EAAAA;wBAAaf,GAAKA,EAAAA,GAAAA;wBAAKC,IAAMA,EAAAA,IAAAA;wBAAMe,cAAgBX,EAAAA,WAAAA;wBAAaY,GAAKlB,EAAAA;;;;0BAG1Ec,cAACK,CAAAA,sBAAAA,EAAAA;0BAAWV,iBAAqB,IAAA;;;;AAGvC;;;;"}

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box, CardAsset, CardTimer } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import 'byte-size';
+import { formatDuration } from '../../utils/formatDuration.mjs';
+import 'qs';
+import '../../constants.mjs';
+import '../../utils/urlYupSchema.mjs';
+import { AssetCardBase } from './AssetCardBase.mjs';
+import { VideoPreview } from './VideoPreview.mjs';
+
+const VideoPreviewWrapper = styled(Box)`
+  canvas,
+  video {
+    display: block;
+    pointer-events: none;
+    max-width: 100%;
+    max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
+  }
+`;
+const VideoAssetCard = ({ name, url, mime, size = 'M', selected = false, ...props })=>{
+    const [duration, setDuration] = React.useState();
+    const formattedDuration = duration && formatDuration(duration);
+    return /*#__PURE__*/ jsxs(AssetCardBase, {
+        selected: selected,
+        name: name,
+        ...props,
+        variant: "Video",
+        children: [
+            /*#__PURE__*/ jsx(CardAsset, {
+                size: size,
+                children: /*#__PURE__*/ jsx(VideoPreviewWrapper, {
+                    size: size,
+                    children: /*#__PURE__*/ jsx(VideoPreview, {
+                        url: url,
+                        mime: mime,
+                        onLoadDuration: setDuration,
+                        alt: name
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(CardTimer, {
+                children: formattedDuration || '...'
+            })
+        ]
+    });
+};
+
+export { VideoAssetCard };
+//# sourceMappingURL=VideoAssetCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/VideoAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, CardAsset, CardTimer } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { formatDuration } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { VideoPreview } from './VideoPreview';\n\nconst VideoPreviewWrapper = styled(Box)`\n  canvas,\n  video {\n    display: block;\n    pointer-events: none;\n    max-width: 100%;\n    max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n  }\n`;\n\ninterface VideoAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  mime: string;\n  url: string;\n  size?: 'S' | 'M';\n}\n\nexport const VideoAssetCard = ({\n  name,\n  url,\n  mime,\n  size = 'M',\n  selected = false,\n  ...props\n}: VideoAssetCardProps) => {\n  const [duration, setDuration] = React.useState<number>();\n\n  const formattedDuration = duration && formatDuration(duration);\n\n  return (\n    <AssetCardBase selected={selected} name={name} {...props} variant=\"Video\">\n      <CardAsset size={size}>\n        <VideoPreviewWrapper size={size}>\n          <VideoPreview url={url} mime={mime} onLoadDuration={setDuration} alt={name} />\n        </VideoPreviewWrapper>\n      </CardAsset>\n      <CardTimer>{formattedDuration || '...'}</CardTimer>\n    </AssetCardBase>\n  );\n};\n"],"names":["VideoPreviewWrapper","styled","Box","size","VideoAssetCard","name","url","mime","selected","props","duration","setDuration","React","useState","formattedDuration","formatDuration","_jsxs","AssetCardBase","variant","_jsx","CardAsset","VideoPreview","onLoadDuration","alt","CardTimer"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,mBAAAA,GAAsBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;gBAMvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;MAQYC,cAAiB,GAAA,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJJ,OAAO,GAAG,EACVK,WAAW,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;AACpB,IAAA,MAAM,CAACC,QAAAA,EAAUC,WAAY,CAAA,GAAGC,MAAMC,QAAQ,EAAA;IAE9C,MAAMC,iBAAAA,GAAoBJ,YAAYK,cAAeL,CAAAA,QAAAA,CAAAA;AAErD,IAAA,qBACEM,IAACC,CAAAA,aAAAA,EAAAA;QAAcT,QAAUA,EAAAA,QAAAA;QAAUH,IAAMA,EAAAA,IAAAA;AAAO,QAAA,GAAGI,KAAK;QAAES,OAAQ,EAAA,OAAA;;0BAChEC,GAACC,CAAAA,SAAAA,EAAAA;gBAAUjB,IAAMA,EAAAA,IAAAA;AACf,gBAAA,QAAA,gBAAAgB,GAACnB,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAgB,GAACE,CAAAA,YAAAA,EAAAA;wBAAaf,GAAKA,EAAAA,GAAAA;wBAAKC,IAAMA,EAAAA,IAAAA;wBAAMe,cAAgBX,EAAAA,WAAAA;wBAAaY,GAAKlB,EAAAA;;;;0BAG1Ec,GAACK,CAAAA,SAAAA,EAAAA;0BAAWV,iBAAqB,IAAA;;;;AAGvC;;;;"}