@strapi/upload 5.1.1 → 5.3.0

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

@@ -1,17 +1,16 @@
 import { ChevronUp, ChevronDown, Cross, CaretDown, Link, FilePdf, File as File$1, Check, Trash, Download, Crop, Pencil, Folder, Eye, CaretUp, Plus, Filter, ChevronLeft, ChevronRight, Search, List, GridFour, PlusCircle, Images } from "@strapi/icons";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useMemo, useState, useEffect, forwardRef, useRef, createElement, createContext, useContext, useLayoutEffect } from "react";
-import PropTypes from "prop-types";
-import { translatedErrors, useNotification, useFetchClient, useRBAC, useTracking, useClipboard, ConfirmDialog, useQueryParams, Layouts, Page, useField } from "@strapi/admin/strapi-admin";
+import { useState, useEffect, createContext, useContext } from "react";
+import { useNotification, useFetchClient, translatedErrors, useRBAC, useTracking, useClipboard, ConfirmDialog, useQueryParams, Layouts, Page, useField } from "@strapi/admin/strapi-admin";
 import { useNotifyAT, Box, Grid, Flex, Typography, Modal, IconButton, ProgressBar, Dialog, Badge, Menu, FocusTrap, Button, VisuallyHidden, Loader, Field, TextInput, CardAction, Card as Card$1, CardHeader, CardCheckbox, CardBody, CardContent, CardTitle, CardSubtitle, CardBadge, CardAsset as CardAsset$2, CardTimer, KeyboardNavigable, CrumbSimpleMenu, MenuItem, Breadcrumbs as Breadcrumbs$1, CrumbLink, Crumb, SingleSelect, SingleSelectOption, Avatar, Tbody, Tr, Td, Checkbox, Table, Thead, Th, Tooltip, Tag, DateTimePicker, Popover, SearchForm, Searchbar, Divider, Tabs, Textarea, CarouselActions, CarouselInput, CarouselSlide } from "@strapi/design-system";
 import { useIntl } from "react-intl";
-import { styled, useTheme } from "styled-components";
+import { styled, useTheme, css } from "styled-components";
+import { useQuery, useMutation, useQueryClient } from "react-query";
+import { stringify } from "qs";
 import byteSize from "byte-size";
 import { intervalToDuration } from "date-fns";
-import { stringify } from "qs";
 import * as yup from "yup";
-import { useQuery, useMutation, useQueryClient } from "react-query";
 import { Formik, Form } from "formik";
 import isEqual from "lodash/isEqual";
 import ReactSelect, { components } from "react-select";
@@ -22,6 +21,7 @@ import { useDrop, useDrag } from "react-dnd";
 import { useLocation, NavLink, Link as Link$1 } 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 +32,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.1.0";
+const version = "5.2.0";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -88,8 +88,8 @@ const scripts = {
   watch: "pack-up watch"
 };
 const dependencies = {
-  "@strapi/design-system": "2.0.0-rc.11",
-  "@strapi/icons": "2.0.0-rc.11",
+  "@strapi/design-system": "2.0.0-rc.12",
+  "@strapi/icons": "2.0.0-rc.12",
   "@strapi/provider-upload-local": "workspace:*",
   "@strapi/utils": "workspace:*",
   "byte-size": "8.1.1",
@@ -167,6 +167,148 @@ const pluginPkg = {
   engines,
   strapi
 };
+const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
+const useAssets = ({ skipWhen = false, query = {} } = {}) => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { notifyStatus } = useNotifyAT();
+  const { get } = useFetchClient();
+  const { folderPath, _q, ...paramsExceptFolderAndQ } = query;
+  let params;
+  if (_q) {
+    params = {
+      ...paramsExceptFolderAndQ,
+      _q: encodeURIComponent(_q)
+    };
+  } else {
+    params = {
+      ...paramsExceptFolderAndQ,
+      filters: {
+        $and: [
+          ...paramsExceptFolderAndQ?.filters?.$and ?? [],
+          {
+            folderPath: { $eq: folderPath ?? "/" }
+          }
+        ]
+      }
+    };
+  }
+  const { data, error, isLoading } = useQuery(
+    [pluginId, "assets", params],
+    async () => {
+      const { data: data2 } = await get("/upload/files", { params });
+      return data2;
+    },
+    {
+      enabled: !skipWhen,
+      staleTime: 0,
+      cacheTime: 0,
+      select(data2) {
+        if (data2?.results && Array.isArray(data2.results)) {
+          return {
+            ...data2,
+            results: data2.results.filter((asset) => asset.name).map((asset) => ({
+              ...asset,
+              /**
+               * Mime and ext cannot be null in the front-end because
+               * we expect them to be strings and use the `includes` method.
+               */
+              mime: asset.mime ?? "",
+              ext: asset.ext ?? ""
+            }))
+          };
+        }
+        return data2;
+      }
+    }
+  );
+  React.useEffect(() => {
+    if (data) {
+      notifyStatus(
+        formatMessage({
+          id: "list.asset.at.finished",
+          defaultMessage: "The assets have finished loading."
+        })
+      );
+    }
+  }, [data, formatMessage, notifyStatus]);
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: "notification.error" })
+      });
+    }
+  }, [error, formatMessage, toggleNotification]);
+  return { data, error, isLoading };
+};
+const useFolders = ({ enabled = true, query = {} } = {}) => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { notifyStatus } = useNotifyAT();
+  const { folder, _q, ...paramsExceptFolderAndQ } = query;
+  const { get } = useFetchClient();
+  let params;
+  if (_q) {
+    params = {
+      ...paramsExceptFolderAndQ,
+      pagination: {
+        pageSize: -1
+      },
+      _q
+    };
+  } else {
+    params = {
+      ...paramsExceptFolderAndQ,
+      pagination: {
+        pageSize: -1
+      },
+      filters: {
+        $and: [
+          ...paramsExceptFolderAndQ?.filters?.$and ?? [],
+          {
+            parent: {
+              id: folder ?? {
+                $null: true
+              }
+            }
+          }
+        ]
+      }
+    };
+  }
+  const { data, error, isLoading } = useQuery(
+    [pluginId, "folders", stringify(params)],
+    async () => {
+      const {
+        data: { data: data2 }
+      } = await get("/upload/folders", { params });
+      return data2;
+    },
+    {
+      enabled,
+      staleTime: 0,
+      cacheTime: 0,
+      onError() {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({ id: "notification.error" })
+        });
+      }
+    }
+  );
+  React.useEffect(() => {
+    if (data) {
+      notifyStatus(
+        formatMessage({
+          id: "list.asset.at.finished",
+          defaultMessage: "The folders have finished loading."
+        })
+      );
+    }
+  }, [data, formatMessage, notifyStatus]);
+  return { data, error, isLoading };
+};
 const appendSearchParamsToUrl = ({ url, params }) => {
   if (url === void 0 || typeof params !== "object") {
     return url;
@@ -336,8 +478,7 @@ function getAPIInnerErrors(error, { getTrad: getTrad2 }) {
   }
   return normalizedError?.defaultMessage;
 }
-const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
-const getTrad = (id2) => `${pluginId}.${id2}`;
+const getTrad = (id) => `${pluginId}.${id}`;
 const getBreadcrumbDataCM = (folder) => {
   let data = [
     {
@@ -417,68 +558,17 @@ const prefixPluginTranslations = (trad, pluginId2) => {
     return acc;
   }, {});
 };
-var AssetType$1 = /* @__PURE__ */ ((AssetType2) => {
-  AssetType2["Video"] = "video";
-  AssetType2["Image"] = "image";
-  AssetType2["Document"] = "doc";
-  AssetType2["Audio"] = "audio";
-  return AssetType2;
-})(AssetType$1 || {});
-var AssetSource$1 = /* @__PURE__ */ ((AssetSource2) => {
-  AssetSource2["Url"] = "url";
-  AssetSource2["Computer"] = "computer";
-  return AssetSource2;
-})(AssetSource$1 || {});
-const PERMISSIONS$1 = {
-  // 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 typeFromMime = (mime) => {
-  if (mime.includes(AssetType$1.Image)) {
-    return AssetType$1.Image;
+  if (mime.includes(AssetType.Image)) {
+    return AssetType.Image;
   }
-  if (mime.includes(AssetType$1.Video)) {
-    return AssetType$1.Video;
+  if (mime.includes(AssetType.Video)) {
+    return AssetType.Video;
   }
-  if (mime.includes(AssetType$1.Audio)) {
-    return AssetType$1.Audio;
+  if (mime.includes(AssetType.Audio)) {
+    return AssetType.Audio;
   }
-  return AssetType$1.Document;
+  return AssetType.Document;
 };
 const rawFileToAsset = (rawFile, assetSource) => {
   return {
@@ -514,12 +604,12 @@ const urlsToAssets = async (urls) => {
   );
   const assetsResults = await Promise.all(assetPromises);
   const assets = assetsResults.map((fullFilledAsset) => ({
-    source: AssetSource$1.Url,
+    source: AssetSource.Url,
     name: fullFilledAsset.name,
     type: typeFromMime(fullFilledAsset.mime),
     url: fullFilledAsset.url,
     ext: fullFilledAsset.url.split(".").pop(),
-    mime: fullFilledAsset.mime,
+    mime: fullFilledAsset.mime ? fullFilledAsset.mime : void 0,
     rawFile: fullFilledAsset.rawFile
   }));
   return assets;
@@ -564,91 +654,56 @@ const urlSchema = yup.object().shape({
     }
   })
 });
-const AssetType = {
-  Video: "video",
-  Image: "image",
-  Document: "doc",
-  Audio: "audio"
-};
-const AssetSource = {
-  Url: "url",
-  Computer: "computer"
-};
-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
+var AssetType = /* @__PURE__ */ ((AssetType2) => {
+  AssetType2["Video"] = "video";
+  AssetType2["Image"] = "image";
+  AssetType2["Document"] = "doc";
+  AssetType2["Audio"] = "audio";
+  return AssetType2;
+})(AssetType || {});
+var AssetSource = /* @__PURE__ */ ((AssetSource2) => {
+  AssetSource2["Url"] = "url";
+  AssetSource2["Computer"] = "computer";
+  return AssetSource2;
+})(AssetSource || {});
+const PERMISSIONS$1 = {
+  // 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 tableHeaders = [
   {
@@ -694,210 +749,33 @@ const tableHeaders = [
       label: { id: getTrad("list.table.header.createdAt"), defaultMessage: "created" },
       isSortable: true
     },
-    type: "date"
-  },
-  {
-    name: "updatedAt",
-    key: "updatedAt",
-    metadatas: {
-      label: { id: getTrad("list.table.header.updatedAt"), defaultMessage: "last update" },
-      isSortable: true
-    },
-    type: "date"
-  }
-];
-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 useAssets = ({ skipWhen = false, query = {} } = {}) => {
-  const { formatMessage } = useIntl();
-  const { toggleNotification } = useNotification();
-  const { notifyStatus } = useNotifyAT();
-  const { get } = useFetchClient();
-  const { folderPath, _q, ...paramsExceptFolderAndQ } = query;
-  let params;
-  if (_q) {
-    params = {
-      ...paramsExceptFolderAndQ,
-      _q: encodeURIComponent(_q)
-    };
-  } else {
-    params = {
-      ...paramsExceptFolderAndQ,
-      filters: {
-        $and: [
-          ...paramsExceptFolderAndQ?.filters?.$and ?? [],
-          {
-            folderPath: { $eq: folderPath ?? "/" }
-          }
-        ]
-      }
-    };
-  }
-  const { data, error, isLoading } = useQuery(
-    [pluginId, "assets", params],
-    async () => {
-      const { data: data2 } = await get("/upload/files", { params });
-      return data2;
-    },
-    {
-      enabled: !skipWhen,
-      staleTime: 0,
-      cacheTime: 0,
-      select(data2) {
-        if (data2?.results && Array.isArray(data2.results)) {
-          return {
-            ...data2,
-            results: data2.results.filter((asset) => asset.name).map((asset) => ({
-              ...asset,
-              /**
-               * Mime and ext cannot be null in the front-end because
-               * we expect them to be strings and use the `includes` method.
-               */
-              mime: asset.mime ?? "",
-              ext: asset.ext ?? ""
-            }))
-          };
-        }
-        return data2;
-      }
-    }
-  );
-  React.useEffect(() => {
-    if (data) {
-      notifyStatus(
-        formatMessage({
-          id: "list.asset.at.finished",
-          defaultMessage: "The assets have finished loading."
-        })
-      );
-    }
-  }, [data, formatMessage, notifyStatus]);
-  React.useEffect(() => {
-    if (error) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({ id: "notification.error" })
-      });
-    }
-  }, [error, formatMessage, toggleNotification]);
-  return { data, error, isLoading };
-};
-const useFolders = ({ enabled = true, query = {} } = {}) => {
-  const { formatMessage } = useIntl();
-  const { toggleNotification } = useNotification();
-  const { notifyStatus } = useNotifyAT();
-  const { folder, _q, ...paramsExceptFolderAndQ } = query;
-  const { get } = useFetchClient();
-  let params;
-  if (_q) {
-    params = {
-      ...paramsExceptFolderAndQ,
-      pagination: {
-        pageSize: -1
-      },
-      _q
-    };
-  } else {
-    params = {
-      ...paramsExceptFolderAndQ,
-      pagination: {
-        pageSize: -1
-      },
-      filters: {
-        $and: [
-          ...paramsExceptFolderAndQ?.filters?.$and ?? [],
-          {
-            parent: {
-              id: folder ?? {
-                $null: true
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-  const { data, error, isLoading } = useQuery(
-    [pluginId, "folders", stringify(params)],
-    async () => {
-      const {
-        data: { data: data2 }
-      } = await get("/upload/folders", { params });
-      return data2;
-    },
-    {
-      enabled,
-      staleTime: 0,
-      cacheTime: 0,
-      onError() {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage({ id: "notification.error" })
-        });
-      }
-    }
-  );
-  React.useEffect(() => {
-    if (data) {
-      notifyStatus(
-        formatMessage({
-          id: "list.asset.at.finished",
-          defaultMessage: "The folders have finished loading."
-        })
-      );
-    }
-  }, [data, formatMessage, notifyStatus]);
-  return { data, error, isLoading };
+    type: "date"
+  },
+  {
+    name: "updatedAt",
+    key: "updatedAt",
+    metadatas: {
+      label: { id: getTrad("list.table.header.updatedAt"), defaultMessage: "last update" },
+      isSortable: true
+    },
+    type: "date"
+  }
+];
+const sortOptions$1 = [
+  { 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$1 = {
+  modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
+  view: `STRAPI_UPLOAD_LIBRARY_VIEW`
+};
+const viewOptions$1 = {
+  GRID: 0,
+  LIST: 1
 };
 const { main, ...restPermissions } = PERMISSIONS$1;
 const useMediaLibraryPermissions = () => {
@@ -1197,14 +1075,6 @@ const ContextInfo = ({ blocks }) => {
     }
   );
 };
-ContextInfo.propTypes = {
-  blocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    })
-  ).isRequired
-};
 const ToggleButton = styled(Flex)`
   align-self: flex-end;
   height: 2.2rem;
@@ -1221,9 +1091,9 @@ const Option = ({ children, data, selectProps, ...props }) => {
   const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
   const isOpen = openValues.includes(value);
   const Icon = isOpen ? ChevronUp : ChevronDown;
-  return /* @__PURE__ */ jsx(components.Option, { ...props, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "start", children: [
+  return /* @__PURE__ */ jsx(components.Option, { data, selectProps, ...props, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "start", children: [
     /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", ellipsis: true, children: /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }, children }) }),
-    options?.length > 0 && /* @__PURE__ */ jsx(
+    options && options?.length > 0 && /* @__PURE__ */ jsx(
       ToggleButton,
       {
         "aria-label": formatMessage({
@@ -1245,16 +1115,6 @@ const Option = ({ children, data, selectProps, ...props }) => {
     )
   ] }) });
 };
-Option.propTypes = {
-  children: PropTypes.node.isRequired,
-  data: PropTypes.object.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  selectProps: PropTypes.shape({
-    maxDisplayDepth: PropTypes.number,
-    openValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-    onOptionToggle: PropTypes.func
-  }).isRequired
-};
 function getOpenValues(options, defaultValue = {}) {
   let values = [];
   const { value } = defaultValue;
@@ -1266,6 +1126,9 @@ function getOpenValues(options, defaultValue = {}) {
   let { parent } = option;
   while (parent !== void 0) {
     const option2 = options.find(({ value: value2 }) => value2 === parent);
+    if (!option2) {
+      break;
+    }
     values.push(option2.value);
     parent = option2.parent;
   }
@@ -1273,15 +1136,28 @@ function getOpenValues(options, defaultValue = {}) {
 }
 function getValuesToClose(options, value) {
   const optionForValue = options.find((option) => option.value === value);
+  if (!optionForValue) {
+    return [];
+  }
   return options.filter((option) => option.depth >= optionForValue.depth).map((option) => option.value);
 }
 const hasParent = (option) => !option.parent;
-const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ...props }) => {
-  const flatDefaultOptions = useMemo(() => flattenTree(defaultOptions), [defaultOptions]);
-  const optionsFiltered = useMemo(() => flatDefaultOptions.filter(hasParent), [flatDefaultOptions]);
-  const [options, setOptions] = useState(optionsFiltered);
-  const [openValues, setOpenValues] = useState(getOpenValues(flatDefaultOptions, defaultValue));
-  useEffect(() => {
+const SelectTree = ({
+  options: defaultOptions,
+  maxDisplayDepth = 5,
+  defaultValue,
+  ...props
+}) => {
+  const flatDefaultOptions = React.useMemo(() => flattenTree(defaultOptions), [defaultOptions]);
+  const optionsFiltered = React.useMemo(
+    () => flatDefaultOptions.filter(hasParent),
+    [flatDefaultOptions]
+  );
+  const [options, setOptions] = React.useState(optionsFiltered);
+  const [openValues, setOpenValues] = React.useState(
+    getOpenValues(flatDefaultOptions, defaultValue)
+  );
+  React.useEffect(() => {
     if (openValues.length === 0) {
       setOptions(flatDefaultOptions.filter((option) => option.parent === void 0));
     } else {
@@ -1323,7 +1199,13 @@ const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ..
     }
   );
 };
-const Select = ({ components: components2, styles, error, ariaErrorMessage, ...props }) => {
+const Select = ({
+  components: components2 = {},
+  styles = {},
+  error,
+  ariaErrorMessage,
+  ...props
+}) => {
   const theme = useTheme();
   const customStyles = getSelectStyles(theme, error);
   return /* @__PURE__ */ jsx(
@@ -1331,11 +1213,11 @@ const Select = ({ components: components2, styles, error, ariaErrorMessage, ...p
     {
       menuPosition: "fixed",
       components: {
+        ...components2,
         ClearIndicator,
         DropdownIndicator,
         IndicatorSeparator: () => null,
-        LoadingIndicator: () => null,
-        ...components2
+        LoadingIndicator: () => null
       },
       "aria-errormessage": error && ariaErrorMessage,
       "aria-invalid": !!error,
@@ -1344,18 +1226,6 @@ const Select = ({ components: components2, styles, error, ariaErrorMessage, ...p
     }
   );
 };
-Select.defaultProps = {
-  ariaErrorMessage: "",
-  components: {},
-  error: void 0,
-  styles: {}
-};
-Select.propTypes = {
-  components: PropTypes.object,
-  styles: PropTypes.object,
-  error: PropTypes.string,
-  ariaErrorMessage: PropTypes.string
-};
 const IconBox = styled(Box)`
   background: transparent;
   border: none;
@@ -1385,13 +1255,7 @@ const CarretBox = styled(IconBox)`
   }
 `;
 const DropdownIndicator = ({ innerProps }) => {
-  return (
-    // @ts-expect-error – issue with the ref attached to `innerProps`
-    /* @__PURE__ */ jsx(CarretBox, { paddingRight: 3, ...innerProps, children: /* @__PURE__ */ jsx(CaretDown, {}) })
-  );
-};
-DropdownIndicator.propTypes = {
-  innerProps: PropTypes.object.isRequired
+  return /* @__PURE__ */ jsx(CarretBox, { paddingRight: 3, ...innerProps, children: /* @__PURE__ */ jsx(CaretDown, {}) });
 };
 const getSelectStyles = (theme, error) => {
   return {
@@ -1403,8 +1267,8 @@ const getSelectStyles = (theme, error) => {
     }),
     control(base, state) {
       let borderColor = theme.colors.neutral200;
-      let boxShadowColor;
-      let backgroundColor;
+      let boxShadowColor = void 0;
+      let backgroundColor = void 0;
       if (state.isFocused) {
         borderColor = theme.colors.primary600;
         boxShadowColor = theme.colors.primary600;
@@ -1460,7 +1324,7 @@ const getSelectStyles = (theme, error) => {
       paddingBottom: theme.spaces[1]
     }),
     option(base, state) {
-      let backgroundColor = base.backgroundColor;
+      let backgroundColor = base?.backgroundColor;
       if (state.isFocused || state.isSelected) {
         backgroundColor = theme.colors.primary100;
       }
@@ -1501,26 +1365,6 @@ const getSelectStyles = (theme, error) => {
     })
   };
 };
-const OptionShape = PropTypes.shape({
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  label: PropTypes.string.isRequired,
-  children: PropTypes.array
-});
-OptionShape.children = PropTypes.arrayOf(PropTypes.shape(OptionShape));
-OptionShape.defaultProps = {
-  children: void 0
-};
-SelectTree.defaultProps = {
-  defaultValue: void 0,
-  maxDisplayDepth: 5
-};
-SelectTree.propTypes = {
-  defaultValue: PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  }),
-  maxDisplayDepth: PropTypes.number,
-  options: PropTypes.arrayOf(OptionShape).isRequired
-};
 const DialogHeader = () => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
@@ -1634,6 +1478,7 @@ const useUpload = () => {
   const cancel = () => abortController.abort();
   return {
     upload,
+    isLoading: mutation.isLoading,
     cancel,
     error: mutation.error,
     progress,
@@ -1668,9 +1513,6 @@ const CopyLinkButton = ({ url }) => {
     }
   );
 };
-CopyLinkButton.propTypes = {
-  url: PropTypes.string.isRequired
-};
 const BoxWrapper = styled(Flex)`
   border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
   width: 100%;
@@ -1702,10 +1544,11 @@ const CancelButton = styled.button`
     }
   }
 `;
-const UploadProgress = ({ onCancel, progress, error }) => {
+const UploadProgress = ({ onCancel, progress = 0, error }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsx(BoxWrapper, { alignItems: "center", background: error ? "danger100" : "neutral150", error, children: error ? /* @__PURE__ */ jsx(Cross, { "aria-label": error?.message }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 2, width: "100%", children: [
-    /* @__PURE__ */ jsx(ProgressBar, { value: progress, children: `${progress}/100%` }),
+    /* @__PURE__ */ jsx(ProgressBar, { value: progress }),
+    /* @__PURE__ */ jsx(Typography, { children: `${progress}/100%` }),
     /* @__PURE__ */ jsx(CancelButton, { type: "button", onClick: onCancel, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "span", textColor: "inherit", children: formatMessage({
         id: "app.components.Button.cancel",
@@ -1715,15 +1558,6 @@ const UploadProgress = ({ onCancel, progress, error }) => {
     ] }) })
   ] }) });
 };
-UploadProgress.defaultProps = {
-  error: void 0,
-  progress: 0
-};
-UploadProgress.propTypes = {
-  error: PropTypes.instanceOf(Error),
-  onCancel: PropTypes.func.isRequired,
-  progress: PropTypes.number
-};
 const useRemoveAsset = (onSuccess) => {
   const { toggleNotification } = useNotification();
   const { formatMessage } = useIntl();
@@ -1759,25 +1593,11 @@ const RemoveAssetDialog = ({ open, onClose, asset }) => {
     onClose(null);
   });
   const handleConfirm = async (event) => {
-    event.preventDefault();
+    event?.preventDefault();
     await removeAsset(asset.id);
   };
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleConfirm }) });
 };
-RemoveAssetDialog.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  asset: PropTypes.shape({
-    id: PropTypes.number,
-    height: PropTypes.number,
-    width: PropTypes.number,
-    size: PropTypes.number,
-    createdAt: PropTypes.string,
-    ext: PropTypes.string,
-    name: PropTypes.string,
-    url: PropTypes.string
-  }).isRequired
-};
 const usePersistentState = (key, defaultValue) => {
   const [value, setValue] = useState(() => {
     const stickyValue = window.localStorage.getItem(key);
@@ -1799,7 +1619,7 @@ const CardAsset$1 = styled(Flex)`
   border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
-const AssetPreview = forwardRef(({ mime, url, name: name2, ...props }, ref) => {
+const AssetPreview = React.forwardRef(({ mime, url, name: name2, ...props }, ref) => {
   const [lang] = usePersistentState("strapi-admin-language", "en");
   if (mime.includes(AssetType.Image)) {
     return /* @__PURE__ */ jsx("img", { ref, src: url, alt: name2, ...props });
@@ -1816,11 +1636,6 @@ const AssetPreview = forwardRef(({ mime, url, name: name2, ...props }, ref) => {
   return /* @__PURE__ */ jsx(CardAsset$1, { justifyContent: "center", ...props, children: /* @__PURE__ */ jsx(File$1, { "aria-label": name2 }) });
 });
 AssetPreview.displayName = "AssetPreview";
-AssetPreview.propTypes = {
-  mime: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired
-};
 const RelativeBox = styled(Box)`
   position: relative;
 `;
@@ -1947,14 +1762,6 @@ const Trigger = styled(Menu.Trigger)`
     }
   }
 `;
-CroppingActions.defaultProps = {
-  onDuplicate: void 0
-};
-CroppingActions.propTypes = {
-  onCancel: PropTypes.func.isRequired,
-  onDuplicate: PropTypes.func,
-  onValidate: PropTypes.func.isRequired
-};
 const PreviewBox = ({
   asset,
   canUpdate,
@@ -1968,13 +1775,13 @@ const PreviewBox = ({
   trackedLocation
 }) => {
   const { trackUsage } = useTracking();
-  const previewRef = useRef(null);
-  const [isCropImageReady, setIsCropImageReady] = useState(false);
-  const [hasCropIntent, setHasCropIntent] = useState(null);
-  const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
-  const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
+  const previewRef = React.useRef(null);
+  const [isCropImageReady, setIsCropImageReady] = React.useState(false);
+  const [hasCropIntent, setHasCropIntent] = React.useState(null);
+  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));
+  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));
   const { formatMessage } = useIntl();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
   const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg();
   const { editAsset, error, isLoading, progress, cancel } = useEditAsset();
   const {
@@ -1984,7 +1791,7 @@ const PreviewBox = ({
     error: uploadError,
     progress: progressUpload
   } = useUpload();
-  useEffect(() => {
+  React.useEffect(() => {
     if (replacementFile) {
       const fileLocalUrl = URL.createObjectURL(replacementFile);
       if (asset.isLocal) {
@@ -1994,13 +1801,13 @@ const PreviewBox = ({
       setThumbnailUrl(fileLocalUrl);
     }
   }, [replacementFile, asset]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (hasCropIntent === false) {
       stopCropping();
       onCropCancel();
     }
   }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (hasCropIntent && isCropImageReady) {
       crop(previewRef.current);
       onCropStart();
@@ -2030,7 +1837,11 @@ const PreviewBox = ({
   const isInCroppingMode = isCropping && !isLoading;
   const handleDuplication = async () => {
     const nextAsset = { ...asset, width, height };
-    const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
+    const file = await produceFile(
+      nextAsset.name,
+      nextAsset.mime,
+      nextAsset.updatedAt
+    );
     await upload({ name: file.name, rawFile: file }, asset.folder?.id);
     trackUsage("didCropFile", { duplicatedFile: true, location: trackedLocation });
     setHasCropIntent(false);
@@ -2076,7 +1887,7 @@ const PreviewBox = ({
           }
         ),
         canCopyLink && /* @__PURE__ */ jsx(CopyLinkButton, { url: assetUrl }),
-        canUpdate && asset.mime.includes(AssetType.Image) && /* @__PURE__ */ jsx(
+        canUpdate && asset.mime?.includes(AssetType.Image) && /* @__PURE__ */ jsx(
           IconButton,
           {
             label: formatMessage({ id: getTrad("control-card.crop"), defaultMessage: "Crop" }),
@@ -2134,35 +1945,24 @@ const PreviewBox = ({
     )
   ] });
 };
-PreviewBox.defaultProps = {
-  replacementFile: void 0,
-  trackedLocation: void 0
-};
-PreviewBox.propTypes = {
-  canUpdate: PropTypes.bool.isRequired,
-  canCopyLink: PropTypes.bool.isRequired,
-  canDownload: PropTypes.bool.isRequired,
-  replacementFile: PropTypes.instanceOf(File),
-  asset: AssetDefinition.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onCropFinish: PropTypes.func.isRequired,
-  onCropStart: PropTypes.func.isRequired,
-  onCropCancel: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
-const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props }) => {
+const ReplaceMediaButton = ({
+  onSelectMedia,
+  acceptedMime,
+  trackedLocation,
+  ...props
+}) => {
   const { formatMessage } = useIntl();
-  const inputRef = useRef(null);
+  const inputRef = React.useRef(null);
   const { trackUsage } = useTracking();
   const handleClick = (e) => {
     e.preventDefault();
     if (trackedLocation) {
       trackUsage("didReplaceMedia", { location: trackedLocation });
     }
-    inputRef.current.click();
+    inputRef.current?.click();
   };
   const handleChange = () => {
-    const file = inputRef.current.files[0];
+    const file = inputRef.current?.files?.[0];
     onSelectMedia(file);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2184,14 +1984,6 @@ const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...p
     ) })
   ] });
 };
-ReplaceMediaButton.defaultProps = {
-  trackedLocation: void 0
-};
-ReplaceMediaButton.propTypes = {
-  acceptedMime: PropTypes.string.isRequired,
-  onSelectMedia: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const LoadingBody$1 = styled(Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
@@ -2205,28 +1997,28 @@ const fileInfoSchema = yup.object({
 const EditAssetContent = ({
   onClose,
   asset,
-  canUpdate,
-  canCopyLink,
-  canDownload,
+  canUpdate = false,
+  canCopyLink = false,
+  canDownload = false,
   trackedLocation
 }) => {
   const { formatMessage, formatDate } = useIntl();
   const { trackUsage } = useTracking();
-  const submitButtonRef = useRef(null);
-  const [isCropping, setIsCropping] = useState(false);
-  const [replacementFile, setReplacementFile] = useState();
+  const submitButtonRef = React.useRef(null);
+  const [isCropping, setIsCropping] = React.useState(false);
+  const [replacementFile, setReplacementFile] = React.useState();
   const { editAsset, isLoading } = useEditAsset();
   const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
     enabled: true
   });
   const handleSubmit = async (values) => {
-    const nextAsset = { ...asset, ...values, folder: values.parent.value };
-    if (asset.isLocal) {
+    const nextAsset = { ...asset, ...values, folder: values.parent?.value };
+    if (asset?.isLocal) {
       onClose(nextAsset);
     } else {
       const editedAsset = await editAsset(nextAsset, replacementFile);
-      const assetType = asset?.mime.split("/")[0];
-      const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent.value : asset.folder === null && !!values.parent.value;
+      const assetType = asset?.mime?.split("/")[0];
+      const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent?.value : asset?.folder === null && !!values.parent?.value;
       trackUsage("didEditMediaLibraryElements", {
         location: trackedLocation,
         type: assetType,
@@ -2259,9 +2051,9 @@ const EditAssetContent = ({
   };
   const activeFolderId = asset?.folder?.id;
   const initialFormData = !folderStructureIsLoading && {
-    name: asset.name,
-    alternativeText: asset.alternativeText ?? void 0,
-    caption: asset.caption ?? void 0,
+    name: asset?.name,
+    alternativeText: asset?.alternativeText ?? void 0,
+    caption: asset?.caption ?? void 0,
     parent: {
       value: activeFolderId ?? void 0,
       label: findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? folderStructure[0].label
@@ -2320,35 +2112,35 @@ const EditAssetContent = ({
                         id: getTrad("modal.file-details.size"),
                         defaultMessage: "Size"
                       }),
-                      value: formatBytes(asset.size)
+                      value: formatBytes(asset?.size)
                     },
                     {
                       label: formatMessage({
                         id: getTrad("modal.file-details.dimensions"),
                         defaultMessage: "Dimensions"
                       }),
-                      value: asset.height && asset.width ? `${asset.width}✕${asset.height}` : null
+                      value: asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null
                     },
                     {
                       label: formatMessage({
                         id: getTrad("modal.file-details.date"),
                         defaultMessage: "Date"
                       }),
-                      value: formatDate(new Date(asset.createdAt))
+                      value: formatDate(new Date(asset?.createdAt))
                     },
                     {
                       label: formatMessage({
                         id: getTrad("modal.file-details.extension"),
                         defaultMessage: "Extension"
                       }),
-                      value: getFileExtension(asset.ext)
+                      value: getFileExtension(asset?.ext)
                     },
                     {
                       label: formatMessage({
                         id: getTrad("modal.file-details.id"),
                         defaultMessage: "Asset ID"
                       }),
-                      value: asset.id
+                      value: asset?.id
                     }
                   ]
                 }
@@ -2451,7 +2243,7 @@ const EditAssetContent = ({
               ReplaceMediaButton,
               {
                 onSelectMedia: setReplacementFile,
-                acceptedMime: asset.mime,
+                acceptedMime: asset?.mime,
                 disabled: formDisabled,
                 trackedLocation
               }
@@ -2459,7 +2251,7 @@ const EditAssetContent = ({
             /* @__PURE__ */ jsx(
               Button,
               {
-                onClick: () => submitButtonRef.current.click(),
+                onClick: () => submitButtonRef.current?.click(),
                 loading: isLoading,
                 disabled: formDisabled,
                 children: formatMessage({ id: "global.finish", defaultMessage: "Finish" })
@@ -2471,39 +2263,24 @@ const EditAssetContent = ({
     }
   );
 };
-EditAssetContent.defaultProps = {
-  asset: {},
-  trackedLocation: void 0,
-  canUpdate: false,
-  canCopyLink: false,
-  canDownload: false
-};
-EditAssetContent.propTypes = {
-  asset: AssetDefinition,
-  canUpdate: PropTypes.bool,
-  canCopyLink: PropTypes.bool,
-  canDownload: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
-const EditAssetDialog = ({ open, onClose, ...restProps }) => {
-  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(EditAssetContent, { onClose, ...restProps }) }) });
-};
-EditAssetDialog.defaultProps = {
-  asset: {},
-  trackedLocation: void 0,
-  canUpdate: false,
-  canCopyLink: false,
-  canDownload: false
-};
-EditAssetDialog.propTypes = {
-  asset: AssetDefinition,
-  canUpdate: PropTypes.bool,
-  canCopyLink: PropTypes.bool,
-  canDownload: PropTypes.bool,
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
+const EditAssetDialog = ({
+  open,
+  onClose,
+  canUpdate = false,
+  canCopyLink = false,
+  canDownload = false,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(
+    EditAssetContent,
+    {
+      onClose,
+      canUpdate,
+      canCopyLink,
+      canDownload,
+      ...restProps
+    }
+  ) }) });
 };
 const useBulkRemove = () => {
   const { toggleNotification } = useNotification();
@@ -2512,12 +2289,12 @@ const useBulkRemove = () => {
   const { post } = useFetchClient();
   const bulkRemoveQuery = (filesAndFolders) => {
     const payload = filesAndFolders.reduce((acc, selected) => {
-      const { id: id2, type } = selected;
+      const { id, type } = selected;
       const key = type === "asset" ? "fileIds" : "folderIds";
       if (!acc[key]) {
         acc[key] = [];
       }
-      acc[key].push(id2);
+      acc[key].push(id);
       return acc;
     }, {});
     return post("/upload/actions/bulk-delete", payload);
@@ -2549,10 +2326,10 @@ const useBulkRemove = () => {
   const remove = (...args) => mutation.mutateAsync(...args);
   return { ...mutation, remove };
 };
-const editFolderRequest = (put, post, { attrs, id: id2 }) => {
-  const isEditing = !!id2;
+const editFolderRequest = (put, post, { attrs, id }) => {
+  const isEditing = !!id;
   const method = isEditing ? put : post;
-  return method(`/upload/folders/${id2 ?? ""}`, attrs).then((res) => res.data);
+  return method(`/upload/folders/${id ?? ""}`, attrs).then((res) => res.data);
 };
 const useEditFolder = () => {
   const queryClient = useQueryClient();
@@ -2563,10 +2340,10 @@ const useEditFolder = () => {
       queryClient.refetchQueries([pluginId, "folder", "structure"], { active: true });
     }
   });
-  const editFolder = (attrs, id2) => mutation.mutateAsync({ attrs, id: id2 });
+  const editFolder = (attrs, id) => mutation.mutateAsync({ attrs, id });
   return { ...mutation, editFolder, status: mutation.status };
 };
-const EditFolderModalHeader = ({ isEditing }) => {
+const EditFolderModalHeader = ({ isEditing = false }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage(
     isEditing ? {
@@ -2578,20 +2355,9 @@ const EditFolderModalHeader = ({ isEditing }) => {
     }
   ) }) });
 };
-EditFolderModalHeader.defaultProps = {
-  isEditing: false
-};
-EditFolderModalHeader.propTypes = {
-  isEditing: PropTypes.bool
-};
 const RemoveFolderDialog = ({ onClose, onConfirm, open }) => {
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm }) });
 };
-RemoveFolderDialog.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  onConfirm: PropTypes.func.isRequired
-};
 const folderSchema = yup.object({
   name: yup.string().required(),
   parent: yup.object({
@@ -2599,12 +2365,17 @@ const folderSchema = yup.object({
     value: yup.number().nullable(true)
   }).nullable(true)
 });
-const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
+const EditFolderContent = ({
+  onClose,
+  folder,
+  location,
+  parentFolderId
+}) => {
   const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
     enabled: true
   });
   const { canCreate, isLoading: isLoadingPermissions, canUpdate } = useMediaLibraryPermissions();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
   const { formatMessage, formatDate } = useIntl();
   const { trackUsage } = useTracking();
   const { editFolder, isLoading: isEditFolderLoading } = useEditFolder();
@@ -2613,21 +2384,24 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
   const isLoading = isLoadingPermissions || folderStructureIsLoading;
   const isEditing = !!folder;
   const formDisabled = folder && !canUpdate || !folder && !canCreate;
-  const initialFormData = !folderStructureIsLoading && {
+  const initialFormData = !folderStructureIsLoading ? {
     name: folder?.name ?? "",
     parent: {
       /* ideally we would use folderStructure[0].value, but since it is null
-         react complains about rendering null as field value */
-      value: parentFolderId ? parseInt(parentFolderId, 10) : void 0,
-      label: parentFolderId ? findRecursiveFolderByValue(folderStructure, parseInt(parentFolderId, 10))?.label : folderStructure[0].label
+      react complains about rendering null as field value */
+      value: parentFolderId ? parseInt(parentFolderId.toString(), 10) : void 0,
+      label: parentFolderId ? folderStructure && findRecursiveFolderByValue(folderStructure, parseInt(parentFolderId.toString(), 10))?.label : folderStructure?.[0].label
     }
+  } : {
+    name: "",
+    parent: null
   };
   const handleSubmit = async (values, { setErrors }) => {
     try {
       await editFolder(
         {
           ...values,
-          parent: values.parent.value ?? null
+          parent: values.parent?.value ?? null
         },
         folder?.id
       );
@@ -2642,7 +2416,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
         })
       });
       if (isEditing) {
-        const didChangeLocation = parentFolderId ? parseInt(parentFolderId, 10) !== values.parent.value : parentFolderId === null && !!values.parent.value;
+        const didChangeLocation = parentFolderId ? parseInt(parentFolderId.toString(), 10) !== values.parent?.value : parentFolderId === null && !!values.parent?.value;
         trackUsage("didEditMediaLibraryElements", {
           location,
           type: "folder",
@@ -2654,17 +2428,22 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
       onClose({ created: true });
     } catch (err) {
       const errors = getAPIInnerErrors(err, { getTrad });
-      const formikErrors = Object.entries(errors).reduce((acc, [key, error]) => {
-        acc[key] = error.defaultMessage;
-        return acc;
-      }, {});
+      const formikErrors = Object.entries(errors).reduce(
+        (acc, [key, error]) => {
+          acc[key] = error.defaultMessage;
+          return acc;
+        },
+        {}
+      );
       if (!isEmpty(formikErrors)) {
         setErrors(formikErrors);
       }
     }
   };
   const handleDelete = async () => {
-    await remove([folder]);
+    if (folder) {
+      await remove([folder]);
+    }
     setShowConfirmDialog(false);
     onClose();
   };
@@ -2718,21 +2497,28 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "name", error: errors.name, children: [
-              /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
-                id: getTrad("form.input.label.folder-name"),
-                defaultMessage: "Name"
-              }) }),
-              /* @__PURE__ */ jsx(
-                TextInput,
-                {
-                  value: values.name,
-                  onChange: handleChange,
-                  disabled: formDisabled
-                }
-              ),
-              /* @__PURE__ */ jsx(Field.Error, {})
-            ] }) }),
+            /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(
+              Field.Root,
+              {
+                name: "name",
+                error: typeof errors.name === "string" ? errors.name : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                    id: getTrad("form.input.label.folder-name"),
+                    defaultMessage: "Name"
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: values.name,
+                      onChange: handleChange,
+                      disabled: formDisabled
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field.Error, {})
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { id: "folder-parent", children: [
               /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
                 id: getTrad("form.input.label.folder-location"),
@@ -2751,7 +2537,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
                   menuPortalTarget: document.querySelector("body"),
                   inputId: "folder-parent",
                   disabled: formDisabled,
-                  error: errors?.parent,
+                  error: typeof errors.parent === "string" ? errors.parent : void 0,
                   ariaErrorMessage: "folder-parent-error"
                 }
               ),
@@ -2762,7 +2548,7 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
                   tag: "p",
                   id: "folder-parent-error",
                   textColor: "danger600",
-                  children: errors.parent
+                  children: typeof errors.parent === "string" ? errors.parent : void 0
                 }
               )
             ] }) })
@@ -2811,42 +2597,19 @@ const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
     )
   ] });
 };
-EditFolderContent.defaultProps = {
-  folder: void 0,
-  location: void 0,
-  parentFolderId: null
-};
-EditFolderContent.propTypes = {
-  folder: FolderDefinition,
-  location: PropTypes.string,
-  onClose: PropTypes.func.isRequired,
-  parentFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
 const EditFolderDialog = ({ open, onClose, ...restProps }) => {
-  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(EditFolderContent, { ...restProps, onClose }) }) });
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(EditFolderContent, { ...restProps, onClose, open }) }) });
 };
-EditFolderDialog.defaultProps = {
-  folder: void 0,
-  location: void 0,
-  parentFolderId: null
-};
-EditFolderDialog.propTypes = {
-  folder: FolderDefinition,
-  location: PropTypes.string,
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  parentFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-const useFolder = (id2, { enabled = true } = {}) => {
+const useFolder = (id, { enabled = true } = {}) => {
   const { toggleNotification } = useNotification();
   const { get } = useFetchClient();
   const { formatMessage } = useIntl();
   const { data, error, isLoading } = useQuery(
-    [pluginId, "folder", id2],
+    [pluginId, "folder", id],
     async () => {
       const {
         data: { data: data2 }
-      } = await get(`/upload/folders/${id2}`, {
+      } = await get(`/upload/folders/${id}`, {
         params: {
           populate: {
             parent: {
@@ -2899,14 +2662,14 @@ const CardContainer = styled(Card$1)`
 const AssetCardBase = ({
   children,
   extension,
-  isSelectable: isSelectable2,
+  isSelectable: isSelectable2 = true,
   name: name2,
   onSelect,
   onRemove,
   onEdit,
-  selected,
-  subtitle,
-  variant
+  selected = false,
+  subtitle = "",
+  variant = "Image"
 }) => {
   const { formatMessage } = useIntl();
   const handleClick = (e) => {
@@ -2919,8 +2682,7 @@ const AssetCardBase = ({
   };
   return /* @__PURE__ */ jsxs(CardContainer, { role: "button", height: "100%", tabIndex: -1, onClick: handleClick, children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
-      isSelectable2 && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      /* @__PURE__ */ jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsx(CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
+      isSelectable2 && /* @__PURE__ */ jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsx(CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
       (onRemove || onEdit) && /* @__PURE__ */ jsxs(CardActionsContainer, { onClick: handlePropagationClick, position: "end", children: [
         onRemove && /* @__PURE__ */ jsx(
           IconButton,
@@ -2946,7 +2708,7 @@ const AssetCardBase = ({
     ] }),
     /* @__PURE__ */ jsxs(CardBody, { children: [
       /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { tag: "h2", children: name2 }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", children: /* @__PURE__ */ jsx(CardTitle, { tag: "span", children: name2 }) }) }),
         /* @__PURE__ */ jsxs(CardSubtitle, { children: [
           /* @__PURE__ */ jsx(Extension$1, { children: extension }),
           subtitle
@@ -2959,36 +2721,9 @@ const AssetCardBase = ({
     ] })
   ] });
 };
-AssetCardBase.defaultProps = {
-  children: void 0,
-  isSelectable: true,
-  onEdit: void 0,
-  onSelect: void 0,
-  onRemove: void 0,
-  selected: false,
-  subtitle: "",
-  variant: "Image"
-};
-AssetCardBase.propTypes = {
-  children: PropTypes.node,
-  extension: PropTypes.string.isRequired,
-  isSelectable: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  onEdit: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRemove: PropTypes.func,
-  selected: PropTypes.bool,
-  subtitle: PropTypes.string,
-  variant: PropTypes.oneOf(["Image", "Video", "Audio", "Doc"])
-};
 const AudioPreview = ({ url, alt }) => {
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx("audio", { controls: true, src: url, children: alt }) });
 };
-AudioPreview.defaultProps = {};
-AudioPreview.propTypes = {
-  alt: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired
-};
 const AudioPreviewWrapper$1 = styled(Box)`
   canvas,
   audio {
@@ -2997,25 +2732,14 @@ const AudioPreviewWrapper$1 = styled(Box)`
     max-height: ${({ size }) => size === "M" ? 16.4 : 8.8}rem;
   }
 `;
-const AudioAssetCard = ({ name: name2, url, size, ...restProps }) => {
-  return /* @__PURE__ */ jsx(AssetCardBase, { name: name2, ...restProps, variant: "Audio", children: /* @__PURE__ */ jsx(CardAsset$2, { size, children: /* @__PURE__ */ jsx(AudioPreviewWrapper$1, { size, children: /* @__PURE__ */ jsx(AudioPreview, { url, alt: name2 }) }) }) });
-};
-AudioAssetCard.defaultProps = {
-  onSelect: void 0,
-  onEdit: void 0,
-  onRemove: void 0,
-  selected: false,
-  size: "M"
-};
-AudioAssetCard.propTypes = {
-  extension: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onSelect: PropTypes.func,
-  onEdit: PropTypes.func,
-  onRemove: PropTypes.func,
-  url: PropTypes.string.isRequired,
-  selected: PropTypes.bool,
-  size: PropTypes.oneOf(["S", "M"])
+const AudioAssetCard = ({
+  name: name2,
+  url,
+  size = "M",
+  selected = false,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(AssetCardBase, { name: name2, selected, ...restProps, variant: "Audio", children: /* @__PURE__ */ jsx(CardAsset$2, { size, children: /* @__PURE__ */ jsx(AudioPreviewWrapper$1, { size, children: /* @__PURE__ */ jsx(AudioPreview, { url, alt: name2 }) }) }) });
 };
 const IconWrapper$1 = styled.span`
   svg {
@@ -3026,99 +2750,83 @@ const CardAsset = styled(Flex)`
   border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
-const DocAssetCard = ({ name: name2, extension, size, ...restProps }) => {
-  return /* @__PURE__ */ jsx(AssetCardBase, { name: name2, extension, ...restProps, variant: "Doc", children: /* @__PURE__ */ jsx(CardAsset, { width: "100%", height: size === "S" ? `8.8rem` : `16.4rem`, justifyContent: "center", children: /* @__PURE__ */ jsx(IconWrapper$1, { children: extension === "pdf" ? /* @__PURE__ */ jsx(FilePdf, { "aria-label": name2 }) : /* @__PURE__ */ jsx(File$1, { "aria-label": name2 }) }) }) });
-};
-DocAssetCard.defaultProps = {
-  selected: false,
-  onEdit: void 0,
-  onSelect: void 0,
-  onRemove: void 0,
-  size: "M"
-};
-DocAssetCard.propTypes = {
-  extension: PropTypes.string.isRequired,
-  onEdit: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRemove: PropTypes.func,
-  selected: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  size: PropTypes.oneOf(["S", "M"])
+const DocAssetCard = ({
+  name: name2,
+  extension,
+  size = "M",
+  selected = false,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    AssetCardBase,
+    {
+      name: name2,
+      extension,
+      selected,
+      ...restProps,
+      variant: "Doc",
+      children: /* @__PURE__ */ jsx(CardAsset, { width: "100%", height: size === "S" ? `8.8rem` : `16.4rem`, justifyContent: "center", children: /* @__PURE__ */ jsx(IconWrapper$1, { children: extension === "pdf" ? /* @__PURE__ */ jsx(FilePdf, { "aria-label": name2 }) : /* @__PURE__ */ jsx(File$1, { "aria-label": name2 }) }) })
+    }
+  );
 };
-const ImageAssetCard = ({ height, width, thumbnail, size, alt, isUrlSigned, ...props }) => {
+const ImageAssetCard = ({
+  height,
+  width,
+  thumbnail,
+  size = "M",
+  alt,
+  isUrlSigned,
+  selected = false,
+  ...props
+}) => {
   const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl({
     url: thumbnail,
     params: { updatedAt: props.updatedAt }
   });
-  return /* @__PURE__ */ jsx(AssetCardBase, { ...props, subtitle: height && width && ` - ${width}✕${height}`, variant: "Image", children: /* @__PURE__ */ jsx(CardAsset$2, { src: thumbnailUrl, size, alt }) });
-};
-ImageAssetCard.defaultProps = {
-  height: void 0,
-  width: void 0,
-  selected: false,
-  onEdit: void 0,
-  onSelect: void 0,
-  onRemove: void 0,
-  size: "M",
-  updatedAt: void 0
-};
-ImageAssetCard.propTypes = {
-  alt: PropTypes.string.isRequired,
-  extension: PropTypes.string.isRequired,
-  height: PropTypes.number,
-  name: PropTypes.string.isRequired,
-  onEdit: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRemove: PropTypes.func,
-  width: PropTypes.number,
-  thumbnail: PropTypes.string.isRequired,
-  selected: PropTypes.bool,
-  size: PropTypes.oneOf(["S", "M"]),
-  updatedAt: PropTypes.string,
-  isUrlSigned: PropTypes.bool.isRequired
+  const subtitle = height && width ? ` - ${width}✕${height}` : void 0;
+  return /* @__PURE__ */ jsx(AssetCardBase, { ...props, selected, subtitle, variant: "Image", children: /* @__PURE__ */ jsx(CardAsset$2, { src: thumbnailUrl, size, alt }) });
 };
 const HAVE_FUTURE_DATA = 3;
-const VideoPreview = ({ url, mime, onLoadDuration, alt, ...props }) => {
+const VideoPreview = ({
+  url,
+  mime,
+  onLoadDuration = () => {
+  },
+  alt,
+  size = "M",
+  ...props
+}) => {
   const handleTimeUpdate = (e) => {
-    if (e.target.currentTime > 0) {
-      const video = e.target;
+    if (e.currentTarget.currentTime > 0) {
+      const video = e.currentTarget;
       const canvas = document.createElement("canvas");
       canvas.height = video.videoHeight;
       canvas.width = video.videoWidth;
-      canvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+      canvas.getContext("2d")?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
       video.replaceWith(canvas);
-      onLoadDuration(video.duration);
+      onLoadDuration && onLoadDuration(video.duration);
     }
   };
   const handleThumbnailVisibility = (e) => {
-    const video = e.target;
+    const video = e.currentTarget;
     if (video.readyState < HAVE_FUTURE_DATA)
       return;
     video.play();
   };
-  return /* @__PURE__ */ createElement(Box, { tag: "figure", ...props, key: url }, /* @__PURE__ */ jsx(
-    "video",
-    {
-      muted: true,
-      onLoadedData: handleThumbnailVisibility,
-      src: url,
-      crossOrigin: "anonymous",
-      onTimeUpdate: handleTimeUpdate,
-      children: /* @__PURE__ */ jsx("source", { type: mime })
-    }
-  ), /* @__PURE__ */ jsx(VisuallyHidden, { tag: "figcaption", children: alt }));
-};
-VideoPreview.defaultProps = {
-  onLoadDuration() {
-  },
-  size: "M"
-};
-VideoPreview.propTypes = {
-  alt: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
-  mime: PropTypes.string.isRequired,
-  onLoadDuration: PropTypes.func,
-  size: PropTypes.oneOf(["S", "M"])
+  return /* @__PURE__ */ jsxs(Box, { tag: "figure", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        muted: true,
+        onLoadedData: handleThumbnailVisibility,
+        src: url,
+        crossOrigin: "anonymous",
+        onTimeUpdate: handleTimeUpdate,
+        children: /* @__PURE__ */ jsx("source", { type: mime })
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { tag: "figcaption", children: alt })
+  ] }, url);
 };
 const VideoPreviewWrapper$2 = styled(Box)`
   canvas,
@@ -3129,39 +2837,35 @@ const VideoPreviewWrapper$2 = styled(Box)`
     max-height: ${({ size }) => size === "M" ? 16.4 : 8.8}rem;
   }
 `;
-const VideoAssetCard = ({ name: name2, url, mime, size, ...props }) => {
-  const [duration, setDuration] = useState();
+const VideoAssetCard = ({
+  name: name2,
+  url,
+  mime,
+  size = "M",
+  selected = false,
+  ...props
+}) => {
+  const [duration, setDuration] = React.useState();
   const formattedDuration = duration && formatDuration(duration);
-  return /* @__PURE__ */ jsxs(AssetCardBase, { name: name2, ...props, variant: "Video", children: [
+  return /* @__PURE__ */ jsxs(AssetCardBase, { selected, name: name2, ...props, variant: "Video", children: [
     /* @__PURE__ */ jsx(CardAsset$2, { size, children: /* @__PURE__ */ jsx(VideoPreviewWrapper$2, { size, children: /* @__PURE__ */ jsx(VideoPreview, { url, mime, onLoadDuration: setDuration, alt: name2 }) }) }),
     /* @__PURE__ */ jsx(CardTimer, { children: formattedDuration || "..." })
   ] });
 };
-VideoAssetCard.defaultProps = {
-  onSelect: void 0,
-  onEdit: void 0,
-  onRemove: void 0,
-  selected: false,
-  size: "M"
-};
-VideoAssetCard.propTypes = {
-  extension: PropTypes.string.isRequired,
-  mime: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onSelect: PropTypes.func,
-  onEdit: PropTypes.func,
-  onRemove: PropTypes.func,
-  url: PropTypes.string.isRequired,
-  selected: PropTypes.bool,
-  size: PropTypes.oneOf(["S", "M"])
-};
-const AssetCard = ({ asset, isSelected, onSelect, onEdit, onRemove, size, local }) => {
+const AssetCard = ({
+  asset,
+  isSelected = false,
+  onSelect,
+  onEdit,
+  onRemove,
+  size = "M",
+  local = false
+}) => {
   const handleSelect = onSelect ? () => onSelect(asset) : void 0;
   const commonAssetCardProps = {
     id: asset.id,
     isSelectable: asset.isSelectable,
     extension: getFileExtension(asset.ext),
-    key: asset.id,
     name: asset.name,
     url: local ? asset.url : createAssetUrl(asset, true),
     mime: asset.mime,
@@ -3171,55 +2875,37 @@ const AssetCard = ({ asset, isSelected, onSelect, onEdit, onRemove, size, local
     selected: isSelected,
     size
   };
-  if (asset.mime.includes(AssetType.Video)) {
+  if (asset.mime?.includes(AssetType.Video)) {
     return /* @__PURE__ */ jsx(VideoAssetCard, { ...commonAssetCardProps });
   }
-  if (asset.mime.includes(AssetType.Image)) {
+  if (asset.mime?.includes(AssetType.Image)) {
     return /* @__PURE__ */ jsx(
       ImageAssetCard,
       {
-        ...commonAssetCardProps,
         alt: asset.alternativeText || asset.name,
         height: asset.height,
         thumbnail: prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
         width: asset.width,
         updatedAt: asset.updatedAt,
-        isUrlSigned: asset?.isUrlSigned || false
+        isUrlSigned: asset?.isUrlSigned || false,
+        ...commonAssetCardProps
       }
     );
   }
-  if (asset.mime.includes(AssetType.Audio)) {
+  if (asset.mime?.includes(AssetType.Audio)) {
     return /* @__PURE__ */ jsx(AudioAssetCard, { ...commonAssetCardProps });
   }
   return /* @__PURE__ */ jsx(DocAssetCard, { ...commonAssetCardProps });
 };
-AssetCard.defaultProps = {
-  isSelected: false,
-  // Determine if the asset is loaded locally or from a remote resource
-  local: false,
-  onSelect: void 0,
-  onEdit: void 0,
-  onRemove: void 0,
-  size: "M"
-};
-AssetCard.propTypes = {
-  asset: AssetDefinition.isRequired,
-  local: PropTypes.bool,
-  onSelect: PropTypes.func,
-  onEdit: PropTypes.func,
-  onRemove: PropTypes.func,
-  isSelected: PropTypes.bool,
-  size: PropTypes.oneOf(["S", "M"])
-};
-const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
-  const ref = useRef(null);
+const Draggable = ({ children, id, index: index2, moveItem }) => {
+  const ref = React.useRef(null);
   const [, drop] = useDrop({
     accept: "draggable",
     hover(hoveredOverItem) {
       if (!ref.current) {
         return;
       }
-      if (hoveredOverItem.id !== id2) {
+      if (hoveredOverItem.id !== id) {
         moveItem(hoveredOverItem.index, index2);
         hoveredOverItem.index = index2;
       }
@@ -3228,7 +2914,7 @@ const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
   const [{ isDragging }, drag] = useDrag({
     type: "draggable",
     item() {
-      return { index: index2, id: id2 };
+      return { index: index2, id };
     },
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
@@ -3238,21 +2924,15 @@ const Draggable = ({ children, id: id2, index: index2, moveItem }) => {
   drag(drop(ref));
   return /* @__PURE__ */ jsx("div", { ref, style: { opacity, cursor: "move" }, children });
 };
-Draggable.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  index: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-  moveItem: PropTypes.func.isRequired
-};
 const AssetGridList = ({
-  allowedTypes,
+  allowedTypes = ["files", "images", "videos", "audios"],
   assets,
   onEditAsset,
   onSelectAsset,
   selectedAssets,
-  size,
+  size = "M",
   onReorderAsset,
-  title
+  title = null
 }) => {
   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 }) }),
@@ -3286,32 +2966,19 @@ const AssetGridList = ({
     }) })
   ] });
 };
-AssetGridList.defaultProps = {
-  allowedTypes: ["images", "files", "videos", "audios"],
-  onEditAsset: void 0,
-  size: "M",
-  onReorderAsset: void 0,
-  title: null
-};
-AssetGridList.propTypes = {
-  allowedTypes: PropTypes.arrayOf(PropTypes.string),
-  assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  onEditAsset: PropTypes.func,
-  onSelectAsset: PropTypes.func.isRequired,
-  selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  size: PropTypes.oneOf(["S", "M"]),
-  onReorderAsset: PropTypes.func,
-  title: PropTypes.string
-};
-const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }) => {
-  const [shouldFetch, setShouldFetch] = useState(false);
+const CrumbSimpleMenuAsync = ({
+  parentsToOmit = [],
+  currentFolderId,
+  onChangeFolder
+}) => {
+  const [shouldFetch, setShouldFetch] = React.useState(false);
   const { data, isLoading } = useFolderStructure({ enabled: shouldFetch });
   const { pathname } = useLocation();
   const [{ query }] = useQueryParams();
   const { formatMessage } = useIntl();
   const allAscendants = data && getFolderParents(data, currentFolderId);
   const filteredAscendants = allAscendants && allAscendants.filter(
-    (ascendant) => !parentsToOmit.includes(ascendant.id) && ascendant.id !== null
+    (ascendant) => typeof ascendant.id === "number" && !parentsToOmit.includes(ascendant.id) && ascendant.id !== null
   );
   return /* @__PURE__ */ jsxs(
     CrumbSimpleMenu,
@@ -3335,33 +3002,28 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
               {
                 tag: "button",
                 type: "button",
-                onClick: () => onChangeFolder(ascendant.id, ascendant.path),
+                onClick: () => onChangeFolder(Number(ascendant.id), ascendant.path),
                 children: ascendant.label
               },
               ascendant.id
             );
           }
           const url = getFolderURL(pathname, query, {
-            folder: ascendant?.id,
+            folder: typeof ascendant?.id === "string" ? ascendant.id : void 0,
             folderPath: ascendant?.path
           });
-          return /* @__PURE__ */ jsx(MenuItem, { isLink: true, tag: NavLink, to: url, children: ascendant.label }, ascendant.id);
+          return /* @__PURE__ */ jsx(MenuItem, { isLink: true, href: url, children: ascendant.label }, ascendant.id);
         })
       ]
     }
   );
 };
-CrumbSimpleMenuAsync.defaultProps = {
-  currentFolderId: void 0,
-  onChangeFolder: void 0,
-  parentsToOmit: []
-};
-CrumbSimpleMenuAsync.propTypes = {
-  currentFolderId: PropTypes.number,
-  onChangeFolder: PropTypes.func,
-  parentsToOmit: PropTypes.arrayOf(PropTypes.number)
-};
-const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => {
+const Breadcrumbs = ({
+  breadcrumbs,
+  onChangeFolder,
+  currentFolderId,
+  ...props
+}) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsx(Breadcrumbs$1, { ...props, children: breadcrumbs.map((crumb, index2) => {
     if (Array.isArray(crumb)) {
@@ -3377,14 +3039,24 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
     }
     const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === void 0;
     if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
+      if (onChangeFolder) {
+        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
+          },
+          `breadcrumb-${crumb?.id ?? "root"}`
+        );
+      }
       return /* @__PURE__ */ jsx(
         CrumbLink,
         {
-          tag: onChangeFolder ? "button" : NavLink,
-          type: onChangeFolder && "button",
-          to: onChangeFolder ? void 0 : crumb.href,
-          onClick: onChangeFolder && (() => onChangeFolder(crumb.id, crumb.path)),
-          children: crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+          tag: NavLink,
+          href: crumb.href,
+          children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
         },
         `breadcrumb-${crumb?.id ?? "root"}`
       );
@@ -3393,21 +3065,12 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
       Crumb,
       {
         isCurrent: index2 + 1 === breadcrumbs.length,
-        children: crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+        children: typeof crumb.label !== "string" && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
       },
       `breadcrumb-${crumb?.id ?? "root"}`
     );
   }) });
 };
-Breadcrumbs.defaultProps = {
-  currentFolderId: void 0,
-  onChangeFolder: void 0
-};
-Breadcrumbs.propTypes = {
-  breadcrumbs: BreadcrumbsDefinition.isRequired,
-  currentFolderId: PropTypes.number,
-  onChangeFolder: PropTypes.func
-};
 const EmptyAssetCard = styled(Box)`
   background: linear-gradient(
     180deg,
@@ -3430,11 +3093,13 @@ const EmptyAssetGrid = ({ count, size }) => {
     `empty-asset-card-${idx}`
   )) });
 };
-EmptyAssetGrid.propTypes = {
-  count: PropTypes.number.isRequired,
-  size: PropTypes.string.isRequired
-};
-const EmptyAssets = ({ icon: Icon = EmptyDocuments, content, action, size, count }) => {
+const EmptyAssets = ({
+  icon: Icon = EmptyDocuments,
+  content,
+  action,
+  size = "M",
+  count = 12
+}) => {
   return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
     /* @__PURE__ */ jsx(EmptyAssetGrid, { size, count }),
     /* @__PURE__ */ jsx(Box, { position: "absolute", top: 11, width: "100%", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 4, textAlign: "center", children: [
@@ -3446,29 +3111,10 @@ const EmptyAssets = ({ icon: Icon = EmptyDocuments, content, action, size, count
     ] }) })
   ] });
 };
-EmptyAssets.defaultProps = {
-  action: void 0,
-  icon: void 0,
-  size: "M",
-  count: 12
-};
-EmptyAssets.propTypes = {
-  action: PropTypes.node,
-  icon: PropTypes.elementType,
-  content: PropTypes.string.isRequired,
-  size: PropTypes.string,
-  count: PropTypes.number
-};
 const FolderCardContext = createContext({});
 function useFolderCard() {
   return useContext(FolderCardContext);
 }
-let id = 0;
-const genId = () => ++id;
-const useId = (initialId) => {
-  const idRef = useRef(`${initialId}-${genId()}`);
-  return idRef.current;
-};
 const FauxClickWrapper = styled.button`
   height: 100%;
   left: 0;
@@ -3498,16 +3144,25 @@ const Card = styled(Box)`
     }
   }
 `;
-const FolderCard = forwardRef(
-  ({ children, id: id2, startAction, cardActions, ariaLabel, onClick, to, ...props }, ref) => {
-    const generatedId = useId(id2);
-    const fodlerCtxValue = useMemo(() => ({ id: generatedId }), [generatedId]);
+const FolderCard = React.forwardRef(
+  ({
+    children,
+    id,
+    startAction = null,
+    cardActions = null,
+    ariaLabel,
+    onClick,
+    to,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const fodlerCtxValue = React.useMemo(() => ({ id: generatedId }), [generatedId]);
     return /* @__PURE__ */ jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxs(Card, { position: "relative", tabIndex: 0, $isCardActions: !!cardActions, ref, ...props, children: [
       /* @__PURE__ */ jsx(
         FauxClickWrapper,
         {
           to: to || void 0,
-          tag: to ? NavLink : "button",
+          as: to ? NavLink : "button",
           type: to ? void 0 : "button",
           onClick,
           tabIndex: -1,
@@ -3543,39 +3198,23 @@ const FolderCard = forwardRef(
               }
             ),
             children,
-            /* @__PURE__ */ jsx(CardActionDisplay, { children: /* @__PURE__ */ jsx(CardAction, { right: 4, children: cardActions }) })
+            /* @__PURE__ */ jsx(CardActionDisplay, { children: /* @__PURE__ */ jsx(CardAction, { right: 4, position: "end", children: cardActions }) })
           ]
         }
       )
     ] }) });
   }
 );
-FolderCard.defaultProps = {
-  id: void 0,
-  cardActions: null,
-  startAction: null,
-  to: void 0,
-  onClick: void 0
-};
-FolderCard.propTypes = {
-  ariaLabel: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string,
-  onClick: PropTypes.func,
-  startAction: PropTypes.element,
-  cardActions: PropTypes.element,
-  to: PropTypes.string
-};
 const StyledBox = styled(Flex)`
   user-select: none;
 `;
 const FolderCardBody = (props) => {
-  const { id: id2 } = useFolderCard();
+  const { id } = useFolderCard();
   return /* @__PURE__ */ jsx(
     StyledBox,
     {
       ...props,
-      id: `${id2}-title`,
+      id: `${id}-title`,
       alignItems: "flex-start",
       direction: "column",
       maxWidth: "100%",
@@ -3608,25 +3247,12 @@ const FolderCardBodyAction = ({ to, ...props }) => {
   }
   return /* @__PURE__ */ jsx(BoxOutline, { padding: 1, tag: "button", type: "button", maxWidth: "100%", ...props });
 };
-FolderCardBodyAction.defaultProps = {
-  to: void 0
-};
-FolderCardBodyAction.propTypes = {
-  to: PropTypes.string
-};
-const FolderGridList = ({ title, children }) => {
+const FolderGridList = ({ title = null, children }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
     /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children })
   ] });
 };
-FolderGridList.defaultProps = {
-  title: null
-};
-FolderGridList.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string
-};
 const SortPicker = ({ onChangeSort, value }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsx(
@@ -3634,7 +3260,7 @@ const SortPicker = ({ onChangeSort, value }) => {
     {
       size: "S",
       value,
-      onChange: (value2) => onChangeSort(value2),
+      onChange: (value2) => onChangeSort(value2.toString()),
       "aria-label": formatMessage({
         id: getTrad("sort.label"),
         defaultMessage: "Sort by"
@@ -3643,17 +3269,10 @@ const SortPicker = ({ onChangeSort, value }) => {
         id: getTrad("sort.label"),
         defaultMessage: "Sort by"
       }),
-      children: sortOptions.map((filter) => /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
+      children: sortOptions$1.map((filter) => /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.value, children: formatMessage({ id: getTrad(filter.key), defaultMessage: `${filter.value}` }) }, filter.key))
     }
   );
 };
-SortPicker.defaultProps = {
-  value: void 0
-};
-SortPicker.propTypes = {
-  onChangeSort: PropTypes.func.isRequired,
-  value: PropTypes.string
-};
 const VideoPreviewWrapper$1 = styled(Box)`
   figure {
     width: ${({ theme }) => theme.spaces[7]};
@@ -3683,15 +3302,23 @@ const PreviewCell = ({ type, content }) => {
     );
   }
   const { alternativeText, ext, formats, mime, name: name2, url } = content;
-  if (mime.includes(AssetType.Image)) {
+  if (mime?.includes(AssetType.Image)) {
     const mediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
-    return /* @__PURE__ */ jsx(Avatar.Item, { src: mediaURL, alt: alternativeText, preview: true });
+    return /* @__PURE__ */ jsx(
+      Avatar.Item,
+      {
+        src: mediaURL,
+        alt: alternativeText || void 0,
+        preview: true,
+        fallback: alternativeText
+      }
+    );
   }
-  if (mime.includes(AssetType.Video)) {
+  if (mime?.includes(AssetType.Video)) {
     return /* @__PURE__ */ jsx(VideoPreviewWrapper$1, { children: /* @__PURE__ */ jsx(
       VideoPreview,
       {
-        url: createAssetUrl(content, true),
+        url: createAssetUrl(content, true) || "",
         mime,
         alt: alternativeText ?? name2
       }
@@ -3699,28 +3326,16 @@ const PreviewCell = ({ type, content }) => {
   }
   return /* @__PURE__ */ jsx(Box, { background: "secondary100", color: "secondary600", width: "3.2rem", height: "3.2rem", children: getFileExtension(ext) });
 };
-PreviewCell.propTypes = {
-  content: PropTypes.shape({
-    alternativeText: PropTypes.string,
-    ext: PropTypes.string,
-    formats: PropTypes.shape({
-      thumbnail: PropTypes.shape({
-        url: PropTypes.string
-      })
-    }),
-    mime: PropTypes.string,
-    name: PropTypes.string,
-    url: PropTypes.string
-  }).isRequired,
-  type: PropTypes.string.isRequired
-};
 const CellContent = ({ cellType, contentType, content, name: name2 }) => {
   const { formatDate, formatMessage } = useIntl();
+  const contentValue = content[name2];
   switch (cellType) {
     case "image":
       return /* @__PURE__ */ jsx(PreviewCell, { type: contentType, content });
     case "date":
-      return /* @__PURE__ */ jsx(Typography, { children: formatDate(parseISO(content[name2]), { dateStyle: "full" }) });
+      if (typeof contentValue === "string") {
+        return /* @__PURE__ */ jsx(Typography, { children: formatDate(parseISO(contentValue), { dateStyle: "full" }) });
+      }
     case "size":
       if (contentType === "folder")
         return /* @__PURE__ */ jsx(
@@ -3733,7 +3348,9 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
             children: "-"
           }
         );
-      return /* @__PURE__ */ jsx(Typography, { children: formatBytes(content[name2]) });
+      if (typeof contentValue === "string" || typeof contentValue === "number") {
+        return /* @__PURE__ */ jsx(Typography, { children: formatBytes(contentValue) });
+      }
     case "ext":
       if (contentType === "folder")
         return /* @__PURE__ */ jsx(
@@ -3746,9 +3363,13 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
             children: "-"
           }
         );
-      return /* @__PURE__ */ jsx(Typography, { children: getFileExtension(content[name2]).toUpperCase() });
+      if (typeof contentValue === "string") {
+        return /* @__PURE__ */ jsx(Typography, { children: getFileExtension(contentValue)?.toUpperCase() });
+      }
     case "text":
-      return /* @__PURE__ */ jsx(Typography, { children: content[name2] });
+      if (typeof contentValue === "string") {
+        return /* @__PURE__ */ jsx(Typography, { children: contentValue });
+      }
     default:
       return /* @__PURE__ */ jsx(
         Typography,
@@ -3762,135 +3383,126 @@ const CellContent = ({ cellType, contentType, content, name: name2 }) => {
       );
   }
 };
-CellContent.propTypes = {
-  cellType: PropTypes.string.isRequired,
-  contentType: PropTypes.string.isRequired,
-  content: PropTypes.shape({
-    alternativeText: PropTypes.string,
-    ext: PropTypes.string,
-    formats: PropTypes.shape({
-      thumbnail: PropTypes.shape({
-        url: PropTypes.string
-      })
-    }),
-    mime: PropTypes.string,
-    url: PropTypes.string
-  }).isRequired,
-  name: PropTypes.string.isRequired
-};
 const TableRows = ({
-  onChangeFolder,
+  onChangeFolder = null,
   onEditAsset,
   onEditFolder,
   onSelectOne,
-  rows,
-  selected
+  rows = [],
+  selected = []
 }) => {
   const { formatMessage } = useIntl();
-  const handleRowClickFn = (element, elementType, id2, path) => {
+  const handleRowClickFn = (element, id, path, elementType) => {
     if (elementType === "asset") {
       onEditAsset(element);
     } else {
-      onChangeFolder(id2, path);
+      if (onChangeFolder) {
+        onChangeFolder(id, path);
+      }
     }
   };
   return /* @__PURE__ */ jsx(Tbody, { children: rows.map((element) => {
-    const { path, id: id2, isSelectable: isSelectable2, name: name2, folderURL, type: contentType } = element;
+    const { path, id, isSelectable: isSelectable2, name: name2, folderURL, type: contentType } = element;
     const isSelected = !!selected.find(
-      (currentRow) => currentRow.id === id2 && currentRow.type === contentType
+      (currentRow) => currentRow.id === id && currentRow.type === contentType
     );
-    return /* @__PURE__ */ jsxs(Tr, { onClick: () => handleRowClickFn(element, contentType, id2, path), children: [
-      /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          "aria-label": formatMessage(
+    return /* @__PURE__ */ jsxs(
+      Tr,
+      {
+        onClick: () => handleRowClickFn(element, id, path || void 0, contentType),
+        children: [
+          /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+            Checkbox,
             {
-              id: contentType === "asset" ? "list-assets-select" : "list.folder.select",
-              defaultMessage: contentType === "asset" ? "Select {name} asset" : "Select {name} folder"
-            },
-            { name: name2 }
-          ),
-          disabled: !isSelectable2,
-          onCheckedChange: () => onSelectOne(element),
-          checked: isSelected
-        }
-      ) }),
-      tableHeaders.map(({ name: name22, type: cellType }) => {
-        return /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
-          CellContent,
-          {
-            content: element,
-            cellType,
-            contentType,
-            name: name22
-          }
-        ) }, name22);
-      }),
-      /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", children: [
-        contentType === "folder" && /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            tag: folderURL ? Link$1 : "button",
-            label: formatMessage({
-              id: getTrad("list.folders.link-label"),
-              defaultMessage: "Access folder"
-            }),
-            to: folderURL,
-            onClick: () => !folderURL && onChangeFolder(id2),
-            variant: "ghost",
-            children: /* @__PURE__ */ jsx(Eye, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            label: formatMessage({
-              id: getTrad("control-card.edit"),
-              defaultMessage: "Edit"
-            }),
-            onClick: () => contentType === "asset" ? onEditAsset(element) : onEditFolder(element),
-            variant: "ghost",
-            children: /* @__PURE__ */ jsx(Pencil, {})
-          }
-        )
-      ] }) })
-    ] }, id2);
+              "aria-label": formatMessage(
+                {
+                  id: contentType === "asset" ? "list-assets-select" : "list.folder.select",
+                  defaultMessage: contentType === "asset" ? "Select {name} asset" : "Select {name} folder"
+                },
+                { name: name2 }
+              ),
+              disabled: !isSelectable2,
+              onCheckedChange: () => onSelectOne(element),
+              checked: isSelected
+            }
+          ) }),
+          tableHeaders.map(({ name: name22, type: cellType }) => {
+            return /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+              CellContent,
+              {
+                content: element,
+                cellType,
+                contentType,
+                name: name22
+              }
+            ) }, name22);
+          }),
+          /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", children: [
+            contentType === "folder" && (folderURL ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                tag: Link$1,
+                label: formatMessage({
+                  id: getTrad("list.folders.link-label"),
+                  defaultMessage: "Access folder"
+                }),
+                to: folderURL,
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Eye, {})
+              }
+            ) : /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                tag: "button",
+                label: formatMessage({
+                  id: getTrad("list.folders.link-label"),
+                  defaultMessage: "Access folder"
+                }),
+                onClick: () => onChangeFolder && onChangeFolder(id),
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Eye, {})
+              }
+            )),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: formatMessage({
+                  id: getTrad("control-card.edit"),
+                  defaultMessage: "Edit"
+                }),
+                onClick: () => contentType === "asset" ? onEditAsset(element) : onEditFolder(element),
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Pencil, {})
+              }
+            )
+          ] }) })
+        ]
+      },
+      id
+    );
   }) });
 };
-TableRows.defaultProps = {
-  onChangeFolder: null,
-  rows: [],
-  selected: []
-};
-TableRows.propTypes = {
-  onChangeFolder: PropTypes.func,
-  onEditAsset: PropTypes.func.isRequired,
-  onEditFolder: PropTypes.func.isRequired,
-  onSelectOne: PropTypes.func.isRequired,
-  rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
-  selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition)
-};
-const TableList = ({
-  assetCount,
-  folderCount,
-  indeterminate,
-  onChangeSort,
-  onChangeFolder,
-  onEditAsset,
-  onEditFolder,
+const TableList = ({
+  assetCount = 0,
+  folderCount = 0,
+  indeterminate = false,
+  onChangeSort = null,
+  onChangeFolder = null,
+  onEditAsset = null,
+  onEditFolder = null,
   onSelectAll,
   onSelectOne,
-  rows,
-  selected,
-  shouldDisableBulkSelect,
-  sortQuery
+  rows = [],
+  selected = [],
+  shouldDisableBulkSelect = false,
+  sortQuery = ""
 }) => {
   const { formatMessage } = useIntl();
   const [sortBy, sortOrder] = sortQuery.split(":");
   const handleClickSort = (isSorted, name2) => {
     const nextSortOrder = isSorted && sortOrder === "ASC" ? "DESC" : "ASC";
     const nextSort = `${name2}:${nextSortOrder}`;
-    onChangeSort(nextSort);
+    onChangeSort && onChangeSort(nextSort);
   };
   return /* @__PURE__ */ jsxs(Table, { colCount: tableHeaders.length + 2, rowCount: assetCount + folderCount + 1, children: [
     /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
@@ -3931,7 +3543,6 @@ const TableList = ({
               {
                 onClick: () => handleClickSort(isSorted, name2),
                 tag: isSorted ? "span" : "button",
-                label: !isSorted ? sortLabel : "",
                 textColor: "neutral600",
                 variant: "sigma",
                 children: tableHeaderLabel
@@ -3959,41 +3570,13 @@ const TableList = ({
     )
   ] });
 };
-TableList.defaultProps = {
-  assetCount: 0,
-  folderCount: 0,
-  indeterminate: false,
-  onChangeSort: null,
-  onChangeFolder: null,
-  onEditAsset: null,
-  onEditFolder: null,
-  rows: [],
-  selected: [],
-  shouldDisableBulkSelect: false,
-  sortQuery: ""
-};
-TableList.propTypes = {
-  assetCount: PropTypes.number,
-  folderCount: PropTypes.number,
-  indeterminate: PropTypes.bool,
-  onChangeSort: PropTypes.func,
-  onChangeFolder: PropTypes.func,
-  onEditAsset: PropTypes.func,
-  onEditFolder: PropTypes.func,
-  onSelectAll: PropTypes.func.isRequired,
-  onSelectOne: PropTypes.func.isRequired,
-  rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
-  selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
-  shouldDisableBulkSelect: PropTypes.bool,
-  sortQuery: PropTypes.string
-};
 const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
   const { formatMessage, formatDate, formatTime } = useIntl();
   const handleClick = () => {
     onClick(filter);
   };
   const { fieldSchema } = attribute;
-  const type = fieldSchema.type;
+  const type = fieldSchema?.type;
   let formattedValue = value;
   if (type === "date") {
     formattedValue = formatDate(value, { dateStyle: "full" });
@@ -4004,43 +3587,42 @@ const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
   if (type === "time") {
     const [hour, minute] = value.split(":");
     const date = /* @__PURE__ */ new Date();
-    date.setHours(hour);
-    date.setMinutes(minute);
+    date.setHours(Number(hour));
+    date.setMinutes(Number(minute));
     formattedValue = formatTime(date, {
-      numeric: "auto",
-      style: "short"
+      hour: "numeric",
+      minute: "numeric"
     });
   }
-  const content = `${attribute.metadatas.label} ${formatMessage({
+  const content = `${attribute.metadatas?.label} ${formatMessage({
     id: `components.FilterOptions.FILTER_TYPES.${operator}`,
     defaultMessage: operator
   })} ${formattedValue}`;
   return /* @__PURE__ */ jsx(Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsx(Cross, {}), padding: 1, children: content });
 };
-FilterTag.propTypes = {
-  attribute: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    fieldSchema: PropTypes.object.isRequired,
-    metadatas: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired
-  }).isRequired,
-  filter: PropTypes.object.isRequired,
-  onClick: PropTypes.func.isRequired,
-  operator: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};
 const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
   const handleClick = (filter) => {
     const nextFilters = appliedFilters.filter((prevFilter) => {
       const name2 = Object.keys(filter)[0];
-      const filterType = Object.keys(filter[name2])[0];
-      const value = decodeURIComponent(filter[name2][filterType]);
-      return prevFilter[name2]?.[filterType] !== value;
+      const filterName = filter[name2];
+      if (filterName !== void 0) {
+        const filterType = Object.keys(filterName)[0];
+        const filterValue = filterName[filterType];
+        if (typeof filterValue === "string") {
+          const decodedValue = decodeURIComponent(filterValue);
+          return prevFilter[name2]?.[filterType] !== decodedValue;
+        }
+      }
+      return true;
     });
     onRemoveFilter(nextFilters);
   };
   return appliedFilters.map((filter, i) => {
     const attributeName = Object.keys(filter)[0];
     const attribute = filtersSchema.find(({ name: name2 }) => name2 === attributeName);
+    if (!attribute) {
+      return null;
+    }
     const filterObj = filter[attributeName];
     const operator = Object.keys(filterObj)[0];
     let value = filterObj[operator];
@@ -4052,7 +3634,7 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
       value = Array.isArray(value) || typeof value === "object" ? Object.values(value).join(", ") : decodeURIComponent(value);
     }
     let displayedOperator = operator;
-    if (attribute.name === "mime") {
+    if (attribute?.name === "mime") {
       displayedOperator = operator === "$contains" ? "$eq" : "$ne";
       if (operator === "$not") {
         value = "file";
@@ -4076,63 +3658,41 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
     );
   });
 };
-FilterList.defaultProps = {
-  filtersSchema: []
-};
-FilterList.propTypes = {
-  appliedFilters: PropTypes.array.isRequired,
-  filtersSchema: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({ label: PropTypes.string }),
-      fieldSchema: PropTypes.shape({
-        type: PropTypes.string,
-        mainField: PropTypes.shape({
-          name: PropTypes.string,
-          type: PropTypes.string
-        })
-      })
-    })
-  ),
-  onRemoveFilter: PropTypes.func.isRequired
-};
-const FilterValueInput = ({ label, onChange, options, type, value }) => {
+const FilterValueInput = ({
+  label = "",
+  onChange,
+  options = [],
+  type,
+  value = ""
+}) => {
   const { formatMessage } = useIntl();
   if (type === "date") {
     return /* @__PURE__ */ jsx(
       DateTimePicker,
       {
         clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-        ariaLabel: label,
+        "aria-label": label,
         name: "datetimepicker",
         onChange: (date) => {
           const formattedDate = date ? new Date(date).toISOString() : "";
           onChange(formattedDate);
         },
         onClear: () => onChange(""),
-        value: value ? new Date(value) : void 0,
-        selectedDateLabel: (formattedDate) => `Date picker, current is ${formattedDate}`,
-        selectButtonTitle: formatMessage({ id: "selectButtonTitle", defaultMessage: "Select" })
+        value: value ? new Date(value) : void 0
       }
     );
   }
-  return /* @__PURE__ */ jsx(SingleSelect, { "aria-label": label, onChange, value, children: options.map((option) => {
-    return /* @__PURE__ */ jsx(SingleSelectOption, { value: option.value, children: option.label }, option.value);
-  }) });
-};
-FilterValueInput.defaultProps = {
-  label: "",
-  options: [],
-  value: ""
-};
-FilterValueInput.propTypes = {
-  label: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({ label: PropTypes.string.isRequired, value: PropTypes.string.isRequired })
-  ),
-  type: PropTypes.string.isRequired,
-  value: PropTypes.any
+  return /* @__PURE__ */ jsx(
+    SingleSelect,
+    {
+      "aria-label": label,
+      onChange: (value2) => onChange(value2.toString()),
+      value,
+      children: options?.map((option) => {
+        return /* @__PURE__ */ jsx(SingleSelectOption, { value: option.value, children: option.label }, option.value);
+      })
+    }
+  );
 };
 const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
   const type = mainField?.schema.type ? mainField.schema.type : fieldType;
@@ -4231,28 +3791,31 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
 };
 const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
   const { formatMessage } = useIntl();
-  const [modifiedData, setModifiedData] = useState({
+  const [modifiedData, setModifiedData] = React.useState({
     name: "createdAt",
     filter: "$eq",
     value: ""
   });
   const handleChangeFilterField = (value) => {
     const nextField = displayedFilters2.find((f) => f.name === value);
+    if (!nextField) {
+      return;
+    }
     const {
       fieldSchema: { type, options }
     } = nextField;
     let filterValue = "";
     if (type === "enumeration") {
-      filterValue = options[0].value;
+      filterValue = options?.[0].value || "";
     }
     const filter = getFilterList(nextField)[0].value;
-    setModifiedData({ name: value, filter, value: filterValue });
+    setModifiedData({ name: value.toString(), filter, value: filterValue });
   };
   const handleChangeOperator = (operator) => {
     if (modifiedData.name === "mime") {
-      setModifiedData((prev) => ({ ...prev, filter: operator, value: "image" }));
+      setModifiedData((prev) => ({ ...prev, filter: operator.toString(), value: "image" }));
     } else {
-      setModifiedData((prev) => ({ ...prev, filter: operator, value: "" }));
+      setModifiedData((prev) => ({ ...prev, filter: operator.toString(), value: "" }));
     }
   };
   const handleSubmit = (e) => {
@@ -4272,7 +3835,9 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
           let filterToAdd2;
           if (modifiedData.filter === "$contains") {
             hasCurrentFilter = alreadyAppliedFilters.find((filter) => {
-              return filter.mime?.$not?.$contains !== void 0;
+              if (typeof filter.mime?.$not !== "string" && !Array.isArray(filter.mime?.$not)) {
+                return filter.mime?.$not?.$contains !== void 0;
+              }
             }) !== void 0;
             filterToAdd2 = {
               mime: {
@@ -4301,7 +3866,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
           return;
         }
         const hasFilter2 = alreadyAppliedFilters.find((filter) => {
-          return filter.mime[modifiedData.filter] === modifiedData.value;
+          const modifiedDataFilter = modifiedData.filter;
+          return filter.mime && filter.mime[modifiedDataFilter] === modifiedData.value;
         }) !== void 0;
         if (hasFilter2) {
           onToggle();
@@ -4312,7 +3878,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
           if (filterType !== "mime") {
             return true;
           }
-          if (filter.mime?.$not?.$contains !== void 0) {
+          if (typeof filter.mime?.$not !== "string" && !Array.isArray(filter.mime?.$not) && filter.mime?.$not?.$contains !== void 0) {
             return false;
           }
           if (Array.isArray(filter?.mime?.$contains)) {
@@ -4341,7 +3907,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
         return;
       }
       const hasFilter = filters.find((filter) => {
-        return filter[modifiedData.name] && filter[modifiedData.name]?.[modifiedData.filter] === encodedValue;
+        const modifiedDataName = modifiedData.name;
+        return filter[modifiedDataName] && filter[modifiedDataName]?.[modifiedDataName] === encodedValue;
       }) !== void 0;
       if (!hasFilter) {
         let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
@@ -4365,7 +3932,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
         onChange: handleChangeFilterField,
         value: modifiedData.name,
         children: displayedFilters2.map((filter) => {
-          return /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.name, children: filter.metadatas.label }, filter.name);
+          return /* @__PURE__ */ jsx(SingleSelectOption, { value: filter.name, children: filter.metadatas?.label }, filter.name);
         })
       }
     ) }),
@@ -4388,8 +3955,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       FilterValueInput,
       {
-        ...appliedFilter.metadatas,
-        ...appliedFilter.fieldSchema,
+        ...appliedFilter?.metadatas,
+        ...appliedFilter?.fieldSchema,
         value: modifiedData.value,
         onChange: (value) => setModifiedData((prev) => ({ ...prev, value }))
       }
@@ -4397,18 +3964,6 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { size: "L", variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), type: "submit", fullWidth: true, children: formatMessage({ id: "app.utils.add-filter", defaultMessage: "Add filter" }) }) })
   ] }) }) });
 };
-FilterPopover.propTypes = {
-  displayedFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({ label: PropTypes.string }),
-      fieldSchema: PropTypes.shape({ type: PropTypes.string })
-    })
-  ).isRequired,
-  filters: PropTypes.array.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onToggle: PropTypes.func.isRequired
-};
 const Filters = ({ appliedFilters, onChangeFilters }) => {
   const [open, setOpen] = React.useState(false);
   const { formatMessage } = useIntl();
@@ -4417,7 +3972,7 @@ const Filters = ({ appliedFilters, onChangeFilters }) => {
     /* @__PURE__ */ jsx(
       FilterPopover,
       {
-        onToggle: setOpen,
+        onToggle: () => setOpen((prev) => !prev),
         displayedFilters,
         filters: appliedFilters,
         onSubmit: onChangeFilters
@@ -4433,14 +3988,10 @@ const Filters = ({ appliedFilters, onChangeFilters }) => {
     )
   ] });
 };
-Filters.propTypes = {
-  appliedFilters: PropTypes.array.isRequired,
-  onChangeFilters: PropTypes.func.isRequired
-};
 const PageSize = ({ onChangePageSize, pageSize }) => {
   const { formatMessage } = useIntl();
   const handleChange = (value) => {
-    onChangePageSize(value);
+    onChangePageSize(Number(value));
   };
   return /* @__PURE__ */ jsxs(Flex, { children: [
     /* @__PURE__ */ jsxs(
@@ -4467,16 +4018,12 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
     }) }) })
   ] });
 };
-PageSize.propTypes = {
-  onChangePageSize: PropTypes.func.isRequired,
-  pageSize: PropTypes.number.isRequired
-};
-const PaginationContext = createContext({ activePage: 1, pageCount: 1 });
-const usePagination = () => useContext(PaginationContext);
+const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
+const usePagination = () => React.useContext(PaginationContext);
 const PaginationText = styled(Typography)`
   line-height: revert;
 `;
-const LinkWrapper = styled.button`
+const linkWrapperStyles = css`
   padding: ${({ theme }) => theme.spaces[3]};
   border-radius: ${({ theme }) => theme.borderRadius};
   box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
@@ -4513,8 +4060,14 @@ const LinkWrapper = styled.button`
     }
   }
 `;
-LinkWrapper.defaultProps = { type: "button" };
-const PageLinkWrapper = styled(LinkWrapper)`
+const LinkWrapperButton = styled.button`
+  ${linkWrapperStyles}
+`;
+const LinkWrapperDiv = styled.div`
+  ${linkWrapperStyles}
+`;
+LinkWrapperButton.defaultProps = { type: "button" };
+const PageLinkWrapper = styled(LinkWrapperButton)`
   color: ${({ theme, $active }) => $active ? theme.colors.primary700 : theme.colors.neutral800};
   background: ${({ theme, $active }) => $active ? theme.colors.neutral0 : void 0};
 
@@ -4522,7 +4075,7 @@ const PageLinkWrapper = styled(LinkWrapper)`
     box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   }
 `;
-const ActionLinkWrapper = styled(LinkWrapper)`
+const ActionLinkWrapper = styled(LinkWrapperButton)`
   font-size: 1.1rem;
   svg path {
     fill: ${(p) => p["aria-disabled"] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
@@ -4539,7 +4092,7 @@ const ActionLinkWrapper = styled(LinkWrapper)`
   pointer-events: none;
     ` : void 0}
 `;
-const DotsWrapper = styled(LinkWrapper)`
+const DotsWrapper = styled(LinkWrapperDiv)`
   color: ${({ theme }) => theme.colors.neutral800};
 `;
 const PreviousLink = ({ children, ...props }) => {
@@ -4566,36 +4119,24 @@ const PageLink = ({ number, children, ...props }) => {
     /* @__PURE__ */ jsx(PaginationText, { "aria-hidden": true, variant: "pi", fontWeight: isActive ? "bold" : "", children: number })
   ] }) });
 };
-const Dots = ({ children, ...props }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(DotsWrapper, { ...props, tag: "div", children: [
+const Dots = ({ children, ...props }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(DotsWrapper, { ...props, as: "div", children: [
   /* @__PURE__ */ jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
 ] }) });
-PageLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  number: PropTypes.number.isRequired
-};
-const sharedPropTypes = {
-  children: PropTypes.node.isRequired
-};
-NextLink.propTypes = sharedPropTypes;
-PreviousLink.propTypes = sharedPropTypes;
-Dots.propTypes = {
-  children: PropTypes.node.isRequired
-};
-const Pagination = ({ children, label, activePage, pageCount }) => {
-  const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
+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 }) }) });
 };
-Pagination.defaultProps = {
-  label: "pagination"
-};
-Pagination.propTypes = {
-  activePage: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-  label: PropTypes.string,
-  pageCount: PropTypes.number.isRequired
-};
-const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount } }) => {
+const PaginationFooter = ({
+  activePage,
+  onChangePage,
+  pagination: { pageCount }
+}) => {
   const { formatMessage } = useIntl();
   const previousActivePage = activePage - 1;
   const nextActivePage = activePage + 1;
@@ -4732,21 +4273,16 @@ const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount }
     }) })
   ] });
 };
-PaginationFooter.propTypes = {
-  activePage: PropTypes.number.isRequired,
-  onChangePage: PropTypes.func.isRequired,
-  pagination: PropTypes.shape({ pageCount: PropTypes.number.isRequired }).isRequired
-};
-const SearchAsset = ({ onChangeSearch, queryValue }) => {
+const SearchAsset = ({ onChangeSearch, queryValue = null }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
-  const [isOpen, setIsOpen] = useState(!!queryValue);
-  const [value, setValue] = useState(queryValue || "");
-  const wrapperRef = useRef(null);
-  useLayoutEffect(() => {
+  const [isOpen, setIsOpen] = React.useState(!!queryValue);
+  const [value, setValue] = React.useState(queryValue || "");
+  const wrapperRef = React.useRef(null);
+  React.useLayoutEffect(() => {
     if (isOpen) {
       setTimeout(() => {
-        wrapperRef.current.querySelector("input").focus();
+        wrapperRef.current?.querySelector("input")?.focus();
       }, 0);
     }
   }, [isOpen]);
@@ -4786,13 +4322,6 @@ const SearchAsset = ({ onChangeSearch, queryValue }) => {
   }
   return /* @__PURE__ */ jsx(IconButton, { label: "Search", onClick: handleToggle, children: /* @__PURE__ */ jsx(Search, {}) });
 };
-SearchAsset.defaultProps = {
-  queryValue: null
-};
-SearchAsset.propTypes = {
-  onChangeSearch: PropTypes.func.isRequired,
-  queryValue: PropTypes.string
-};
 const isSelectable = (allowedTypes, mime = "") => {
   if (!mime)
     return false;
@@ -4810,12 +4339,12 @@ const ActionContainer = styled(Box)`
   }
 `;
 const BrowseStep = ({
-  allowedTypes,
+  allowedTypes = [],
   assets: rawAssets,
   canCreate,
   canRead,
-  folders,
-  multiple,
+  folders = [],
+  multiple = false,
   onAddAsset,
   onChangeFilters,
   onChangePage,
@@ -4832,8 +4361,8 @@ const BrowseStep = ({
   selectedAssets
 }) => {
   const { formatMessage } = useIntl();
-  const [view, setView] = usePersistentState(localStorageKeys.modalView, viewOptions.GRID);
-  const isGridView = view === viewOptions.GRID;
+  const [view, setView] = usePersistentState(localStorageKeys$1.modalView, viewOptions$1.GRID);
+  const isGridView = view === viewOptions$1.GRID;
   const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(
     queryObject?.folder,
     {
@@ -4846,7 +4375,7 @@ const BrowseStep = ({
     isSelectable: isSelectable(singularTypes, asset?.mime),
     type: "asset"
   }));
-  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataCM(currentFolder);
+  const breadcrumbs = !isCurrentFolderLoading ? getBreadcrumbDataCM(currentFolder) : void 0;
   const allAllowedAsset = getAllowedFiles(allowedTypes, assets);
   const areAllAssetSelected = allAllowedAsset.length > 0 && selectedAssets.length > 0 && allAllowedAsset.every(
     (asset) => selectedAssets.findIndex((currAsset) => currAsset.id === asset.id) !== -1
@@ -4908,7 +4437,7 @@ const BrowseStep = ({
               id: "view-switch.grid",
               defaultMessage: "Grid View"
             }),
-            onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
+            onClick: () => setView(isGridView ? viewOptions$1.LIST : viewOptions$1.GRID),
             children: isGridView ? /* @__PURE__ */ jsx(List, {}) : /* @__PURE__ */ jsx(GridFour, {})
           }
         ) }),
@@ -5038,8 +4567,8 @@ const BrowseStep = ({
                                   defaultMessage: "{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}"
                                 },
                                 {
-                                  folderCount: folder.children.count,
-                                  filesCount: folder.files.count
+                                  folderCount: folder.children?.count,
+                                  filesCount: folder.files?.count
                                 }
                               )
                             }
@@ -5076,7 +4605,13 @@ const BrowseStep = ({
       ) })
     ] }),
     pagination.pageCount > 0 && /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", paddingTop: 4, children: [
-      /* @__PURE__ */ jsx(PageSize, { pageSize: queryObject.pageSize, onChangePageSize }),
+      /* @__PURE__ */ jsx(
+        PageSize,
+        {
+          pageSize: queryObject.pageSize,
+          onChangePageSize
+        }
+      ),
       /* @__PURE__ */ jsx(
         PaginationFooter,
         {
@@ -5088,41 +4623,6 @@ const BrowseStep = ({
     ] })
   ] });
 };
-BrowseStep.defaultProps = {
-  allowedTypes: [],
-  folders: [],
-  multiple: false,
-  onSelectAllAsset: void 0
-};
-BrowseStep.propTypes = {
-  allowedTypes: PropTypes.arrayOf(PropTypes.string),
-  assets: PropTypes.arrayOf(AssetDefinition).isRequired,
-  canCreate: PropTypes.bool.isRequired,
-  canRead: PropTypes.bool.isRequired,
-  folders: PropTypes.arrayOf(FolderDefinition),
-  multiple: PropTypes.bool,
-  onAddAsset: PropTypes.func.isRequired,
-  onChangeFilters: PropTypes.func.isRequired,
-  onChangeFolder: PropTypes.func.isRequired,
-  onChangePage: PropTypes.func.isRequired,
-  onChangePageSize: PropTypes.func.isRequired,
-  onChangeSort: PropTypes.func.isRequired,
-  onChangeSearch: PropTypes.func.isRequired,
-  onEditAsset: PropTypes.func.isRequired,
-  onEditFolder: PropTypes.func.isRequired,
-  onSelectAsset: PropTypes.func.isRequired,
-  onSelectAllAsset: PropTypes.func,
-  queryObject: PropTypes.shape({
-    filters: PropTypes.object,
-    page: PropTypes.number.isRequired,
-    pageSize: PropTypes.number.isRequired,
-    _q: PropTypes.string,
-    sort: PropTypes.string,
-    folder: PropTypes.number
-  }).isRequired,
-  pagination: PropTypes.shape({ pageCount: PropTypes.number.isRequired }).isRequired,
-  selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired
-};
 const DialogFooter = ({ onClose, onValidate }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Modal.Footer, { children: [
@@ -5130,14 +4630,11 @@ const DialogFooter = ({ onClose, onValidate }) => {
     onValidate && /* @__PURE__ */ jsx(Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
   ] });
 };
-DialogFooter.defaultProps = {
-  onValidate: void 0
-};
-DialogFooter.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  onValidate: PropTypes.func
-};
-const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset }) => {
+const SelectedStep = ({
+  selectedAssets,
+  onSelectAsset,
+  onReorderAsset
+}) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
     /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
@@ -5165,32 +4662,24 @@ const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset }) => {
     )
   ] });
 };
-SelectedStep.defaultProps = {
-  onReorderAsset: void 0
-};
-SelectedStep.propTypes = {
-  onSelectAsset: PropTypes.func.isRequired,
-  selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  onReorderAsset: PropTypes.func
-};
 const LoadingBody = styled(Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
 `;
 const AssetContent = ({
-  allowedTypes,
-  folderId,
+  allowedTypes = [],
+  folderId = null,
   onClose,
   onAddAsset,
   onAddFolder,
   onChangeFolder,
   onValidate,
-  multiple,
-  initiallySelectedAssets,
+  multiple = false,
+  initiallySelectedAssets = [],
   trackedLocation
 }) => {
-  const [assetToEdit, setAssetToEdit] = useState(void 0);
-  const [folderToEdit, setFolderToEdit] = useState(void 0);
+  const [assetToEdit, setAssetToEdit] = React.useState(void 0);
+  const [folderToEdit, setFolderToEdit] = React.useState(void 0);
   const { formatMessage } = useIntl();
   const {
     canRead,
@@ -5312,7 +4801,9 @@ const AssetContent = ({
   };
   const handleFolderChange = (folderId2, folderPath) => {
     onChangeFolder(folderId2);
-    onChangeFolderParam(folderId2, folderPath);
+    if (onChangeFolderParam) {
+      onChangeFolderParam(folderId2, folderPath);
+    }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
@@ -5371,11 +4862,11 @@ const AssetContent = ({
             pagination,
             queryObject,
             onAddAsset,
-            onChangeFilters,
+            onChangeFilters: (filters) => onChangeFilters(filters),
             onChangeFolder: handleFolderChange,
             onChangePage,
             onChangePageSize,
-            onChangeSort,
+            onChangeSort: (sort) => onChangeSort(sort),
             onChangeSearch
           }
         ) }),
@@ -5392,49 +4883,9 @@ const AssetContent = ({
     /* @__PURE__ */ jsx(DialogFooter, { onClose, onValidate: () => onValidate(selectedAssets) })
   ] });
 };
-AssetContent.defaultProps = {
-  allowedTypes: [],
-  folderId: null,
-  initiallySelectedAssets: [],
-  multiple: false,
-  trackedLocation: void 0
-};
-AssetContent.propTypes = {
-  allowedTypes: PropTypes.arrayOf(PropTypes.string),
-  folderId: PropTypes.number,
-  initiallySelectedAssets: PropTypes.arrayOf(AssetDefinition),
-  multiple: PropTypes.bool,
-  onAddAsset: PropTypes.func.isRequired,
-  onAddFolder: PropTypes.func.isRequired,
-  onChangeFolder: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onValidate: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
-const AssetDialog = ({ open, onClose, ...restProps }) => {
+const AssetDialog = ({ open = false, onClose, ...restProps }) => {
   return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(AssetContent, { onClose, ...restProps }) }) });
 };
-AssetDialog.defaultProps = {
-  allowedTypes: [],
-  folderId: null,
-  initiallySelectedAssets: [],
-  multiple: false,
-  open: false,
-  trackedLocation: void 0
-};
-AssetDialog.propTypes = {
-  allowedTypes: PropTypes.arrayOf(PropTypes.string),
-  folderId: PropTypes.number,
-  initiallySelectedAssets: PropTypes.arrayOf(AssetDefinition),
-  multiple: PropTypes.bool,
-  onAddAsset: PropTypes.func.isRequired,
-  onAddFolder: PropTypes.func.isRequired,
-  onChangeFolder: PropTypes.func.isRequired,
-  open: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-  onValidate: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const TabsRoot = styled(Tabs.Root)`
   display: flex;
   flex-direction: column;
@@ -5457,10 +4908,14 @@ const OpaqueBox = styled(Box)`
   opacity: 0;
   cursor: pointer;
 `;
-const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
+const FromComputerForm = ({
+  onClose,
+  onAddAssets,
+  trackedLocation
+}) => {
   const { formatMessage } = useIntl();
-  const [dragOver, setDragOver] = useState(false);
-  const inputRef = useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const inputRef = React.useRef(null);
   const { trackUsage } = useTracking();
   const handleDragOver = (event) => {
     event.preventDefault();
@@ -5472,15 +4927,19 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
   const handleDragLeave = () => setDragOver(false);
   const handleClick = (e) => {
     e.preventDefault();
-    inputRef.current.click();
+    inputRef.current?.click();
   };
   const handleChange = () => {
-    const files2 = inputRef.current.files;
+    const files2 = inputRef.current?.files;
     const assets = [];
-    for (let i = 0; i < files2.length; i++) {
-      const file = files2.item(i);
-      const asset = rawFileToAsset(file, AssetSource.Computer);
-      assets.push(asset);
+    if (files2) {
+      for (let i = 0; i < files2.length; i++) {
+        const file = files2.item(i);
+        if (file) {
+          const asset = rawFileToAsset(file, AssetSource.Computer);
+          assets.push(asset);
+        }
+      }
     }
     if (trackedLocation) {
       trackUsage("didSelectFile", { source: "computer", location: trackedLocation });
@@ -5494,8 +4953,10 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
       const assets = [];
       for (let i = 0; i < files2.length; i++) {
         const file = files2.item(i);
-        const asset = rawFileToAsset(file, AssetSource.Computer);
-        assets.push(asset);
+        if (file) {
+          const asset = rawFileToAsset(file, AssetSource.Computer);
+          assets.push(asset);
+        }
       }
       onAddAssets(assets);
     }
@@ -5554,17 +5015,9 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
     }) }) })
   ] });
 };
-FromComputerForm.defaultProps = {
-  trackedLocation: void 0
-};
-FromComputerForm.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  onAddAssets: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(void 0);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(void 0);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const handleSubmit = async ({ urls }) => {
@@ -5619,14 +5072,6 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
     }
   );
 };
-FromUrlForm.defaultProps = {
-  trackedLocation: void 0
-};
-FromUrlForm.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  onAddAsset: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5676,14 +5121,6 @@ const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
     ] })
   ] });
 };
-AddAssetStep.defaultProps = {
-  trackedLocation: void 0
-};
-AddAssetStep.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  onAddAsset: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const UploadProgressWrapper = styled.div`
   height: 8.8rem;
   width: 100%;
@@ -5696,7 +5133,7 @@ const UploadingAssetCard = ({
   onCancel,
   onStatusChange,
   addUploadedFiles,
-  folderId
+  folderId = null
 }) => {
   const { upload, cancel, error, progress, status } = useUpload();
   const { formatMessage } = useIntl();
@@ -5720,16 +5157,16 @@ const UploadingAssetCard = ({
       defaultMessage: "Audio"
     });
   }
-  useEffect(() => {
+  React.useEffect(() => {
     const uploadFile = async () => {
-      const files2 = await upload(asset, folderId);
+      const files2 = await upload(asset, folderId ? Number(folderId) : null);
       if (addUploadedFiles) {
         addUploadedFiles(files2);
       }
     };
     uploadFile();
   }, []);
-  useEffect(() => {
+  React.useEffect(() => {
     onStatusChange(status);
   }, [status, onStatusChange]);
   const handleCancel = () => {
@@ -5738,19 +5175,26 @@ const UploadingAssetCard = ({
   };
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
     /* @__PURE__ */ jsxs(Card$1, { borderColor: error ? "danger600" : "neutral150", children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsx(UploadProgress, { error, onCancel: handleCancel, progress }) }) }),
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsx(
+        UploadProgress,
+        {
+          error: error || void 0,
+          onCancel: handleCancel,
+          progress
+        }
+      ) }) }),
       /* @__PURE__ */ jsxs(CardBody, { children: [
         /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { tag: "h2", children: asset.name }) }),
+          /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", children: /* @__PURE__ */ jsx(CardTitle, { tag: "span", children: asset.name }) }) }),
           /* @__PURE__ */ jsx(CardSubtitle, { children: /* @__PURE__ */ jsx(Extension, { children: asset.ext }) })
         ] }),
         /* @__PURE__ */ jsx(Flex, { paddingTop: 1, grow: 1, children: /* @__PURE__ */ jsx(CardBadge, { children: badgeContent }) })
       ] })
     ] }),
     error ? /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "danger600", children: formatMessage(
-      error?.response?.data?.error?.message ? {
-        id: getTrad(`apiError.${error.response.data.error.message}`),
-        defaultMessage: error.response.data.error.message
+      error?.message ? {
+        id: getTrad(`apiError.${error.message}`),
+        defaultMessage: error.message
         /* See issue: https://github.com/strapi/strapi/issues/13867
            A proxy might return an error, before the request reaches Strapi
            and therefore we need to handle errors gracefully.
@@ -5762,22 +5206,6 @@ const UploadingAssetCard = ({
     ) }) : void 0
   ] });
 };
-UploadingAssetCard.defaultProps = {
-  addUploadedFiles: void 0,
-  folderId: null
-};
-UploadingAssetCard.propTypes = {
-  addUploadedFiles: PropTypes.func,
-  asset: PropTypes.shape({
-    name: PropTypes.string,
-    ext: PropTypes.string,
-    rawFile: PropTypes.instanceOf(File),
-    type: PropTypes.oneOf(Object.values(AssetType))
-  }).isRequired,
-  folderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onCancel: PropTypes.func.isRequired,
-  onStatusChange: PropTypes.func.isRequired
-};
 const Status = {
   Idle: "IDLE",
   Uploading: "UPLOADING",
@@ -5795,21 +5223,28 @@ const PendingAssetStep = ({
   onUploadSucceed,
   trackedLocation
 }) => {
-  const assetCountRef = useRef(0);
+  const assetCountRef = React.useRef(0);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
-  const [uploadStatus, setUploadStatus] = useState(Status.Idle);
+  const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);
   const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const assetsCountByType = assets.reduce((acc, asset) => {
-      const { type } = asset;
-      if (!acc[type]) {
-        acc[type] = 0;
-      }
-      acc[type] = `${parseInt(acc[type], 10) + 1}`;
-      return acc;
-    }, {});
+    const assetsCountByType = assets.reduce(
+      (acc, asset) => {
+        const { type } = asset;
+        if (type !== void 0 && !acc[type]) {
+          acc[type] = 0;
+        }
+        if (type !== void 0) {
+          const accType = acc[type];
+          const currentCount = typeof accType === "string" ? accType : accType.toString();
+          acc[type] = `${parseInt(currentCount, 10) + 1}`;
+        }
+        return acc;
+      },
+      {}
+    );
     trackUsage("willAddMediaLibraryAssets", {
       location: trackedLocation,
       ...assetsCountByType
@@ -5895,40 +5330,24 @@ const PendingAssetStep = ({
     ] })
   ] });
 };
-PendingAssetStep.defaultProps = {
-  addUploadedFiles: void 0,
-  folderId: null,
-  trackedLocation: void 0
-};
-PendingAssetStep.propTypes = {
-  addUploadedFiles: PropTypes.func,
-  assets: PropTypes.arrayOf(AssetDefinition).isRequired,
-  folderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onClose: PropTypes.func.isRequired,
-  onEditAsset: PropTypes.func.isRequired,
-  onRemoveAsset: PropTypes.func.isRequired,
-  onClickAddAsset: PropTypes.func.isRequired,
-  onUploadSucceed: PropTypes.func.isRequired,
-  onCancelUpload: PropTypes.func.isRequired,
-  trackedLocation: PropTypes.string
-};
 const Steps = {
   AddAsset: "AddAsset",
   PendingAsset: "PendingAsset"
 };
 const UploadAssetDialog = ({
   initialAssetsToAdd,
-  folderId,
-  onClose,
+  folderId = null,
+  onClose = () => {
+  },
   addUploadedFiles,
   trackedLocation,
   open,
   validateAssetsTypes = (_, cb) => cb()
 }) => {
   const { formatMessage } = useIntl();
-  const [step, setStep] = useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
-  const [assets, setAssets] = useState(initialAssetsToAdd || []);
-  const [assetToEdit, setAssetToEdit] = useState(void 0);
+  const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
+  const [assets, setAssets] = React.useState(initialAssetsToAdd || []);
+  const [assetToEdit, setAssetToEdit] = React.useState(void 0);
   const handleAddToPendingAssets = (nextAssets) => {
     validateAssetsTypes(nextAssets, () => {
       setAssets((prevAssets) => prevAssets.concat(nextAssets));
@@ -5953,7 +5372,7 @@ const UploadAssetDialog = ({
     }
   };
   const handleAssetEditValidation = (nextAsset) => {
-    if (nextAsset) {
+    if (nextAsset && typeof nextAsset !== "boolean") {
       const nextAssets = assets.map((asset) => asset === assetToEdit ? nextAsset : asset);
       setAssets(nextAssets);
     }
@@ -5983,7 +5402,7 @@ const UploadAssetDialog = ({
       AddAssetStep,
       {
         onClose,
-        onAddAsset: handleAddToPendingAssets,
+        onAddAsset: (assets2) => handleAddToPendingAssets(assets2),
         trackedLocation
       }
     ) }),
@@ -6016,32 +5435,18 @@ const UploadAssetDialog = ({
     ) })
   ] });
 };
-UploadAssetDialog.defaultProps = {
-  addUploadedFiles: void 0,
-  folderId: null,
-  initialAssetsToAdd: void 0,
-  onClose() {
-  },
-  trackedLocation: void 0,
-  validateAssetsTypes: void 0
-};
-UploadAssetDialog.propTypes = {
-  addUploadedFiles: PropTypes.func,
-  folderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  initialAssetsToAdd: PropTypes.arrayOf(AssetDefinition),
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func,
-  trackedLocation: PropTypes.string,
-  validateAssetsTypes: PropTypes.func
-};
 const STEPS$1 = {
   AssetSelect: "SelectAsset",
   AssetUpload: "UploadAsset",
   FolderCreate: "FolderCreate"
 };
-const MediaLibraryDialog = ({ onClose, onSelectAssets, allowedTypes }) => {
-  const [step, setStep] = useState(STEPS$1.AssetSelect);
-  const [folderId, setFolderId] = useState(null);
+const MediaLibraryDialog = ({
+  onClose,
+  onSelectAssets,
+  allowedTypes = ["files", "images", "videos", "audios"]
+}) => {
+  const [step, setStep] = React.useState(STEPS$1.AssetSelect);
+  const [folderId, setFolderId] = React.useState(null);
   switch (step) {
     case STEPS$1.AssetSelect:
       return /* @__PURE__ */ jsx(
@@ -6071,14 +5476,6 @@ const MediaLibraryDialog = ({ onClose, onSelectAssets, allowedTypes }) => {
       return /* @__PURE__ */ jsx(UploadAssetDialog, { open: true, onClose: () => setStep(STEPS$1.AssetSelect), folderId });
   }
 };
-MediaLibraryDialog.defaultProps = {
-  allowedTypes: ["files", "images", "videos", "audios"]
-};
-MediaLibraryDialog.propTypes = {
-  allowedTypes: PropTypes.arrayOf(PropTypes.string),
-  onClose: PropTypes.func.isRequired,
-  onSelectAssets: PropTypes.func.isRequired
-};
 const DocAsset = styled(Flex)`
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
@@ -6096,7 +5493,7 @@ const AudioPreviewWrapper = styled(Box)`
   }
 `;
 const CarouselAsset = ({ asset }) => {
-  if (asset.mime.includes(AssetType.Video)) {
+  if (asset.mime?.includes(AssetType.Video)) {
     return /* @__PURE__ */ jsx(VideoPreviewWrapper, { height: "100%", children: /* @__PURE__ */ jsx(
       VideoPreview,
       {
@@ -6106,10 +5503,16 @@ const CarouselAsset = ({ asset }) => {
       }
     ) });
   }
-  if (asset.mime.includes(AssetType.Audio)) {
-    return /* @__PURE__ */ jsx(AudioPreviewWrapper, { children: /* @__PURE__ */ jsx(AudioPreview, { url: createAssetUrl(asset, true), alt: asset.alternativeText || asset.name }) });
+  if (asset.mime?.includes(AssetType.Audio)) {
+    return /* @__PURE__ */ jsx(AudioPreviewWrapper, { children: /* @__PURE__ */ jsx(
+      AudioPreview,
+      {
+        url: createAssetUrl(asset, true),
+        alt: asset.alternativeText || asset.name
+      }
+    ) });
   }
-  if (asset.mime.includes(AssetType.Image)) {
+  if (asset.mime?.includes(AssetType.Image)) {
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -6121,12 +5524,14 @@ const CarouselAsset = ({ asset }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx(DocAsset, { width: "100%", height: "100%", justifyContent: "center", hasRadius: true, children: asset.ext.includes("pdf") ? /* @__PURE__ */ jsx(FilePdf, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) : /* @__PURE__ */ jsx(File$1, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) });
-};
-CarouselAsset.propTypes = {
-  asset: AssetDefinition.isRequired
+  return /* @__PURE__ */ jsx(DocAsset, { width: "100%", height: "100%", justifyContent: "center", hasRadius: true, children: asset.ext?.includes("pdf") ? /* @__PURE__ */ jsx(FilePdf, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) : /* @__PURE__ */ jsx(File$1, { "aria-label": asset.alternativeText || asset.name, width: "24px", height: "32px" }) });
 };
-const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset }) => {
+const CarouselAssetActions = ({
+  asset,
+  onDeleteAsset,
+  onAddAsset,
+  onEditAsset
+}) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(CarouselActions, { children: [
     onAddAsset && /* @__PURE__ */ jsx(
@@ -6165,23 +5570,16 @@ const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })
     )
   ] });
 };
-CarouselAssetActions.defaultProps = {
-  onAddAsset: void 0,
-  onDeleteAsset: void 0,
-  onEditAsset: void 0
-};
-CarouselAssetActions.propTypes = {
-  asset: AssetDefinition.isRequired,
-  onAddAsset: PropTypes.func,
-  onEditAsset: PropTypes.func,
-  onDeleteAsset: PropTypes.func
-};
 const TextAlignTypography = styled(Typography)`
   align-items: center;
 `;
-const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
+const EmptyStateAsset = ({
+  disabled = false,
+  onClick,
+  onDropAsset
+}) => {
   const { formatMessage } = useIntl();
-  const [dragOver, setDragOver] = useState(false);
+  const [dragOver, setDragOver] = React.useState(false);
   const handleDragEnter = (e) => {
     e.preventDefault();
     setDragOver(true);
@@ -6201,8 +5599,10 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
       const assets = [];
       for (let i = 0; i < files2.length; i++) {
         const file = files2.item(i);
-        const asset = rawFileToAsset(file, AssetSource.Computer);
-        assets.push(asset);
+        if (file) {
+          const asset = rawFileToAsset(file, AssetSource.Computer);
+          assets.push(asset);
+        }
       }
       onDropAsset(assets);
     }
@@ -6257,19 +5657,10 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
     }
   );
 };
-EmptyStateAsset.defaultProps = {
-  disabled: false,
-  onDropAsset: void 0
-};
-EmptyStateAsset.propTypes = {
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  onDropAsset: PropTypes.func
-};
-const CarouselAssets = forwardRef(
+const CarouselAssets = React.forwardRef(
   ({
     assets,
-    disabled,
+    disabled = false,
     error,
     hint,
     label,
@@ -6281,12 +5672,12 @@ const CarouselAssets = forwardRef(
     onEditAsset,
     onNext,
     onPrevious,
-    required,
+    required = false,
     selectedAssetIndex,
     trackedLocation
   }, forwardedRef) => {
     const { formatMessage } = useIntl();
-    const [isEditingAsset, setIsEditingAsset] = useState(false);
+    const [isEditingAsset, setIsEditingAsset] = React.useState(false);
     const currentAsset = assets[selectedAssetIndex];
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -6329,7 +5720,14 @@ const CarouselAssets = forwardRef(
                 },
                 { n: 1, m: 1 }
               ),
-              children: /* @__PURE__ */ jsx(EmptyStateAsset, { disabled, onClick: onAddAsset, onDropAsset })
+              children: /* @__PURE__ */ jsx(
+                EmptyStateAsset,
+                {
+                  disabled,
+                  onClick: onAddAsset,
+                  onDropAsset
+                }
+              )
             }
           ) : assets.map((asset, index2) => /* @__PURE__ */ jsx(
             CarouselSlide,
@@ -6356,8 +5754,8 @@ const CarouselAssets = forwardRef(
             if (editedAsset === null) {
               onDeleteAssetFromMediaLibrary();
             }
-            if (editedAsset) {
-              onEditAsset(editedAsset);
+            if (editedAsset && typeof editedAsset !== "boolean") {
+              onEditAsset?.(editedAsset);
             }
           },
           asset: currentAsset,
@@ -6370,50 +5768,31 @@ const CarouselAssets = forwardRef(
     ] });
   }
 );
-CarouselAssets.defaultProps = {
-  disabled: false,
-  error: void 0,
-  hint: void 0,
-  labelAction: void 0,
-  onDropAsset: void 0,
-  required: false,
-  trackedLocation: void 0
-};
-CarouselAssets.propTypes = {
-  assets: PropTypes.arrayOf(AssetDefinition).isRequired,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  hint: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  labelAction: PropTypes.node,
-  onAddAsset: PropTypes.func.isRequired,
-  onDeleteAsset: PropTypes.func.isRequired,
-  onDeleteAssetFromMediaLibrary: PropTypes.func.isRequired,
-  onDropAsset: PropTypes.func,
-  onEditAsset: PropTypes.func.isRequired,
-  onNext: PropTypes.func.isRequired,
-  onPrevious: PropTypes.func.isRequired,
-  required: PropTypes.bool,
-  selectedAssetIndex: PropTypes.number.isRequired,
-  trackedLocation: PropTypes.string
-};
 const STEPS = {
   AssetSelect: "SelectAsset",
   AssetUpload: "UploadAsset",
   FolderCreate: "FolderCreate"
 };
-const MediaLibraryInput = forwardRef(
-  ({ attribute: { allowedTypes, multiple }, label, hint, disabled, labelAction, name: name2, required }, forwardedRef) => {
+const MediaLibraryInput = React.forwardRef(
+  ({
+    attribute: { allowedTypes = ["videos", "files", "images", "audios"], multiple = false },
+    label,
+    hint,
+    disabled = false,
+    labelAction = void 0,
+    name: name2,
+    required = false
+  }, forwardedRef) => {
     const { formatMessage } = useIntl();
     const { onChange, value, error } = useField(name2);
     const fieldAllowedTypes = allowedTypes || ["files", "images", "videos", "audios"];
-    const [uploadedFiles, setUploadedFiles] = useState([]);
-    const [step, setStep] = useState(void 0);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [droppedAssets, setDroppedAssets] = useState();
-    const [folderId, setFolderId] = useState(null);
+    const [uploadedFiles, setUploadedFiles] = React.useState([]);
+    const [step, setStep] = React.useState(void 0);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [droppedAssets, setDroppedAssets] = React.useState();
+    const [folderId, setFolderId] = React.useState(null);
     const { toggleNotification } = useNotification();
-    useEffect(() => {
+    React.useEffect(() => {
       if (step === void 0) {
         setUploadedFiles([]);
       }
@@ -6425,9 +5804,8 @@ const MediaLibraryInput = forwardRef(
       selectedAssets = [value];
     }
     const handleValidation = (nextSelectedAssets) => {
-      onChange({
-        target: { name: name2, value: multiple ? nextSelectedAssets : nextSelectedAssets[0] }
-      });
+      const value2 = multiple ? nextSelectedAssets : nextSelectedAssets[0];
+      onChange(name2, value2);
       setStep(void 0);
     };
     const handleDeleteAssetFromMediaLibrary = () => {
@@ -6440,9 +5818,8 @@ const MediaLibraryInput = forwardRef(
       } else {
         nextValue = null;
       }
-      onChange({
-        target: { name: name2, value: nextValue }
-      });
+      const value2 = nextValue;
+      onChange(name2, value2);
       setSelectedIndex(0);
     };
     const handleDeleteAsset = (asset) => {
@@ -6453,18 +5830,14 @@ const MediaLibraryInput = forwardRef(
       } else {
         nextValue = null;
       }
-      onChange({
-        target: { name: name2, value: nextValue }
-      });
+      onChange(name2, nextValue);
       setSelectedIndex(0);
     };
     const handleAssetEdit = (asset) => {
       const nextSelectedAssets = selectedAssets.map(
         (prevAsset) => prevAsset.id === asset.id ? asset : prevAsset
       );
-      onChange({
-        target: { name: name2, value: multiple ? nextSelectedAssets : nextSelectedAssets[0] }
-      });
+      onChange(name2, multiple ? nextSelectedAssets : nextSelectedAssets[0]);
     };
     const validateAssetsTypes = (assets, callback) => {
       const allowedAssets = getAllowedFiles(fieldAllowedTypes, assets);
@@ -6506,7 +5879,10 @@ const MediaLibraryInput = forwardRef(
     };
     let initiallySelectedAssets = selectedAssets;
     if (uploadedFiles.length > 0) {
-      const allowedUploadedFiles = getAllowedFiles(fieldAllowedTypes, uploadedFiles);
+      const allowedUploadedFiles = getAllowedFiles(
+        fieldAllowedTypes,
+        uploadedFiles
+      );
       initiallySelectedAssets = multiple ? [...allowedUploadedFiles, ...selectedAssets] : [allowedUploadedFiles[0]];
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6574,25 +5950,133 @@ const MediaLibraryInput = forwardRef(
     ] });
   }
 );
-MediaLibraryInput.defaultProps = {
-  attribute: { allowedTypes: ["videos", "files", "images", "audios"], multiple: false },
-  disabled: false,
-  hint: void 0,
-  label: void 0,
-  labelAction: void 0,
-  required: false
-};
-MediaLibraryInput.propTypes = {
-  attribute: PropTypes.shape({
-    allowedTypes: PropTypes.arrayOf(PropTypes.string),
-    multiple: PropTypes.bool
-  }),
-  disabled: PropTypes.bool,
-  hint: PropTypes.string,
-  label: PropTypes.string,
-  labelAction: PropTypes.node,
+const ParentFolderShape = {
+  id: PropTypes.number.isRequired,
+  createdAt: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool
+  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 = {
@@ -6605,7 +6089,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-24xAAxoi.mjs"),
+      Component: () => import("./index-DCAQ4hHN.mjs"),
       position: 4
     });
     app.addSettingsLink("global", {
@@ -6615,7 +6099,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => import("./index-BVvzCEIn.mjs"),
+      Component: () => import("./index-BWIqjWzC.mjs"),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6686,4 +6170,4 @@ export {
   FolderCardBodyAction as y,
   AssetGridList as z
 };
-//# sourceMappingURL=index-LM-DLJqd.mjs.map
+//# sourceMappingURL=index-BwEfHu6y.mjs.map