@strapi/upload 5.0.0-beta.9 → 5.0.0-rc.1

package/dist/_chunks/{index-DmPsR26u.mjs → index-12OzcF7r.mjs}

@@ -4,7 +4,7 @@ import * as React 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, Layouts, Page, translatedErrors, useField } from "@strapi/admin/strapi-admin";
-import { useNotifyAT, Box, Grid, GridItem, Flex, Typography, ModalHeader, IconButton, ProgressBar, Badge, Menu, FocusTrap, Button, VisuallyHidden, 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 { useNotifyAT, Box, Grid, Flex, Typography, Modal, IconButton, ProgressBar, Dialog, Badge, Menu, FocusTrap, Button, VisuallyHidden, Loader, Field, TextInput, CardAction, Card as Card$1, CardHeader, CardCheckbox, CardBody, CardContent, CardTitle, CardSubtitle, CardBadge, CardAsset as CardAsset$2, CardTimer, KeyboardNavigable, CrumbSimpleMenu, MenuItem, Breadcrumbs as Breadcrumbs$1, CrumbLink, Crumb, SingleSelect, SingleSelectOption, Avatar, Tbody, Tr, Td, Checkbox, Table, Thead, Th, Tooltip, Tag, DateTimePicker, Popover, SearchForm, Searchbar, Divider, Tabs, Textarea, CarouselActions, CarouselInput, CarouselSlide } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { styled, useTheme } from "styled-components";
 import byteSize from "byte-size";
@@ -32,7 +32,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.0.0-beta.8";
+const version = "5.0.0-rc.0";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -77,10 +77,10 @@ const scripts = {
   watch: "pack-up watch"
 };
 const dependencies = {
-  "@strapi/design-system": "2.0.0-beta.4",
-  "@strapi/icons": "2.0.0-beta.4",
-  "@strapi/provider-upload-local": "5.0.0-beta.8",
-  "@strapi/utils": "5.0.0-beta.8",
+  "@strapi/design-system": "2.0.0-beta.6",
+  "@strapi/icons": "2.0.0-beta.6",
+  "@strapi/provider-upload-local": "5.0.0-rc.0",
+  "@strapi/utils": "5.0.0-rc.0",
   "byte-size": "8.1.1",
   cropperjs: "1.6.1",
   "date-fns": "2.30.0",
@@ -102,9 +102,9 @@ const dependencies = {
   yup: "0.32.9"
 };
 const devDependencies = {
-  "@strapi/admin": "5.0.0-beta.8",
+  "@strapi/admin": "5.0.0-rc.0",
   "@strapi/pack-up": "5.0.0",
-  "@strapi/types": "5.0.0-beta.8",
+  "@strapi/types": "5.0.0-rc.0",
   "@testing-library/dom": "10.1.0",
   "@testing-library/react": "15.0.7",
   "@testing-library/user-event": "14.5.2",
@@ -353,20 +353,20 @@ const ParentFolderShape = {
 };
 ParentFolderShape.parent = PropTypes.shape(ParentFolderShape);
 const FolderShape = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.number,
   children: PropTypes.shape({
     count: PropTypes.number.isRequired
   }),
-  createdAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string,
   createdBy: PropTypes.shape(),
   files: PropTypes.shape({
     count: PropTypes.number.isRequired
   }),
-  name: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  updatedAt: PropTypes.string,
   updatedBy: PropTypes.shape(),
-  pathId: PropTypes.number.isRequired,
-  path: PropTypes.string.isRequired
+  pathId: PropTypes.number,
+  path: PropTypes.string
 };
 FolderShape.parent = PropTypes.shape(ParentFolderShape);
 const FolderDefinition = PropTypes.shape(FolderShape);
@@ -971,7 +971,7 @@ const ContextInfo = ({ blocks }) => {
       paddingTop: 4,
       paddingBottom: 4,
       background: "neutral100",
-      children: /* @__PURE__ */ jsx(Grid, { gap: 4, children: blocks.map(({ label, value }) => /* @__PURE__ */ jsx(GridItem, { col: 6, xs: 12, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+      children: /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: blocks.map(({ label, value }) => /* @__PURE__ */ jsx(Grid.Item, { col: 6, xs: 12, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
         /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: value })
       ] }) }, label)) })
@@ -1214,6 +1214,11 @@ const getSelectStyles = (theme, error) => {
       color: theme.colors.neutral800,
       gridTemplateColumns: "0 100%"
     }),
+    menuPortal: (base) => ({
+      ...base,
+      zIndex: theme.zIndices.dialog,
+      pointerEvents: "auto"
+    }),
     menu(base) {
       return {
         ...base,
@@ -1235,10 +1240,6 @@ const getSelectStyles = (theme, error) => {
       paddingRight: theme.spaces[1],
       paddingBottom: theme.spaces[1]
     }),
-    menuPortal: (base) => ({
-      ...base,
-      zIndex: 100
-    }),
     option(base, state) {
       let backgroundColor = base.backgroundColor;
       if (state.isFocused || state.isSelected) {
@@ -1303,7 +1304,7 @@ SelectTree.propTypes = {
 };
 const DialogHeader = () => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
+  return /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
 };
 const QUALITY = 1;
 const useCropImg = () => {
@@ -1561,15 +1562,19 @@ const useRemoveAsset = (onSuccess) => {
   };
   return { ...mutation, removeAsset };
 };
-const RemoveAssetDialog = ({ onClose, asset }) => {
-  const { removeAsset } = useRemoveAsset(() => onClose(null));
-  const handleConfirm = async () => {
+const RemoveAssetDialog = ({ open, onClose, asset }) => {
+  const { removeAsset } = useRemoveAsset(() => {
+    onClose(null);
+  });
+  const handleConfirm = async (event) => {
+    event.preventDefault();
     await removeAsset(asset.id);
   };
-  return /* @__PURE__ */ jsx(ConfirmDialog, { isOpen: true, onClose, onConfirm: handleConfirm });
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleConfirm }) });
 };
 RemoveAssetDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.number,
     height: PropTypes.number,
@@ -1629,7 +1634,8 @@ const RelativeBox = styled(Box)`
 `;
 const Wrapper$1 = styled.div`
   position: relative;
-  text-align: center;
+  display: flex;
+  justify-content: center;
   background: repeating-conic-gradient(
       ${({ theme }) => theme.colors.neutral100} 0% 25%,
       transparent 0% 50%
@@ -1674,6 +1680,7 @@ const UploadProgressWrapper$1 = styled.div`
 `;
 const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
   const { formatMessage } = useIntl();
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(FocusTrap, { onEscape: onCancel, children: /* @__PURE__ */ jsx(CroppingActionRow, { justifyContent: "flex-end", paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
     /* @__PURE__ */ jsx(
       IconButton,
@@ -1709,7 +1716,7 @@ const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
           )
         }
       ),
-      /* @__PURE__ */ jsxs(Menu.Content, { zIndex: 5, children: [
+      /* @__PURE__ */ jsxs(Menu.Content, { zIndex: theme.zIndices.dialog, children: [
         /* @__PURE__ */ jsx(Menu.Item, { onSelect: onValidate, children: formatMessage({
           id: getTrad("checkControl.crop-original"),
           defaultMessage: "Crop the original asset"
@@ -1922,9 +1929,10 @@ const PreviewBox = ({
         }
       )
     ] }),
-    showConfirmDialog && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       RemoveAssetDialog,
       {
+        open: showConfirmDialog,
         onClose: () => {
           setShowConfirmDialog(false);
           onDelete(null);
@@ -2002,7 +2010,7 @@ const fileInfoSchema = yup.object({
   caption: yup.string(),
   folder: yup.number()
 });
-const EditAssetDialog = ({
+const EditAssetContent = ({
   onClose,
   asset,
   canUpdate,
@@ -2075,18 +2083,13 @@ const EditAssetDialog = ({
     }
   };
   if (folderStructureIsLoading) {
-    return /* @__PURE__ */ jsxs(ModalLayout, { onClose: () => handleClose(), labelledBy: "title", children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(DialogHeader, {}),
       /* @__PURE__ */ jsx(LoadingBody$1, { minHeight: "60vh", justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsx(Loader, { children: formatMessage({
         id: getTrad("content.isLoading"),
         defaultMessage: "Content is loading."
       }) }) }),
-      /* @__PURE__ */ jsx(
-        ModalFooter,
-        {
-          startActions: /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(), variant: "tertiary", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) })
-        }
-      )
+      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(), variant: "tertiary", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }) })
     ] });
   }
   return /* @__PURE__ */ jsx(
@@ -2096,10 +2099,10 @@ const EditAssetDialog = ({
       validateOnChange: false,
       onSubmit: handleSubmit,
       initialValues: initialFormData,
-      children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxs(ModalLayout, { onClose: () => handleClose(values), labelledBy: "title", children: [
+      children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DialogHeader, {}),
-        /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
-          /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsx(
             PreviewBox,
             {
               asset,
@@ -2114,7 +2117,7 @@ const EditAssetDialog = ({
               trackedLocation
             }
           ) }),
-          /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Form, { noValidate: true, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Form, { noValidate: true, children: [
             /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
               /* @__PURE__ */ jsx(
                 ContextInfo,
@@ -2249,44 +2252,64 @@ const EditAssetDialog = ({
             ) })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx(
-          ModalFooter,
-          {
-            startActions: /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
-            endActions: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                ReplaceMediaButton,
-                {
-                  onSelectMedia: setReplacementFile,
-                  acceptedMime: asset.mime,
-                  disabled: formDisabled,
-                  trackedLocation
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => submitButtonRef.current.click(),
-                  loading: isLoading,
-                  disabled: formDisabled,
-                  children: formatMessage({ id: "global.finish", defaultMessage: "Finish" })
-                }
-              )
-            ] })
-          }
-        )
+        /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsx(
+              ReplaceMediaButton,
+              {
+                onSelectMedia: setReplacementFile,
+                acceptedMime: asset.mime,
+                disabled: formDisabled,
+                trackedLocation
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => submitButtonRef.current.click(),
+                loading: isLoading,
+                disabled: formDisabled,
+                children: formatMessage({ id: "global.finish", defaultMessage: "Finish" })
+              }
+            )
+          ] })
+        ] })
       ] })
     }
   );
 };
+EditAssetContent.defaultProps = {
+  asset: {},
+  trackedLocation: void 0,
+  canUpdate: false,
+  canCopyLink: false,
+  canDownload: false
+};
+EditAssetContent.propTypes = {
+  asset: AssetDefinition,
+  canUpdate: PropTypes.bool,
+  canCopyLink: PropTypes.bool,
+  canDownload: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string
+};
+const EditAssetDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(EditAssetContent, { onClose, ...restProps }) }) });
+};
 EditAssetDialog.defaultProps = {
-  trackedLocation: void 0
+  asset: {},
+  trackedLocation: void 0,
+  canUpdate: false,
+  canCopyLink: false,
+  canDownload: false
 };
 EditAssetDialog.propTypes = {
-  asset: AssetDefinition.isRequired,
-  canUpdate: PropTypes.bool.isRequired,
-  canCopyLink: PropTypes.bool.isRequired,
-  canDownload: PropTypes.bool.isRequired,
+  asset: AssetDefinition,
+  canUpdate: PropTypes.bool,
+  canCopyLink: PropTypes.bool,
+  canDownload: PropTypes.bool,
+  open: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   trackedLocation: PropTypes.string
 };
@@ -2353,7 +2376,7 @@ const useEditFolder = () => {
 };
 const EditFolderModalHeader = ({ isEditing }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage(
+  return /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage(
     isEditing ? {
       id: getTrad("modal.folder.edit.title"),
       defaultMessage: "Edit folder"
@@ -2369,11 +2392,12 @@ EditFolderModalHeader.defaultProps = {
 EditFolderModalHeader.propTypes = {
   isEditing: PropTypes.bool
 };
-const RemoveFolderDialog = ({ onClose, onConfirm }) => {
-  return /* @__PURE__ */ jsx(ConfirmDialog, { isOpen: true, onClose, onConfirm });
+const RemoveFolderDialog = ({ onClose, onConfirm, open }) => {
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm }) });
 };
 RemoveFolderDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
   onConfirm: PropTypes.func.isRequired
 };
 const folderSchema = yup.object({
@@ -2383,7 +2407,7 @@ const folderSchema = yup.object({
     value: yup.number().nullable(true)
   }).nullable(true)
 });
-const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
+const EditFolderContent = ({ onClose, folder, location, parentFolderId }) => {
   const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
     enabled: true
   });
@@ -2453,15 +2477,15 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
     onClose();
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxs(ModalLayout, { onClose: () => onClose(), labelledBy: "title", children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(EditFolderModalHeader, { isEditing }),
-      /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsx(Loader, { children: formatMessage({
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsx(Loader, { children: formatMessage({
         id: getTrad("content.isLoading"),
         defaultMessage: "Content is loading."
       }) }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs(ModalLayout, { onClose: () => onClose(), labelledBy: "title", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Formik,
       {
@@ -2471,8 +2495,8 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
         initialValues: initialFormData,
         children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxs(Form, { noValidate: true, children: [
           /* @__PURE__ */ jsx(EditFolderModalHeader, { isEditing }),
-          /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
-            isEditing && /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 12, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+            isEditing && /* @__PURE__ */ jsx(Grid.Item, { xs: 12, col: 12, children: /* @__PURE__ */ jsx(
               ContextInfo,
               {
                 blocks: [
@@ -2502,7 +2526,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Field.Root, { name: "name", error: errors.name, children: [
+            /* @__PURE__ */ jsx(Grid.Item, { 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"
@@ -2517,7 +2541,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
               ),
               /* @__PURE__ */ jsx(Field.Error, {})
             ] }) }),
-            /* @__PURE__ */ jsx(GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxs(Field.Root, { id: "folder-parent", children: [
+            /* @__PURE__ */ jsx(Grid.Item, { 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"
@@ -2551,46 +2575,64 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
               )
             ] }) })
           ] }) }),
-          /* @__PURE__ */ jsx(
-            ModalFooter,
-            {
-              startActions: /* @__PURE__ */ jsx(Button, { onClick: () => onClose(), variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
-              endActions: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-                isEditing && canUpdate && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "danger-light",
-                    onClick: () => setShowConfirmDialog(true),
-                    name: "delete",
-                    disabled: !canUpdate || isEditFolderLoading,
-                    children: formatMessage({
-                      id: getTrad("modal.folder.create.delete"),
-                      defaultMessage: "Delete folder"
-                    })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    name: "submit",
-                    loading: isEditFolderLoading,
-                    disabled: formDisabled,
-                    type: "submit",
-                    children: formatMessage(
-                      isEditing ? { id: getTrad("modal.folder.edit.submit"), defaultMessage: "Save" } : { id: getTrad("modal.folder.create.submit"), defaultMessage: "Create" }
-                    )
-                  }
-                )
-              ] })
-            }
-          )
+          /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => onClose(), variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+              isEditing && canUpdate && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "danger-light",
+                  onClick: () => setShowConfirmDialog(true),
+                  name: "delete",
+                  disabled: !canUpdate || isEditFolderLoading,
+                  children: formatMessage({
+                    id: getTrad("modal.folder.create.delete"),
+                    defaultMessage: "Delete folder"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  name: "submit",
+                  loading: isEditFolderLoading,
+                  disabled: formDisabled,
+                  type: "submit",
+                  children: formatMessage(
+                    isEditing ? { id: getTrad("modal.folder.edit.submit"), defaultMessage: "Save" } : { id: getTrad("modal.folder.create.submit"), defaultMessage: "Create" }
+                  )
+                }
+              )
+            ] })
+          ] })
         ] })
       }
     ),
-    showConfirmDialog && /* @__PURE__ */ jsx(RemoveFolderDialog, { onClose: () => setShowConfirmDialog(false), onConfirm: handleDelete })
+    /* @__PURE__ */ jsx(
+      RemoveFolderDialog,
+      {
+        open: showConfirmDialog,
+        onClose: () => setShowConfirmDialog(false),
+        onConfirm: handleDelete
+      }
+    )
   ] });
 };
+EditFolderContent.defaultProps = {
+  folder: void 0,
+  location: void 0,
+  parentFolderId: null
+};
+EditFolderContent.propTypes = {
+  folder: FolderDefinition,
+  location: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  parentFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+const EditFolderDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(EditFolderContent, { ...restProps, onClose }) }) });
+};
 EditFolderDialog.defaultProps = {
   folder: void 0,
   location: void 0,
@@ -2599,6 +2641,7 @@ EditFolderDialog.defaultProps = {
 EditFolderDialog.propTypes = {
   folder: FolderDefinition,
   location: PropTypes.string,
+  open: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   parentFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
@@ -2685,7 +2728,7 @@ const AssetCardBase = ({
   return /* @__PURE__ */ jsxs(CardContainer, { role: "button", height: "100%", tabIndex: -1, onClick: handleClick, children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       isSelectable2 && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      /* @__PURE__ */ jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsx(CardCheckbox, { value: selected, onValueChange: onSelect }) }),
+      /* @__PURE__ */ jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsx(CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
       (onRemove || onEdit) && /* @__PURE__ */ jsxs(CardActionsContainer, { onClick: handlePropagationClick, position: "end", children: [
         onRemove && /* @__PURE__ */ jsx(
           IconButton,
@@ -3021,10 +3064,10 @@ const AssetGridList = ({
 }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
-    /* @__PURE__ */ jsx(Grid, { gap: 4, children: assets.map((asset, index2) => {
+    /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: assets.map((asset, index2) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
-        return /* @__PURE__ */ jsx(GridItem, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsx(
           AssetCard,
           {
             allowedTypes,
@@ -3036,7 +3079,7 @@ const AssetGridList = ({
           }
         ) }) }, asset.id);
       }
-      return /* @__PURE__ */ jsx(GridItem, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsx(
         AssetCard,
         {
           allowedTypes,
@@ -3259,7 +3302,7 @@ const Card = styled(Box)`
   &:hover,
   &:focus-within {
     ${CardActionDisplay} {
-      display: ${({ isCardActions }) => isCardActions ? "block" : ""};
+      display: ${({ $isCardActions }) => $isCardActions ? "block" : ""};
     }
   }
 `;
@@ -3267,7 +3310,7 @@ const FolderCard = forwardRef(
   ({ children, id: id2, startAction, cardActions, ariaLabel, onClick, to, ...props }, ref) => {
     const generatedId = useId(id2);
     const fodlerCtxValue = useMemo(() => ({ id: generatedId }), [generatedId]);
-    return /* @__PURE__ */ jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxs(Card, { position: "relative", tabIndex: 0, isCardActions: !!cardActions, ref, ...props, children: [
+    return /* @__PURE__ */ jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxs(Card, { position: "relative", tabIndex: 0, $isCardActions: !!cardActions, ref, ...props, children: [
       /* @__PURE__ */ jsx(
         FauxClickWrapper,
         {
@@ -3382,7 +3425,7 @@ FolderCardBodyAction.propTypes = {
 const FolderGridList = ({ title, children }) => {
   return /* @__PURE__ */ jsxs(KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
-    /* @__PURE__ */ jsx(Grid, { gap: 4, children })
+    /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children })
   ] });
 };
 FolderGridList.defaultProps = {
@@ -3435,12 +3478,22 @@ const VideoPreviewWrapper$1 = styled(Box)`
 `;
 const PreviewCell = ({ type, content }) => {
   if (type === "folder") {
-    return /* @__PURE__ */ jsx(Initials, { background: "secondary100", textColor: "secondary600", children: /* @__PURE__ */ jsx(Folder, { fill: "secondary500", width: "1.6rem", height: "1.6rem" }) });
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        justifyContent: "center",
+        background: "secondary100",
+        width: "3.2rem",
+        height: "3.2rem",
+        borderRadius: "50%",
+        children: /* @__PURE__ */ jsx(Folder, { fill: "secondary500", width: "1.6rem", height: "1.6rem" })
+      }
+    );
   }
   const { alternativeText, ext, formats, mime, name: name2, url } = content;
   if (mime.includes(AssetType.Image)) {
     const mediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
-    return /* @__PURE__ */ jsx(Avatar, { src: mediaURL, alt: alternativeText, preview: true });
+    return /* @__PURE__ */ jsx(Avatar.Item, { src: mediaURL, alt: alternativeText, preview: true });
   }
   if (mime.includes(AssetType.Video)) {
     return /* @__PURE__ */ jsx(VideoPreviewWrapper$1, { children: /* @__PURE__ */ jsx(
@@ -3452,7 +3505,7 @@ const PreviewCell = ({ type, content }) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(Initials, { background: "secondary100", textColor: "secondary600", children: getFileExtension(ext) });
+  return /* @__PURE__ */ jsx(Box, { background: "secondary100", color: "secondary600", width: "3.2rem", height: "3.2rem", children: getFileExtension(ext) });
 };
 PreviewCell.propTypes = {
   content: PropTypes.shape({
@@ -3556,7 +3609,7 @@ const TableRows = ({
     );
     return /* @__PURE__ */ jsxs(Tr, { onClick: () => handleRowClickFn(element, contentType, id2, path), children: [
       /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-        BaseCheckbox,
+        Checkbox,
         {
           "aria-label": formatMessage(
             {
@@ -3566,7 +3619,7 @@ const TableRows = ({
             { name: name2 }
           ),
           disabled: !isSelectable2,
-          onValueChange: () => onSelectOne(element),
+          onCheckedChange: () => onSelectOne(element),
           checked: isSelected
         }
       ) }),
@@ -3650,16 +3703,15 @@ const TableList = ({
   return /* @__PURE__ */ jsxs(Table, { colCount: tableHeaders.length + 2, rowCount: assetCount + folderCount + 1, children: [
     /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
       /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
-        BaseCheckbox,
+        Checkbox,
         {
           "aria-label": formatMessage({
             id: getTrad("bulk.select.label"),
             defaultMessage: "Select all folders & assets"
           }),
           disabled: shouldDisableBulkSelect,
-          indeterminate: indeterminate && !shouldDisableBulkSelect,
-          onChange: (e) => onSelectAll(e, rows),
-          value: (assetCount > 0 || folderCount > 0) && selected.length === assetCount + folderCount
+          onCheckedChange: (checked) => onSelectAll(checked, rows),
+          checked: indeterminate && !shouldDisableBulkSelect ? "indeterminate" : (assetCount > 0 || folderCount > 0) && selected.length === assetCount + folderCount
         }
       ) }),
       tableHeaders.map(({ metadatas: { label, isSortable }, name: name2, key }) => {
@@ -3800,7 +3852,7 @@ const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
     id: `components.FilterOptions.FILTER_TYPES.${operator}`,
     defaultMessage: operator
   })} ${formattedValue}`;
-  return /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsx(Cross, {}), children: content }) });
+  return /* @__PURE__ */ jsx(Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsx(Cross, {}), padding: 1, children: content });
 };
 FilterTag.propTypes = {
   attribute: PropTypes.shape({
@@ -4007,7 +4059,7 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
       ];
   }
 };
-const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle, source }) => {
+const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
   const { formatMessage } = useIntl();
   const [modifiedData, setModifiedData] = useState({
     name: "createdAt",
@@ -4129,7 +4181,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
     onToggle();
   };
   const appliedFilter = displayedFilters2.find((filter) => filter.name === modifiedData.name);
-  return /* @__PURE__ */ jsx(Popover, { onDismiss: onToggle, source, padding: 3, spacing: 4, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, style: { minWidth: 184 }, children: [
+  return /* @__PURE__ */ jsx(Popover.Content, { sideOffset: 4, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Flex, { padding: 3, direction: "column", alignItems: "stretch", gap: 1, style: { minWidth: 184 }, children: [
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       SingleSelect,
       {
@@ -4184,34 +4236,20 @@ FilterPopover.propTypes = {
   ).isRequired,
   filters: PropTypes.array.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired
+  onToggle: PropTypes.func.isRequired
 };
 const Filters = ({ appliedFilters, onChangeFilters }) => {
-  const buttonRef = useRef(null);
-  const [isVisible, setVisible] = useState(false);
+  const [open, setOpen] = React.useState(false);
   const { formatMessage } = useIntl();
-  const toggleFilter = () => setVisible((prev) => !prev);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Filter, {}), size: "S", children: formatMessage({ id: "app.utils.filters", defaultMessage: "Filters" }) }) }),
     /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "tertiary",
-        ref: buttonRef,
-        startIcon: /* @__PURE__ */ jsx(Filter, {}),
-        onClick: toggleFilter,
-        size: "S",
-        children: formatMessage({ id: "app.utils.filters", defaultMessage: "Filters" })
-      }
-    ),
-    isVisible && /* @__PURE__ */ jsx(
       FilterPopover,
       {
+        onToggle: setOpen,
         displayedFilters,
         filters: appliedFilters,
-        onSubmit: onChangeFilters,
-        onToggle: toggleFilter,
-        source: buttonRef
+        onSubmit: onChangeFilters
       }
     ),
     appliedFilters && /* @__PURE__ */ jsx(
@@ -4667,15 +4705,14 @@ const BrowseStep = ({
             borderColor: "neutral200",
             height: "3.2rem",
             children: /* @__PURE__ */ jsx(
-              BaseCheckbox,
+              Checkbox,
               {
                 "aria-label": formatMessage({
                   id: getTrad("bulk.select.label"),
                   defaultMessage: "Select all assets"
                 }),
-                indeterminate: !areAllAssetSelected && hasSomeAssetSelected,
-                value: areAllAssetSelected,
-                onChange: onSelectAllAsset
+                checked: !areAllAssetSelected && hasSomeAssetSelected ? "indeterminate" : areAllAssetSelected,
+                onCheckedChange: onSelectAllAsset
               }
             )
           }
@@ -4776,7 +4813,7 @@ const BrowseStep = ({
             { count: folderCount }
           ) || "",
           children: folders.map((folder) => {
-            return /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsx(
               FolderCard,
               {
                 ariaLabel: folder.name,
@@ -4799,10 +4836,18 @@ const BrowseStep = ({
                   {
                     onClick: () => handleClickFolderCard(folder.id, folder.path),
                     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: "-" })
-                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        TypographyMaxWidth,
+                        {
+                          fontWeight: "semiBold",
+                          ellipsis: true,
+                          textColor: "neutral800",
+                          children: [
+                            folder.name,
+                            /* @__PURE__ */ jsx(VisuallyHidden, { children: "-" })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsx(
                         TypographyMaxWidth,
                         {
@@ -4900,13 +4945,10 @@ BrowseStep.propTypes = {
 };
 const DialogFooter = ({ onClose, onValidate }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(
-    ModalFooter,
-    {
-      startActions: /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
-      endActions: onValidate && /* @__PURE__ */ jsx(Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+    onValidate && /* @__PURE__ */ jsx(Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
+  ] });
 };
 DialogFooter.defaultProps = {
   onValidate: void 0
@@ -4955,7 +4997,7 @@ const LoadingBody = styled(Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
 `;
-const AssetDialog = ({
+const AssetContent = ({
   allowedTypes,
   folderId,
   onClose,
@@ -5006,9 +5048,6 @@ const AssetDialog = ({
     selectedAssets,
     { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple }
   ] = useSelectionState(["id"], initiallySelectedAssets);
-  const [initialSelectedTabIndex, setInitialSelectedTabIndex] = useState(
-    selectedAssets.length > 0 ? 1 : 0
-  );
   const handleSelectAllAssets = () => {
     const allowedAssets = getAllowedFiles(allowedTypes, assets);
     if (!multiple) {
@@ -5029,8 +5068,8 @@ const AssetDialog = ({
   const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
   const hasError = errorAssets || errorFolders;
   if (isLoading) {
-    return /* @__PURE__ */ jsxs(ModalLayout, { onClose, labelledBy: "asset-dialog-title", "aria-busy": true, children: [
-      /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage({
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5042,8 +5081,8 @@ const AssetDialog = ({
     ] });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsxs(ModalLayout, { onClose, labelledBy: "asset-dialog-title", children: [
-      /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage({
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5052,8 +5091,8 @@ const AssetDialog = ({
     ] });
   }
   if (!canRead) {
-    return /* @__PURE__ */ jsxs(ModalLayout, { onClose, labelledBy: "asset-dialog-title", children: [
-      /* @__PURE__ */ jsx(ModalHeader, { fontWeight: "bold", children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5063,7 +5102,7 @@ const AssetDialog = ({
   }
   if (assetToEdit) {
     return /* @__PURE__ */ jsx(
-      EditAssetDialog,
+      EditAssetContent,
       {
         onClose: () => setAssetToEdit(void 0),
         asset: assetToEdit,
@@ -5076,7 +5115,7 @@ const AssetDialog = ({
   }
   if (folderToEdit) {
     return /* @__PURE__ */ jsx(
-      EditFolderDialog,
+      EditFolderContent,
       {
         folder: folderToEdit,
         onClose: () => setFolderToEdit(void 0),
@@ -5095,101 +5134,112 @@ const AssetDialog = ({
     onChangeFolder(folderId2);
     onChangeFolderParam(folderId2, folderPath);
   };
-  return /* @__PURE__ */ jsxs(ModalLayout, { onClose, labelledBy: "asset-dialog-title", "aria-busy": isLoading, children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: formatMessage({
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsxs(
-      TabGroup,
-      {
-        label: formatMessage({
-          id: getTrad("tabs.title"),
-          defaultMessage: "How do you want to upload your assets?"
-        }),
-        variant: "simple",
-        initialSelectedTabIndex,
-        onTabChange: () => setInitialSelectedTabIndex(0),
-        children: [
-          /* @__PURE__ */ jsxs(Flex, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsxs(Tabs, { children: [
-              /* @__PURE__ */ jsx(Tab, { children: formatMessage({
-                id: getTrad("modal.nav.browse"),
-                defaultMessage: "Browse"
-              }) }),
-              /* @__PURE__ */ jsxs(Tab, { children: [
-                formatMessage({
-                  id: getTrad("modal.header.select-files"),
-                  defaultMessage: "Selected files"
-                }),
-                /* @__PURE__ */ jsx(Badge, { marginLeft: 2, children: selectedAssets.length })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "secondary",
-                  onClick: () => onAddFolder({ folderId: queryObject?.folder }),
-                  children: formatMessage({
-                    id: getTrad("modal.upload-list.sub-header.add-folder"),
-                    defaultMessage: "Add folder"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(Button, { onClick: () => onAddAsset({ folderId: queryObject?.folder }), children: formatMessage({
-                id: getTrad("modal.upload-list.sub-header.button"),
-                defaultMessage: "Add more assets"
-              }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsxs(TabPanels, { children: [
-            /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsx(
-              BrowseStep,
-              {
-                allowedTypes,
-                assets,
-                canCreate,
-                canRead,
-                folders,
-                onSelectAsset: handleSelectAsset,
-                selectedAssets,
-                multiple,
-                onSelectAllAsset: handleSelectAllAssets,
-                onEditAsset: setAssetToEdit,
-                onEditFolder: setFolderToEdit,
-                pagination,
-                queryObject,
-                onAddAsset,
-                onChangeFilters,
-                onChangeFolder: handleFolderChange,
-                onChangePage,
-                onChangePageSize,
-                onChangeSort,
-                onChangeSearch
-              }
-            ) }) }),
-            /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsx(
-              SelectedStep,
-              {
-                selectedAssets,
-                onSelectAsset: handleSelectAsset,
-                onReorderAsset: handleMoveItem
-              }
-            ) }) })
+    /* @__PURE__ */ jsxs(TabsRoot, { variant: "simple", defaultValue: selectedAssets.length > 0 ? "selected" : "browse", children: [
+      /* @__PURE__ */ jsxs(Flex, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs(Tabs.List, { children: [
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: "browse", children: formatMessage({
+            id: getTrad("modal.nav.browse"),
+            defaultMessage: "Browse"
+          }) }),
+          /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "selected", children: [
+            formatMessage({
+              id: getTrad("modal.header.select-files"),
+              defaultMessage: "Selected files"
+            }),
+            /* @__PURE__ */ jsx(Badge, { marginLeft: 2, children: selectedAssets.length })
           ] })
-        ]
-      }
-    ),
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => onAddFolder({ folderId: queryObject?.folder }),
+              children: formatMessage({
+                id: getTrad("modal.upload-list.sub-header.add-folder"),
+                defaultMessage: "Add folder"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: () => onAddAsset({ folderId: queryObject?.folder }), children: formatMessage({
+            id: getTrad("modal.upload-list.sub-header.button"),
+            defaultMessage: "Add more assets"
+          }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "browse", children: /* @__PURE__ */ jsx(
+          BrowseStep,
+          {
+            allowedTypes,
+            assets,
+            canCreate,
+            canRead,
+            folders,
+            onSelectAsset: handleSelectAsset,
+            selectedAssets,
+            multiple,
+            onSelectAllAsset: handleSelectAllAssets,
+            onEditAsset: setAssetToEdit,
+            onEditFolder: setFolderToEdit,
+            pagination,
+            queryObject,
+            onAddAsset,
+            onChangeFilters,
+            onChangeFolder: handleFolderChange,
+            onChangePage,
+            onChangePageSize,
+            onChangeSort,
+            onChangeSearch
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "selected", children: /* @__PURE__ */ jsx(
+          SelectedStep,
+          {
+            selectedAssets,
+            onSelectAsset: handleSelectAsset,
+            onReorderAsset: handleMoveItem
+          }
+        ) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(DialogFooter, { onClose, onValidate: () => onValidate(selectedAssets) })
   ] });
 };
+AssetContent.defaultProps = {
+  allowedTypes: [],
+  folderId: null,
+  initiallySelectedAssets: [],
+  multiple: false,
+  trackedLocation: void 0
+};
+AssetContent.propTypes = {
+  allowedTypes: PropTypes.arrayOf(PropTypes.string),
+  folderId: PropTypes.number,
+  initiallySelectedAssets: PropTypes.arrayOf(AssetDefinition),
+  multiple: PropTypes.bool,
+  onAddAsset: PropTypes.func.isRequired,
+  onAddFolder: PropTypes.func.isRequired,
+  onChangeFolder: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onValidate: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string
+};
+const AssetDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(AssetContent, { onClose, ...restProps }) }) });
+};
 AssetDialog.defaultProps = {
   allowedTypes: [],
   folderId: null,
   initiallySelectedAssets: [],
   multiple: false,
+  open: false,
   trackedLocation: void 0
 };
 AssetDialog.propTypes = {
@@ -5200,10 +5250,16 @@ AssetDialog.propTypes = {
   onAddAsset: PropTypes.func.isRequired,
   onAddFolder: PropTypes.func.isRequired,
   onChangeFolder: PropTypes.func.isRequired,
+  open: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onValidate: PropTypes.func.isRequired,
   trackedLocation: PropTypes.string
 };
+const TabsRoot = styled(Tabs.Root)`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
 const typeFromMime = (mime) => {
   if (mime.includes(AssetType.Image)) {
     return AssetType.Image;
@@ -5338,15 +5394,10 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
         ] }) })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(
-      ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({
-          id: "app.components.Button.cancel",
-          defaultMessage: "cancel"
-        }) })
-      }
-    )
+    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({
+      id: "app.components.Button.cancel",
+      defaultMessage: "cancel"
+    }) }) })
   ] });
 };
 FromComputerForm.defaultProps = {
@@ -5472,16 +5523,13 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          ModalFooter,
-          {
-            startActions: /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
-            endActions: /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: formatMessage({
-              id: getTrad("button.next"),
-              defaultMessage: "Next"
-            }) })
-          }
-        )
+        /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: formatMessage({
+            id: getTrad("button.next"),
+            defaultMessage: "Next"
+          }) })
+        ] })
       ] })
     }
   );
@@ -5497,53 +5545,50 @@ 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", tag: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsxs(
-      TabGroup,
-      {
-        label: formatMessage({
-          id: getTrad("tabs.title"),
-          defaultMessage: "How do you want to upload your assets?"
-        }),
-        variant: "simple",
-        children: [
-          /* @__PURE__ */ jsxs(Box, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, children: [
-            /* @__PURE__ */ jsxs(Tabs, { children: [
-              /* @__PURE__ */ jsx(Tab, { children: formatMessage({
+    /* @__PURE__ */ jsxs(Tabs.Root, { variant: "simple", defaultValue: "computer", children: [
+      /* @__PURE__ */ jsxs(Box, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            "aria-label": formatMessage({
+              id: getTrad("tabs.title"),
+              defaultMessage: "How do you want to upload your assets?"
+            }),
+            children: [
+              /* @__PURE__ */ jsx(Tabs.Trigger, { value: "computer", children: formatMessage({
                 id: getTrad("modal.nav.computer"),
                 defaultMessage: "From computer"
               }) }),
-              /* @__PURE__ */ jsx(Tab, { children: formatMessage({
+              /* @__PURE__ */ jsx(Tabs.Trigger, { value: "url", children: formatMessage({
                 id: getTrad("modal.nav.url"),
                 defaultMessage: "From URL"
               }) })
-            ] }),
-            /* @__PURE__ */ jsx(Divider, {})
-          ] }),
-          /* @__PURE__ */ jsxs(TabPanels, { children: [
-            /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-              FromComputerForm,
-              {
-                onClose,
-                onAddAssets: onAddAsset,
-                trackedLocation
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-              FromUrlForm,
-              {
-                onClose,
-                onAddAsset,
-                trackedLocation
-              }
-            ) })
-          ] })
-        ]
-      }
-    )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {})
+      ] }),
+      /* @__PURE__ */ jsx(Tabs.Content, { value: "computer", children: /* @__PURE__ */ jsx(
+        FromComputerForm,
+        {
+          onClose,
+          onAddAssets: onAddAsset,
+          trackedLocation
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Tabs.Content, { value: "url", children: /* @__PURE__ */ jsx(
+        FromUrlForm,
+        {
+          onClose,
+          onAddAsset,
+          trackedLocation
+        }
+      ) })
+    ] })
   ] });
 };
 AddAssetStep.defaultProps = {
@@ -5698,12 +5743,12 @@ const PendingAssetStep = ({
       onUploadSucceed(file);
     }
   };
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 7, children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 7, children: [
       /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 0, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
@@ -5723,10 +5768,10 @@ const PendingAssetStep = ({
           defaultMessage: "Add new assets"
         }) })
       ] }),
-      /* @__PURE__ */ jsx(KeyboardNavigable, { tagName: "article", children: /* @__PURE__ */ jsx(Grid, { gap: 4, children: assets.map((asset) => {
+      /* @__PURE__ */ jsx(KeyboardNavigable, { tagName: "article", children: /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: assets.map((asset) => {
         const assetKey = asset.url;
         if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
-          return /* @__PURE__ */ jsx(GridItem, { col: 4, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(
             UploadingAssetCard,
             {
               addUploadedFiles,
@@ -5739,7 +5784,7 @@ const PendingAssetStep = ({
             }
           ) }, assetKey);
         }
-        return /* @__PURE__ */ jsx(GridItem, { col: 4, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(
           AssetCard,
           {
             asset,
@@ -5753,19 +5798,16 @@ const PendingAssetStep = ({
         ) }, assetKey);
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsx(
-      ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
-        endActions: /* @__PURE__ */ jsx(Button, { type: "submit", loading: uploadStatus === Status.Uploading, children: formatMessage(
-          {
-            id: getTrad("modal.upload-list.footer.button"),
-            defaultMessage: "Upload {number, plural, one {# asset} other {# assets}} to the library"
-          },
-          { number: assets.length }
-        ) })
-      }
-    )
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: uploadStatus === Status.Uploading, children: formatMessage(
+        {
+          id: getTrad("modal.upload-list.footer.button"),
+          defaultMessage: "Upload {number, plural, one {# asset} other {# assets}} to the library"
+        },
+        { number: assets.length }
+      ) })
+    ] })
   ] });
 };
 PendingAssetStep.defaultProps = {
@@ -5795,6 +5837,7 @@ const UploadAssetDialog = ({
   onClose,
   addUploadedFiles,
   trackedLocation,
+  open,
   validateAssetsTypes = (_, cb) => cb()
 }) => {
   const { formatMessage } = useIntl();
@@ -5850,16 +5893,16 @@ const UploadAssetDialog = ({
     const nextAssets = assets.filter((asset) => asset !== assetToRemove);
     setAssets(nextAssets);
   };
-  return /* @__PURE__ */ jsxs(ModalLayout, { onClose: handleClose, labelledBy: "title", children: [
-    step === Steps.AddAsset && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Modal.Root, { open, onOpenChange: handleClose, children: [
+    step === Steps.AddAsset && /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(
       AddAssetStep,
       {
         onClose,
         onAddAsset: handleAddToPendingAssets,
         trackedLocation
       }
-    ),
-    step === Steps.PendingAsset && /* @__PURE__ */ jsx(
+    ) }),
+    step === Steps.PendingAsset && /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(
       PendingAssetStep,
       {
         onClose: handleClose,
@@ -5874,9 +5917,9 @@ const UploadAssetDialog = ({
         folderId,
         trackedLocation
       }
-    ),
-    assetToEdit && /* @__PURE__ */ jsx(
-      EditAssetDialog,
+    ) }),
+    assetToEdit && /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(
+      EditAssetContent,
       {
         onClose: handleAssetEditValidation,
         asset: assetToEdit,
@@ -5885,7 +5928,7 @@ const UploadAssetDialog = ({
         canDownload: false,
         trackedLocation
       }
-    )
+    ) })
   ] });
 };
 UploadAssetDialog.defaultProps = {
@@ -5901,6 +5944,7 @@ UploadAssetDialog.propTypes = {
   addUploadedFiles: PropTypes.func,
   folderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   initialAssetsToAdd: PropTypes.arrayOf(AssetDefinition),
+  open: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
   trackedLocation: PropTypes.string,
   validateAssetsTypes: PropTypes.func
@@ -6214,9 +6258,10 @@ const CarouselAssets = forwardRef(
           ))
         }
       ),
-      isEditingAsset && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         EditAssetDialog,
         {
+          open: isEditingAsset,
           onClose: (editedAsset) => {
             setIsEditingAsset(false);
             if (editedAsset === null) {
@@ -6269,7 +6314,7 @@ const STEPS = {
   FolderCreate: "FolderCreate"
 };
 const MediaLibraryInput = forwardRef(
-  ({ attribute: { allowedTypes }, label, hint, disabled, labelAction, multiple, name: name2, required }, forwardedRef) => {
+  ({ attribute: { allowedTypes, multiple }, label, hint, disabled, labelAction, name: name2, required }, forwardedRef) => {
     const { formatMessage } = useIntl();
     const { onChange, value, error } = useField(name2);
     const fieldAllowedTypes = allowedTypes || ["files", "images", "videos", "audios"];
@@ -6408,6 +6453,7 @@ const MediaLibraryInput = forwardRef(
             setStep(void 0);
             setFolderId(null);
           },
+          open: step === STEPS.AssetSelect,
           onValidate: handleValidation,
           multiple,
           onAddAsset: () => setStep(STEPS.AssetUpload),
@@ -6419,6 +6465,7 @@ const MediaLibraryInput = forwardRef(
       step === STEPS.AssetUpload && /* @__PURE__ */ jsx(
         UploadAssetDialog,
         {
+          open: step === STEPS.AssetUpload,
           onClose: () => setStep(STEPS.AssetSelect),
           initialAssetsToAdd: droppedAssets,
           addUploadedFiles: handleFilesUploadSucceeded,
@@ -6427,26 +6474,34 @@ const MediaLibraryInput = forwardRef(
           validateAssetsTypes
         }
       ),
-      step === STEPS.FolderCreate && /* @__PURE__ */ jsx(EditFolderDialog, { onClose: () => setStep(STEPS.AssetSelect), parentFolderId: folderId })
+      step === STEPS.FolderCreate && /* @__PURE__ */ jsx(
+        EditFolderDialog,
+        {
+          open: step === STEPS.FolderCreate,
+          onClose: () => setStep(STEPS.AssetSelect),
+          parentFolderId: folderId
+        }
+      )
     ] });
   }
 );
 MediaLibraryInput.defaultProps = {
-  attribute: { allowedTypes: ["videos", "files", "images", "audios"] },
+  attribute: { allowedTypes: ["videos", "files", "images", "audios"], multiple: false },
   disabled: false,
   hint: void 0,
   label: void 0,
   labelAction: void 0,
-  multiple: false,
   required: false
 };
 MediaLibraryInput.propTypes = {
-  attribute: PropTypes.shape({ allowedTypes: PropTypes.arrayOf(PropTypes.string) }),
+  attribute: PropTypes.shape({
+    allowedTypes: PropTypes.arrayOf(PropTypes.string),
+    multiple: PropTypes.bool
+  }),
   disabled: PropTypes.bool,
   hint: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.node,
-  multiple: PropTypes.bool,
   name: PropTypes.string.isRequired,
   required: PropTypes.bool
 };
@@ -6470,7 +6525,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-Dhpsbqb0.mjs"),
+      Component: () => import("./index-CofwxhyW.mjs"),
       position: 4
     });
     app.addSettingsLink("global", {
@@ -6480,7 +6535,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => import("./index-4iUTOybK.mjs"),
+      Component: () => import("./index-Bfk_br9x.mjs"),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6551,4 +6606,4 @@ export {
   FolderCardBodyAction as y,
   AssetGridList as z
 };
-//# sourceMappingURL=index-DmPsR26u.mjs.map
+//# sourceMappingURL=index-12OzcF7r.mjs.map