@strapi/upload 5.35.0 → 5.36.1

package/dist/admin/future/App.js

@@ -5,19 +5,13 @@ require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-require('byte-size');
-require('date-fns');
-var getTrad = require('../utils/getTrad.js');
-require('qs');
-require('../utils/typeFromMime.js');
-require('../utils/urlYupSchema.js');
-var AIGenerationPage = require('./pages/AIGenerationPage.js');
-var MediaLibraryPage = require('./pages/MediaLibraryPage.js');
+var AssetsPage = require('./pages/Assets/AssetsPage.js');
+var translations = require('./utils/translations.js');
 
 const UnstableMediaLibrary = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const title = formatMessage({
-        id: getTrad.getTrad('plugin.name'),
+        id: translations.getTranslationKey('plugin.name'),
         defaultMessage: 'Media Library'
     });
     return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Page.Main, {
@@ -25,17 +19,11 @@ const UnstableMediaLibrary = ()=>{
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
                 children: title
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(reactRouterDom.Routes, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
-                        index: true,
-                        element: /*#__PURE__*/ jsxRuntime.jsx(MediaLibraryPage.MediaLibraryPage, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
-                        path: "ai-generation",
-                        element: /*#__PURE__*/ jsxRuntime.jsx(AIGenerationPage.AIGenerationPage, {})
-                    })
-                ]
+            /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Routes, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
+                    index: true,
+                    element: /*#__PURE__*/ jsxRuntime.jsx(AssetsPage.AssetsPage, {})
+                })
             })
         ]
     });

package/dist/admin/future/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;;;MAWaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,eAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,eAAA,CAACC,iBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,iBAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,eAACK,CAAAA,qBAAAA,EAAAA;;kCACCF,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,cAACM,CAAAA,iCAAAA,EAAAA,EAAAA;;kCACvBN,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,cAACQ,CAAAA,iCAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}
+{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;;;MASaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAC1BG,QAAAA,EAAAA,EAAIC,8BAAkB,CAAA,aAAA,CAAA;QACtBC,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,qBACEC,eAAA,CAACC,iBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,iBAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbO,cAACE,CAAAA,qBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAF,cAACG,CAAAA,oBAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASL,cAACM,CAAAA,qBAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/future/App.mjs

@@ -3,19 +3,13 @@ import 'react';
 import { Page } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
 import { Routes, Route } from 'react-router-dom';
-import 'byte-size';
-import 'date-fns';
-import { getTrad } from '../utils/getTrad.mjs';
-import 'qs';
-import '../utils/typeFromMime.mjs';
-import '../utils/urlYupSchema.mjs';
-import { AIGenerationPage } from './pages/AIGenerationPage.mjs';
-import { MediaLibraryPage } from './pages/MediaLibraryPage.mjs';
+import { AssetsPage } from './pages/Assets/AssetsPage.mjs';
+import { getTranslationKey } from './utils/translations.mjs';
 
 const UnstableMediaLibrary = ()=>{
     const { formatMessage } = useIntl();
     const title = formatMessage({
-        id: getTrad('plugin.name'),
+        id: getTranslationKey('plugin.name'),
         defaultMessage: 'Media Library'
     });
     return /*#__PURE__*/ jsxs(Page.Main, {
@@ -23,17 +17,11 @@ const UnstableMediaLibrary = ()=>{
             /*#__PURE__*/ jsx(Page.Title, {
                 children: title
             }),
-            /*#__PURE__*/ jsxs(Routes, {
-                children: [
-                    /*#__PURE__*/ jsx(Route, {
-                        index: true,
-                        element: /*#__PURE__*/ jsx(MediaLibraryPage, {})
-                    }),
-                    /*#__PURE__*/ jsx(Route, {
-                        path: "ai-generation",
-                        element: /*#__PURE__*/ jsx(AIGenerationPage, {})
-                    })
-                ]
+            /*#__PURE__*/ jsx(Routes, {
+                children: /*#__PURE__*/ jsx(Route, {
+                    index: true,
+                    element: /*#__PURE__*/ jsx(AssetsPage, {})
+                })
             })
         ]
     });

package/dist/admin/future/App.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;MAWaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,OAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,IAACK,CAAAA,MAAAA,EAAAA;;kCACCF,GAACG,CAAAA,KAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,GAACM,CAAAA,gBAAAA,EAAAA,EAAAA;;kCACvBN,GAACG,CAAAA,KAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,GAACQ,CAAAA,gBAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}
+{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;MASaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAC1BG,QAAAA,EAAAA,EAAIC,iBAAkB,CAAA,aAAA,CAAA;QACtBC,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,qBACEC,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbO,GAACE,CAAAA,MAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAF,GAACG,CAAAA,KAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASL,GAACM,CAAAA,UAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/future/components/UploadProgressDialog.js

@@ -0,0 +1,494 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Dialog = require('@radix-ui/react-dialog');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var api = require('../services/api.js');
+var hooks = require('../store/hooks.js');
+var uploadProgress = require('../store/uploadProgress.js');
+var translations = require('../utils/translations.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 Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog);
+
+/* -------------------------------------------------------------------------------------------------
+ * DialogHeader
+ * -----------------------------------------------------------------------------------------------*/ const HeaderStatusMessage = ({ title, subtitle })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "flex-start",
+        paddingLeft: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Title, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "omega",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Description, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: subtitle
+                })
+            })
+        ]
+    });
+};
+const HeaderStatusIcon = styledComponents.styled(designSystem.Flex)`
+  padding: ${({ theme })=>theme.spaces[3]};
+  border-radius: ${({ theme })=>`${theme.borderRadius} 0 0 ${theme.borderRadius}`};
+
+  > svg {
+    height: 24px;
+    width: 24px;
+  }
+`;
+const HeaderStatusWrapper = styledComponents.styled(Dialog__namespace.Title)`
+  display: flex;
+  align-items: center;
+`;
+const HeaderStatus = ({ status, progress, totalFiles })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (status === 'error') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "danger200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {
+                        fill: "danger700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.failed'),
+                        defaultMessage: 'Upload failed'
+                    }),
+                    subtitle: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.failed.subtitle'),
+                        defaultMessage: 'Please try to upload files again'
+                    })
+                })
+            ]
+        });
+    }
+    if (status === 'success') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "success200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {
+                        fill: "success700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.success'),
+                        defaultMessage: 'Upload successful!'
+                    }),
+                    subtitle: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.success.subtitle'),
+                        defaultMessage: '{count} files uploaded successfully'
+                    }, {
+                        count: totalFiles
+                    })
+                })
+            ]
+        });
+    }
+    if (status === 'canceled') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "neutral200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.MinusCircle, {
+                        fill: "neutral700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.canceled'),
+                        defaultMessage: 'Upload canceled'
+                    }),
+                    subtitle: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.canceled.subtitle'),
+                        defaultMessage: 'Some files were not uploaded'
+                    })
+                })
+            ]
+        });
+    }
+    if (status === 'uploading') {
+        const progressPercentage = progress ? Math.round(progress) : 0;
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "primary200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Upload, {
+                        fill: "primary700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.uploading.withCount'),
+                        defaultMessage: 'Uploading {total} items ({percentage}%)'
+                    }, {
+                        total: totalFiles,
+                        percentage: progressPercentage
+                    })
+                })
+            ]
+        });
+    }
+    return null;
+};
+const HeaderIconButton = styledComponents.styled(designSystem.IconButton)`
+  &:hover {
+    background: transparent;
+  }
+`;
+const ChevronWrapper = styledComponents.styled.span`
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  transform: ${({ $isMinimized })=>$isMinimized ? 'rotate(180deg)' : 'rotate(0deg)'};
+`;
+const HEADER_COLOR_MAP = {
+    uploading: {
+        background: 'primary100'
+    },
+    canceled: {
+        background: 'neutral100'
+    },
+    success: {
+        background: 'success100'
+    },
+    error: {
+        background: 'danger100'
+    }
+};
+const DialogHeader = ({ handleClose })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { isMinimized, progress, files, uploadId, totalFiles } = hooks.useTypedSelector((state)=>state.uploadProgress);
+    const dispatch = hooks.useTypedDispatch();
+    const [retryCancelledFiles] = api.useRetryCancelledFilesStreamMutation();
+    const isComplete = progress === 100;
+    const isAllUploaded = isComplete && files.every((f)=>f.status !== 'uploading');
+    const isAllErrored = isComplete && files.length > 0 && files.every((f)=>f.status === 'error');
+    const hasCancelledFiles = files.some((f)=>f.status === 'cancelled');
+    const isSuccess = isComplete && isAllUploaded && !isAllErrored && !hasCancelledFiles;
+    const status = (()=>{
+        if (isAllErrored) return 'error';
+        if (isSuccess) return 'success';
+        if (hasCancelledFiles) return 'canceled';
+        return 'uploading';
+    })();
+    const handleCancel = ()=>{
+        api.abortUpload(uploadId);
+        dispatch(uploadProgress.cancelUpload());
+    };
+    const handleRetry = async ()=>{
+        try {
+            await retryCancelledFiles().unwrap();
+        } catch  {
+        // Error is already dispatched to store from the API queryFn
+        }
+    };
+    const handleToggleMinimize = ()=>{
+        dispatch(uploadProgress.toggleMinimize());
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        background: HEADER_COLOR_MAP[status].background,
+        justifyContent: "space-between",
+        margin: 1,
+        hasRadius: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(HeaderStatus, {
+                status: status,
+                progress: progress,
+                totalFiles: totalFiles
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 1,
+                children: [
+                    !isAllUploaded && /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        onClick: handleCancel,
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.cancel'),
+                            defaultMessage: 'Cancel'
+                        })
+                    }),
+                    hasCancelledFiles && /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        onClick: handleRetry,
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.retry'),
+                            defaultMessage: 'Retry'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(HeaderIconButton, {
+                        onClick: handleToggleMinimize,
+                        label: formatMessage({
+                            id: translations.getTranslationKey(isMinimized ? 'upload.progress.maximize' : 'upload.progress.minimize'),
+                            defaultMessage: isMinimized ? 'Maximize' : 'Minimize'
+                        }),
+                        variant: "ghost",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(ChevronWrapper, {
+                            $isMinimized: isMinimized,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {})
+                        })
+                    }),
+                    isComplete && /*#__PURE__*/ jsxRuntime.jsx(HeaderIconButton, {
+                        onClick: handleClose,
+                        label: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.close'),
+                            defaultMessage: 'Close'
+                        }),
+                        variant: "ghost",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * UploadProgressDialog
+ * -----------------------------------------------------------------------------------------------*/ const indeterminate = styledComponents.keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+`;
+const IndeterminateBar = styledComponents.styled.div`
+  width: 100%;
+  height: ${({ theme })=>theme.spaces[1]};
+  background-color: ${({ theme })=>theme.colors.neutral200};
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 25%;
+    background-color: ${({ theme })=>theme.colors.primary700};
+    border-radius: 4px;
+    animation: ${indeterminate} 1.5s ease-in-out infinite;
+  }
+`;
+const FileRow = ({ icon, fileName, children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        justifyContent: "center",
+        gap: 1,
+        width: "100%",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 2,
+                children: [
+                    icon,
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "omega",
+                        fontWeight: "semiBold",
+                        ellipsis: true,
+                        children: fileName
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+};
+const FileRowRenderer = ({ file })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isError = file.status === 'error';
+    const isCurrentFile = file.status === 'uploading';
+    const isCompleted = file.status === 'complete';
+    const isCancelled = file.status === 'cancelled';
+    if (isCurrentFile) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowsCounterClockwise, {
+                fill: "secondary600"
+            }),
+            fileName: file.name,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.file.uploading'),
+                        defaultMessage: 'Uploading...'
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(IndeterminateBar, {})
+            ]
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CrossCircle, {
+                fill: "danger500"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: file.error
+            })
+        });
+    }
+    if (isCancelled) {
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.MinusCircle, {
+                fill: "neutral600"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('upload.progress.file.canceled'),
+                    defaultMessage: 'Canceled'
+                })
+            })
+        });
+    }
+    if (isCompleted) {
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
+                fill: "success500"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('upload.progress.file.uploaded'),
+                    defaultMessage: 'Uploaded'
+                })
+            })
+        });
+    }
+    return null;
+};
+const DialogContent = styledComponents.styled(Dialog__namespace.Content)`
+  position: fixed;
+  bottom: ${({ theme })=>theme.spaces[4]};
+  right: ${({ theme })=>theme.spaces[4]};
+  width: 400px;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  box-shadow: ${({ theme })=>theme.shadows.popupShadow};
+  z-index: 1000;
+  overflow: hidden;
+  border: 1px solid ${({ theme })=>theme.colors.neutral150};
+
+  &:focus {
+    outline: none;
+  }
+`;
+const CompletedFilesList = styledComponents.styled(designSystem.Flex)`
+  max-height: 200px;
+  overflow-y: auto;
+  flex-direction: column;
+  gap: ${({ theme })=>theme.spaces[2]};
+  width: 100%;
+`;
+const AnimatedContent = styledComponents.styled.div`
+  display: grid;
+  grid-template-rows: ${({ $isVisible })=>$isVisible ? '1fr' : '0fr'};
+  transition: grid-template-rows 0.3s ease-in-out;
+
+  > div {
+    overflow: hidden;
+  }
+`;
+const UploadProgressDialog = ()=>{
+    const dispatch = hooks.useTypedDispatch();
+    const { isVisible, isMinimized, files } = hooks.useTypedSelector((state)=>state.uploadProgress);
+    const currentFile = files.find((f)=>f.status === 'uploading');
+    const completedFiles = files.filter((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled').sort((a, b)=>{
+        // Sort priority: error > cancelled > complete
+        const priority = {
+            error: 0,
+            cancelled: 1,
+            complete: 2,
+            uploading: 3,
+            pending: 4
+        };
+        return priority[a.status] - priority[b.status];
+    });
+    const handleClose = ()=>{
+        dispatch(uploadProgress.closeUploadProgress());
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Root, {
+        open: isVisible,
+        modal: false,
+        children: /*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Portal, {
+            children: /*#__PURE__*/ jsxRuntime.jsxs(DialogContent, {
+                // The accessible name is set by Dialog.Title and is dynamic,
+                // use a data-testid to ensure a stable target for e2e tests
+                "data-testid": "upload-progress-dialog",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(DialogHeader, {
+                        handleClose: handleClose
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(AnimatedContent, {
+                        $isVisible: !isMinimized,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                alignItems: "stretch",
+                                gap: 4,
+                                paddingTop: 4,
+                                paddingBottom: 4,
+                                paddingLeft: 4,
+                                paddingRight: 4,
+                                children: [
+                                    currentFile && /*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                        file: currentFile
+                                    }),
+                                    completedFiles.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(CompletedFilesList, {
+                                        children: completedFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                                file: file
+                                            }, file.index))
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+exports.UploadProgressDialog = UploadProgressDialog;
+//# sourceMappingURL=UploadProgressDialog.js.map