@strapi/upload 5.3.0 → 5.4.0

package/dist/_chunks/{index-BwEfHu6y.mjs → index-Clesg6BA.mjs}

@@ -18,10 +18,9 @@ import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
 import isEmpty from "lodash/isEmpty";
 import { useDrop, useDrag } from "react-dnd";
-import { useLocation, NavLink, Link as Link$1 } from "react-router-dom";
+import { useLocation, Link as Link$1, NavLink } from "react-router-dom";
 import { EmptyDocuments } from "@strapi/icons/symbols";
 import parseISO from "date-fns/parseISO";
-import PropTypes from "prop-types";
 const __variableDynamicImportRuntimeHelper = (glob, path) => {
   const v = glob[path];
   if (v) {
@@ -32,7 +31,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 = {
@@ -50,7 +49,7 @@ const maintainers = [
 const exports = {
   "./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"
@@ -90,8 +89,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",
@@ -113,9 +112,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",
@@ -134,7 +133,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",
@@ -151,6 +150,7 @@ const strapi = {
   required: true,
   kind: "plugin"
 };
+const gitHead = "7d785703f52464577d077c4618cbe68b44f8a9cd";
 const pluginPkg = {
   name: name$1,
   version,
@@ -165,7 +165,8 @@ const pluginPkg = {
   devDependencies,
   peerDependencies,
   engines,
-  strapi
+  strapi,
+  gitHead
 };
 const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
 const useAssets = ({ skipWhen = false, query = {} } = {}) => {
@@ -480,7 +481,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" }
@@ -532,7 +533,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;
   }
@@ -545,9 +546,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) {
@@ -666,7 +667,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
@@ -761,7 +762,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" },
@@ -769,15 +770,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 } = useRBAC(restPermissions);
   return { ...allowedActions, isLoading };
@@ -912,13 +914,13 @@ const useModalQueryParams = (initialState) => {
 const useSelectionState = (keys, initialValue) => {
   const [selections, setSelections] = React.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]);
@@ -932,10 +934,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]);
@@ -1116,7 +1118,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) {
@@ -1323,6 +1325,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) {
@@ -1842,7 +1845,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();
@@ -1976,6 +1979,7 @@ const ReplaceMediaButton = ({
         accept: acceptedMime,
         type: "file",
         name: "file",
+        "data-testid": "file-input",
         tabIndex: -1,
         ref: inputRef,
         onChange: handleChange,
@@ -2112,7 +2116,7 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.size"),
                         defaultMessage: "Size"
                       }),
-                      value: formatBytes(asset?.size)
+                      value: formatBytes(asset?.size ? asset.size : 0)
                     },
                     {
                       label: formatMessage({
@@ -2126,7 +2130,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({
@@ -2140,7 +2144,7 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.id"),
                         defaultMessage: "Asset ID"
                       }),
-                      value: asset?.id
+                      value: asset?.id ? asset.id : null
                     }
                   ]
                 }
@@ -2237,13 +2241,13 @@ const EditAssetContent = ({
           ] }) })
         ] }) }),
         /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-          /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => handleClose({ ...values }), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
             /* @__PURE__ */ jsx(
               ReplaceMediaButton,
               {
                 onSelectMedia: setReplacementFile,
-                acceptedMime: asset?.mime,
+                acceptedMime: asset?.mime ?? "",
                 disabled: formDisabled,
                 trackedLocation
               }
@@ -2793,7 +2797,6 @@ const VideoPreview = ({
   onLoadDuration = () => {
   },
   alt,
-  size = "M",
   ...props
 }) => {
   const handleTimeUpdate = (e) => {
@@ -2897,7 +2900,7 @@ const AssetCard = ({
   }
   return /* @__PURE__ */ jsx(DocAssetCard, { ...commonAssetCardProps });
 };
-const Draggable = ({ children, id, index: index2, moveItem }) => {
+const Draggable = ({ children, id, index, moveItem }) => {
   const ref = React.useRef(null);
   const [, drop] = useDrop({
     accept: "draggable",
@@ -2906,15 +2909,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] = useDrag({
     type: "draggable",
     item() {
-      return { index: index2, id };
+      return { index, id };
     },
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
@@ -2936,10 +2939,10 @@ const AssetGridList = ({
 }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
-    /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: assets.map((asset, index2) => {
+    /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: assets.map((asset, index) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
-        return /* @__PURE__ */ jsx(Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(Draggable, { index, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsx(
           AssetCard,
           {
             allowedTypes,
@@ -3025,12 +3028,12 @@ const Breadcrumbs = ({
   ...props
 }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(Breadcrumbs$1, { ...props, children: breadcrumbs.map((crumb, index2) => {
+  return /* @__PURE__ */ jsx(Breadcrumbs$1, { ...props, children: breadcrumbs.map((crumb, index) => {
     if (Array.isArray(crumb)) {
       return /* @__PURE__ */ 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
         },
@@ -3043,7 +3046,6 @@ const Breadcrumbs = ({
         return /* @__PURE__ */ jsx(
           CrumbLink,
           {
-            tag: "button",
             type: "button",
             onClick: () => onChangeFolder(crumb.id, crumb.path),
             children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
@@ -3054,8 +3056,8 @@ const Breadcrumbs = ({
       return /* @__PURE__ */ jsx(
         CrumbLink,
         {
-          tag: NavLink,
-          href: crumb.href,
+          to: crumb.href,
+          tag: Link$1,
           children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
         },
         `breadcrumb-${crumb?.id ?? "root"}`
@@ -3064,7 +3066,7 @@ const Breadcrumbs = ({
     return /* @__PURE__ */ jsx(
       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"}`
@@ -3147,7 +3149,6 @@ const Card = styled(Box)`
 const FolderCard = React.forwardRef(
   ({
     children,
-    id,
     startAction = null,
     cardActions = null,
     ariaLabel,
@@ -3215,6 +3216,7 @@ const FolderCardBody = (props) => {
     {
       ...props,
       id: `${id}-title`,
+      "data-testid": `${id}-title`,
       alignItems: "flex-start",
       direction: "column",
       maxWidth: "100%",
@@ -3269,7 +3271,7 @@ const SortPicker = ({ onChangeSort, value }) => {
         id: getTrad("sort.label"),
         defaultMessage: "Sort by"
       }),
-      children: sortOptions$1.map((filter) => /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
+      children: sortOptions.map((filter) => /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
     }
   );
 };
@@ -3288,6 +3290,7 @@ const VideoPreviewWrapper$1 = styled(Box)`
   }
 `;
 const PreviewCell = ({ type, content }) => {
+  const { formatMessage } = useIntl();
   if (type === "folder") {
     return /* @__PURE__ */ jsx(
       Flex,
@@ -3297,7 +3300,18 @@ const PreviewCell = ({ type, content }) => {
         width: "3.2rem",
         height: "3.2rem",
         borderRadius: "50%",
-        children: /* @__PURE__ */ jsx(Folder, { fill: "secondary500", width: "1.6rem", height: "1.6rem" })
+        children: /* @__PURE__ */ jsx(
+          Folder,
+          {
+            "aria-label": formatMessage({
+              id: getTrad("header.actions.add-assets.folder"),
+              defaultMessage: "folder"
+            }),
+            fill: "secondary500",
+            width: "1.6rem",
+            height: "1.6rem"
+          }
+        )
       }
     );
   }
@@ -3694,7 +3708,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": {
@@ -3789,7 +3805,12 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
       ];
   }
 };
-const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
+const FilterPopover = ({
+  displayedFilters: displayedFilters2,
+  filters,
+  onSubmit,
+  onToggle
+}) => {
   const { formatMessage } = useIntl();
   const [modifiedData, setModifiedData] = React.useState({
     name: "createdAt",
@@ -3891,7 +3912,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);
@@ -3911,7 +3932,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);
       }
@@ -4020,6 +4041,15 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
 };
 const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
 const usePagination = () => React.useContext(PaginationContext);
+const Pagination = ({
+  children,
+  activePage,
+  pageCount,
+  label = "pagination"
+}) => {
+  const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
+  return /* @__PURE__ */ jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsx(Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsx(Flex, { tag: "ul", gap: 1, children }) }) });
+};
 const PaginationText = styled(Typography)`
   line-height: revert;
 `;
@@ -4123,15 +4153,6 @@ const Dots = ({ children, ...props }) => /* @__PURE__ */ jsx("li", { children: /
   /* @__PURE__ */ jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
 ] }) });
-const Pagination = ({
-  children,
-  activePage,
-  pageCount,
-  label = "pagination"
-}) => {
-  const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-  return /* @__PURE__ */ jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsx(Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsx(Flex, { tag: "ul", gap: 1, children }) }) });
-};
 const PaginationFooter = ({
   activePage,
   onChangePage,
@@ -4176,7 +4197,7 @@ const PaginationFooter = ({
     ] });
   }
   let firstLinksToCreate = [];
-  let lastLinks = [];
+  const lastLinks = [];
   let lastLinksToCreate = [];
   const middleLinks = [];
   if (pageCount > 1) {
@@ -4310,6 +4331,7 @@ const SearchAsset = ({ onChangeSearch, queryValue = null }) => {
           id: getTrad("search.clear.label"),
           defaultMessage: "Clear the search"
         }),
+        "aria-label": "search",
         size: "S",
         value,
         placeholder: formatMessage({
@@ -4361,8 +4383,8 @@ const BrowseStep = ({
   selectedAssets
 }) => {
   const { formatMessage } = 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,
     {
@@ -4384,7 +4406,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;
@@ -4437,18 +4459,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__ */ jsx(List, {}) : /* @__PURE__ */ jsx(GridFour, {})
           }
         ) }),
         /* @__PURE__ */ jsx(SearchAsset, { onChangeSearch, queryValue: queryObject._q || "" })
       ] })
     ] }) }),
-    canRead && breadcrumbs?.length > 0 && currentFolder && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(
+    canRead && breadcrumbs?.length && breadcrumbs.length > 0 && currentFolder && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(
       Breadcrumbs,
       {
         onChangeFolder,
-        tag: "nav",
         label: formatMessage({
           id: getTrad("header.breadcrumbs.nav.label"),
           defaultMessage: "Folders navigation"
@@ -4637,7 +4658,7 @@ const SelectedStep = ({
 }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-    /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 0, direction: "column", alignItems: "start", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
         {
           id: getTrad("list.assets.to-upload"),
@@ -4996,6 +5017,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,
@@ -5729,7 +5754,7 @@ const CarouselAssets = React.forwardRef(
                 }
               )
             }
-          ) : assets.map((asset, index2) => /* @__PURE__ */ jsx(
+          ) : assets.map((asset, index) => /* @__PURE__ */ jsx(
             CarouselSlide,
             {
               label: formatMessage(
@@ -5737,7 +5762,7 @@ const CarouselAssets = React.forwardRef(
                   id: getTrad("mediaLibraryInput.slideCount"),
                   defaultMessage: "{n} of {m} slides"
                 },
-                { n: index2 + 1, m: assets.length }
+                { n: index + 1, m: assets.length }
               ),
               children: /* @__PURE__ */ jsx(CarouselAsset, { asset })
             },
@@ -5950,136 +5975,8 @@ const MediaLibraryInput = React.forwardRef(
     ] });
   }
 );
-const ParentFolderShape = {
-  id: PropTypes.number.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-  pathId: PropTypes.number.isRequired,
-  path: PropTypes.string.isRequired
-};
-ParentFolderShape.parent = PropTypes.shape(ParentFolderShape);
-const FolderShape = {
-  id: PropTypes.number,
-  children: PropTypes.shape({
-    count: PropTypes.number.isRequired
-  }),
-  createdAt: PropTypes.string,
-  createdBy: PropTypes.shape(),
-  files: PropTypes.shape({
-    count: PropTypes.number.isRequired
-  }),
-  name: PropTypes.string,
-  updatedAt: PropTypes.string,
-  updatedBy: PropTypes.shape(),
-  pathId: PropTypes.number,
-  path: PropTypes.string
-};
-FolderShape.parent = PropTypes.shape(ParentFolderShape);
-const FolderDefinition = PropTypes.shape(FolderShape);
-const FolderStructure = PropTypes.shape({
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  label: PropTypes.string.isRequired,
-  children: PropTypes.array
-});
-FolderStructure.children = PropTypes.arrayOf(PropTypes.shape(FolderStructure));
-FolderStructure.defaultProps = {
-  children: void 0
-};
-PropTypes.arrayOf(FolderStructure);
-const AssetDefinition = PropTypes.shape({
-  id: PropTypes.number,
-  height: PropTypes.number,
-  width: PropTypes.number,
-  size: PropTypes.number,
-  createdAt: PropTypes.string,
-  ext: PropTypes.string,
-  mime: PropTypes.string,
-  name: PropTypes.string,
-  url: PropTypes.string,
-  updatedAt: PropTypes.string,
-  alternativeText: PropTypes.string,
-  caption: PropTypes.string,
-  folder: PropTypes.shape(FolderDefinition),
-  formats: PropTypes.shape({
-    thumbnail: PropTypes.shape({
-      url: PropTypes.string
-    })
-  })
-});
-const CrumbDefinition = PropTypes.shape({
-  id: PropTypes.number,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      defaultMessage: PropTypes.string.isRequired
-    })
-  ]).isRequired,
-  href: PropTypes.string
-});
-const CrumbMenuDefinition = PropTypes.arrayOf(CrumbDefinition);
-const BreadcrumbsDefinition = PropTypes.arrayOf(
-  PropTypes.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}`,
@@ -6089,21 +5986,32 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-DCAQ4hHN.mjs"),
+      Component: () => import("./App-D1ayH-QS.mjs").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: () => import("./index-BWIqjWzC.mjs"),
+      async Component() {
+        const { ProtectedSettingsPage } = await import("./SettingsPage-BYC3ism8.mjs");
+        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
@@ -6129,16 +6037,13 @@ const index = {
   }
 };
 export {
-  AssetDefinition as A,
-  BreadcrumbsDefinition as B,
-  EditFolderDialog as C,
-  EditAssetDialog as D,
+  AssetGridList as A,
+  Breadcrumbs as B,
+  pageSizes as C,
+  sortOptions as D,
   EmptyAssets as E,
-  FolderDefinition as F,
-  useConfig as G,
-  pageSizes as H,
-  sortOptions as I,
-  index as J,
+  FilterPopover as F,
+  admin as G,
   PERMISSIONS as P,
   SelectTree as S,
   TableList as T,
@@ -6146,28 +6051,28 @@ export {
   getFolderURL as a,
   useBulkRemove as b,
   useFolderStructure as c,
-  FilterPopover as d,
-  displayedFilters as e,
-  FilterList as f,
+  displayedFilters as d,
+  FilterList as e,
+  useMediaLibraryPermissions as f,
   getTrad as g,
-  Breadcrumbs as h,
-  useMediaLibraryPermissions as i,
-  usePersistentState as j,
-  useAssets as k,
+  usePersistentState as h,
+  useAssets as i,
+  useFolders as j,
+  containsAssetFilter as k,
   localStorageKeys as l,
-  useFolders as m,
+  useFolder as m,
   normalizeAPIError as n,
-  containsAssetFilter as o,
+  useSelectionState as o,
   pluginId as p,
-  useFolder as q,
-  useSelectionState as r,
-  SortPicker as s,
-  FolderGridList as t,
+  SortPicker as q,
+  FolderGridList as r,
+  FolderCard as s,
+  FolderCardBody as t,
   useFolderCard as u,
   viewOptions as v,
-  FolderCard as w,
-  FolderCardBody as x,
-  FolderCardBodyAction as y,
-  AssetGridList as z
+  FolderCardBodyAction as w,
+  EditFolderDialog as x,
+  EditAssetDialog as y,
+  useConfig as z
 };
-//# sourceMappingURL=index-BwEfHu6y.mjs.map
+//# sourceMappingURL=index-Clesg6BA.mjs.map