@strapi/upload 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/_chunks/{index-CtyJq8P-.js → index-C7nlFYgw.js}

@@ -1,11 +1,12 @@
 "use strict";
+const icons = require("@strapi/icons");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const PropTypes = require("prop-types");
 const strapiAdmin = require("@strapi/admin/strapi-admin");
 const designSystem = require("@strapi/design-system");
 const reactIntl = require("react-intl");
-const styled = require("styled-components");
+const styledComponents = require("styled-components");
 const byteSize = require("byte-size");
 const dateFns = require("date-fns");
 const qs = require("qs");
@@ -13,8 +14,6 @@ const reactQuery = require("react-query");
 const formik = require("formik");
 const isEqual = require("lodash/isEqual");
 const yup = require("yup");
-const axios = require("axios");
-const icons = require("@strapi/icons");
 const ReactSelect = require("react-select");
 const Cropper = require("cropperjs");
 require("cropperjs/dist/cropper.css");
@@ -44,11 +43,9 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const byteSize__default = /* @__PURE__ */ _interopDefault(byteSize);
 const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
 const yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
-const axios__default = /* @__PURE__ */ _interopDefault(axios);
 const ReactSelect__default = /* @__PURE__ */ _interopDefault(ReactSelect);
 const Cropper__default = /* @__PURE__ */ _interopDefault(Cropper);
 const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
@@ -63,7 +60,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.0.0-beta.5";
+const version = "5.0.0-beta.7";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -103,19 +100,15 @@ const scripts = {
   clean: "run -T rimraf dist",
   lint: "run -T eslint .",
   "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
-  "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
-  "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
-  "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
   "test:unit": "run -T jest",
   "test:unit:watch": "run -T jest --watch",
   watch: "pack-up watch"
 };
 const dependencies = {
-  "@strapi/design-system": "2.0.0-beta.2",
-  "@strapi/icons": "2.0.0-beta.2",
-  "@strapi/provider-upload-local": "5.0.0-beta.5",
-  "@strapi/utils": "5.0.0-beta.5",
-  axios: "1.6.8",
+  "@strapi/design-system": "2.0.0-beta.4",
+  "@strapi/icons": "2.0.0-beta.4",
+  "@strapi/provider-upload-local": "5.0.0-beta.7",
+  "@strapi/utils": "5.0.0-beta.7",
   "byte-size": "8.1.1",
   cropperjs: "1.6.1",
   "date-fns": "2.30.0",
@@ -137,12 +130,12 @@ const dependencies = {
   yup: "0.32.9"
 };
 const devDependencies = {
-  "@strapi/admin": "5.0.0-beta.5",
+  "@strapi/admin": "5.0.0-beta.7",
   "@strapi/pack-up": "5.0.0",
-  "@strapi/types": "5.0.0-beta.5",
-  "@testing-library/dom": "9.2.0",
-  "@testing-library/react": "14.0.0",
-  "@testing-library/user-event": "14.4.3",
+  "@strapi/types": "5.0.0-beta.7",
+  "@testing-library/dom": "10.1.0",
+  "@testing-library/react": "15.0.7",
+  "@testing-library/user-event": "14.5.2",
   "@types/fs-extra": "11.0.4",
   "@types/koa": "2.13.4",
   "@types/koa-range": "0.3.5",
@@ -151,17 +144,17 @@ const devDependencies = {
   koa: "2.15.2",
   "koa-body": "6.0.1",
   msw: "1.3.0",
-  react: "^18.2.0",
-  "react-dom": "^18.2.0",
+  react: "18.3.1",
+  "react-dom": "18.3.1",
   "react-router-dom": "6.22.3",
-  "styled-components": "5.3.11"
+  "styled-components": "6.1.8"
 };
 const peerDependencies = {
   "@strapi/admin": "^5.0.0 || ^5.0.0-beta || ^5.0.0-alpha || ^5.0.0-rc",
   react: "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0",
   "react-router-dom": "^6.0.0",
-  "styled-components": "^5.2.1"
+  "styled-components": "^6.0.0"
 };
 const engines = {
   node: ">=18.0.0 <=20.x.x",
@@ -905,7 +898,7 @@ const moveElement = (array, index2, offset) => {
   const newIndex = index2 + offset;
   return move(array, index2, newIndex);
 };
-const editAssetRequest = (asset, file, cancelToken, onProgress, post) => {
+const editAssetRequest = (asset, file, signal, onProgress, post) => {
   const endpoint2 = `/${pluginId}?id=${asset.id}`;
   const formData = new FormData();
   if (file) {
@@ -921,13 +914,7 @@ const editAssetRequest = (asset, file, cancelToken, onProgress, post) => {
     })
   );
   return post(endpoint2, formData, {
-    cancelToken: cancelToken.token,
-    onUploadProgress({ total, loaded }) {
-      onProgress(loaded / total * 100);
-    },
-    headers: {
-      "Content-Type": "multipart/form-data"
-    }
+    signal
   }).then((res) => res.data);
 };
 const useEditAsset = () => {
@@ -935,10 +922,11 @@ const useEditAsset = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { toggleNotification } = strapiAdmin.useNotification();
   const queryClient = reactQuery.useQueryClient();
-  const tokenRef = React.useRef(axios__default.default.CancelToken.source());
+  const abortController = new AbortController();
+  const signal = abortController.signal;
   const { post } = strapiAdmin.useFetchClient();
   const mutation = reactQuery.useMutation(
-    ({ asset, file }) => editAssetRequest(asset, file, tokenRef.current, setProgress, post),
+    ({ asset, file }) => editAssetRequest(asset, file, signal, setProgress, post),
     {
       onSuccess() {
         queryClient.refetchQueries([pluginId, "assets"], { active: true });
@@ -958,9 +946,7 @@ const useEditAsset = () => {
     }
   );
   const editAsset = (asset, file) => mutation.mutateAsync({ asset, file });
-  const cancel = () => tokenRef.current.cancel(
-    formatMessage({ id: getTrad("modal.upload.cancelled"), defaultMessage: "" })
-  );
+  const cancel = () => abortController.abort();
   return { ...mutation, cancel, editAsset, progress, status: mutation.status };
 };
 const recursiveRenameKeys = (obj, fn) => Object.fromEntries(
@@ -1028,7 +1014,7 @@ ContextInfo.propTypes = {
     })
   ).isRequired
 };
-const ToggleButton = styled__default.default(designSystem.Flex)`
+const ToggleButton = styledComponents.styled(designSystem.Flex)`
   align-self: flex-end;
   height: 2.2rem;
   width: 2.8rem;
@@ -1053,7 +1039,7 @@ const Option = ({ children, data, selectProps, ...props }) => {
           id: "app.utils.toggle",
           defaultMessage: "Toggle"
         }),
-        as: "button",
+        tag: "button",
         alignItems: "center",
         hasRadius: true,
         justifyContent: "center",
@@ -1147,7 +1133,7 @@ const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ..
   );
 };
 const Select = ({ components: components2, styles, error, ariaErrorMessage, ...props }) => {
-  const theme = styled.useTheme();
+  const theme = styledComponents.useTheme();
   const customStyles = getSelectStyles(theme, error);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReactSelect__default.default,
@@ -1179,7 +1165,7 @@ Select.propTypes = {
   error: PropTypes__default.default.string,
   ariaErrorMessage: PropTypes__default.default.string
 };
-const IconBox = styled__default.default(designSystem.Box)`
+const IconBox = styledComponents.styled(designSystem.Box)`
   background: transparent;
   border: none;
   position: relative;
@@ -1196,9 +1182,9 @@ const IconBox = styled__default.default(designSystem.Box)`
 `;
 const ClearIndicator = (props) => {
   const Component = ReactSelect.components.ClearIndicator;
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { as: "button", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { tag: "button", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }) });
 };
-const CarretBox = styled__default.default(IconBox)`
+const CarretBox = styledComponents.styled(IconBox)`
   display: flex;
   background: none;
   border: none;
@@ -1345,7 +1331,7 @@ SelectTree.propTypes = {
 };
 const DialogHeader = () => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
 };
 const QUALITY = 1;
 const useCropImg = () => {
@@ -1418,7 +1404,7 @@ const useCropImg = () => {
   };
 };
 const endpoint = `/${pluginId}`;
-const uploadAsset = (asset, folderId, cancelToken, onProgress, post) => {
+const uploadAsset = (asset, folderId, signal, onProgress, post) => {
   const { rawFile, caption, name: name2, alternativeText } = asset;
   const formData = new FormData();
   formData.append("files", rawFile);
@@ -1432,24 +1418,18 @@ const uploadAsset = (asset, folderId, cancelToken, onProgress, post) => {
     })
   );
   return post(endpoint, formData, {
-    headers: {
-      "Content-Type": "multipart/form-data"
-    },
-    cancelToken: cancelToken.token,
-    onUploadProgress({ total, loaded }) {
-      onProgress(loaded / total * 100);
-    }
+    signal
   }).then((res) => res.data);
 };
 const useUpload = () => {
   const [progress, setProgress] = React.useState(0);
-  const { formatMessage } = reactIntl.useIntl();
   const queryClient = reactQuery.useQueryClient();
-  const tokenRef = React.useRef(axios__default.default.CancelToken.source());
+  const abortController = new AbortController();
+  const signal = abortController.signal;
   const { post } = strapiAdmin.useFetchClient();
   const mutation = reactQuery.useMutation(
     ({ asset, folderId }) => {
-      return uploadAsset(asset, folderId, tokenRef.current, setProgress, post);
+      return uploadAsset(asset, folderId, signal, setProgress, post);
     },
     {
       onSuccess() {
@@ -1459,9 +1439,7 @@ const useUpload = () => {
     }
   );
   const upload = (asset, folderId) => mutation.mutateAsync({ asset, folderId });
-  const cancel = () => tokenRef.current.cancel(
-    formatMessage({ id: getTrad("modal.upload.cancelled"), defaultMessage: "" })
-  );
+  const cancel = () => abortController.abort();
   return {
     upload,
     cancel,
@@ -1531,7 +1509,7 @@ const CopyLinkButton = ({ url }) => {
 CopyLinkButton.propTypes = {
   url: PropTypes__default.default.string.isRequired
 };
-const BoxWrapper = styled__default.default(designSystem.Flex)`
+const BoxWrapper = styledComponents.styled(designSystem.Flex)`
   border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
   width: 100%;
   height: 100%;
@@ -1542,7 +1520,7 @@ const BoxWrapper = styled__default.default(designSystem.Flex)`
     }
   }
 `;
-const CancelButton = styled__default.default.button`
+const CancelButton = styledComponents.styled.button`
   border: none;
   background: none;
   width: min-content;
@@ -1567,7 +1545,7 @@ const UploadProgress = ({ onCancel, progress, error }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BoxWrapper, { alignItems: "center", background: error ? "danger100" : "neutral150", error, children: error ? /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { "aria-label": error?.message }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: progress, children: `${progress}/100%` }),
     /* @__PURE__ */ jsxRuntime.jsx(CancelButton, { type: "button", onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", as: "span", textColor: "inherit", children: formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", tag: "span", textColor: "inherit", children: formatMessage({
         id: "app.components.Button.cancel",
         defaultMessage: "Cancel"
       }) }),
@@ -1648,7 +1626,7 @@ const usePersistentState = (key, defaultValue) => {
   }, [key, value]);
   return [value, setValue];
 };
-const CardAsset$1 = styled__default.default(designSystem.Flex)`
+const CardAsset$1 = styledComponents.styled(designSystem.Flex)`
   border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
@@ -1674,10 +1652,10 @@ AssetPreview.propTypes = {
   name: PropTypes__default.default.string.isRequired,
   url: PropTypes__default.default.string.isRequired
 };
-const RelativeBox = styled__default.default(designSystem.Box)`
+const RelativeBox = styledComponents.styled(designSystem.Box)`
   position: relative;
 `;
-const Wrapper$1 = styled__default.default.div`
+const Wrapper$1 = styledComponents.styled.div`
   position: relative;
   text-align: center;
   background: repeating-conic-gradient(
@@ -1699,24 +1677,24 @@ const Wrapper$1 = styled__default.default.div`
     max-width: 100%;
   }
 `;
-const ActionRow = styled__default.default(designSystem.Flex)`
+const ActionRow = styledComponents.styled(designSystem.Flex)`
   height: 5.2rem;
-  background-color: ${({ blurry }) => blurry ? `rgba(33, 33, 52, 0.4)` : void 0};
+  background-color: ${({ $blurry }) => $blurry ? `rgba(33, 33, 52, 0.4)` : void 0};
 `;
-const CroppingActionRow = styled__default.default(designSystem.Flex)`
+const CroppingActionRow = styledComponents.styled(designSystem.Flex)`
   z-index: 1;
   height: 5.2rem;
   position: absolute;
   background-color: rgba(33, 33, 52, 0.4);
   width: 100%;
 `;
-const BadgeOverride = styled__default.default(designSystem.Badge)`
+const BadgeOverride = styledComponents.styled(designSystem.Badge)`
   span {
     color: inherit;
     font-weight: ${({ theme }) => theme.fontWeights.regular};
   }
 `;
-const UploadProgressWrapper$1 = styled__default.default.div`
+const UploadProgressWrapper$1 = styledComponents.styled.div`
   position: absolute;
   z-index: 2;
   height: 100%;
@@ -1732,26 +1710,33 @@ const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
           id: getTrad("control-card.stop-crop"),
           defaultMessage: "Stop cropping"
         }),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}),
-        onClick: onCancel
+        onClick: onCancel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Trigger, { variant: "tertiary", paddingLeft: 2, paddingRight: 2, endIcon: null, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
-          id: getTrad("control-card.crop"),
-          defaultMessage: "Crop"
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          icons.Check,
-          {
-            "aria-hidden": true,
-            focusable: false,
-            style: { position: "relative", top: 2 },
-            fill: "#C0C0D0"
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Trigger,
+        {
+          "aria-label": formatMessage({
+            id: getTrad("control-card.crop"),
+            defaultMessage: "Crop"
+          }),
+          variant: "tertiary",
+          paddingLeft: 2,
+          paddingRight: 2,
+          endIcon: null,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            icons.Check,
+            {
+              "aria-hidden": true,
+              focusable: false,
+              style: { position: "relative", top: 2 },
+              fill: "#C0C0D0"
+            }
+          )
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { zIndex: 5, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { onSelect: onValidate, children: formatMessage({
           id: getTrad("checkControl.crop-original"),
@@ -1765,7 +1750,7 @@ const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
     ] })
   ] }) }) });
 };
-const Trigger = styled__default.default(designSystem.Menu.Trigger)`
+const Trigger = styledComponents.styled(designSystem.Menu.Trigger)`
   svg {
     > g,
     path {
@@ -1904,8 +1889,8 @@ const PreviewBox = ({
               id: "global.delete",
               defaultMessage: "Delete"
             }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
-            onClick: () => setShowConfirmDialog(true)
+            onClick: () => setShowConfirmDialog(true),
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
           }
         ),
         canDownload && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1915,8 +1900,8 @@ const PreviewBox = ({
               id: getTrad("control-card.download"),
               defaultMessage: "Download"
             }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Download, {}),
-            onClick: () => downloadFile(assetUrl, asset.name)
+            onClick: () => downloadFile(assetUrl, asset.name),
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Download, {})
           }
         ),
         canCopyLink && /* @__PURE__ */ jsxRuntime.jsx(CopyLinkButton, { url: assetUrl }),
@@ -1924,8 +1909,8 @@ const PreviewBox = ({
           designSystem.IconButton,
           {
             label: formatMessage({ id: getTrad("control-card.crop"), defaultMessage: "Crop" }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Crop, {}),
-            onClick: handleCropStart
+            onClick: handleCropStart,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Crop, {})
           }
         )
       ] }) }),
@@ -1960,7 +1945,7 @@ const PreviewBox = ({
           paddingLeft: 2,
           paddingRight: 2,
           justifyContent: "flex-end",
-          blurry: isInCroppingMode,
+          $blurry: isInCroppingMode,
           children: isInCroppingMode && width && height && /* @__PURE__ */ jsxRuntime.jsx(BadgeOverride, { background: "neutral900", color: "neutral0", children: width && height ? `${height}✕${width}` : "N/A" })
         }
       )
@@ -2035,7 +2020,7 @@ ReplaceMediaButton.propTypes = {
   onSelectMedia: PropTypes__default.default.func.isRequired,
   trackedLocation: PropTypes__default.default.string
 };
-const LoadingBody$1 = styled__default.default(designSystem.Flex)`
+const LoadingBody$1 = styledComponents.styled(designSystem.Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
 `;
@@ -2201,54 +2186,64 @@ const EditAssetDialog = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.TextInput,
-                {
-                  label: formatMessage({
-                    id: getTrad("form.input.label.file-name"),
-                    defaultMessage: "File name"
-                  }),
-                  name: "name",
-                  value: values.name,
-                  error: errors.name,
-                  onChange: handleChange,
-                  disabled: formDisabled
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.TextInput,
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "name", error: errors.name, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                  id: getTrad("form.input.label.file-name"),
+                  defaultMessage: "File name"
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    value: values.name,
+                    onChange: handleChange,
+                    disabled: formDisabled
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Field.Root,
                 {
-                  label: formatMessage({
-                    id: getTrad("form.input.label.file-alt"),
-                    defaultMessage: "Alternative text"
-                  }),
                   name: "alternativeText",
                   hint: formatMessage({
                     id: getTrad("form.input.decription.file-alt"),
                     defaultMessage: "This text will be displayed if the asset can’t be shown."
                   }),
-                  value: values.alternativeText,
                   error: errors.alternativeText,
-                  onChange: handleChange,
-                  disabled: formDisabled
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.TextInput,
-                {
-                  label: formatMessage({
-                    id: getTrad("form.input.label.file-caption"),
-                    defaultMessage: "Caption"
-                  }),
-                  name: "caption",
-                  value: values.caption,
-                  error: errors.caption,
-                  onChange: handleChange,
-                  disabled: formDisabled
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                      id: getTrad("form.input.label.file-alt"),
+                      defaultMessage: "Alternative text"
+                    }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.TextInput,
+                      {
+                        value: values.alternativeText,
+                        onChange: handleChange,
+                        disabled: formDisabled
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { htmlFor: "asset-folder", children: formatMessage({
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "caption", error: errors.caption, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                  id: getTrad("form.input.label.file-caption"),
+                  defaultMessage: "Caption"
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    value: values.caption,
+                    onChange: handleChange,
+                    disabled: formDisabled
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "parent", id: "asset-folder", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
                   id: getTrad("form.input.label.file-location"),
                   defaultMessage: "Location"
                 }) }),
@@ -2268,7 +2263,7 @@ const EditAssetDialog = ({
                     ariaErrorMessage: "folder-parent-error"
                   }
                 )
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -2386,7 +2381,7 @@ const useEditFolder = () => {
 };
 const EditFolderModalHeader = ({ isEditing }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage(
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage(
     isEditing ? {
       id: getTrad("modal.folder.edit.title"),
       defaultMessage: "Edit folder"
@@ -2535,22 +2530,23 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
-              {
-                label: formatMessage({
-                  id: getTrad("form.input.label.folder-name"),
-                  defaultMessage: "Name"
-                }),
-                name: "name",
-                value: values.name,
-                error: errors.name,
-                onChange: handleChange,
-                disabled: formDisabled
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { htmlFor: "folder-parent", children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "name", error: errors.name, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                id: getTrad("form.input.label.folder-name"),
+                defaultMessage: "Name"
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  value: values.name,
+                  onChange: handleChange,
+                  disabled: formDisabled
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "folder-parent", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
                 id: getTrad("form.input.label.folder-location"),
                 defaultMessage: "Location"
               }) }),
@@ -2575,7 +2571,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 designSystem.Typography,
                 {
                   variant: "pi",
-                  as: "p",
+                  tag: "p",
                   id: "folder-parent-error",
                   textColor: "danger600",
                   children: errors.parent
@@ -2674,17 +2670,17 @@ const useFolder = (id2, { enabled = true } = {}) => {
   );
   return { data, error, isLoading };
 };
-const Extension$1 = styled__default.default.span`
+const Extension$1 = styledComponents.styled.span`
   text-transform: uppercase;
 `;
-const CardActionsContainer = styled__default.default(designSystem.CardAction)`
+const CardActionsContainer = styledComponents.styled(designSystem.CardAction)`
   opacity: 0;
 
   &:focus-within {
     opacity: 1;
   }
 `;
-const CardContainer = styled__default.default(designSystem.Card)`
+const CardContainer = styledComponents.styled(designSystem.Card)`
   cursor: pointer;
 
   &:hover {
@@ -2726,16 +2722,16 @@ const AssetCardBase = ({
               id: getTrad("control-card.remove-selection"),
               defaultMessage: "Remove from selection"
             }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
-            onClick: onRemove
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
           }
         ),
         onEdit && /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
           {
             label: formatMessage({ id: getTrad("control-card.edit"), defaultMessage: "Edit" }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}),
-            onClick: onEdit
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
           }
         )
       ] }),
@@ -2743,7 +2739,7 @@ const AssetCardBase = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { as: "h2", children: name2 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { tag: "h2", children: name2 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardSubtitle, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Extension$1, { children: extension }),
           subtitle
@@ -2786,7 +2782,7 @@ AudioPreview.propTypes = {
   alt: PropTypes__default.default.string.isRequired,
   url: PropTypes__default.default.string.isRequired
 };
-const AudioPreviewWrapper$1 = styled__default.default(designSystem.Box)`
+const AudioPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
   canvas,
   audio {
     display: block;
@@ -2814,12 +2810,12 @@ AudioAssetCard.propTypes = {
   selected: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(["S", "M"])
 };
-const IconWrapper$1 = styled__default.default.span`
+const IconWrapper$1 = styledComponents.styled.span`
   svg {
     font-size: 4.8rem;
   }
 `;
-const CardAsset = styled__default.default(designSystem.Flex)`
+const CardAsset = styledComponents.styled(designSystem.Flex)`
   border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
@@ -2893,7 +2889,7 @@ const VideoPreview = ({ url, mime, onLoadDuration, alt, ...props }) => {
       return;
     video.play();
   };
-  return /* @__PURE__ */ React.createElement(designSystem.Box, { as: "figure", ...props, key: url }, /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ React.createElement(designSystem.Box, { tag: "figure", ...props, key: url }, /* @__PURE__ */ jsxRuntime.jsx(
     "video",
     {
       muted: true,
@@ -2903,7 +2899,7 @@ const VideoPreview = ({ url, mime, onLoadDuration, alt, ...props }) => {
       onTimeUpdate: handleTimeUpdate,
       children: /* @__PURE__ */ jsxRuntime.jsx("source", { type: mime })
     }
-  ), /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "figcaption", children: alt }));
+  ), /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "figcaption", children: alt }));
 };
 VideoPreview.defaultProps = {
   onLoadDuration() {
@@ -2917,7 +2913,7 @@ VideoPreview.propTypes = {
   onLoadDuration: PropTypes__default.default.func,
   size: PropTypes__default.default.oneOf(["S", "M"])
 };
-const VideoPreviewWrapper$2 = styled__default.default(designSystem.Box)`
+const VideoPreviewWrapper$2 = styledComponents.styled(designSystem.Box)`
   canvas,
   video {
     display: block;
@@ -3052,7 +3048,7 @@ const AssetGridList = ({
   title
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
+    title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: assets.map((asset, index2) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
@@ -3130,7 +3126,7 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
             return /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.MenuItem,
               {
-                as: "button",
+                tag: "button",
                 type: "button",
                 onClick: () => onChangeFolder(ascendant.id, ascendant.path),
                 children: ascendant.label
@@ -3142,7 +3138,7 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
             folder: ascendant?.id,
             folderPath: ascendant?.path
           });
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { isLink: true, as: reactRouterDom.NavLink, to: url, children: ascendant.label }, ascendant.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { isLink: true, tag: reactRouterDom.NavLink, to: url, children: ascendant.label }, ascendant.id);
         })
       ]
     }
@@ -3177,7 +3173,7 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
       return /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.CrumbLink,
         {
-          as: onChangeFolder ? "button" : reactRouterDom.NavLink,
+          tag: onChangeFolder ? "button" : reactRouterDom.NavLink,
           type: onChangeFolder && "button",
           to: onChangeFolder ? void 0 : crumb.href,
           onClick: onChangeFolder && (() => onChangeFolder(crumb.id, crumb.path)),
@@ -3205,7 +3201,7 @@ Breadcrumbs.propTypes = {
   currentFolderId: PropTypes__default.default.number,
   onChangeFolder: PropTypes__default.default.func
 };
-const EmptyAssetCard = styled__default.default(designSystem.Box)`
+const EmptyAssetCard = styledComponents.styled(designSystem.Box)`
   background: linear-gradient(
     180deg,
     rgba(234, 234, 239, 0) 0%,
@@ -3213,21 +3209,12 @@ const EmptyAssetCard = styled__default.default(designSystem.Box)`
   );
   opacity: 0.33;
 `;
-const GridColSize = {
-  S: 180,
-  M: 250
-};
 const PlaceholderSize = {
   S: 138,
   M: 234
 };
-const GridLayout = styled__default.default(designSystem.Box)`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(${({ size }) => `${GridColSize[size]}px`}, 1fr));
-  grid-gap: ${({ theme }) => theme.spaces[4]};
-`;
 const EmptyAssetGrid = ({ count, size }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(GridLayout, { size, children: Array(count).fill(null).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Layouts.Grid, { size, children: Array(count).fill(null).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
     EmptyAssetCard,
     {
       height: `${PlaceholderSize[size]}px`,
@@ -3246,7 +3233,7 @@ const EmptyAssets = ({ icon: Icon = symbols.EmptyDocuments, content, action, siz
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "absolute", top: 11, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, textAlign: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 6, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { width: "160px", height: "88px" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "p", textColor: "neutral600", children: content })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "p", textColor: "neutral600", children: content })
       ] }),
       action
     ] }) })
@@ -3275,7 +3262,7 @@ const useId = (initialId) => {
   const idRef = React.useRef(`${initialId}-${genId()}`);
   return idRef.current;
 };
-const FauxClickWrapper = styled__default.default.button`
+const FauxClickWrapper = styledComponents.styled.button`
   height: 100%;
   left: 0;
   position: absolute;
@@ -3288,15 +3275,15 @@ const FauxClickWrapper = styled__default.default.button`
     text-decoration: none;
   }
 `;
-const StyledFolder = styled__default.default(icons.Folder)`
+const StyledFolder = styledComponents.styled(icons.Folder)`
   path {
     fill: currentColor;
   }
 `;
-const CardActionDisplay = styled__default.default(designSystem.Box)`
+const CardActionDisplay = styledComponents.styled(designSystem.Box)`
   display: none;
 `;
-const Card = styled__default.default(designSystem.Box)`
+const Card = styledComponents.styled(designSystem.Box)`
   &:hover,
   &:focus-within {
     ${CardActionDisplay} {
@@ -3313,7 +3300,7 @@ const FolderCard = React.forwardRef(
         FauxClickWrapper,
         {
           to: to || void 0,
-          as: to ? reactRouterDom.NavLink : "button",
+          tag: to ? reactRouterDom.NavLink : "button",
           type: to ? void 0 : "button",
           onClick,
           tabIndex: -1,
@@ -3372,7 +3359,7 @@ FolderCard.propTypes = {
   cardActions: PropTypes__default.default.element,
   to: PropTypes__default.default.string
 };
-const StyledBox = styled__default.default(designSystem.Flex)`
+const StyledBox = styledComponents.styled(designSystem.Flex)`
   user-select: none;
 `;
 const FolderCardBody = (props) => {
@@ -3390,13 +3377,13 @@ const FolderCardBody = (props) => {
     }
   );
 };
-const BoxOutline = styled__default.default(designSystem.Box)`
+const BoxOutline = styledComponents.styled(designSystem.Box)`
   &:focus {
     outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: -2px;
   }
 `;
-const BoxTextDecoration = styled__default.default(BoxOutline)`
+const BoxTextDecoration = styledComponents.styled(BoxOutline)`
   text-decoration: none;
 `;
 const FolderCardBodyAction = ({ to, ...props }) => {
@@ -3405,14 +3392,14 @@ const FolderCardBodyAction = ({ to, ...props }) => {
       BoxTextDecoration,
       {
         padding: 1,
-        as: reactRouterDom.NavLink,
+        tag: reactRouterDom.NavLink,
         maxWidth: "100%",
         to,
         ...props
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(BoxOutline, { padding: 1, as: "button", type: "button", maxWidth: "100%", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(BoxOutline, { padding: 1, tag: "button", type: "button", maxWidth: "100%", ...props });
 };
 FolderCardBodyAction.defaultProps = {
   to: void 0
@@ -3422,7 +3409,7 @@ FolderCardBodyAction.propTypes = {
 };
 const FolderGridList = ({ title, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
+    title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children })
   ] });
 };
@@ -3460,7 +3447,7 @@ SortPicker.propTypes = {
   onChangeSort: PropTypes__default.default.func.isRequired,
   value: PropTypes__default.default.string
 };
-const VideoPreviewWrapper$1 = styled__default.default(designSystem.Box)`
+const VideoPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
   figure {
     width: ${({ theme }) => theme.spaces[7]};
     height: ${({ theme }) => theme.spaces[7]};
@@ -3626,14 +3613,14 @@ const TableRows = ({
         contentType === "folder" && /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
           {
-            as: folderURL ? reactRouterDom.Link : void 0,
+            tag: folderURL ? reactRouterDom.Link : void 0,
             label: formatMessage({
               id: getTrad("list.folders.link-label"),
               defaultMessage: "Access folder"
             }),
             to: folderURL,
             onClick: () => !folderURL && onChangeFolder(id2),
-            noBorder: true,
+            borderWidth: 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
           }
         ),
@@ -3645,7 +3632,7 @@ const TableRows = ({
               defaultMessage: "Edit"
             }),
             onClick: () => contentType === "asset" ? onEditAsset(element) : onEditFolder(element),
-            noBorder: true,
+            borderWidth: 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
           }
         )
@@ -3719,7 +3706,7 @@ const TableList = ({
               {
                 label: sortLabel,
                 onClick: () => handleClickSort(isSorted, name2),
-                noBorder: true,
+                borderWidth: 0,
                 children: isUp ? /* @__PURE__ */ jsxRuntime.jsx(icons.CaretUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, {})
               }
             ),
@@ -3727,7 +3714,7 @@ const TableList = ({
               designSystem.Typography,
               {
                 onClick: () => handleClickSort(isSorted, name2),
-                as: isSorted ? "span" : "button",
+                tag: isSorted ? "span" : "button",
                 label: !isSorted ? sortLabel : "",
                 textColor: "neutral600",
                 variant: "sigma",
@@ -4293,7 +4280,7 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", as: "label", htmlFor: "page-size", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", tag: "label", htmlFor: "page-size", children: formatMessage({
       id: "components.PageFooter.select",
       defaultMessage: "Entries per page"
     }) }) })
@@ -4305,28 +4292,56 @@ PageSize.propTypes = {
 };
 const PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });
 const usePagination = () => React.useContext(PaginationContext);
-const PaginationText = styled__default.default(designSystem.Typography)`
+const PaginationText = styledComponents.styled(designSystem.Typography)`
   line-height: revert;
 `;
-const LinkWrapper = styled__default.default.button`
+const LinkWrapper = styledComponents.styled.button`
   padding: ${({ theme }) => theme.spaces[3]};
   border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ active, theme }) => active ? theme.shadows.filterShadow : void 0};
+  box-shadow: ${({ $active, theme }) => $active ? theme.shadows.filterShadow : void 0};
   text-decoration: none;
   display: flex;
+  position: relative;
+  outline: none;
+
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
 
-  ${designSystem.buttonFocusStyle}
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${(props) => props.theme.colors.primary600};
+    }
+  }
 `;
 LinkWrapper.defaultProps = { type: "button" };
-const PageLinkWrapper = styled__default.default(LinkWrapper)`
-  color: ${({ theme, active }) => active ? theme.colors.primary700 : theme.colors.neutral800};
-  background: ${({ theme, active }) => active ? theme.colors.neutral0 : void 0};
+const PageLinkWrapper = styledComponents.styled(LinkWrapper)`
+  color: ${({ theme, $active }) => $active ? theme.colors.primary700 : theme.colors.neutral800};
+  background: ${({ theme, $active }) => $active ? theme.colors.neutral0 : void 0};
 
   &:hover {
     box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   }
 `;
-const ActionLinkWrapper = styled__default.default(LinkWrapper)`
+const ActionLinkWrapper = styledComponents.styled(LinkWrapper)`
   font-size: 1.1rem;
   svg path {
     fill: ${(p) => p["aria-disabled"] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
@@ -4343,7 +4358,7 @@ const ActionLinkWrapper = styled__default.default(LinkWrapper)`
   pointer-events: none;
     ` : void 0}
 `;
-const DotsWrapper = styled__default.default(LinkWrapper)`
+const DotsWrapper = styledComponents.styled(LinkWrapper)`
   color: ${({ theme }) => theme.colors.neutral800};
 `;
 const PreviousLink = ({ children, ...props }) => {
@@ -4365,12 +4380,12 @@ const NextLink = ({ children, ...props }) => {
 const PageLink = ({ number, children, ...props }) => {
   const { activePage } = usePagination();
   const isActive = activePage === number;
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(PageLinkWrapper, { ...props, active: isActive, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(PageLinkWrapper, { ...props, $active: isActive, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children }),
     /* @__PURE__ */ jsxRuntime.jsx(PaginationText, { "aria-hidden": true, variant: "pi", fontWeight: isActive ? "bold" : "", children: number })
   ] }) });
 };
-const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(DotsWrapper, { ...props, as: "div", children: [
+const Dots = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(DotsWrapper, { ...props, tag: "div", children: [
   /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children }),
   /* @__PURE__ */ jsxRuntime.jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
 ] }) });
@@ -4388,7 +4403,7 @@ Dots.propTypes = {
 };
 const Pagination = ({ children, label, activePage, pageCount }) => {
   const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { as: "nav", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { as: "ul", gap: 1, children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: "nav", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "ul", gap: 1, children }) }) });
 };
 Pagination.defaultProps = {
   label: "pagination"
@@ -4588,7 +4603,7 @@ const SearchAsset = ({ onChangeSearch, queryValue }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}), label: "Search", onClick: handleToggle });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: "Search", onClick: handleToggle, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}) });
 };
 SearchAsset.defaultProps = {
   queryValue: null
@@ -4603,10 +4618,10 @@ const isSelectable = (allowedTypes, mime = "") => {
   const fileType = mime.split("/")[0];
   return allowedTypes.includes(fileType) || allowedTypes.includes("file") && !["video", "image", "audio"].includes(fileType);
 };
-const TypographyMaxWidth = styled__default.default(designSystem.Typography)`
+const TypographyMaxWidth = styledComponents.styled(designSystem.Typography)`
   max-width: 100%;
 `;
-const ActionContainer = styled__default.default(designSystem.Box)`
+const ActionContainer = styledComponents.styled(designSystem.Box)`
   svg {
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -4706,7 +4721,6 @@ const BrowseStep = ({
         /* @__PURE__ */ jsxRuntime.jsx(ActionContainer, { paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
           {
-            icon: isGridView ? /* @__PURE__ */ jsxRuntime.jsx(icons.List, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.GridFour, {}),
             label: isGridView ? formatMessage({
               id: "view-switch.list",
               defaultMessage: "List View"
@@ -4714,7 +4728,8 @@ const BrowseStep = ({
               id: "view-switch.grid",
               defaultMessage: "Grid View"
             }),
-            onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID)
+            onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
+            children: isGridView ? /* @__PURE__ */ jsxRuntime.jsx(icons.List, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.GridFour, {})
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(SearchAsset, { onChangeSearch, queryValue: queryObject._q || "" })
@@ -4724,7 +4739,7 @@ const BrowseStep = ({
       Breadcrumbs,
       {
         onChangeFolder,
-        as: "nav",
+        tag: "nav",
         label: formatMessage({
           id: getTrad("header.breadcrumbs.nav.label"),
           defaultMessage: "Folders navigation"
@@ -4798,19 +4813,20 @@ const BrowseStep = ({
                 cardActions: onEditFolder && /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.IconButton,
                   {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}),
-                    "aria-label": formatMessage({
+                    withTooltip: false,
+                    label: formatMessage({
                       id: getTrad("list.folder.edit"),
                       defaultMessage: "Edit folder"
                     }),
-                    onClick: () => onEditFolder(folder)
+                    onClick: () => onEditFolder(folder),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
                   }
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(FolderCardBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   FolderCardBodyAction,
                   {
                     onClick: () => handleClickFolderCard(folder.id, folder.path),
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "h2", direction: "column", alignItems: "start", maxWidth: "100%", children: [
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "h2", direction: "column", alignItems: "start", maxWidth: "100%", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(TypographyMaxWidth, { fontWeight: "semiBold", ellipsis: true, children: [
                         folder.name,
                         /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: "-" })
@@ -4818,7 +4834,7 @@ const BrowseStep = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TypographyMaxWidth,
                         {
-                          as: "span",
+                          tag: "span",
                           textColor: "neutral600",
                           variant: "pi",
                           ellipsis: true,
@@ -4963,7 +4979,7 @@ SelectedStep.propTypes = {
   selectedAssets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({})).isRequired,
   onReorderAsset: PropTypes__default.default.func
 };
-const LoadingBody = styled__default.default(designSystem.Flex)`
+const LoadingBody = styledComponents.styled(designSystem.Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
 `;
@@ -5242,20 +5258,20 @@ const rawFileToAsset = (rawFile, assetSource) => {
     isLocal: true
   };
 };
-const Wrapper = styled__default.default(designSystem.Flex)`
+const Wrapper = styledComponents.styled(designSystem.Flex)`
   flex-direction: column;
 `;
-const IconWrapper = styled__default.default.div`
+const IconWrapper = styledComponents.styled.div`
   font-size: 6rem;
 
   svg path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
-const MediaBox = styled__default.default(designSystem.Box)`
+const MediaBox = styledComponents.styled(designSystem.Box)`
   border-style: dashed;
 `;
-const OpaqueBox = styled__default.default(designSystem.Box)`
+const OpaqueBox = styledComponents.styled(designSystem.Box)`
   opacity: 0;
   cursor: pointer;
 `;
@@ -5320,14 +5336,14 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
         onDrop: handleDrop,
         children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, { "aria-hidden": true, width: "3.2rem", height: "3.2rem" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, paddingBottom: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral600", as: "span", children: formatMessage({
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, paddingBottom: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral600", tag: "span", children: formatMessage({
             id: getTrad("input.label"),
             defaultMessage: "Drag & Drop here or"
           }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             OpaqueBox,
             {
-              as: "input",
+              tag: "input",
               position: "absolute",
               left: 0,
               right: 0,
@@ -5468,18 +5484,20 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
       validationSchema: urlSchema,
       validateOnChange: false,
       children: ({ values, errors, handleChange }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 8, paddingRight: 8, paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Textarea,
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 8, paddingRight: 8, paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Field.Root,
           {
-            label: formatMessage({ id: getTrad("input.url.label"), defaultMessage: "URL" }),
-            id: "urls",
             hint: formatMessage({
               id: getTrad("input.url.description"),
               defaultMessage: "Separate your URL links by a carriage return."
             }),
             error: error?.message || (errors.urls ? formatMessage({ id: errors.urls, defaultMessage: "An error occured" }) : void 0),
-            onChange: handleChange,
-            value: values.urls
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({ id: getTrad("input.url.label"), defaultMessage: "URL" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Textarea, { onChange: handleChange, value: values.urls }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+            ]
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5507,7 +5525,7 @@ FromUrlForm.propTypes = {
 const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
@@ -5564,11 +5582,11 @@ AddAssetStep.propTypes = {
   onAddAsset: PropTypes__default.default.func.isRequired,
   trackedLocation: PropTypes__default.default.string
 };
-const UploadProgressWrapper = styled__default.default.div`
+const UploadProgressWrapper = styledComponents.styled.div`
   height: 8.8rem;
   width: 100%;
 `;
-const Extension = styled__default.default.span`
+const Extension = styledComponents.styled.span`
   text-transform: uppercase;
 `;
 const UploadingAssetCard = ({
@@ -5621,7 +5639,7 @@ const UploadingAssetCard = ({
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(UploadProgress, { error, onCancel: handleCancel, progress }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { as: "h2", children: asset.name }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { tag: "h2", children: asset.name }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: /* @__PURE__ */ jsxRuntime.jsx(Extension, { children: asset.ext }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 1, grow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: badgeContent }) })
@@ -5709,7 +5727,7 @@ const PendingAssetStep = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
@@ -5956,17 +5974,17 @@ MediaLibraryDialog.propTypes = {
   onClose: PropTypes__default.default.func.isRequired,
   onSelectAssets: PropTypes__default.default.func.isRequired
 };
-const DocAsset = styled__default.default(designSystem.Flex)`
+const DocAsset = styledComponents.styled(designSystem.Flex)`
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
-const VideoPreviewWrapper = styled__default.default(designSystem.Box)`
+const VideoPreviewWrapper = styledComponents.styled(designSystem.Box)`
   canvas,
   video {
     max-width: 100%;
     height: 124px;
   }
 `;
-const AudioPreviewWrapper = styled__default.default(designSystem.Box)`
+const AudioPreviewWrapper = styledComponents.styled(designSystem.Box)`
   canvas,
   audio {
     max-width: 100%;
@@ -5990,7 +6008,7 @@ const CarouselAsset = ({ asset }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Box,
       {
-        as: "img",
+        tag: "img",
         maxHeight: "100%",
         maxWidth: "100%",
         src: createAssetUrl(asset, true),
@@ -6013,8 +6031,8 @@ const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })
           id: getTrad("control-card.add"),
           defaultMessage: "Add"
         }),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-        onClick: () => onAddAsset(asset)
+        onClick: () => onAddAsset(asset),
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(CopyLinkButton, { url: prefixFileUrlWithBackendUrl(asset.url) }),
@@ -6025,8 +6043,8 @@ const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })
           id: "global.delete",
           defaultMessage: "Delete"
         }),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
-        onClick: () => onDeleteAsset(asset)
+        onClick: () => onDeleteAsset(asset),
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
       }
     ),
     onEditAsset && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6036,8 +6054,8 @@ const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset })
           id: getTrad("control-card.edit"),
           defaultMessage: "edit"
         }),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}),
-        onClick: onEditAsset
+        onClick: onEditAsset,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
       }
     )
   ] });
@@ -6053,7 +6071,7 @@ CarouselAssetActions.propTypes = {
   onEditAsset: PropTypes__default.default.func,
   onDeleteAsset: PropTypes__default.default.func
 };
-const TextAlignTypography = styled__default.default(designSystem.Typography)`
+const TextAlignTypography = styledComponents.styled(designSystem.Typography)`
   align-items: center;
 `;
 const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
@@ -6096,7 +6114,7 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
       alignItems: "center",
       height: "100%",
       width: "100%",
-      as: "button",
+      tag: "button",
       type: "button",
       disabled,
       onClick,
@@ -6123,7 +6141,7 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
             fontWeight: "bold",
             textColor: "neutral600",
             style: { textAlign: "center" },
-            as: "span",
+            tag: "span",
             children: formatMessage({
               id: getTrad("mediaLibraryInput.placeholder"),
               defaultMessage: "Click to add an asset or drag and drop one in this area"
@@ -6460,7 +6478,6 @@ MediaLibraryInput.propTypes = {
   name: PropTypes__default.default.string.isRequired,
   required: PropTypes__default.default.bool
 };
-const PluginIcon = () => /* @__PURE__ */ jsxRuntime.jsx(icons.Images, {});
 const prefixPluginTranslations = (trad, pluginId2) => {
   if (!pluginId2) {
     throw new TypeError("pluginId can't be empty");
@@ -6475,13 +6492,14 @@ const index = {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: icons.Images,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => Promise.resolve().then(() => require("./index-BNV9vUuq.js"))
+      Component: () => Promise.resolve().then(() => require("./index-DwWG14v6.js")),
+      position: 4
     });
     app.addSettingsLink("global", {
       id: "media-library-settings",
@@ -6490,7 +6508,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => Promise.resolve().then(() => require("./index-DU4hcIHO.js")),
+      Component: () => Promise.resolve().then(() => require("./index-De1W-cb7.js")),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6559,4 +6577,4 @@ exports.useMediaLibraryPermissions = useMediaLibraryPermissions;
 exports.usePersistentState = usePersistentState;
 exports.useSelectionState = useSelectionState;
 exports.viewOptions = viewOptions;
-//# sourceMappingURL=index-CtyJq8P-.js.map
+//# sourceMappingURL=index-C7nlFYgw.js.map