@strapi/upload 5.3.0 → 5.4.0

package/dist/_chunks/{index-YwynuEzj.js → index-B7NW5XiM.js}

@@ -21,7 +21,6 @@ const reactDnd = require("react-dnd");
 const reactRouterDom = require("react-router-dom");
 const symbols = require("@strapi/icons/symbols");
 const parseISO = require("date-fns/parseISO");
-const PropTypes = require("prop-types");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -49,7 +48,6 @@ const ReactSelect__default = /* @__PURE__ */ _interopDefault(ReactSelect);
 const Cropper__default = /* @__PURE__ */ _interopDefault(Cropper);
 const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
 const parseISO__default = /* @__PURE__ */ _interopDefault(parseISO);
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
 const __variableDynamicImportRuntimeHelper = (glob, path) => {
   const v = glob[path];
   if (v) {
@@ -60,7 +58,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.2.0";
+const version = "5.4.0";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -78,7 +76,7 @@ const maintainers = [
 const exports$1 = {
   "./strapi-admin": {
     types: "./dist/admin/src/index.d.ts",
-    source: "./admin/src/index.js",
+    source: "./admin/src/index.ts",
     "import": "./dist/admin/index.mjs",
     require: "./dist/admin/index.js",
     "default": "./dist/admin/index.js"
@@ -118,8 +116,8 @@ const scripts = {
 const dependencies = {
   "@strapi/design-system": "2.0.0-rc.12",
   "@strapi/icons": "2.0.0-rc.12",
-  "@strapi/provider-upload-local": "workspace:*",
-  "@strapi/utils": "workspace:*",
+  "@strapi/provider-upload-local": "5.4.0",
+  "@strapi/utils": "5.4.0",
   "byte-size": "8.1.1",
   cropperjs: "1.6.1",
   "date-fns": "2.30.0",
@@ -141,9 +139,9 @@ const dependencies = {
   yup: "0.32.9"
 };
 const devDependencies = {
-  "@strapi/admin": "workspace:*",
+  "@strapi/admin": "5.4.0",
   "@strapi/pack-up": "5.0.0",
-  "@strapi/types": "workspace:*",
+  "@strapi/types": "5.4.0",
   "@testing-library/dom": "10.1.0",
   "@testing-library/react": "15.0.7",
   "@testing-library/user-event": "14.5.2",
@@ -162,7 +160,7 @@ const devDependencies = {
   "styled-components": "6.1.8"
 };
 const peerDependencies = {
-  "@strapi/admin": "^5.0.0 || ^5.0.0-beta || ^5.0.0-alpha || ^5.0.0-rc",
+  "@strapi/admin": "^5.0.0",
   react: "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0",
   "react-router-dom": "^6.0.0",
@@ -179,6 +177,7 @@ const strapi = {
   required: true,
   kind: "plugin"
 };
+const gitHead = "7d785703f52464577d077c4618cbe68b44f8a9cd";
 const pluginPkg = {
   name: name$1,
   version,
@@ -193,7 +192,8 @@ const pluginPkg = {
   devDependencies,
   peerDependencies,
   engines,
-  strapi
+  strapi,
+  gitHead
 };
 const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
 const useAssets = ({ skipWhen = false, query = {} } = {}) => {
@@ -508,7 +508,7 @@ function getAPIInnerErrors(error, { getTrad: getTrad2 }) {
 }
 const getTrad = (id) => `${pluginId}.${id}`;
 const getBreadcrumbDataCM = (folder) => {
-  let data = [
+  const data = [
     {
       id: null,
       label: { id: getTrad("plugin.name"), defaultMessage: "Media Library" }
@@ -560,7 +560,7 @@ const getFolderParents = (folders, currentFolderId) => {
   }
   let { parent } = currentFolder;
   while (parent !== void 0) {
-    let parentToStore = flatFolders.find(({ value }) => value === parent);
+    const parentToStore = flatFolders.find(({ value }) => value === parent);
     parents.push({ id: parentToStore?.value, label: parentToStore?.label });
     parent = parentToStore?.parent;
   }
@@ -573,9 +573,9 @@ const move = (array, oldIndex, newIndex) => {
   array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
   return array;
 };
-const moveElement = (array, index2, offset) => {
-  const newIndex = index2 + offset;
-  return move(array, index2, newIndex);
+const moveElement = (array, index, offset) => {
+  const newIndex = index + offset;
+  return move(array, index, newIndex);
 };
 const prefixPluginTranslations = (trad, pluginId2) => {
   if (!pluginId2) {
@@ -694,7 +694,7 @@ var AssetSource = /* @__PURE__ */ ((AssetSource2) => {
   AssetSource2["Computer"] = "computer";
   return AssetSource2;
 })(AssetSource || {});
-const PERMISSIONS$1 = {
+const PERMISSIONS = {
   // This permission regards the main component (App) and is used to tell
   // If the plugin link should be displayed in the menu
   // And also if the plugin is accessible. This use case is found when a user types the url of the
@@ -789,7 +789,7 @@ const tableHeaders = [
     type: "date"
   }
 ];
-const sortOptions$1 = [
+const sortOptions = [
   { key: "sort.created_at_desc", value: "createdAt:DESC" },
   { key: "sort.created_at_asc", value: "createdAt:ASC" },
   { key: "sort.name_asc", value: "name:ASC" },
@@ -797,15 +797,16 @@ const sortOptions$1 = [
   { key: "sort.updated_at_desc", value: "updatedAt:DESC" },
   { key: "sort.updated_at_asc", value: "updatedAt:ASC" }
 ];
-const localStorageKeys$1 = {
+const pageSizes = [10, 20, 50, 100];
+const localStorageKeys = {
   modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
   view: `STRAPI_UPLOAD_LIBRARY_VIEW`
 };
-const viewOptions$1 = {
+const viewOptions = {
   GRID: 0,
   LIST: 1
 };
-const { main, ...restPermissions } = PERMISSIONS$1;
+const { main: _main, ...restPermissions } = PERMISSIONS;
 const useMediaLibraryPermissions = () => {
   const { allowedActions, isLoading } = strapiAdmin.useRBAC(restPermissions);
   return { ...allowedActions, isLoading };
@@ -940,13 +941,13 @@ const useModalQueryParams = (initialState) => {
 const useSelectionState = (keys, initialValue) => {
   const [selections, setSelections] = React__namespace.useState(initialValue);
   const selectOne = (selection) => {
-    const index2 = selections.findIndex(
+    const index = selections.findIndex(
       (currentSelection) => keys.every((key) => currentSelection[key] === selection[key])
     );
-    if (index2 > -1) {
+    if (index > -1) {
       setSelections((prevSelected) => [
-        ...prevSelected.slice(0, index2),
-        ...prevSelected.slice(index2 + 1)
+        ...prevSelected.slice(0, index),
+        ...prevSelected.slice(index + 1)
       ]);
     } else {
       setSelections((prevSelected) => [...prevSelected, selection]);
@@ -960,10 +961,10 @@ const useSelectionState = (keys, initialValue) => {
     }
   };
   const selectOnly = (nextSelection) => {
-    const index2 = selections.findIndex(
+    const index = selections.findIndex(
       (currentSelection) => keys.every((key) => currentSelection[key] === nextSelection[key])
     );
-    if (index2 > -1) {
+    if (index > -1) {
       setSelections([]);
     } else {
       setSelections([nextSelection]);
@@ -1144,7 +1145,7 @@ const Option = ({ children, data, selectProps, ...props }) => {
   ] }) });
 };
 function getOpenValues(options, defaultValue = {}) {
-  let values = [];
+  const values = [];
   const { value } = defaultValue;
   const option = options.find((option2) => option2.value === value);
   if (!option) {
@@ -1351,6 +1352,7 @@ const getSelectStyles = (theme, error) => {
       paddingRight: theme.spaces[1],
       paddingBottom: theme.spaces[1]
     }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     option(base, state) {
       let backgroundColor = base?.backgroundColor;
       if (state.isFocused || state.isSelected) {
@@ -1870,7 +1872,7 @@ const PreviewBox = ({
       nextAsset.mime,
       nextAsset.updatedAt
     );
-    await upload({ name: file.name, rawFile: file }, asset.folder?.id);
+    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);
     trackUsage("didCropFile", { duplicatedFile: true, location: trackedLocation });
     setHasCropIntent(false);
     onCropFinish();
@@ -2004,6 +2006,7 @@ const ReplaceMediaButton = ({
         accept: acceptedMime,
         type: "file",
         name: "file",
+        "data-testid": "file-input",
         tabIndex: -1,
         ref: inputRef,
         onChange: handleChange,
@@ -2140,7 +2143,7 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.size"),
                         defaultMessage: "Size"
                       }),
-                      value: formatBytes(asset?.size)
+                      value: formatBytes(asset?.size ? asset.size : 0)
                     },
                     {
                       label: formatMessage({
@@ -2154,7 +2157,7 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.date"),
                         defaultMessage: "Date"
                       }),
-                      value: formatDate(new Date(asset?.createdAt))
+                      value: formatDate(new Date(asset?.createdAt ? asset.createdAt : ""))
                     },
                     {
                       label: formatMessage({
@@ -2168,7 +2171,7 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.id"),
                         defaultMessage: "Asset ID"
                       }),
-                      value: asset?.id
+                      value: asset?.id ? asset.id : null
                     }
                   ]
                 }
@@ -2265,13 +2268,13 @@ const EditAssetContent = ({
           ] }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose({ ...values }), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ReplaceMediaButton,
               {
                 onSelectMedia: setReplacementFile,
-                acceptedMime: asset?.mime,
+                acceptedMime: asset?.mime ?? "",
                 disabled: formDisabled,
                 trackedLocation
               }
@@ -2821,7 +2824,6 @@ const VideoPreview = ({
   onLoadDuration = () => {
   },
   alt,
-  size = "M",
   ...props
 }) => {
   const handleTimeUpdate = (e) => {
@@ -2925,7 +2927,7 @@ const AssetCard = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DocAssetCard, { ...commonAssetCardProps });
 };
-const Draggable = ({ children, id, index: index2, moveItem }) => {
+const Draggable = ({ children, id, index, moveItem }) => {
   const ref = React__namespace.useRef(null);
   const [, drop] = reactDnd.useDrop({
     accept: "draggable",
@@ -2934,15 +2936,15 @@ const Draggable = ({ children, id, index: index2, moveItem }) => {
         return;
       }
       if (hoveredOverItem.id !== id) {
-        moveItem(hoveredOverItem.index, index2);
-        hoveredOverItem.index = index2;
+        moveItem(hoveredOverItem.index, index);
+        hoveredOverItem.index = index;
       }
     }
   });
   const [{ isDragging }, drag] = reactDnd.useDrag({
     type: "draggable",
     item() {
-      return { index: index2, id };
+      return { index, id };
     },
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
@@ -2964,10 +2966,10 @@ const AssetGridList = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, 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: assets.map((asset, index2) => {
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: assets.map((asset, index) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Draggable, { index, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsxRuntime.jsx(
           AssetCard,
           {
             allowedTypes,
@@ -3053,12 +3055,12 @@ const Breadcrumbs = ({
   ...props
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { ...props, children: breadcrumbs.map((crumb, index2) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { ...props, children: breadcrumbs.map((crumb, index) => {
     if (Array.isArray(crumb)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         CrumbSimpleMenuAsync,
         {
-          parentsToOmit: [...breadcrumbs].splice(index2 + 1, breadcrumbs.length - 1).map((parent) => parent.id),
+          parentsToOmit: [...breadcrumbs].splice(index + 1, breadcrumbs.length - 1).map((parent) => parent.id),
           currentFolderId,
           onChangeFolder
         },
@@ -3071,7 +3073,6 @@ const Breadcrumbs = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.CrumbLink,
           {
-            tag: "button",
             type: "button",
             onClick: () => onChangeFolder(crumb.id, crumb.path),
             children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
@@ -3082,8 +3083,8 @@ const Breadcrumbs = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.CrumbLink,
         {
-          tag: reactRouterDom.NavLink,
-          href: crumb.href,
+          to: crumb.href,
+          tag: reactRouterDom.Link,
           children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
         },
         `breadcrumb-${crumb?.id ?? "root"}`
@@ -3092,7 +3093,7 @@ const Breadcrumbs = ({
     return /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Crumb,
       {
-        isCurrent: index2 + 1 === breadcrumbs.length,
+        isCurrent: index + 1 === breadcrumbs.length,
         children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
       },
       `breadcrumb-${crumb?.id ?? "root"}`
@@ -3175,7 +3176,6 @@ const Card = styledComponents.styled(designSystem.Box)`
 const FolderCard = React__namespace.forwardRef(
   ({
     children,
-    id,
     startAction = null,
     cardActions = null,
     ariaLabel,
@@ -3243,6 +3243,7 @@ const FolderCardBody = (props) => {
     {
       ...props,
       id: `${id}-title`,
+      "data-testid": `${id}-title`,
       alignItems: "flex-start",
       direction: "column",
       maxWidth: "100%",
@@ -3297,7 +3298,7 @@ const SortPicker = ({ onChangeSort, value }) => {
         id: getTrad("sort.label"),
         defaultMessage: "Sort by"
       }),
-      children: sortOptions$1.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
+      children: sortOptions.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
     }
   );
 };
@@ -3316,6 +3317,7 @@ const VideoPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
   }
 `;
 const PreviewCell = ({ type, content }) => {
+  const { formatMessage } = reactIntl.useIntl();
   if (type === "folder") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Flex,
@@ -3325,7 +3327,18 @@ const PreviewCell = ({ type, content }) => {
         width: "3.2rem",
         height: "3.2rem",
         borderRadius: "50%",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Folder, { fill: "secondary500", width: "1.6rem", height: "1.6rem" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          icons.Folder,
+          {
+            "aria-label": formatMessage({
+              id: getTrad("header.actions.add-assets.folder"),
+              defaultMessage: "folder"
+            }),
+            fill: "secondary500",
+            width: "1.6rem",
+            height: "1.6rem"
+          }
+        )
       }
     );
   }
@@ -3722,7 +3735,9 @@ const FilterValueInput = ({
     }
   );
 };
-const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
+const getFilterList = ({
+  fieldSchema: { type: fieldType, mainField }
+}) => {
   const type = mainField?.schema.type ? mainField.schema.type : fieldType;
   switch (type) {
     case "enumeration": {
@@ -3817,7 +3832,12 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
       ];
   }
 };
-const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
+const FilterPopover = ({
+  displayedFilters: displayedFilters2,
+  filters,
+  onSubmit,
+  onToggle
+}) => {
   const { formatMessage } = reactIntl.useIntl();
   const [modifiedData, setModifiedData] = React__namespace.useState({
     name: "createdAt",
@@ -3919,7 +3939,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
           return filter.mime?.[oppositeFilter] === modifiedData.value;
         });
         const hasOppositeFilter = oppositeFilterIndex !== -1;
-        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: modifiedData.value } };
+        const filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: modifiedData.value } };
         if (!hasOppositeFilter) {
           const nextFilters = [...filtersWithoutFile, filterToAdd];
           onSubmit(nextFilters);
@@ -3939,7 +3959,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
         return filter[modifiedDataName] && filter[modifiedDataName]?.[modifiedDataName] === encodedValue;
       }) !== void 0;
       if (!hasFilter) {
-        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
+        const filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
         const nextFilters = [...filters, filterToAdd];
         onSubmit(nextFilters);
       }
@@ -4048,6 +4068,15 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
 };
 const PaginationContext = React__namespace.createContext({ activePage: 1, pageCount: 1 });
 const usePagination = () => React__namespace.useContext(PaginationContext);
+const Pagination = ({
+  children,
+  activePage,
+  pageCount,
+  label = "pagination"
+}) => {
+  const paginationValue = React__namespace.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "ul", gap: 1, children }) }) });
+};
 const PaginationText = styledComponents.styled(designSystem.Typography)`
   line-height: revert;
 `;
@@ -4151,15 +4180,6 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
   /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children }),
   /* @__PURE__ */ jsxRuntime.jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
 ] }) });
-const Pagination = ({
-  children,
-  activePage,
-  pageCount,
-  label = "pagination"
-}) => {
-  const paginationValue = React__namespace.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "ul", gap: 1, children }) }) });
-};
 const PaginationFooter = ({
   activePage,
   onChangePage,
@@ -4204,7 +4224,7 @@ const PaginationFooter = ({
     ] });
   }
   let firstLinksToCreate = [];
-  let lastLinks = [];
+  const lastLinks = [];
   let lastLinksToCreate = [];
   const middleLinks = [];
   if (pageCount > 1) {
@@ -4338,6 +4358,7 @@ const SearchAsset = ({ onChangeSearch, queryValue = null }) => {
           id: getTrad("search.clear.label"),
           defaultMessage: "Clear the search"
         }),
+        "aria-label": "search",
         size: "S",
         value,
         placeholder: formatMessage({
@@ -4389,8 +4410,8 @@ const BrowseStep = ({
   selectedAssets
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const [view, setView] = usePersistentState(localStorageKeys$1.modalView, viewOptions$1.GRID);
-  const isGridView = view === viewOptions$1.GRID;
+  const [view, setView] = usePersistentState(localStorageKeys.modalView, viewOptions.GRID);
+  const isGridView = view === viewOptions.GRID;
   const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(
     queryObject?.folder,
     {
@@ -4412,7 +4433,7 @@ const BrowseStep = ({
     (asset) => selectedAssets.findIndex((currAsset) => currAsset.id === asset.id) !== -1
   );
   const isSearching = !!queryObject?._q;
-  const isFiltering = queryObject?.filters?.$and?.length > 0;
+  const isFiltering = !!queryObject?.filters?.$and?.length && queryObject.filters.$and.length > 0;
   const isSearchingOrFiltering = isSearching || isFiltering;
   const assetCount = assets.length;
   const folderCount = folders.length;
@@ -4465,18 +4486,17 @@ const BrowseStep = ({
               id: "view-switch.grid",
               defaultMessage: "Grid View"
             }),
-            onClick: () => setView(isGridView ? viewOptions$1.LIST : viewOptions$1.GRID),
+            onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
             children: isGridView ? /* @__PURE__ */ jsxRuntime.jsx(icons.List, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.GridFour, {})
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SearchAsset, { onChangeSearch, queryValue: queryObject._q || "" })
       ] })
     ] }) }),
-    canRead && breadcrumbs?.length > 0 && currentFolder && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    canRead && breadcrumbs?.length && breadcrumbs.length > 0 && currentFolder && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
       Breadcrumbs,
       {
         onChangeFolder,
-        tag: "nav",
         label: formatMessage({
           id: getTrad("header.breadcrumbs.nav.label"),
           defaultMessage: "Folders navigation"
@@ -4665,7 +4685,7 @@ const SelectedStep = ({
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 0, direction: "column", alignItems: "start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
         {
           id: getTrad("list.assets.to-upload"),
@@ -5024,6 +5044,10 @@ const FromComputerForm = ({
               type: "file",
               multiple: true,
               name: "files",
+              "aria-label": formatMessage({
+                id: getTrad("input.label"),
+                defaultMessage: "Drag & Drop here or"
+              }),
               tabIndex: -1,
               ref: inputRef,
               zIndex: 1,
@@ -5757,7 +5781,7 @@ const CarouselAssets = React__namespace.forwardRef(
                 }
               )
             }
-          ) : assets.map((asset, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+          ) : assets.map((asset, index) => /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.CarouselSlide,
             {
               label: formatMessage(
@@ -5765,7 +5789,7 @@ const CarouselAssets = React__namespace.forwardRef(
                   id: getTrad("mediaLibraryInput.slideCount"),
                   defaultMessage: "{n} of {m} slides"
                 },
-                { n: index2 + 1, m: assets.length }
+                { n: index + 1, m: assets.length }
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(CarouselAsset, { asset })
             },
@@ -5978,136 +6002,8 @@ const MediaLibraryInput = React__namespace.forwardRef(
     ] });
   }
 );
-const ParentFolderShape = {
-  id: PropTypes__default.default.number.isRequired,
-  createdAt: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  updatedAt: PropTypes__default.default.string.isRequired,
-  pathId: PropTypes__default.default.number.isRequired,
-  path: PropTypes__default.default.string.isRequired
-};
-ParentFolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
-const FolderShape = {
-  id: PropTypes__default.default.number,
-  children: PropTypes__default.default.shape({
-    count: PropTypes__default.default.number.isRequired
-  }),
-  createdAt: PropTypes__default.default.string,
-  createdBy: PropTypes__default.default.shape(),
-  files: PropTypes__default.default.shape({
-    count: PropTypes__default.default.number.isRequired
-  }),
-  name: PropTypes__default.default.string,
-  updatedAt: PropTypes__default.default.string,
-  updatedBy: PropTypes__default.default.shape(),
-  pathId: PropTypes__default.default.number,
-  path: PropTypes__default.default.string
-};
-FolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
-const FolderDefinition = PropTypes__default.default.shape(FolderShape);
-const FolderStructure = PropTypes__default.default.shape({
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  label: PropTypes__default.default.string.isRequired,
-  children: PropTypes__default.default.array
-});
-FolderStructure.children = PropTypes__default.default.arrayOf(PropTypes__default.default.shape(FolderStructure));
-FolderStructure.defaultProps = {
-  children: void 0
-};
-PropTypes__default.default.arrayOf(FolderStructure);
-const AssetDefinition = PropTypes__default.default.shape({
-  id: PropTypes__default.default.number,
-  height: PropTypes__default.default.number,
-  width: PropTypes__default.default.number,
-  size: PropTypes__default.default.number,
-  createdAt: PropTypes__default.default.string,
-  ext: PropTypes__default.default.string,
-  mime: PropTypes__default.default.string,
-  name: PropTypes__default.default.string,
-  url: PropTypes__default.default.string,
-  updatedAt: PropTypes__default.default.string,
-  alternativeText: PropTypes__default.default.string,
-  caption: PropTypes__default.default.string,
-  folder: PropTypes__default.default.shape(FolderDefinition),
-  formats: PropTypes__default.default.shape({
-    thumbnail: PropTypes__default.default.shape({
-      url: PropTypes__default.default.string
-    })
-  })
-});
-const CrumbDefinition = PropTypes__default.default.shape({
-  id: PropTypes__default.default.number,
-  label: PropTypes__default.default.oneOfType([
-    PropTypes__default.default.string,
-    PropTypes__default.default.shape({
-      id: PropTypes__default.default.string.isRequired,
-      defaultMessage: PropTypes__default.default.string.isRequired
-    })
-  ]).isRequired,
-  href: PropTypes__default.default.string
-});
-const CrumbMenuDefinition = PropTypes__default.default.arrayOf(CrumbDefinition);
-const BreadcrumbsDefinition = PropTypes__default.default.arrayOf(
-  PropTypes__default.default.oneOfType([CrumbDefinition, CrumbMenuDefinition])
-);
-const viewOptions = {
-  GRID: 0,
-  LIST: 1
-};
-const pageSizes = [10, 20, 50, 100];
-const sortOptions = [
-  { key: "sort.created_at_desc", value: "createdAt:DESC" },
-  { key: "sort.created_at_asc", value: "createdAt:ASC" },
-  { key: "sort.name_asc", value: "name:ASC" },
-  { key: "sort.name_desc", value: "name:DESC" },
-  { key: "sort.updated_at_desc", value: "updatedAt:DESC" },
-  { key: "sort.updated_at_asc", value: "updatedAt:ASC" }
-];
-const localStorageKeys = {
-  modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
-  view: `STRAPI_UPLOAD_LIBRARY_VIEW`
-};
-const PERMISSIONS = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: "plugin::upload.read", subject: null },
-    {
-      action: "plugin::upload.assets.create",
-      subject: null
-    },
-    {
-      action: "plugin::upload.assets.update",
-      subject: null
-    }
-  ],
-  copyLink: [
-    {
-      action: "plugin::upload.assets.copy-link",
-      subject: null
-    }
-  ],
-  create: [
-    {
-      action: "plugin::upload.assets.create",
-      subject: null
-    }
-  ],
-  download: [
-    {
-      action: "plugin::upload.assets.download",
-      subject: null
-    }
-  ],
-  read: [{ action: "plugin::upload.read", subject: null }],
-  configureView: [{ action: "plugin::upload.configure-view", subject: null }],
-  settings: [{ action: "plugin::upload.settings.read", subject: null }],
-  update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
-};
 const name = pluginPkg.strapi.name;
-const index = {
+const admin = {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
@@ -6117,21 +6013,32 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => Promise.resolve().then(() => require("./index-Bl2-6oC8.js")),
+      Component: () => Promise.resolve().then(() => require("./App-Dqqn78jO.js")).then((mod) => ({ default: mod.Upload })),
       position: 4
     });
     app.addSettingsLink("global", {
       id: "media-library-settings",
+      to: "media-library",
       intlLabel: {
         id: getTrad("plugin.name"),
         defaultMessage: "Media Library"
       },
-      to: "media-library",
-      Component: () => Promise.resolve().then(() => require("./index-C1MSWEyZ.js")),
+      async Component() {
+        const { ProtectedSettingsPage } = await Promise.resolve().then(() => require("./SettingsPage-oDEVs3XV.js"));
+        return { default: ProtectedSettingsPage };
+      },
       permissions: PERMISSIONS.settings
     });
-    app.addFields({ type: "media", Component: MediaLibraryInput });
-    app.addComponents([{ name: "media-library", Component: MediaLibraryDialog }]);
+    app.addFields({
+      type: "media",
+      Component: MediaLibraryInput
+    });
+    app.addComponents([
+      {
+        name: "media-library",
+        Component: MediaLibraryDialog
+      }
+    ]);
     app.registerPlugin({
       id: pluginId,
       name
@@ -6156,10 +6063,8 @@ const index = {
     return Promise.resolve(importedTrads);
   }
 };
-exports.AssetDefinition = AssetDefinition;
 exports.AssetGridList = AssetGridList;
 exports.Breadcrumbs = Breadcrumbs;
-exports.BreadcrumbsDefinition = BreadcrumbsDefinition;
 exports.EditAssetDialog = EditAssetDialog;
 exports.EditFolderDialog = EditFolderDialog;
 exports.EmptyAssets = EmptyAssets;
@@ -6168,18 +6073,17 @@ exports.FilterPopover = FilterPopover;
 exports.FolderCard = FolderCard;
 exports.FolderCardBody = FolderCardBody;
 exports.FolderCardBodyAction = FolderCardBodyAction;
-exports.FolderDefinition = FolderDefinition;
 exports.FolderGridList = FolderGridList;
 exports.PERMISSIONS = PERMISSIONS;
 exports.SelectTree = SelectTree;
 exports.SortPicker = SortPicker;
 exports.TableList = TableList;
 exports.UploadAssetDialog = UploadAssetDialog;
+exports.admin = admin;
 exports.containsAssetFilter = containsAssetFilter;
 exports.displayedFilters = displayedFilters;
 exports.getFolderURL = getFolderURL;
 exports.getTrad = getTrad;
-exports.index = index;
 exports.localStorageKeys = localStorageKeys;
 exports.normalizeAPIError = normalizeAPIError;
 exports.pageSizes = pageSizes;
@@ -6196,4 +6100,4 @@ exports.useMediaLibraryPermissions = useMediaLibraryPermissions;
 exports.usePersistentState = usePersistentState;
 exports.useSelectionState = useSelectionState;
 exports.viewOptions = viewOptions;
-//# sourceMappingURL=index-YwynuEzj.js.map
+//# sourceMappingURL=index-B7NW5XiM.js.map