@strapi/upload 5.12.1 → 5.12.2

package/dist/admin/components/FolderGridList/FolderGridList.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+
+const FolderGridList = ({ title = null, children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.KeyboardNavigable, {
+        tagName: "article",
+        children: [
+            title && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingBottom: 2,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    tag: "h2",
+                    variant: "delta",
+                    fontWeight: "semiBold",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                gap: 4,
+                children: children
+            })
+        ]
+    });
+};
+
+exports.FolderGridList = FolderGridList;
+//# sourceMappingURL=FolderGridList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderGridList.js","sources":["../../../../admin/src/components/FolderGridList/FolderGridList.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nexport interface FolderGridListProps {\n  children: React.ReactNode;\n  title?: string | null;\n}\n\nexport const FolderGridList = ({ title = null, children }: FolderGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>{children}</Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["FolderGridList","title","children","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap"],"mappings":";;;;;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,QAAQ,IAAI,EAAEC,QAAQ,EAAuB,GAAA;AAC5E,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBJ,YAAAA,KAAAA,kBACCK,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,aAAe,EAAA,CAAA;AAClB,gBAAA,QAAA,gBAAAF,cAACG,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAK,cAAA,CAACO,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;AAAIb,gBAAAA,QAAAA,EAAAA;;;;AAG1B;;;;"}

package/dist/admin/components/FolderGridList/FolderGridList.mjs

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { KeyboardNavigable, Box, Typography, Grid } from '@strapi/design-system';
+
+const FolderGridList = ({ title = null, children })=>{
+    return /*#__PURE__*/ jsxs(KeyboardNavigable, {
+        tagName: "article",
+        children: [
+            title && /*#__PURE__*/ jsx(Box, {
+                paddingBottom: 2,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    tag: "h2",
+                    variant: "delta",
+                    fontWeight: "semiBold",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsx(Grid.Root, {
+                gap: 4,
+                children: children
+            })
+        ]
+    });
+};
+
+export { FolderGridList };
+//# sourceMappingURL=FolderGridList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderGridList.mjs","sources":["../../../../admin/src/components/FolderGridList/FolderGridList.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nexport interface FolderGridListProps {\n  children: React.ReactNode;\n  title?: string | null;\n}\n\nexport const FolderGridList = ({ title = null, children }: FolderGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>{children}</Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["FolderGridList","title","children","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap"],"mappings":";;;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,QAAQ,IAAI,EAAEC,QAAQ,EAAuB,GAAA;AAC5E,IAAA,qBACEC,IAACC,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBJ,YAAAA,KAAAA,kBACCK,GAACC,CAAAA,GAAAA,EAAAA;gBAAIC,aAAe,EAAA,CAAA;AAClB,gBAAA,QAAA,gBAAAF,GAACG,CAAAA,UAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAK,GAAA,CAACO,KAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;AAAIb,gBAAAA,QAAAA,EAAAA;;;;AAG1B;;;;"}

package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var AssetDialog = require('../AssetDialog/AssetDialog.js');
+var EditFolderDialog = require('../EditFolderDialog/EditFolderDialog.js');
+var UploadAssetDialog = require('../UploadAssetDialog/UploadAssetDialog.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);
+
+// TODO: find a better naming convention for the file that was an index file before
+const STEPS = {
+    AssetSelect: 'SelectAsset',
+    AssetUpload: 'UploadAsset',
+    FolderCreate: 'FolderCreate'
+};
+const MediaLibraryDialog = ({ onClose, onSelectAssets, allowedTypes = [
+    'files',
+    'images',
+    'videos',
+    'audios'
+] })=>{
+    const [step, setStep] = React__namespace.useState(STEPS.AssetSelect);
+    const [folderId, setFolderId] = React__namespace.useState(null);
+    switch(step){
+        case STEPS.AssetSelect:
+            return /*#__PURE__*/ jsxRuntime.jsx(AssetDialog.AssetDialog, {
+                allowedTypes: allowedTypes,
+                folderId: folderId,
+                open: true,
+                onClose: onClose,
+                onValidate: onSelectAssets,
+                onAddAsset: ()=>setStep(STEPS.AssetUpload),
+                onAddFolder: ()=>setStep(STEPS.FolderCreate),
+                onChangeFolder: (folderId)=>setFolderId(folderId),
+                multiple: true
+            });
+        case STEPS.FolderCreate:
+            return /*#__PURE__*/ jsxRuntime.jsx(EditFolderDialog.EditFolderDialog, {
+                open: true,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                parentFolderId: folderId
+            });
+        default:
+            return /*#__PURE__*/ jsxRuntime.jsx(UploadAssetDialog.UploadAssetDialog, {
+                open: true,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                folderId: folderId
+            });
+    }
+};
+
+exports.MediaLibraryDialog = MediaLibraryDialog;
+//# sourceMappingURL=MediaLibraryDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryDialog.js","sources":["../../../../admin/src/components/MediaLibraryDialog/MediaLibraryDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { AssetDialog } from '../AssetDialog/AssetDialog';\nimport { EditFolderDialog } from '../EditFolderDialog/EditFolderDialog';\nimport { UploadAssetDialog } from '../UploadAssetDialog/UploadAssetDialog';\n\nconst STEPS = {\n  AssetSelect: 'SelectAsset',\n  AssetUpload: 'UploadAsset',\n  FolderCreate: 'FolderCreate',\n};\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\nexport interface MediaLibraryDialogProps {\n  allowedTypes?: AllowedTypes[];\n  onClose: () => void;\n  onSelectAssets: (selectedAssets: File[]) => void;\n}\n\nexport const MediaLibraryDialog = ({\n  onClose,\n  onSelectAssets,\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n}: MediaLibraryDialogProps) => {\n  const [step, setStep] = React.useState(STEPS.AssetSelect);\n  const [folderId, setFolderId] = React.useState<number | null>(null);\n\n  switch (step) {\n    case STEPS.AssetSelect:\n      return (\n        <AssetDialog\n          allowedTypes={allowedTypes}\n          folderId={folderId}\n          open\n          onClose={onClose}\n          onValidate={onSelectAssets}\n          onAddAsset={() => setStep(STEPS.AssetUpload)}\n          onAddFolder={() => setStep(STEPS.FolderCreate)}\n          onChangeFolder={(folderId) => setFolderId(folderId)}\n          multiple\n        />\n      );\n\n    case STEPS.FolderCreate:\n      return (\n        <EditFolderDialog\n          open\n          onClose={() => setStep(STEPS.AssetSelect)}\n          parentFolderId={folderId}\n        />\n      );\n\n    default:\n      return (\n        <UploadAssetDialog open onClose={() => setStep(STEPS.AssetSelect)} folderId={folderId} />\n      );\n  }\n};\n"],"names":["STEPS","AssetSelect","AssetUpload","FolderCreate","MediaLibraryDialog","onClose","onSelectAssets","allowedTypes","step","setStep","React","useState","folderId","setFolderId","_jsx","AssetDialog","open","onValidate","onAddAsset","onAddFolder","onChangeFolder","multiple","EditFolderDialog","parentFolderId","UploadAssetDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAOA,MAAMA,KAAQ,GAAA;IACZC,WAAa,EAAA,aAAA;IACbC,WAAa,EAAA,aAAA;IACbC,YAAc,EAAA;AAChB,CAAA;AAUO,MAAMC,qBAAqB,CAAC,EACjCC,OAAO,EACPC,cAAc,EACdC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;CAAS,EAC9B,GAAA;IACxB,MAAM,CAACC,MAAMC,OAAQ,CAAA,GAAGC,iBAAMC,QAAQ,CAACX,MAAMC,WAAW,CAAA;AACxD,IAAA,MAAM,CAACW,QAAUC,EAAAA,WAAAA,CAAY,GAAGH,gBAAAA,CAAMC,QAAQ,CAAgB,IAAA,CAAA;IAE9D,OAAQH,IAAAA;AACN,QAAA,KAAKR,MAAMC,WAAW;AACpB,YAAA,qBACEa,cAACC,CAAAA,uBAAAA,EAAAA;gBACCR,YAAcA,EAAAA,YAAAA;gBACdK,QAAUA,EAAAA,QAAAA;gBACVI,IAAI,EAAA,IAAA;gBACJX,OAASA,EAAAA,OAAAA;gBACTY,UAAYX,EAAAA,cAAAA;gBACZY,UAAY,EAAA,IAAMT,OAAQT,CAAAA,KAAAA,CAAME,WAAW,CAAA;gBAC3CiB,WAAa,EAAA,IAAMV,OAAQT,CAAAA,KAAAA,CAAMG,YAAY,CAAA;gBAC7CiB,cAAgB,EAAA,CAACR,WAAaC,WAAYD,CAAAA,QAAAA,CAAAA;gBAC1CS,QAAQ,EAAA;;AAId,QAAA,KAAKrB,MAAMG,YAAY;AACrB,YAAA,qBACEW,cAACQ,CAAAA,iCAAAA,EAAAA;gBACCN,IAAI,EAAA,IAAA;gBACJX,OAAS,EAAA,IAAMI,OAAQT,CAAAA,KAAAA,CAAMC,WAAW,CAAA;gBACxCsB,cAAgBX,EAAAA;;AAItB,QAAA;AACE,YAAA,qBACEE,cAACU,CAAAA,mCAAAA,EAAAA;gBAAkBR,IAAI,EAAA,IAAA;gBAACX,OAAS,EAAA,IAAMI,OAAQT,CAAAA,KAAAA,CAAMC,WAAW,CAAA;gBAAGW,QAAUA,EAAAA;;AAEnF;AACF;;;;"}

package/dist/admin/components/MediaLibraryDialog/MediaLibraryDialog.mjs

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AssetDialog } from '../AssetDialog/AssetDialog.mjs';
+import { EditFolderDialog } from '../EditFolderDialog/EditFolderDialog.mjs';
+import { UploadAssetDialog } from '../UploadAssetDialog/UploadAssetDialog.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const STEPS = {
+    AssetSelect: 'SelectAsset',
+    AssetUpload: 'UploadAsset',
+    FolderCreate: 'FolderCreate'
+};
+const MediaLibraryDialog = ({ onClose, onSelectAssets, allowedTypes = [
+    'files',
+    'images',
+    'videos',
+    'audios'
+] })=>{
+    const [step, setStep] = React.useState(STEPS.AssetSelect);
+    const [folderId, setFolderId] = React.useState(null);
+    switch(step){
+        case STEPS.AssetSelect:
+            return /*#__PURE__*/ jsx(AssetDialog, {
+                allowedTypes: allowedTypes,
+                folderId: folderId,
+                open: true,
+                onClose: onClose,
+                onValidate: onSelectAssets,
+                onAddAsset: ()=>setStep(STEPS.AssetUpload),
+                onAddFolder: ()=>setStep(STEPS.FolderCreate),
+                onChangeFolder: (folderId)=>setFolderId(folderId),
+                multiple: true
+            });
+        case STEPS.FolderCreate:
+            return /*#__PURE__*/ jsx(EditFolderDialog, {
+                open: true,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                parentFolderId: folderId
+            });
+        default:
+            return /*#__PURE__*/ jsx(UploadAssetDialog, {
+                open: true,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                folderId: folderId
+            });
+    }
+};
+
+export { MediaLibraryDialog };
+//# sourceMappingURL=MediaLibraryDialog.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryDialog.mjs","sources":["../../../../admin/src/components/MediaLibraryDialog/MediaLibraryDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { AssetDialog } from '../AssetDialog/AssetDialog';\nimport { EditFolderDialog } from '../EditFolderDialog/EditFolderDialog';\nimport { UploadAssetDialog } from '../UploadAssetDialog/UploadAssetDialog';\n\nconst STEPS = {\n  AssetSelect: 'SelectAsset',\n  AssetUpload: 'UploadAsset',\n  FolderCreate: 'FolderCreate',\n};\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\nexport interface MediaLibraryDialogProps {\n  allowedTypes?: AllowedTypes[];\n  onClose: () => void;\n  onSelectAssets: (selectedAssets: File[]) => void;\n}\n\nexport const MediaLibraryDialog = ({\n  onClose,\n  onSelectAssets,\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n}: MediaLibraryDialogProps) => {\n  const [step, setStep] = React.useState(STEPS.AssetSelect);\n  const [folderId, setFolderId] = React.useState<number | null>(null);\n\n  switch (step) {\n    case STEPS.AssetSelect:\n      return (\n        <AssetDialog\n          allowedTypes={allowedTypes}\n          folderId={folderId}\n          open\n          onClose={onClose}\n          onValidate={onSelectAssets}\n          onAddAsset={() => setStep(STEPS.AssetUpload)}\n          onAddFolder={() => setStep(STEPS.FolderCreate)}\n          onChangeFolder={(folderId) => setFolderId(folderId)}\n          multiple\n        />\n      );\n\n    case STEPS.FolderCreate:\n      return (\n        <EditFolderDialog\n          open\n          onClose={() => setStep(STEPS.AssetSelect)}\n          parentFolderId={folderId}\n        />\n      );\n\n    default:\n      return (\n        <UploadAssetDialog open onClose={() => setStep(STEPS.AssetSelect)} folderId={folderId} />\n      );\n  }\n};\n"],"names":["STEPS","AssetSelect","AssetUpload","FolderCreate","MediaLibraryDialog","onClose","onSelectAssets","allowedTypes","step","setStep","React","useState","folderId","setFolderId","_jsx","AssetDialog","open","onValidate","onAddAsset","onAddFolder","onChangeFolder","multiple","EditFolderDialog","parentFolderId","UploadAssetDialog"],"mappings":";;;;;;AAAA;AAOA,MAAMA,KAAQ,GAAA;IACZC,WAAa,EAAA,aAAA;IACbC,WAAa,EAAA,aAAA;IACbC,YAAc,EAAA;AAChB,CAAA;AAUO,MAAMC,qBAAqB,CAAC,EACjCC,OAAO,EACPC,cAAc,EACdC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;CAAS,EAC9B,GAAA;IACxB,MAAM,CAACC,MAAMC,OAAQ,CAAA,GAAGC,MAAMC,QAAQ,CAACX,MAAMC,WAAW,CAAA;AACxD,IAAA,MAAM,CAACW,QAAUC,EAAAA,WAAAA,CAAY,GAAGH,KAAAA,CAAMC,QAAQ,CAAgB,IAAA,CAAA;IAE9D,OAAQH,IAAAA;AACN,QAAA,KAAKR,MAAMC,WAAW;AACpB,YAAA,qBACEa,GAACC,CAAAA,WAAAA,EAAAA;gBACCR,YAAcA,EAAAA,YAAAA;gBACdK,QAAUA,EAAAA,QAAAA;gBACVI,IAAI,EAAA,IAAA;gBACJX,OAASA,EAAAA,OAAAA;gBACTY,UAAYX,EAAAA,cAAAA;gBACZY,UAAY,EAAA,IAAMT,OAAQT,CAAAA,KAAAA,CAAME,WAAW,CAAA;gBAC3CiB,WAAa,EAAA,IAAMV,OAAQT,CAAAA,KAAAA,CAAMG,YAAY,CAAA;gBAC7CiB,cAAgB,EAAA,CAACR,WAAaC,WAAYD,CAAAA,QAAAA,CAAAA;gBAC1CS,QAAQ,EAAA;;AAId,QAAA,KAAKrB,MAAMG,YAAY;AACrB,YAAA,qBACEW,GAACQ,CAAAA,gBAAAA,EAAAA;gBACCN,IAAI,EAAA,IAAA;gBACJX,OAAS,EAAA,IAAMI,OAAQT,CAAAA,KAAAA,CAAMC,WAAW,CAAA;gBACxCsB,cAAgBX,EAAAA;;AAItB,QAAA;AACE,YAAA,qBACEE,GAACU,CAAAA,iBAAAA,EAAAA;gBAAkBR,IAAI,EAAA,IAAA;gBAACX,OAAS,EAAA,IAAMI,OAAQT,CAAAA,KAAAA,CAAMC,WAAW,CAAA;gBAAGW,QAAUA,EAAAA;;AAEnF;AACF;;;;"}

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+var constants = require('../../../constants.js');
+var createAssetUrl = require('../../../utils/createAssetUrl.js');
+require('byte-size');
+require('date-fns');
+require('qs');
+require('../../../utils/urlYupSchema.js');
+var AudioPreview = require('../../AssetCard/AudioPreview.js');
+var VideoPreview = require('../../AssetCard/VideoPreview.js');
+
+const DocAsset = styledComponents.styled(designSystem.Flex)`
+  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
+`;
+const VideoPreviewWrapper = styledComponents.styled(designSystem.Box)`
+  canvas,
+  video {
+    max-width: 100%;
+    height: 124px;
+  }
+`;
+const AudioPreviewWrapper = styledComponents.styled(designSystem.Box)`
+  canvas,
+  audio {
+    max-width: 100%;
+  }
+`;
+const CarouselAsset = ({ asset })=>{
+    if (asset.mime?.includes(constants.AssetType.Video)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(VideoPreviewWrapper, {
+            height: "100%",
+            children: /*#__PURE__*/ jsxRuntime.jsx(VideoPreview.VideoPreview, {
+                url: createAssetUrl.createAssetUrl(asset, true),
+                mime: asset.mime,
+                alt: asset.alternativeText || asset.name
+            })
+        });
+    }
+    if (asset.mime?.includes(constants.AssetType.Audio)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(AudioPreviewWrapper, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(AudioPreview.AudioPreview, {
+                url: createAssetUrl.createAssetUrl(asset, true),
+                alt: asset.alternativeText || asset.name
+            })
+        });
+    }
+    if (asset.mime?.includes(constants.AssetType.Image)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            tag: "img",
+            maxHeight: "100%",
+            maxWidth: "100%",
+            src: createAssetUrl.createAssetUrl(asset, true),
+            alt: asset.alternativeText || asset.name
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(DocAsset, {
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        hasRadius: true,
+        children: asset.ext?.includes('pdf') ? /*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
+            "aria-label": asset.alternativeText || asset.name,
+            width: "24px",
+            height: "32px"
+        }) : /*#__PURE__*/ jsxRuntime.jsx(icons.File, {
+            "aria-label": asset.alternativeText || asset.name,
+            width: "24px",
+            height: "32px"
+        })
+    });
+};
+
+exports.CarouselAsset = CarouselAsset;
+//# sourceMappingURL=CarouselAsset.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,76 @@
+import { jsx } from 'react/jsx-runtime';
+import { Flex, Box } from '@strapi/design-system';
+import { FilePdf, File } from '@strapi/icons';
+import { styled } from 'styled-components';
+import { AssetType } from '../../../constants.mjs';
+import { createAssetUrl } from '../../../utils/createAssetUrl.mjs';
+import 'byte-size';
+import 'date-fns';
+import 'qs';
+import '../../../utils/urlYupSchema.mjs';
+import { AudioPreview } from '../../AssetCard/AudioPreview.mjs';
+import { VideoPreview } from '../../AssetCard/VideoPreview.mjs';
+
+const DocAsset = styled(Flex)`
+  background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
+`;
+const VideoPreviewWrapper = styled(Box)`
+  canvas,
+  video {
+    max-width: 100%;
+    height: 124px;
+  }
+`;
+const AudioPreviewWrapper = styled(Box)`
+  canvas,
+  audio {
+    max-width: 100%;
+  }
+`;
+const CarouselAsset = ({ asset })=>{
+    if (asset.mime?.includes(AssetType.Video)) {
+        return /*#__PURE__*/ jsx(VideoPreviewWrapper, {
+            height: "100%",
+            children: /*#__PURE__*/ jsx(VideoPreview, {
+                url: createAssetUrl(asset, true),
+                mime: asset.mime,
+                alt: asset.alternativeText || asset.name
+            })
+        });
+    }
+    if (asset.mime?.includes(AssetType.Audio)) {
+        return /*#__PURE__*/ jsx(AudioPreviewWrapper, {
+            children: /*#__PURE__*/ jsx(AudioPreview, {
+                url: createAssetUrl(asset, true),
+                alt: asset.alternativeText || asset.name
+            })
+        });
+    }
+    if (asset.mime?.includes(AssetType.Image)) {
+        return /*#__PURE__*/ jsx(Box, {
+            tag: "img",
+            maxHeight: "100%",
+            maxWidth: "100%",
+            src: createAssetUrl(asset, true),
+            alt: asset.alternativeText || asset.name
+        });
+    }
+    return /*#__PURE__*/ jsx(DocAsset, {
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        hasRadius: true,
+        children: asset.ext?.includes('pdf') ? /*#__PURE__*/ jsx(FilePdf, {
+            "aria-label": asset.alternativeText || asset.name,
+            width: "24px",
+            height: "32px"
+        }) : /*#__PURE__*/ jsx(File, {
+            "aria-label": asset.alternativeText || asset.name,
+            width: "24px",
+            height: "32px"
+        })
+    });
+};
+
+export { CarouselAsset };
+//# sourceMappingURL=CarouselAsset.mjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var prefixFileUrlWithBackendUrl = require('../../../utils/prefixFileUrlWithBackendUrl.js');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../utils/getTrad.js');
+require('qs');
+require('../../../constants.js');
+require('../../../utils/urlYupSchema.js');
+var CopyLinkButton = require('../../CopyLinkButton/CopyLinkButton.js');
+
+const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CarouselActions, {
+        children: [
+            onAddAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                label: formatMessage({
+                    id: getTrad.getTrad('control-card.add'),
+                    defaultMessage: 'Add'
+                }),
+                onClick: ()=>onAddAsset(asset),
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton.CopyLinkButton, {
+                url: prefixFileUrlWithBackendUrl.prefixFileUrlWithBackendUrl(asset.url)
+            }),
+            onDeleteAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                label: formatMessage({
+                    id: 'global.delete',
+                    defaultMessage: 'Delete'
+                }),
+                onClick: ()=>onDeleteAsset(asset),
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+            }),
+            onEditAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                label: formatMessage({
+                    id: getTrad.getTrad('control-card.edit'),
+                    defaultMessage: 'edit'
+                }),
+                onClick: onEditAsset,
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+            })
+        ]
+    });
+};
+
+exports.CarouselAssetActions = CarouselAssetActions;
+//# sourceMappingURL=CarouselAssetActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselAssetActions.js","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.tsx"],"sourcesContent":["import { CarouselActions, IconButton } from '@strapi/design-system';\nimport { Pencil, Plus, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad, prefixFileUrlWithBackendUrl } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface CarouselAssetActionsProps {\n  asset: File;\n  onDeleteAsset?: (asset: File) => void;\n  onAddAsset?: (asset: File) => void;\n  onEditAsset?: () => void;\n}\n\nexport const CarouselAssetActions = ({\n  asset,\n  onDeleteAsset,\n  onAddAsset,\n  onEditAsset,\n}: CarouselAssetActionsProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <CarouselActions>\n      {onAddAsset && (\n        <IconButton\n          label={formatMessage({\n            id: getTrad('control-card.add'),\n            defaultMessage: 'Add',\n          })}\n          onClick={() => onAddAsset(asset)}\n        >\n          <Plus />\n        </IconButton>\n      )}\n\n      <CopyLinkButton url={prefixFileUrlWithBackendUrl(asset.url)!} />\n\n      {onDeleteAsset && (\n        <IconButton\n          label={formatMessage({\n            id: 'global.delete',\n            defaultMessage: 'Delete',\n          })}\n          onClick={() => onDeleteAsset(asset)}\n        >\n          <Trash />\n        </IconButton>\n      )}\n\n      {onEditAsset && (\n        <IconButton\n          label={formatMessage({\n            id: getTrad('control-card.edit'),\n            defaultMessage: 'edit',\n          })}\n          onClick={onEditAsset}\n        >\n          <Pencil />\n        </IconButton>\n      )}\n    </CarouselActions>\n  );\n};\n"],"names":["CarouselAssetActions","asset","onDeleteAsset","onAddAsset","onEditAsset","formatMessage","useIntl","_jsxs","CarouselActions","_jsx","IconButton","label","id","getTrad","defaultMessage","onClick","Plus","CopyLinkButton","url","prefixFileUrlWithBackendUrl","Trash","Pencil"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAMA,oBAAuB,GAAA,CAAC,EACnCC,KAAK,EACLC,aAAa,EACbC,UAAU,EACVC,WAAW,EACe,GAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,eAACC,CAAAA,4BAAAA,EAAAA;;AACEL,YAAAA,UAAAA,kBACCM,cAACC,CAAAA,uBAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;AACnBO,oBAAAA,EAAAA,EAAIC,eAAQ,CAAA,kBAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA,CAAA;AACAC,gBAAAA,OAAAA,EAAS,IAAMZ,UAAWF,CAAAA,KAAAA,CAAAA;AAE1B,gBAAA,QAAA,gBAAAQ,cAACO,CAAAA,UAAAA,EAAAA,EAAAA;;0BAILP,cAACQ,CAAAA,6BAAAA,EAAAA;gBAAeC,GAAKC,EAAAA,uDAAAA,CAA4BlB,MAAMiB,GAAG;;AAEzDhB,YAAAA,aAAAA,kBACCO,cAACC,CAAAA,uBAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;oBACnBO,EAAI,EAAA,eAAA;oBACJE,cAAgB,EAAA;AAClB,iBAAA,CAAA;AACAC,gBAAAA,OAAAA,EAAS,IAAMb,aAAcD,CAAAA,KAAAA,CAAAA;AAE7B,gBAAA,QAAA,gBAAAQ,cAACW,CAAAA,WAAAA,EAAAA,EAAAA;;AAIJhB,YAAAA,WAAAA,kBACCK,cAACC,CAAAA,uBAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;AACnBO,oBAAAA,EAAAA,EAAIC,eAAQ,CAAA,mBAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,OAASX,EAAAA,WAAAA;AAET,gBAAA,QAAA,gBAAAK,cAACY,CAAAA,YAAAA,EAAAA,EAAAA;;;;AAKX;;;;"}

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

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CarouselActions, IconButton } from '@strapi/design-system';
+import { Plus, Trash, Pencil } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { prefixFileUrlWithBackendUrl } from '../../../utils/prefixFileUrlWithBackendUrl.mjs';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../constants.mjs';
+import '../../../utils/urlYupSchema.mjs';
+import { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton.mjs';
+
+const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(CarouselActions, {
+        children: [
+            onAddAsset && /*#__PURE__*/ jsx(IconButton, {
+                label: formatMessage({
+                    id: getTrad('control-card.add'),
+                    defaultMessage: 'Add'
+                }),
+                onClick: ()=>onAddAsset(asset),
+                children: /*#__PURE__*/ jsx(Plus, {})
+            }),
+            /*#__PURE__*/ jsx(CopyLinkButton, {
+                url: prefixFileUrlWithBackendUrl(asset.url)
+            }),
+            onDeleteAsset && /*#__PURE__*/ jsx(IconButton, {
+                label: formatMessage({
+                    id: 'global.delete',
+                    defaultMessage: 'Delete'
+                }),
+                onClick: ()=>onDeleteAsset(asset),
+                children: /*#__PURE__*/ jsx(Trash, {})
+            }),
+            onEditAsset && /*#__PURE__*/ jsx(IconButton, {
+                label: formatMessage({
+                    id: getTrad('control-card.edit'),
+                    defaultMessage: 'edit'
+                }),
+                onClick: onEditAsset,
+                children: /*#__PURE__*/ jsx(Pencil, {})
+            })
+        ]
+    });
+};
+
+export { CarouselAssetActions };
+//# sourceMappingURL=CarouselAssetActions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselAssetActions.mjs","sources":["../../../../../admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.tsx"],"sourcesContent":["import { CarouselActions, IconButton } from '@strapi/design-system';\nimport { Pencil, Plus, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad, prefixFileUrlWithBackendUrl } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface CarouselAssetActionsProps {\n  asset: File;\n  onDeleteAsset?: (asset: File) => void;\n  onAddAsset?: (asset: File) => void;\n  onEditAsset?: () => void;\n}\n\nexport const CarouselAssetActions = ({\n  asset,\n  onDeleteAsset,\n  onAddAsset,\n  onEditAsset,\n}: CarouselAssetActionsProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <CarouselActions>\n      {onAddAsset && (\n        <IconButton\n          label={formatMessage({\n            id: getTrad('control-card.add'),\n            defaultMessage: 'Add',\n          })}\n          onClick={() => onAddAsset(asset)}\n        >\n          <Plus />\n        </IconButton>\n      )}\n\n      <CopyLinkButton url={prefixFileUrlWithBackendUrl(asset.url)!} />\n\n      {onDeleteAsset && (\n        <IconButton\n          label={formatMessage({\n            id: 'global.delete',\n            defaultMessage: 'Delete',\n          })}\n          onClick={() => onDeleteAsset(asset)}\n        >\n          <Trash />\n        </IconButton>\n      )}\n\n      {onEditAsset && (\n        <IconButton\n          label={formatMessage({\n            id: getTrad('control-card.edit'),\n            defaultMessage: 'edit',\n          })}\n          onClick={onEditAsset}\n        >\n          <Pencil />\n        </IconButton>\n      )}\n    </CarouselActions>\n  );\n};\n"],"names":["CarouselAssetActions","asset","onDeleteAsset","onAddAsset","onEditAsset","formatMessage","useIntl","_jsxs","CarouselActions","_jsx","IconButton","label","id","getTrad","defaultMessage","onClick","Plus","CopyLinkButton","url","prefixFileUrlWithBackendUrl","Trash","Pencil"],"mappings":";;;;;;;;;;;;;AAgBO,MAAMA,oBAAuB,GAAA,CAAC,EACnCC,KAAK,EACLC,aAAa,EACbC,UAAU,EACVC,WAAW,EACe,GAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACC,CAAAA,eAAAA,EAAAA;;AACEL,YAAAA,UAAAA,kBACCM,GAACC,CAAAA,UAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;AACnBO,oBAAAA,EAAAA,EAAIC,OAAQ,CAAA,kBAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA,CAAA;AACAC,gBAAAA,OAAAA,EAAS,IAAMZ,UAAWF,CAAAA,KAAAA,CAAAA;AAE1B,gBAAA,QAAA,gBAAAQ,GAACO,CAAAA,IAAAA,EAAAA,EAAAA;;0BAILP,GAACQ,CAAAA,cAAAA,EAAAA;gBAAeC,GAAKC,EAAAA,2BAAAA,CAA4BlB,MAAMiB,GAAG;;AAEzDhB,YAAAA,aAAAA,kBACCO,GAACC,CAAAA,UAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;oBACnBO,EAAI,EAAA,eAAA;oBACJE,cAAgB,EAAA;AAClB,iBAAA,CAAA;AACAC,gBAAAA,OAAAA,EAAS,IAAMb,aAAcD,CAAAA,KAAAA,CAAAA;AAE7B,gBAAA,QAAA,gBAAAQ,GAACW,CAAAA,KAAAA,EAAAA,EAAAA;;AAIJhB,YAAAA,WAAAA,kBACCK,GAACC,CAAAA,UAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAON,aAAc,CAAA;AACnBO,oBAAAA,EAAAA,EAAIC,OAAQ,CAAA,mBAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,OAASX,EAAAA,WAAAA;AAET,gBAAA,QAAA,gBAAAK,GAACY,CAAAA,MAAAA,EAAAA,EAAAA;;;;AAKX;;;;"}

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../../../utils/getTrad.js');
+var EditAssetContent = require('../../EditAssetDialog/EditAssetContent.js');
+var CarouselAsset = require('./CarouselAsset.js');
+var CarouselAssetActions = require('./CarouselAssetActions.js');
+var EmptyStateAsset = require('./EmptyStateAsset.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 CarouselAssets = /*#__PURE__*/ React__namespace.forwardRef(({ assets, disabled = false, error, hint, label, labelAction, onAddAsset, onDeleteAsset, onDeleteAssetFromMediaLibrary, onDropAsset, onEditAsset, onNext, onPrevious, required = false, selectedAssetIndex, trackedLocation }, forwardedRef)=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [isEditingAsset, setIsEditingAsset] = React__namespace.useState(false);
+    const currentAsset = assets[selectedAssetIndex];
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.CarouselInput, {
+                ref: forwardedRef,
+                label: label,
+                labelAction: labelAction,
+                secondaryLabel: currentAsset?.name,
+                selectedSlide: selectedAssetIndex,
+                previousLabel: formatMessage({
+                    id: getTrad.getTrad('mediaLibraryInput.actions.previousSlide'),
+                    defaultMessage: 'Previous slide'
+                }),
+                nextLabel: formatMessage({
+                    id: getTrad.getTrad('mediaLibraryInput.actions.nextSlide'),
+                    defaultMessage: 'Next slide'
+                }),
+                onNext: onNext,
+                onPrevious: onPrevious,
+                hint: hint,
+                error: error,
+                required: required,
+                actions: currentAsset ? /*#__PURE__*/ jsxRuntime.jsx(CarouselAssetActions.CarouselAssetActions, {
+                    asset: currentAsset,
+                    onDeleteAsset: disabled ? undefined : onDeleteAsset,
+                    onAddAsset: disabled ? undefined : onAddAsset,
+                    onEditAsset: onEditAsset ? ()=>setIsEditingAsset(true) : undefined
+                }) : undefined,
+                children: assets.length === 0 ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.CarouselSlide, {
+                    label: formatMessage({
+                        id: getTrad.getTrad('mediaLibraryInput.slideCount'),
+                        defaultMessage: '{n} of {m} slides'
+                    }, {
+                        n: 1,
+                        m: 1
+                    }),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(EmptyStateAsset.EmptyStateAsset, {
+                        disabled: disabled,
+                        onClick: onAddAsset,
+                        onDropAsset: onDropAsset
+                    })
+                }) : assets.map((asset, index)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.CarouselSlide, {
+                        label: formatMessage({
+                            id: getTrad.getTrad('mediaLibraryInput.slideCount'),
+                            defaultMessage: '{n} of {m} slides'
+                        }, {
+                            n: index + 1,
+                            m: assets.length
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(CarouselAsset.CarouselAsset, {
+                            asset: asset
+                        })
+                    }, asset.id))
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetDialog, {
+                open: isEditingAsset,
+                onClose: (editedAsset)=>{
+                    setIsEditingAsset(false);
+                    // The asset has been deleted
+                    if (editedAsset === null) {
+                        onDeleteAssetFromMediaLibrary();
+                    }
+                    if (editedAsset && typeof editedAsset !== 'boolean') {
+                        onEditAsset?.(editedAsset);
+                    }
+                },
+                asset: currentAsset,
+                canUpdate: true,
+                canCopyLink: true,
+                canDownload: true,
+                trackedLocation: trackedLocation
+            })
+        ]
+    });
+});
+
+exports.CarouselAssets = CarouselAssets;
+//# sourceMappingURL=CarouselAssets.js.map