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

package/dist/_chunks/{index-DLpj5yNr.js → index-DxZ4ATkY.js}

@@ -60,7 +60,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 = {
@@ -105,10 +105,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",
@@ -130,9 +130,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",
@@ -381,20 +381,20 @@ const ParentFolderShape = {
 };
 ParentFolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
 const FolderShape = {
-  id: PropTypes__default.default.number.isRequired,
+  id: PropTypes__default.default.number,
   children: PropTypes__default.default.shape({
     count: PropTypes__default.default.number.isRequired
   }),
-  createdAt: PropTypes__default.default.string.isRequired,
+  createdAt: PropTypes__default.default.string,
   createdBy: PropTypes__default.default.shape(),
   files: PropTypes__default.default.shape({
     count: PropTypes__default.default.number.isRequired
   }),
-  name: PropTypes__default.default.string.isRequired,
-  updatedAt: PropTypes__default.default.string.isRequired,
+  name: PropTypes__default.default.string,
+  updatedAt: PropTypes__default.default.string,
   updatedBy: PropTypes__default.default.shape(),
-  pathId: PropTypes__default.default.number.isRequired,
-  path: PropTypes__default.default.string.isRequired
+  pathId: PropTypes__default.default.number,
+  path: PropTypes__default.default.string
 };
 FolderShape.parent = PropTypes__default.default.shape(ParentFolderShape);
 const FolderDefinition = PropTypes__default.default.shape(FolderShape);
@@ -999,7 +999,7 @@ const ContextInfo = ({ blocks }) => {
       paddingTop: 4,
       paddingBottom: 4,
       background: "neutral100",
-      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: blocks.map(({ label, value }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: blocks.map(({ label, value }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: label }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: value })
       ] }) }, label)) })
@@ -1242,6 +1242,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,
@@ -1263,10 +1268,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) {
@@ -1331,7 +1332,7 @@ SelectTree.propTypes = {
 };
 const DialogHeader = () => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({ id: "global.details", defaultMessage: "Details" }) }) });
 };
 const QUALITY = 1;
 const useCropImg = () => {
@@ -1589,15 +1590,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__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { isOpen: true, onClose, onConfirm: handleConfirm });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm: handleConfirm }) });
 };
 RemoveAssetDialog.propTypes = {
   onClose: PropTypes__default.default.func.isRequired,
+  open: PropTypes__default.default.bool.isRequired,
   asset: PropTypes__default.default.shape({
     id: PropTypes__default.default.number,
     height: PropTypes__default.default.number,
@@ -1657,7 +1662,8 @@ const RelativeBox = styledComponents.styled(designSystem.Box)`
 `;
 const Wrapper$1 = styledComponents.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%
@@ -1702,6 +1708,7 @@ const UploadProgressWrapper$1 = styledComponents.styled.div`
 `;
 const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
   const { formatMessage } = reactIntl.useIntl();
+  const theme = styledComponents.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.FocusTrap, { onEscape: onCancel, children: /* @__PURE__ */ jsxRuntime.jsx(CroppingActionRow, { justifyContent: "flex-end", paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
@@ -1737,7 +1744,7 @@ const CroppingActions = ({ onCancel, onValidate, onDuplicate }) => {
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { zIndex: 5, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { zIndex: theme.zIndices.dialog, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { onSelect: onValidate, children: formatMessage({
           id: getTrad("checkControl.crop-original"),
           defaultMessage: "Crop the original asset"
@@ -1950,9 +1957,10 @@ const PreviewBox = ({
         }
       )
     ] }),
-    showConfirmDialog && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       RemoveAssetDialog,
       {
+        open: showConfirmDialog,
         onClose: () => {
           setShowConfirmDialog(false);
           onDelete(null);
@@ -2030,7 +2038,7 @@ const fileInfoSchema = yup__namespace.object({
   caption: yup__namespace.string(),
   folder: yup__namespace.number()
 });
-const EditAssetDialog = ({
+const EditAssetContent = ({
   onClose,
   asset,
   canUpdate,
@@ -2103,18 +2111,13 @@ const EditAssetDialog = ({
     }
   };
   if (folderStructureIsLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: () => handleClose(), labelledBy: "title", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, {}),
       /* @__PURE__ */ jsxRuntime.jsx(LoadingBody$1, { minHeight: "60vh", justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: formatMessage({
         id: getTrad("content.isLoading"),
         defaultMessage: "Content is loading."
       }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.ModalFooter,
-        {
-          startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose(), variant: "tertiary", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose(), variant: "tertiary", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }) })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2124,10 +2127,10 @@ const EditAssetDialog = ({
       validateOnChange: false,
       onSubmit: handleSubmit,
       initialValues: initialFormData,
-      children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: () => handleClose(values), labelledBy: "title", children: [
+      children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
             PreviewBox,
             {
               asset,
@@ -2142,7 +2145,7 @@ const EditAssetDialog = ({
               trackedLocation
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ContextInfo,
@@ -2277,44 +2280,64 @@ const EditAssetDialog = ({
             ) })
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.ModalFooter,
-          {
-            startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
-            endActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ReplaceMediaButton,
-                {
-                  onSelectMedia: setReplacementFile,
-                  acceptedMime: asset.mime,
-                  disabled: formDisabled,
-                  trackedLocation
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  onClick: () => submitButtonRef.current.click(),
-                  loading: isLoading,
-                  disabled: formDisabled,
-                  children: formatMessage({ id: "global.finish", defaultMessage: "Finish" })
-                }
-              )
-            ] })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleClose(values), variant: "tertiary", children: formatMessage({ id: "global.cancel", defaultMessage: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ReplaceMediaButton,
+              {
+                onSelectMedia: setReplacementFile,
+                acceptedMime: asset.mime,
+                disabled: formDisabled,
+                trackedLocation
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.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__default.default.bool,
+  canCopyLink: PropTypes__default.default.bool,
+  canDownload: PropTypes__default.default.bool,
+  onClose: PropTypes__default.default.func.isRequired,
+  trackedLocation: PropTypes__default.default.string
+};
+const EditAssetDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.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__default.default.bool.isRequired,
-  canCopyLink: PropTypes__default.default.bool.isRequired,
-  canDownload: PropTypes__default.default.bool.isRequired,
+  asset: AssetDefinition,
+  canUpdate: PropTypes__default.default.bool,
+  canCopyLink: PropTypes__default.default.bool,
+  canDownload: PropTypes__default.default.bool,
+  open: PropTypes__default.default.bool.isRequired,
   onClose: PropTypes__default.default.func.isRequired,
   trackedLocation: PropTypes__default.default.string
 };
@@ -2381,7 +2404,7 @@ const useEditFolder = () => {
 };
 const EditFolderModalHeader = ({ isEditing }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage(
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage(
     isEditing ? {
       id: getTrad("modal.folder.edit.title"),
       defaultMessage: "Edit folder"
@@ -2397,11 +2420,12 @@ EditFolderModalHeader.defaultProps = {
 EditFolderModalHeader.propTypes = {
   isEditing: PropTypes__default.default.bool
 };
-const RemoveFolderDialog = ({ onClose, onConfirm }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { isOpen: true, onClose, onConfirm });
+const RemoveFolderDialog = ({ onClose, onConfirm, open }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm }) });
 };
 RemoveFolderDialog.propTypes = {
   onClose: PropTypes__default.default.func.isRequired,
+  open: PropTypes__default.default.bool.isRequired,
   onConfirm: PropTypes__default.default.func.isRequired
 };
 const folderSchema = yup__namespace.object({
@@ -2411,7 +2435,7 @@ const folderSchema = yup__namespace.object({
     value: yup__namespace.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
   });
@@ -2481,15 +2505,15 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
     onClose();
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: () => onClose(), labelledBy: "title", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(EditFolderModalHeader, { isEditing }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: formatMessage({
         id: getTrad("content.isLoading"),
         defaultMessage: "Content is loading."
       }) }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: () => onClose(), labelledBy: "title", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       formik.Formik,
       {
@@ -2499,8 +2523,8 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
         initialValues: initialFormData,
         children: ({ values, errors, handleChange, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(EditFolderModalHeader, { isEditing }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
-            isEditing && /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+            isEditing && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
               ContextInfo,
               {
                 blocks: [
@@ -2530,7 +2554,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "name", error: errors.name, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "name", error: errors.name, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
                 id: getTrad("form.input.label.folder-name"),
                 defaultMessage: "Name"
@@ -2545,7 +2569,7 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
               ),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "folder-parent", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: "folder-parent", children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
                 id: getTrad("form.input.label.folder-location"),
                 defaultMessage: "Location"
@@ -2579,46 +2603,64 @@ const EditFolderDialog = ({ onClose, folder, location, parentFolderId }) => {
               )
             ] }) })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.ModalFooter,
-            {
-              startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => onClose(), variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
-              endActions: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-                isEditing && canUpdate && /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.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__ */ jsxRuntime.jsx(
-                  designSystem.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__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => onClose(), variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+              isEditing && canUpdate && /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.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__ */ jsxRuntime.jsx(
+                designSystem.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__ */ jsxRuntime.jsx(RemoveFolderDialog, { onClose: () => setShowConfirmDialog(false), onConfirm: handleDelete })
+    /* @__PURE__ */ jsxRuntime.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__default.default.string,
+  onClose: PropTypes__default.default.func.isRequired,
+  parentFolderId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
+};
+const EditFolderDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(EditFolderContent, { ...restProps, onClose }) }) });
+};
 EditFolderDialog.defaultProps = {
   folder: void 0,
   location: void 0,
@@ -2627,6 +2669,7 @@ EditFolderDialog.defaultProps = {
 EditFolderDialog.propTypes = {
   folder: FolderDefinition,
   location: PropTypes__default.default.string,
+  open: PropTypes__default.default.bool.isRequired,
   onClose: PropTypes__default.default.func.isRequired,
   parentFolderId: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
 };
@@ -2713,7 +2756,7 @@ const AssetCardBase = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(CardContainer, { role: "button", height: "100%", tabIndex: -1, onClick: handleClick, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
       isSelectable2 && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { value: selected, onValueChange: onSelect }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handlePropagationClick, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: selected, onCheckedChange: onSelect }) }),
       (onRemove || onEdit) && /* @__PURE__ */ jsxRuntime.jsxs(CardActionsContainer, { onClick: handlePropagationClick, position: "end", children: [
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
@@ -3049,10 +3092,10 @@ const AssetGridList = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: assets.map((asset, index2) => {
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: assets.map((asset, index2) => {
       const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);
       if (onReorderAsset) {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(Draggable, { index: index2, moveItem: onReorderAsset, id: asset.id, children: /* @__PURE__ */ jsxRuntime.jsx(
           AssetCard,
           {
             allowedTypes,
@@ -3064,7 +3107,7 @@ const AssetGridList = ({
           }
         ) }) }, asset.id);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
         AssetCard,
         {
           allowedTypes,
@@ -3287,7 +3330,7 @@ const Card = styledComponents.styled(designSystem.Box)`
   &:hover,
   &:focus-within {
     ${CardActionDisplay} {
-      display: ${({ isCardActions }) => isCardActions ? "block" : ""};
+      display: ${({ $isCardActions }) => $isCardActions ? "block" : ""};
     }
   }
 `;
@@ -3295,7 +3338,7 @@ const FolderCard = React.forwardRef(
   ({ children, id: id2, startAction, cardActions, ariaLabel, onClick, to, ...props }, ref) => {
     const generatedId = useId(id2);
     const fodlerCtxValue = React.useMemo(() => ({ id: generatedId }), [generatedId]);
-    return /* @__PURE__ */ jsxRuntime.jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { position: "relative", tabIndex: 0, isCardActions: !!cardActions, ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(FolderCardContext.Provider, { value: fodlerCtxValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { position: "relative", tabIndex: 0, $isCardActions: !!cardActions, ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         FauxClickWrapper,
         {
@@ -3410,7 +3453,7 @@ FolderCardBodyAction.propTypes = {
 const FolderGridList = ({ title, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { tagName: "article", children: [
     title && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "delta", fontWeight: "semiBold", children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children })
   ] });
 };
 FolderGridList.defaultProps = {
@@ -3463,12 +3506,22 @@ const VideoPreviewWrapper$1 = styledComponents.styled(designSystem.Box)`
 `;
 const PreviewCell = ({ type, content }) => {
   if (type === "folder") {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Initials, { background: "secondary100", textColor: "secondary600", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Folder, { fill: "secondary500", width: "1.6rem", height: "1.6rem" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
+      {
+        justifyContent: "center",
+        background: "secondary100",
+        width: "3.2rem",
+        height: "3.2rem",
+        borderRadius: "50%",
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.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__ */ jsxRuntime.jsx(designSystem.Avatar, { src: mediaURL, alt: alternativeText, preview: true });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Avatar.Item, { src: mediaURL, alt: alternativeText, preview: true });
   }
   if (mime.includes(AssetType.Video)) {
     return /* @__PURE__ */ jsxRuntime.jsx(VideoPreviewWrapper$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3480,7 +3533,7 @@ const PreviewCell = ({ type, content }) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Initials, { background: "secondary100", textColor: "secondary600", children: getFileExtension(ext) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "secondary100", color: "secondary600", width: "3.2rem", height: "3.2rem", children: getFileExtension(ext) });
 };
 PreviewCell.propTypes = {
   content: PropTypes__default.default.shape({
@@ -3584,7 +3637,7 @@ const TableRows = ({
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { onClick: () => handleRowClickFn(element, contentType, id2, path), children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.BaseCheckbox,
+        designSystem.Checkbox,
         {
           "aria-label": formatMessage(
             {
@@ -3594,7 +3647,7 @@ const TableRows = ({
             { name: name2 }
           ),
           disabled: !isSelectable2,
-          onValueChange: () => onSelectOne(element),
+          onCheckedChange: () => onSelectOne(element),
           checked: isSelected
         }
       ) }),
@@ -3678,16 +3731,15 @@ const TableList = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: tableHeaders.length + 2, rowCount: assetCount + folderCount + 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.BaseCheckbox,
+        designSystem.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 }) => {
@@ -3828,7 +3880,7 @@ const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
     id: `components.FilterOptions.FILTER_TYPES.${operator}`,
     defaultMessage: operator
   })} ${formattedValue}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), children: content }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tag, { onClick: handleClick, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), padding: 1, children: content });
 };
 FilterTag.propTypes = {
   attribute: PropTypes__default.default.shape({
@@ -4035,7 +4087,7 @@ const getFilterList = ({ fieldSchema: { type: fieldType, mainField } }) => {
       ];
   }
 };
-const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle, source }) => {
+const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit, onToggle }) => {
   const { formatMessage } = reactIntl.useIntl();
   const [modifiedData, setModifiedData] = React.useState({
     name: "createdAt",
@@ -4157,7 +4209,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
     onToggle();
   };
   const appliedFilter = displayedFilters2.find((filter) => filter.name === modifiedData.name);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: onToggle, source, padding: 3, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, style: { minWidth: 184 }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 3, direction: "column", alignItems: "stretch", gap: 1, style: { minWidth: 184 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.SingleSelect,
       {
@@ -4212,34 +4264,20 @@ FilterPopover.propTypes = {
   ).isRequired,
   filters: PropTypes__default.default.array.isRequired,
   onSubmit: PropTypes__default.default.func.isRequired,
-  onToggle: PropTypes__default.default.func.isRequired,
-  source: PropTypes__default.default.shape({ current: PropTypes__default.default.instanceOf(Element) }).isRequired
+  onToggle: PropTypes__default.default.func.isRequired
 };
 const Filters = ({ appliedFilters, onChangeFilters }) => {
-  const buttonRef = React.useRef(null);
-  const [isVisible, setVisible] = React.useState(false);
+  const [open, setOpen] = React__namespace.useState(false);
   const { formatMessage } = reactIntl.useIntl();
-  const toggleFilter = () => setVisible((prev) => !prev);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Filter, {}), size: "S", children: formatMessage({ id: "app.utils.filters", defaultMessage: "Filters" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Button,
-      {
-        variant: "tertiary",
-        ref: buttonRef,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Filter, {}),
-        onClick: toggleFilter,
-        size: "S",
-        children: formatMessage({ id: "app.utils.filters", defaultMessage: "Filters" })
-      }
-    ),
-    isVisible && /* @__PURE__ */ jsxRuntime.jsx(
       FilterPopover,
       {
+        onToggle: setOpen,
         displayedFilters,
         filters: appliedFilters,
-        onSubmit: onChangeFilters,
-        onToggle: toggleFilter,
-        source: buttonRef
+        onSubmit: onChangeFilters
       }
     ),
     appliedFilters && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4695,15 +4733,14 @@ const BrowseStep = ({
             borderColor: "neutral200",
             height: "3.2rem",
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.BaseCheckbox,
+              designSystem.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
               }
             )
           }
@@ -4804,7 +4841,7 @@ const BrowseStep = ({
             { count: folderCount }
           ) || "",
           children: folders.map((folder) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
               FolderCard,
               {
                 ariaLabel: folder.name,
@@ -4827,10 +4864,18 @@ const BrowseStep = ({
                   {
                     onClick: () => handleClickFolderCard(folder.id, folder.path),
                     children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "h2", direction: "column", alignItems: "start", maxWidth: "100%", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(TypographyMaxWidth, { fontWeight: "semiBold", ellipsis: true, children: [
-                        folder.name,
-                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: "-" })
-                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        TypographyMaxWidth,
+                        {
+                          fontWeight: "semiBold",
+                          ellipsis: true,
+                          textColor: "neutral800",
+                          children: [
+                            folder.name,
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: "-" })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TypographyMaxWidth,
                         {
@@ -4928,13 +4973,10 @@ BrowseStep.propTypes = {
 };
 const DialogFooter = ({ onClose, onValidate }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.ModalFooter,
-    {
-      startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
-      endActions: onValidate && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+    onValidate && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onValidate, children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
+  ] });
 };
 DialogFooter.defaultProps = {
   onValidate: void 0
@@ -4983,7 +5025,7 @@ const LoadingBody = styledComponents.styled(designSystem.Flex)`
   /* 80px are coming from the Tabs component that is not included in the ModalBody */
   min-height: ${() => `calc(60vh + 8rem)`};
 `;
-const AssetDialog = ({
+const AssetContent = ({
   allowedTypes,
   folderId,
   onClose,
@@ -5034,9 +5076,6 @@ const AssetDialog = ({
     selectedAssets,
     { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple }
   ] = useSelectionState(["id"], initiallySelectedAssets);
-  const [initialSelectedTabIndex, setInitialSelectedTabIndex] = React.useState(
-    selectedAssets.length > 0 ? 1 : 0
-  );
   const handleSelectAllAssets = () => {
     const allowedAssets = getAllowedFiles(allowedTypes, assets);
     if (!multiple) {
@@ -5057,8 +5096,8 @@ const AssetDialog = ({
   const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
   const hasError = errorAssets || errorFolders;
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose, labelledBy: "asset-dialog-title", "aria-busy": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5070,8 +5109,8 @@ const AssetDialog = ({
     ] });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose, labelledBy: "asset-dialog-title", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5080,8 +5119,8 @@ const AssetDialog = ({
     ] });
   }
   if (!canRead) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose, labelledBy: "asset-dialog-title", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { fontWeight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
         id: getTrad("header.actions.add-assets"),
         defaultMessage: "Add new assets"
       }) }) }),
@@ -5091,7 +5130,7 @@ const AssetDialog = ({
   }
   if (assetToEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      EditAssetDialog,
+      EditAssetContent,
       {
         onClose: () => setAssetToEdit(void 0),
         asset: assetToEdit,
@@ -5104,7 +5143,7 @@ const AssetDialog = ({
   }
   if (folderToEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      EditFolderDialog,
+      EditFolderContent,
       {
         folder: folderToEdit,
         onClose: () => setFolderToEdit(void 0),
@@ -5123,101 +5162,112 @@ const AssetDialog = ({
     onChangeFolder(folderId2);
     onChangeFolderParam(folderId2, folderPath);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose, labelledBy: "asset-dialog-title", "aria-busy": isLoading, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.TabGroup,
-      {
-        label: formatMessage({
-          id: getTrad("tabs.title"),
-          defaultMessage: "How do you want to upload your assets?"
-        }),
-        variant: "simple",
-        initialSelectedTabIndex,
-        onTabChange: () => setInitialSelectedTabIndex(0),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({
-                id: getTrad("modal.nav.browse"),
-                defaultMessage: "Browse"
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tab, { children: [
-                formatMessage({
-                  id: getTrad("modal.header.select-files"),
-                  defaultMessage: "Selected files"
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { marginLeft: 2, children: selectedAssets.length })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => onAddFolder({ folderId: queryObject?.folder }),
-                  children: formatMessage({
-                    id: getTrad("modal.upload-list.sub-header.add-folder"),
-                    defaultMessage: "Add folder"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => onAddAsset({ folderId: queryObject?.folder }), children: formatMessage({
-                id: getTrad("modal.upload-list.sub-header.button"),
-                defaultMessage: "Add more assets"
-              }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.TabPanels, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              SelectedStep,
-              {
-                selectedAssets,
-                onSelectAsset: handleSelectAsset,
-                onReorderAsset: handleMoveItem
-              }
-            ) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs(TabsRoot, { variant: "simple", defaultValue: selectedAssets.length > 0 ? "selected" : "browse", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "browse", children: formatMessage({
+            id: getTrad("modal.nav.browse"),
+            defaultMessage: "Browse"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Trigger, { value: "selected", children: [
+            formatMessage({
+              id: getTrad("modal.header.select-files"),
+              defaultMessage: "Selected files"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { marginLeft: 2, children: selectedAssets.length })
           ] })
-        ]
-      }
-    ),
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: "secondary",
+              onClick: () => onAddFolder({ folderId: queryObject?.folder }),
+              children: formatMessage({
+                id: getTrad("modal.upload-list.sub-header.add-folder"),
+                defaultMessage: "Add folder"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => onAddAsset({ folderId: queryObject?.folder }), children: formatMessage({
+            id: getTrad("modal.upload-list.sub-header.button"),
+            defaultMessage: "Add more assets"
+          }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Body, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "browse", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "selected", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectedStep,
+          {
+            selectedAssets,
+            onSelectAsset: handleSelectAsset,
+            onReorderAsset: handleMoveItem
+          }
+        ) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { onClose, onValidate: () => onValidate(selectedAssets) })
   ] });
 };
+AssetContent.defaultProps = {
+  allowedTypes: [],
+  folderId: null,
+  initiallySelectedAssets: [],
+  multiple: false,
+  trackedLocation: void 0
+};
+AssetContent.propTypes = {
+  allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
+  folderId: PropTypes__default.default.number,
+  initiallySelectedAssets: PropTypes__default.default.arrayOf(AssetDefinition),
+  multiple: PropTypes__default.default.bool,
+  onAddAsset: PropTypes__default.default.func.isRequired,
+  onAddFolder: PropTypes__default.default.func.isRequired,
+  onChangeFolder: PropTypes__default.default.func.isRequired,
+  onClose: PropTypes__default.default.func.isRequired,
+  onValidate: PropTypes__default.default.func.isRequired,
+  trackedLocation: PropTypes__default.default.string
+};
+const AssetDialog = ({ open, onClose, ...restProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AssetContent, { onClose, ...restProps }) }) });
+};
 AssetDialog.defaultProps = {
   allowedTypes: [],
   folderId: null,
   initiallySelectedAssets: [],
   multiple: false,
+  open: false,
   trackedLocation: void 0
 };
 AssetDialog.propTypes = {
@@ -5228,10 +5278,16 @@ AssetDialog.propTypes = {
   onAddAsset: PropTypes__default.default.func.isRequired,
   onAddFolder: PropTypes__default.default.func.isRequired,
   onChangeFolder: PropTypes__default.default.func.isRequired,
+  open: PropTypes__default.default.bool,
   onClose: PropTypes__default.default.func.isRequired,
   onValidate: PropTypes__default.default.func.isRequired,
   trackedLocation: PropTypes__default.default.string
 };
+const TabsRoot = styledComponents.styled(designSystem.Tabs.Root)`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
 const typeFromMime = (mime) => {
   if (mime.includes(AssetType.Image)) {
     return AssetType.Image;
@@ -5366,15 +5422,10 @@ const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
         ] }) })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({
-          id: "app.components.Button.cancel",
-          defaultMessage: "cancel"
-        }) })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({
+      id: "app.components.Button.cancel",
+      defaultMessage: "cancel"
+    }) }) })
   ] });
 };
 FromComputerForm.defaultProps = {
@@ -5500,16 +5551,13 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.ModalFooter,
-          {
-            startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
-            endActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", loading, children: formatMessage({
-              id: getTrad("button.next"),
-              defaultMessage: "Next"
-            }) })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", loading, children: formatMessage({
+            id: getTrad("button.next"),
+            defaultMessage: "Next"
+          }) })
+        ] })
       ] })
     }
   );
@@ -5525,53 +5573,50 @@ FromUrlForm.propTypes = {
 const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.TabGroup,
-      {
-        label: formatMessage({
-          id: getTrad("tabs.title"),
-          defaultMessage: "How do you want to upload your assets?"
-        }),
-        variant: "simple",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { variant: "simple", defaultValue: "computer", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 8, paddingRight: 8, paddingTop: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Tabs.List,
+          {
+            "aria-label": formatMessage({
+              id: getTrad("tabs.title"),
+              defaultMessage: "How do you want to upload your assets?"
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "computer", children: formatMessage({
                 id: getTrad("modal.nav.computer"),
                 defaultMessage: "From computer"
               }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "url", children: formatMessage({
                 id: getTrad("modal.nav.url"),
                 defaultMessage: "From URL"
               }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {})
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.TabPanels, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              FromComputerForm,
-              {
-                onClose,
-                onAddAssets: onAddAsset,
-                trackedLocation
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              FromUrlForm,
-              {
-                onClose,
-                onAddAsset,
-                trackedLocation
-              }
-            ) })
-          ] })
-        ]
-      }
-    )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "computer", children: /* @__PURE__ */ jsxRuntime.jsx(
+        FromComputerForm,
+        {
+          onClose,
+          onAddAssets: onAddAsset,
+          trackedLocation
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "url", children: /* @__PURE__ */ jsxRuntime.jsx(
+        FromUrlForm,
+        {
+          onClose,
+          onAddAsset,
+          trackedLocation
+        }
+      ) })
+    ] })
   ] });
 };
 AddAssetStep.defaultProps = {
@@ -5726,12 +5771,12 @@ const PendingAssetStep = ({
       onUploadSucceed(file);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
       id: getTrad("header.actions.add-assets"),
       defaultMessage: "Add new assets"
     }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 7, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 7, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 0, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
@@ -5751,10 +5796,10 @@ const PendingAssetStep = ({
           defaultMessage: "Add new assets"
         }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "article", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: assets.map((asset) => {
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "article", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: assets.map((asset) => {
         const assetKey = asset.url;
         if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
             UploadingAssetCard,
             {
               addUploadedFiles,
@@ -5767,7 +5812,7 @@ const PendingAssetStep = ({
             }
           ) }, assetKey);
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
           AssetCard,
           {
             asset,
@@ -5781,19 +5826,16 @@ const PendingAssetStep = ({
         ) }, assetKey);
       }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
-        endActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.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 = {
@@ -5823,6 +5865,7 @@ const UploadAssetDialog = ({
   onClose,
   addUploadedFiles,
   trackedLocation,
+  open,
   validateAssetsTypes = (_, cb) => cb()
 }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -5878,16 +5921,16 @@ const UploadAssetDialog = ({
     const nextAssets = assets.filter((asset) => asset !== assetToRemove);
     setAssets(nextAssets);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: handleClose, labelledBy: "title", children: [
-    step === Steps.AddAsset && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { open, onOpenChange: handleClose, children: [
+    step === Steps.AddAsset && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
       AddAssetStep,
       {
         onClose,
         onAddAsset: handleAddToPendingAssets,
         trackedLocation
       }
-    ),
-    step === Steps.PendingAsset && /* @__PURE__ */ jsxRuntime.jsx(
+    ) }),
+    step === Steps.PendingAsset && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
       PendingAssetStep,
       {
         onClose: handleClose,
@@ -5902,9 +5945,9 @@ const UploadAssetDialog = ({
         folderId,
         trackedLocation
       }
-    ),
-    assetToEdit && /* @__PURE__ */ jsxRuntime.jsx(
-      EditAssetDialog,
+    ) }),
+    assetToEdit && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      EditAssetContent,
       {
         onClose: handleAssetEditValidation,
         asset: assetToEdit,
@@ -5913,7 +5956,7 @@ const UploadAssetDialog = ({
         canDownload: false,
         trackedLocation
       }
-    )
+    ) })
   ] });
 };
 UploadAssetDialog.defaultProps = {
@@ -5929,6 +5972,7 @@ UploadAssetDialog.propTypes = {
   addUploadedFiles: PropTypes__default.default.func,
   folderId: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
   initialAssetsToAdd: PropTypes__default.default.arrayOf(AssetDefinition),
+  open: PropTypes__default.default.bool.isRequired,
   onClose: PropTypes__default.default.func,
   trackedLocation: PropTypes__default.default.string,
   validateAssetsTypes: PropTypes__default.default.func
@@ -6242,9 +6286,10 @@ const CarouselAssets = React.forwardRef(
           ))
         }
       ),
-      isEditingAsset && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         EditAssetDialog,
         {
+          open: isEditingAsset,
           onClose: (editedAsset) => {
             setIsEditingAsset(false);
             if (editedAsset === null) {
@@ -6297,7 +6342,7 @@ const STEPS = {
   FolderCreate: "FolderCreate"
 };
 const MediaLibraryInput = React.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 } = reactIntl.useIntl();
     const { onChange, value, error } = strapiAdmin.useField(name2);
     const fieldAllowedTypes = allowedTypes || ["files", "images", "videos", "audios"];
@@ -6436,6 +6481,7 @@ const MediaLibraryInput = React.forwardRef(
             setStep(void 0);
             setFolderId(null);
           },
+          open: step === STEPS.AssetSelect,
           onValidate: handleValidation,
           multiple,
           onAddAsset: () => setStep(STEPS.AssetUpload),
@@ -6447,6 +6493,7 @@ const MediaLibraryInput = React.forwardRef(
       step === STEPS.AssetUpload && /* @__PURE__ */ jsxRuntime.jsx(
         UploadAssetDialog,
         {
+          open: step === STEPS.AssetUpload,
           onClose: () => setStep(STEPS.AssetSelect),
           initialAssetsToAdd: droppedAssets,
           addUploadedFiles: handleFilesUploadSucceeded,
@@ -6455,26 +6502,34 @@ const MediaLibraryInput = React.forwardRef(
           validateAssetsTypes
         }
       ),
-      step === STEPS.FolderCreate && /* @__PURE__ */ jsxRuntime.jsx(EditFolderDialog, { onClose: () => setStep(STEPS.AssetSelect), parentFolderId: folderId })
+      step === STEPS.FolderCreate && /* @__PURE__ */ jsxRuntime.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__default.default.shape({ allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string) }),
+  attribute: PropTypes__default.default.shape({
+    allowedTypes: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
+    multiple: PropTypes__default.default.bool
+  }),
   disabled: PropTypes__default.default.bool,
   hint: PropTypes__default.default.string,
   label: PropTypes__default.default.string,
   labelAction: PropTypes__default.default.node,
-  multiple: PropTypes__default.default.bool,
   name: PropTypes__default.default.string.isRequired,
   required: PropTypes__default.default.bool
 };
@@ -6498,7 +6553,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => Promise.resolve().then(() => require("./index-C6Zy6JkX.js")),
+      Component: () => Promise.resolve().then(() => require("./index-oE8jnZsX.js")),
       position: 4
     });
     app.addSettingsLink("global", {
@@ -6508,7 +6563,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => Promise.resolve().then(() => require("./index-GkNHbl9s.js")),
+      Component: () => Promise.resolve().then(() => require("./index-Bht2H-mc.js")),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6577,4 +6632,4 @@ exports.useMediaLibraryPermissions = useMediaLibraryPermissions;
 exports.usePersistentState = usePersistentState;
 exports.useSelectionState = useSelectionState;
 exports.viewOptions = viewOptions;
-//# sourceMappingURL=index-DLpj5yNr.js.map
+//# sourceMappingURL=index-DxZ4ATkY.js.map