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

package/dist/_chunks/{index-ZXpABToX.mjs → index-ASLx4V_D.mjs}

@@ -1,11 +1,12 @@
+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 { useEffect, useState, useRef, useMemo, useCallback, forwardRef, createElement, createContext, useContext, useLayoutEffect } from "react";
+import { useEffect, useState, useMemo, useRef, useCallback, forwardRef, createElement, createContext, useContext, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
-import { useNotification, useFetchClient, useRBAC, useTracking, ConfirmDialog, useQueryParams, Page, translatedErrors, useField } from "@strapi/admin/strapi-admin";
-import { useNotifyAT, Box, Grid, GridItem, Flex, Typography, ModalHeader, IconButton, ProgressBar, Badge, Menu, FocusTrap, VisuallyHidden, Button, ModalLayout, Loader, ModalFooter, ModalBody, TextInput, FieldLabel, 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, Initials, Avatar, Tbody, Tr, Td, BaseCheckbox, Table, Thead, Th, Tooltip, Tag, DateTimePicker, Popover, buttonFocusStyle, SearchForm, Searchbar, Divider, TabGroup, Tabs, Tab, TabPanels, TabPanel, Textarea, CarouselActions, CarouselInput, CarouselSlide } from "@strapi/design-system";
+import { useNotification, useFetchClient, useRBAC, useTracking, ConfirmDialog, useQueryParams, Layouts, Page, translatedErrors, useField } from "@strapi/admin/strapi-admin";
+import { useNotifyAT, Box, Grid, GridItem, Flex, Typography, ModalHeader, IconButton, ProgressBar, Badge, Menu, FocusTrap, VisuallyHidden, Button, ModalLayout, Loader, ModalFooter, ModalBody, 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, Initials, Avatar, Tbody, Tr, Td, BaseCheckbox, Table, Thead, Th, Tooltip, Tag, DateTimePicker, Popover, SearchForm, Searchbar, Divider, TabGroup, Tabs, Tab, TabPanels, TabPanel, Textarea, CarouselActions, CarouselInput, CarouselSlide } from "@strapi/design-system";
 import { useIntl } from "react-intl";
-import styled, { useTheme } from "styled-components";
+import { styled, useTheme } from "styled-components";
 import byteSize from "byte-size";
 import { intervalToDuration } from "date-fns";
 import { stringify } from "qs";
@@ -13,8 +14,6 @@ import { useQuery, useMutation, useQueryClient } from "react-query";
 import { Formik, Form } from "formik";
 import isEqual from "lodash/isEqual";
 import * as yup from "yup";
-import axios from "axios";
-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 ReactSelect, { components } from "react-select";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
@@ -33,7 +32,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.0.0-beta.5";
+const version = "5.0.0-beta.6";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -81,11 +80,10 @@ const scripts = {
   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.3",
+  "@strapi/icons": "2.0.0-beta.3",
+  "@strapi/provider-upload-local": "5.0.0-beta.6",
+  "@strapi/utils": "5.0.0-beta.6",
   "byte-size": "8.1.1",
   cropperjs: "1.6.1",
   "date-fns": "2.30.0",
@@ -107,9 +105,9 @@ const dependencies = {
   yup: "0.32.9"
 };
 const devDependencies = {
-  "@strapi/admin": "5.0.0-beta.5",
+  "@strapi/admin": "5.0.0-beta.6",
   "@strapi/pack-up": "5.0.0",
-  "@strapi/types": "5.0.0-beta.5",
+  "@strapi/types": "5.0.0-beta.6",
   "@testing-library/dom": "9.2.0",
   "@testing-library/react": "14.0.0",
   "@testing-library/user-event": "14.4.3",
@@ -124,14 +122,14 @@ const devDependencies = {
   react: "^18.2.0",
   "react-dom": "^18.2.0",
   "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",
@@ -875,7 +873,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) {
@@ -891,13 +889,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 = () => {
@@ -905,10 +897,11 @@ const useEditAsset = () => {
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
   const queryClient = useQueryClient();
-  const tokenRef = useRef(axios.CancelToken.source());
+  const abortController = new AbortController();
+  const signal = abortController.signal;
   const { post } = useFetchClient();
   const mutation = 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 });
@@ -928,9 +921,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(
@@ -1023,7 +1014,7 @@ const Option = ({ children, data, selectProps, ...props }) => {
           id: "app.utils.toggle",
           defaultMessage: "Toggle"
         }),
-        as: "button",
+        tag: "button",
         alignItems: "center",
         hasRadius: true,
         justifyContent: "center",
@@ -1166,7 +1157,7 @@ const IconBox = styled(Box)`
 `;
 const ClearIndicator = (props) => {
   const Component = components.ClearIndicator;
-  return /* @__PURE__ */ jsx(Component, { ...props, children: /* @__PURE__ */ jsx(IconBox, { as: "button", type: "button", children: /* @__PURE__ */ jsx(Cross, {}) }) });
+  return /* @__PURE__ */ jsx(Component, { ...props, children: /* @__PURE__ */ jsx(IconBox, { tag: "button", type: "button", children: /* @__PURE__ */ jsx(Cross, {}) }) });
 };
 const CarretBox = styled(IconBox)`
   display: flex;
@@ -1315,7 +1306,7 @@ SelectTree.propTypes = {
 };
 const DialogHeader = () => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
+  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
 };
 const QUALITY = 1;
 const useCropImg = () => {
@@ -1388,7 +1379,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);
@@ -1402,24 +1393,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] = useState(0);
-  const { formatMessage } = useIntl();
   const queryClient = useQueryClient();
-  const tokenRef = useRef(axios.CancelToken.source());
+  const abortController = new AbortController();
+  const signal = abortController.signal;
   const { post } = useFetchClient();
   const mutation = useMutation(
     ({ asset, folderId }) => {
-      return uploadAsset(asset, folderId, tokenRef.current, setProgress, post);
+      return uploadAsset(asset, folderId, signal, setProgress, post);
     },
     {
       onSuccess() {
@@ -1429,9 +1414,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,
@@ -1537,7 +1520,7 @@ const UploadProgress = ({ onCancel, progress, error }) => {
   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(CancelButton, { type: "button", onClick: onCancel, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "pi", as: "span", textColor: "inherit", children: formatMessage({
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "span", textColor: "inherit", children: formatMessage({
         id: "app.components.Button.cancel",
         defaultMessage: "Cancel"
       }) }),
@@ -1671,7 +1654,7 @@ const Wrapper$1 = styled.div`
 `;
 const ActionRow = styled(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(Flex)`
   z-index: 1;
@@ -1708,7 +1691,7 @@ const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
     ),
     /* @__PURE__ */ jsxs(Menu.Root, { children: [
       /* @__PURE__ */ jsxs(Trigger, { variant: "tertiary", paddingLeft: 2, paddingRight: 2, endIcon: null, children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
+        /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
           id: getTrad("control-card.crop"),
           defaultMessage: "Crop"
         }) }),
@@ -1930,7 +1913,7 @@ const PreviewBox = ({
           paddingLeft: 2,
           paddingRight: 2,
           justifyContent: "flex-end",
-          blurry: isInCroppingMode,
+          $blurry: isInCroppingMode,
           children: isInCroppingMode && width && height && /* @__PURE__ */ jsx(BadgeOverride, { background: "neutral900", color: "neutral0", children: width && height ? `${height}✕${width}` : "N/A" })
         }
       )
@@ -2171,54 +2154,64 @@ const EditAssetDialog = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
-                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__ */ jsx(
-                TextInput,
+              /* @__PURE__ */ jsxs(Field.Root, { name: "name", error: errors.name, children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                  id: getTrad("form.input.label.file-name"),
+                  defaultMessage: "File name"
+                }) }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    value: values.name,
+                    onChange: handleChange,
+                    disabled: formDisabled
+                  }
+                ),
+                /* @__PURE__ */ jsx(Field.Error, {})
+              ] }),
+              /* @__PURE__ */ jsxs(
+                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__ */ jsx(
-                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__ */ jsx(Field.Label, { children: formatMessage({
+                      id: getTrad("form.input.label.file-alt"),
+                      defaultMessage: "Alternative text"
+                    }) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: values.alternativeText,
+                        onChange: handleChange,
+                        disabled: formDisabled
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Field.Hint, {}),
+                    /* @__PURE__ */ jsx(Field.Error, {})
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-                /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "asset-folder", children: formatMessage({
+              /* @__PURE__ */ jsxs(Field.Root, { name: "caption", error: errors.caption, children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                  id: getTrad("form.input.label.file-caption"),
+                  defaultMessage: "Caption"
+                }) }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    value: values.caption,
+                    onChange: handleChange,
+                    disabled: formDisabled
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: /* @__PURE__ */ jsxs(Field.Root, { name: "parent", id: "asset-folder", children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
                   id: getTrad("form.input.label.file-location"),
                   defaultMessage: "Location"
                 }) }),
@@ -2238,7 +2231,7 @@ const EditAssetDialog = ({
                     ariaErrorMessage: "folder-parent-error"
                   }
                 )
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
               "button",
@@ -2356,7 +2349,7 @@ const useEditFolder = () => {
 };
 const EditFolderModalHeader = ({ isEditing }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage(
+  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage(
     isEditing ? {
       id: getTrad("modal.folder.edit.title"),
       defaultMessage: "Edit folder"
@@ -2505,22 +2498,23 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsx(
-              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__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-              /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "folder-parent", children: formatMessage({
+            /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, 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(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Field.Root, { id: "folder-parent", children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
                 id: getTrad("form.input.label.folder-location"),
                 defaultMessage: "Location"
               }) }),
@@ -2545,7 +2539,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 Typography,
                 {
                   variant: "pi",
-                  as: "p",
+                  tag: "p",
                   id: "folder-parent-error",
                   textColor: "danger600",
                   children: errors.parent
@@ -2713,7 +2707,7 @@ const AssetCardBase = ({
     ] }),
     /* @__PURE__ */ jsxs(CardBody, { children: [
       /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { as: "h2", children: name2 }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { tag: "h2", children: name2 }) }),
         /* @__PURE__ */ jsxs(CardSubtitle, { children: [
           /* @__PURE__ */ jsx(Extension$1, { children: extension }),
           subtitle
@@ -2863,7 +2857,7 @@ const VideoPreview = ({ url, mime, onLoadDuration, alt, ...props }) => {
       return;
     video.play();
   };
-  return /* @__PURE__ */ createElement(Box, { as: "figure", ...props, key: url }, /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ createElement(Box, { tag: "figure", ...props, key: url }, /* @__PURE__ */ jsx(
     "video",
     {
       muted: true,
@@ -2873,7 +2867,7 @@ const VideoPreview = ({ url, mime, onLoadDuration, alt, ...props }) => {
       onTimeUpdate: handleTimeUpdate,
       children: /* @__PURE__ */ jsx("source", { type: mime })
     }
-  ), /* @__PURE__ */ jsx(VisuallyHidden, { as: "figcaption", children: alt }));
+  ), /* @__PURE__ */ jsx(VisuallyHidden, { tag: "figcaption", children: alt }));
 };
 VideoPreview.defaultProps = {
   onLoadDuration() {
@@ -3022,7 +3016,7 @@ const AssetGridList = ({
   title
 }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
-    title && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
+    title && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
     /* @__PURE__ */ jsx(Grid, { gap: 4, children: assets.map((asset, index2) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
@@ -3100,7 +3094,7 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
             return /* @__PURE__ */ jsx(
               MenuItem,
               {
-                as: "button",
+                tag: "button",
                 type: "button",
                 onClick: () => onChangeFolder(ascendant.id, ascendant.path),
                 children: ascendant.label
@@ -3112,7 +3106,7 @@ const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }
             folder: ascendant?.id,
             folderPath: ascendant?.path
           });
-          return /* @__PURE__ */ jsx(MenuItem, { isLink: true, as: NavLink, to: url, children: ascendant.label }, ascendant.id);
+          return /* @__PURE__ */ jsx(MenuItem, { isLink: true, tag: NavLink, to: url, children: ascendant.label }, ascendant.id);
         })
       ]
     }
@@ -3147,7 +3141,7 @@ const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })
       return /* @__PURE__ */ jsx(
         CrumbLink,
         {
-          as: onChangeFolder ? "button" : NavLink,
+          tag: onChangeFolder ? "button" : NavLink,
           type: onChangeFolder && "button",
           to: onChangeFolder ? void 0 : crumb.href,
           onClick: onChangeFolder && (() => onChangeFolder(crumb.id, crumb.path)),
@@ -3183,21 +3177,12 @@ const EmptyAssetCard = styled(Box)`
   );
   opacity: 0.33;
 `;
-const GridColSize = {
-  S: 180,
-  M: 250
-};
 const PlaceholderSize = {
   S: 138,
   M: 234
 };
-const GridLayout = styled(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__ */ jsx(GridLayout, { size, children: Array(count).fill(null).map((_, idx) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Layouts.Grid, { size, children: Array(count).fill(null).map((_, idx) => /* @__PURE__ */ jsx(
     EmptyAssetCard,
     {
       height: `${PlaceholderSize[size]}px`,
@@ -3216,7 +3201,7 @@ const EmptyAssets = ({ icon: Icon = EmptyDocuments, content, action, size, count
     /* @__PURE__ */ jsx(Box, { position: "absolute", top: 11, width: "100%", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 4, textAlign: "center", children: [
       /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 6, children: [
         /* @__PURE__ */ jsx(Icon, { width: "160px", height: "88px" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "p", textColor: "neutral600", children: content })
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "p", textColor: "neutral600", children: content })
       ] }),
       action
     ] }) })
@@ -3283,7 +3268,7 @@ const FolderCard = forwardRef(
         FauxClickWrapper,
         {
           to: to || void 0,
-          as: to ? NavLink : "button",
+          tag: to ? NavLink : "button",
           type: to ? void 0 : "button",
           onClick,
           tabIndex: -1,
@@ -3375,14 +3360,14 @@ const FolderCardBodyAction = ({ to, ...props }) => {
       BoxTextDecoration,
       {
         padding: 1,
-        as: NavLink,
+        tag: NavLink,
         maxWidth: "100%",
         to,
         ...props
       }
     );
   }
-  return /* @__PURE__ */ jsx(BoxOutline, { padding: 1, as: "button", type: "button", maxWidth: "100%", ...props });
+  return /* @__PURE__ */ jsx(BoxOutline, { padding: 1, tag: "button", type: "button", maxWidth: "100%", ...props });
 };
 FolderCardBodyAction.defaultProps = {
   to: void 0
@@ -3392,7 +3377,7 @@ FolderCardBodyAction.propTypes = {
 };
 const FolderGridList = ({ title, children }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
-    title && /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
+    title && /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
     /* @__PURE__ */ jsx(Grid, { gap: 4, children })
   ] });
 };
@@ -3596,7 +3581,7 @@ const TableRows = ({
         contentType === "folder" && /* @__PURE__ */ jsx(
           IconButton,
           {
-            as: folderURL ? Link$1 : void 0,
+            tag: folderURL ? Link$1 : void 0,
             label: formatMessage({
               id: getTrad("list.folders.link-label"),
               defaultMessage: "Access folder"
@@ -3697,7 +3682,7 @@ const TableList = ({
               Typography,
               {
                 onClick: () => handleClickSort(isSorted, name2),
-                as: isSorted ? "span" : "button",
+                tag: isSorted ? "span" : "button",
                 label: !isSorted ? sortLabel : "",
                 textColor: "neutral600",
                 variant: "sigma",
@@ -4263,7 +4248,7 @@ const PageSize = ({ onChangePageSize, pageSize }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", as: "label", htmlFor: "page-size", children: formatMessage({
+    /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", tag: "label", htmlFor: "page-size", children: formatMessage({
       id: "components.PageFooter.select",
       defaultMessage: "Entries per page"
     }) }) })
@@ -4281,16 +4266,44 @@ const PaginationText = styled(Typography)`
 const LinkWrapper = 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;
 
-  ${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(LinkWrapper)`
-  color: ${({ theme, active }) => active ? theme.colors.primary700 : theme.colors.neutral800};
-  background: ${({ theme, active }) => active ? theme.colors.neutral0 : void 0};
+  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};
@@ -4335,12 +4348,12 @@ const NextLink = ({ children, ...props }) => {
 const PageLink = ({ number, children, ...props }) => {
   const { activePage } = usePagination();
   const isActive = activePage === number;
-  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(PageLinkWrapper, { ...props, active: isActive, children: [
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(PageLinkWrapper, { ...props, $active: isActive, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { children }),
     /* @__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, as: "div", children: [
+const Dots = ({ children, ...props }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(DotsWrapper, { ...props, tag: "div", children: [
   /* @__PURE__ */ jsx(VisuallyHidden, { children }),
   /* @__PURE__ */ jsx(PaginationText, { "aria-hidden": true, small: true, children: "…" })
 ] }) });
@@ -4358,7 +4371,7 @@ Dots.propTypes = {
 };
 const Pagination = ({ children, label, activePage, pageCount }) => {
   const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
-  return /* @__PURE__ */ jsx(PaginationContext.Provider, { value: paginationValue, children: /* @__PURE__ */ jsx(Box, { as: "nav", "aria-label": label, children: /* @__PURE__ */ jsx(Flex, { as: "ul", gap: 1, children }) }) });
+  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"
@@ -4694,7 +4707,7 @@ const BrowseStep = ({
       Breadcrumbs,
       {
         onChangeFolder,
-        as: "nav",
+        tag: "nav",
         label: formatMessage({
           id: getTrad("header.breadcrumbs.nav.label"),
           defaultMessage: "Folders navigation"
@@ -4780,7 +4793,7 @@ const BrowseStep = ({
                   FolderCardBodyAction,
                   {
                     onClick: () => handleClickFolderCard(folder.id, folder.path),
-                    children: /* @__PURE__ */ jsxs(Flex, { as: "h2", direction: "column", alignItems: "start", maxWidth: "100%", children: [
+                    children: /* @__PURE__ */ jsxs(Flex, { tag: "h2", direction: "column", alignItems: "start", maxWidth: "100%", children: [
                       /* @__PURE__ */ jsxs(TypographyMaxWidth, { fontWeight: "semiBold", ellipsis: true, children: [
                         folder.name,
                         /* @__PURE__ */ jsx(VisuallyHidden, { children: "-" })
@@ -4788,7 +4801,7 @@ const BrowseStep = ({
                       /* @__PURE__ */ jsx(
                         TypographyMaxWidth,
                         {
-                          as: "span",
+                          tag: "span",
                           textColor: "neutral600",
                           variant: "pi",
                           ellipsis: true,
@@ -5290,14 +5303,14 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
         onDrop: handleDrop,
         children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxs(Wrapper, { children: [
           /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(PlusCircle, { "aria-hidden": true, width: "3.2rem", height: "3.2rem" }) }),
-          /* @__PURE__ */ jsx(Box, { paddingTop: 3, paddingBottom: 5, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral600", as: "span", children: formatMessage({
+          /* @__PURE__ */ jsx(Box, { paddingTop: 3, paddingBottom: 5, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral600", tag: "span", children: formatMessage({
             id: getTrad("input.label"),
             defaultMessage: "Drag & Drop here or"
           }) }) }),
           /* @__PURE__ */ jsx(
             OpaqueBox,
             {
-              as: "input",
+              tag: "input",
               position: "absolute",
               left: 0,
               right: 0,
@@ -5438,18 +5451,20 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
       validationSchema: urlSchema,
       validateOnChange: false,
       children: ({ values, errors, handleChange }) => /* @__PURE__ */ jsxs(Form, { noValidate: true, children: [
-        /* @__PURE__ */ jsx(Box, { paddingLeft: 8, paddingRight: 8, paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsx(
-          Textarea,
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 8, paddingRight: 8, paddingBottom: 6, paddingTop: 6, children: /* @__PURE__ */ jsxs(
+          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__ */ jsx(Field.Label, { children: formatMessage({ id: getTrad("input.url.label"), defaultMessage: "URL" }) }),
+              /* @__PURE__ */ jsx(Textarea, { onChange: handleChange, value: values.urls }),
+              /* @__PURE__ */ jsx(Field.Hint, {}),
+              /* @__PURE__ */ jsx(Field.Error, {})
+            ]
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -5477,7 +5492,7 @@ FromUrlForm.propTypes = {
 const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
@@ -5591,7 +5606,7 @@ const UploadingAssetCard = ({
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(UploadProgressWrapper, { children: /* @__PURE__ */ jsx(UploadProgress, { error, onCancel: handleCancel, progress }) }) }),
       /* @__PURE__ */ jsxs(CardBody, { children: [
         /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { as: "h2", children: asset.name }) }),
+          /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(CardTitle, { tag: "h2", 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 }) })
@@ -5679,7 +5694,7 @@ const PendingAssetStep = ({
     }
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
@@ -5960,7 +5975,7 @@ const CarouselAsset = ({ asset }) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
-        as: "img",
+        tag: "img",
         maxHeight: "100%",
         maxWidth: "100%",
         src: createAssetUrl(asset, true),
@@ -6066,7 +6081,7 @@ const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
       alignItems: "center",
       height: "100%",
       width: "100%",
-      as: "button",
+      tag: "button",
       type: "button",
       disabled,
       onClick,
@@ -6093,7 +6108,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"
@@ -6430,7 +6445,6 @@ MediaLibraryInput.propTypes = {
   name: PropTypes.string.isRequired,
   required: PropTypes.bool
 };
-const PluginIcon = () => /* @__PURE__ */ jsx(Images, {});
 const prefixPluginTranslations = (trad, pluginId2) => {
   if (!pluginId2) {
     throw new TypeError("pluginId can't be empty");
@@ -6445,13 +6459,13 @@ const index = {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: Images,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-BI7qD8h6.mjs")
+      Component: () => import("./index-2C3ZYD4e.mjs")
     });
     app.addSettingsLink("global", {
       id: "media-library-settings",
@@ -6460,7 +6474,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => import("./index-BL34bU2o.mjs"),
+      Component: () => import("./index-fmt8afwE.mjs"),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6531,4 +6545,4 @@ export {
   FolderCardBodyAction as y,
   AssetGridList as z
 };
-//# sourceMappingURL=index-ZXpABToX.mjs.map
+//# sourceMappingURL=index-ASLx4V_D.mjs.map